/* shadcn/ui component conventions, in plain CSS.
 *
 * Loaded only by the signed-out pages — sign in, create account, reset, join —
 * and the account page. It is deliberately NOT loaded by the ledger, so the
 * dashboard is untouched by anything in this file.
 *
 * The palette is unchanged: every colour below resolves to a token already
 * defined in base.css. What changes is the anatomy — radii, control heights,
 * type scale, weights, and the focus ring — which is what actually makes an
 * interface read as shadcn.
 */

/* shadcn's semantic names, mapped onto the palette this product already has.
   Keeping both vocabularies means the components read like the library while
   the colours stay ours. */
:root{
  --background:var(--bg);
  --foreground:var(--text);
  --card:var(--panel);
  --muted:var(--panel-2);
  --muted-foreground:#a5a4b2;      /* 6.2:1 on --card, so it can carry body text */
  --primary:var(--accent);
  --primary-foreground:var(--accent-contrast);
  --secondary:var(--panel-2);
  --border:var(--line);
  --input:var(--line-2);
  --ring:var(--accent);
  --destructive:var(--bad);

  --radius:8px;
  --radius-md:6px;
  --radius-sm:4px;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .3);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .35),0 1px 2px -1px rgb(0 0 0 / .35);

  --ui-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",
            var(--font-cjk),var(--font-tamil),sans-serif;
}

/* Controls speak sans at 14px, the way the library does. The serif stays on the
   wordmark and headings, which is this product's own identity. */
body.ui{
  font-family:var(--ui-sans);
  font-size:14px;
  line-height:1.5;
}
body.ui h1,body.ui h2,body.ui h3{
  letter-spacing:-.025em;font-weight:600;
}
body.ui h1{font-size:24px;line-height:1.25}
body.ui h2{font-size:20px}
body.ui .brand{font-family:var(--font-display)}

/* ---------- card ---------- */
body.ui .card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:24px;
}

/* ---------- button ----------
   h-9, px-4, text-sm, font-medium, rounded-md — plus the ring that shows up on
   keyboard focus and never on a mouse click. */
body.ui .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 16px;
  border-radius:var(--radius-md);border:1px solid transparent;
  font-family:var(--ui-sans);font-size:14px;font-weight:500;letter-spacing:0;
  white-space:nowrap;cursor:pointer;
  transition:background-color .15s,border-color .15s,opacity .15s;
  box-shadow:var(--shadow-xs);
}
body.ui .btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 45%,transparent);
}
/* default */
body.ui .btn.primary,body.ui .btn.solid{
  background:var(--primary);color:var(--primary-foreground);border-color:transparent;
}
body.ui .btn.primary:hover,body.ui .btn.solid:hover{background:color-mix(in srgb,var(--primary) 88%,#fff)}
/* outline */
body.ui .btn{background:transparent;color:var(--foreground);border-color:var(--input)}
body.ui .btn:hover{background:var(--secondary);border-color:var(--input)}
/* ghost */
body.ui .btn.ghost{border-color:transparent;box-shadow:none}
body.ui .btn.ghost:hover{background:var(--secondary)}
/* destructive */
body.ui .btn.danger{background:transparent;color:var(--destructive);border-color:color-mix(in srgb,var(--destructive) 45%,transparent)}
body.ui .btn.danger:hover{background:color-mix(in srgb,var(--destructive) 14%,transparent);color:var(--destructive)}
body.ui .btn.sm{height:32px;padding:0 12px;font-size:13px}
body.ui .btn.wide{width:100%}
body.ui .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ---------- input ---------- */
body.ui .input{
  display:block;width:100%;height:36px;
  padding:0 12px;
  background:transparent;color:var(--foreground);
  border:1px solid var(--input);border-radius:var(--radius-md);
  font-family:var(--ui-sans);font-size:14px;
  box-shadow:var(--shadow-xs);
  transition:border-color .15s,box-shadow .15s;
}
body.ui textarea.input{height:auto;padding:8px 12px;min-height:72px;line-height:1.5}
body.ui .input::placeholder{color:var(--muted-foreground)}
body.ui .input:focus{
  outline:none;border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 45%,transparent);
}
body.ui .input:disabled{opacity:.5;cursor:not-allowed}

/* ---------- label & field ---------- */
body.ui .field{margin-bottom:16px}
body.ui .field label{
  display:block;margin-bottom:6px;
  font-size:14px;font-weight:500;line-height:1;letter-spacing:0;
  text-transform:none;color:var(--foreground);
}
body.ui .hint{margin-top:6px;font-size:13px;color:var(--muted-foreground);line-height:1.45}
body.ui .small{font-size:13px}
body.ui .muted{color:var(--muted-foreground)}

/* ---------- alert ---------- */
body.ui .note{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);color:var(--foreground);
  padding:14px 16px;font-size:14px;margin-bottom:16px;box-shadow:none;
}
body.ui .note.err{
  border-color:color-mix(in srgb,var(--destructive) 45%,transparent);
  background:color-mix(in srgb,var(--destructive) 10%,transparent);
  color:var(--destructive);
}
body.ui .note.ok{
  border-color:color-mix(in srgb,var(--ring) 45%,transparent);
  background:color-mix(in srgb,var(--ring) 12%,transparent);
}

/* ---------- badge ---------- */
body.ui .pill-ok,body.ui .pill-warn,body.ui .pill-bad,body.ui .chip,body.ui .rolechip{
  display:inline-flex;align-items:center;
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:2px 8px;font-size:12px;font-weight:500;letter-spacing:0;
  text-transform:none;line-height:1.4;
}
body.ui .pill-ok{border-color:color-mix(in srgb,var(--ring) 45%,transparent);
                 background:color-mix(in srgb,var(--ring) 14%,transparent);color:var(--foreground)}
body.ui .pill-bad{border-color:color-mix(in srgb,var(--destructive) 45%,transparent);color:var(--destructive)}
body.ui .pill-warn{color:var(--muted-foreground)}

/* ---------- tabs ----------
   The library's segmented control: a muted track with the active item raised. */
body.ui .tabs{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:20px;
  background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);
  width:100%;
}
body.ui .tabs button{
  flex:1;height:32px;border:none;border-radius:var(--radius-md);
  background:transparent;color:var(--muted-foreground);
  font-family:var(--ui-sans);font-size:13.5px;font-weight:500;letter-spacing:0;
  text-transform:none;cursor:pointer;transition:background-color .15s;
}
body.ui .tabs button:hover{color:var(--foreground)}
body.ui .tabs button.on{
  background:var(--card);color:var(--foreground);box-shadow:var(--shadow-xs);
}
body.ui .tabs button:focus-visible{
  outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 45%,transparent);
}

/* ---------- links & misc ---------- */
body.ui a{border-bottom:none;color:var(--foreground);text-underline-offset:4px}
body.ui a:hover{text-decoration:underline}
body.ui a.btn:hover,body.ui a.brand:hover{text-decoration:none}
body.ui .langsel{
  height:32px;border:1px solid var(--input);border-radius:var(--radius-md);
  background:transparent;color:var(--foreground);
  font-family:var(--ui-sans);font-size:13px;padding:0 8px;box-shadow:var(--shadow-xs);
}
body.ui .langsel:focus-visible{
  outline:none;border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 45%,transparent);
}
body.ui nav.site{border-bottom:1px solid var(--border);padding:18px 0}
body.ui .narrow{padding-top:36px}