/* ============================================================================
   KIMO DESIGN SYSTEM — components.css   (shared UI primitives)
   ----------------------------------------------------------------------------
   Link order in <head>:  tokens.css → base.css → components.css → app CSS
   These are the patterns that were previously re-implemented inline in every
   app (form fields, centred modal + "who are you?" user modal, generic card,
   FAB, segmented control). They read ONLY from tokens — no raw hex/px for
   themable values. Put app-UNIQUE components in the app's own <style>, never
   here. Multiple legacy class names (.fi and .inp) are supported via grouped
   selectors so apps can adopt this file by simply deleting their duplicates —
   no markup changes required.
   ============================================================================ */

/* ---- generic card recipe (surface + hairline + soft elevation) ---- */
.card{background:var(--bg-1);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--shadow)}

/* ---- form fields (.fi and .inp are aliases) ---- */
.fi,.inp,select.fi,select.inp,textarea.fi,textarea.inp{
  width:100%;padding:9px 12px;border:1px solid var(--bd);border-radius:var(--r-md);
  font-size:var(--t-base);background:var(--bg-1);color:var(--tx-0);outline:none;
  font-family:inherit;min-height:38px;transition:border-color var(--dur),box-shadow var(--dur);
}
.fi:focus,.inp:focus,textarea.fi:focus,textarea.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.fi::placeholder,.inp::placeholder,textarea.fi::placeholder,textarea.inp::placeholder{color:var(--tx-2)}
select.fi,select.inp{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
}
textarea.fi,textarea.inp{min-height:auto;resize:vertical;line-height:1.5}
/* label-over-field group */
.field{display:flex;flex-direction:column;gap:5px}
.field>label,.field .field-l{font-size:var(--t-sm);font-weight:600;color:var(--tx-1)}

/* ---- centred modal dialog + backdrop ---- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:var(--s5);
}
.modal-overlay.hidden,.modal-overlay[hidden]{display:none}
.modal{
  background:var(--bg-1);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:var(--s6);max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow-pop);
}
.modal h2{font-family:var(--font-display);font-size:var(--t-xl);font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.modal p{font-size:var(--t-sm);color:var(--tx-1);margin-bottom:var(--s5);line-height:1.5}
/* user-identity ("who are you?") picker used across apps */
.user-btns{display:flex;gap:var(--s3);justify-content:center}
.user-btn{
  flex:1;padding:var(--s4);border-radius:var(--r-md);border:1px solid var(--bd-strong);
  background:var(--bg-1);color:var(--tx-0);cursor:pointer;font-size:var(--t-md);font-weight:700;
  font-family:inherit;transition:border-color var(--dur),background var(--dur),color var(--dur);
}
.user-btn:hover{border-color:var(--accent-line);background:var(--accent-weak);color:var(--accent-text)}
.user-btn span{display:block;font-size:var(--t-xs);font-weight:500;color:var(--tx-2);margin-top:4px}

/* ---- danger button (complements base.css .btn / .btn-primary / .btn-ghost) ---- */
.btn-danger{background:transparent;color:var(--red);border-color:var(--red-line)}
.btn-danger:hover{background:var(--red-bg);border-color:var(--red)}

/* ---- primary "new / add" button (rail) + its mobile FAB twin ---- */
.btn-new{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  padding:var(--s3) var(--s4);border:0;border-radius:var(--r-md);cursor:pointer;
  background:var(--accent);color:var(--tx-inv);font-weight:700;font-size:var(--t-sm);font-family:inherit;
  transition:filter var(--dur),transform var(--dur);
}
.btn-new:hover{filter:brightness(1.05)}
.btn-new svg{width:16px;height:16px}
.fab{
  position:fixed;right:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom));z-index:40;display:none;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:var(--tx-inv);box-shadow:var(--shadow-pop);
  align-items:center;justify-content:center;
}
.fab svg{width:24px;height:24px}

/* ---- iOS-style segmented control (recessed track, accent-weak active pill) ---- */
.segmented{display:inline-flex;gap:3px;border:1px solid var(--bd);border-radius:11px;padding:3px;background:var(--bg-2)}
.seg-btn{
  font-size:var(--t-sm);font-weight:600;padding:6px 14px;border:none;background:transparent;cursor:pointer;
  color:var(--tx-1);border-radius:8px;font-family:inherit;white-space:nowrap;min-height:32px;
  transition:background var(--dur),color var(--dur);
}
.seg-btn:hover{color:var(--tx-0)}
.seg-btn.active{background:var(--accent-weak);color:var(--accent-text);font-weight:700}
