/* LawTech shared theme - the ProLifto design DNA (see work-app/lib/ui/tokens.ts):
   navy page, slate cards, gold as the single accent, Heebo for Hebrew at
   every weight. Pages keep their own layout CSS; this file owns the base
   (page background, font, native control colouring, focus ring, scrollbars)
   and the tokens new styles should reference instead of hex literals. */
:root {
  --pl-navy: #0B1224;        /* page background */
  --pl-slate: #16233A;       /* cards */
  --pl-raised: #1D2D48;      /* rows, secondary buttons, chips */
  --pl-ink: #0F1B31;         /* inputs, tracks */
  --pl-border: #2C3B55;
  --pl-border-strong: #52759C;
  --pl-gold: #F5B72C;        /* primary action / brand accent */
  --pl-gold-deep: #D99A12;
  --pl-gold-soft: #3C2D13;   /* gold-tinted surface: warnings, highlights */
  --pl-text: #F7F9FC;
  --pl-text-soft: #D9E2EF;
  --pl-muted: #AAB7C8;
  --pl-muted-deep: #7E8DA4;
  --pl-sky: #65BDF6;         /* links, informational */
  --pl-sky-soft: #122A44;
  --pl-mint: #81D7B5;        /* success / favourable */
  --pl-mint-deep: #42D392;
  --pl-mint-soft: #123F36;
  --pl-rose: #FF879A;        /* danger / unfavourable */
  --pl-rose-deep: #F16B7A;
  --pl-rose-soft: #3A1D2A;
  --pl-radius-sm: 9px; --pl-radius-md: 12px; --pl-radius-lg: 18px; --pl-radius-xl: 22px;
  color-scheme: dark;
}
html { background: var(--pl-navy); }
[hidden] { display: none !important; }
body {
  font-family: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
/* Native date/time pickers and selects follow color-scheme: dark; the
   picker glyph still renders black on Chromium without this. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
:focus-visible { outline: 2px solid var(--pl-gold); outline-offset: 2px; }
::selection { background: var(--pl-gold); color: var(--pl-navy); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pl-navy); }
::-webkit-scrollbar-thumb { background: var(--pl-border); border-radius: 999px; border: 2px solid var(--pl-navy); }
::-webkit-scrollbar-thumb:hover { background: var(--pl-border-strong); }
/* The logo files carry their own navy ground, so they sit in a rounded
   card with a soft shadow - the same treatment as ProLifto's logo card. */
img.wordmark, img.logo { border-radius: 18px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); display: block; margin-inline: auto; }
img.logo.compact { max-width: 96px; border-radius: 12px; }

/* ===== Primitives - the same building blocks as ProLifto's
   components/ui/primitives.tsx, for hub/settings-style screens ===== */
.plHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 14px 0 6px; }
.plHeader .eyebrow { font-size: 12px; font-weight: 900; letter-spacing: .04em; color: var(--pl-gold); }
.plHeader h1, .plHeader .title { margin: 2px 0; font-size: 30px; font-weight: 900; color: var(--pl-text); line-height: 1.15; }
.plHeader .subtitle { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pl-muted); }
.plBack { display: inline-block; align-self: flex-start; min-height: 36px; line-height: 36px; color: var(--pl-sky); font-weight: 900; text-decoration: none; font-size: 14px; }
.plCard { background: var(--pl-slate); border: 1px solid var(--pl-border); border-radius: var(--pl-radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.plCard.gold { background: var(--pl-gold-soft); border-color: var(--pl-gold); }
.plCard.rose { background: var(--pl-rose-soft); border-color: var(--pl-rose); }
.plSection { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plSection .t { font-size: 17px; font-weight: 900; color: var(--pl-text); }
.plSection .hint { font-size: 10px; color: var(--pl-muted-deep); }
.plSection.gold .t { color: var(--pl-gold); }
.plNote { font-size: 11.5px; line-height: 1.5; color: var(--pl-muted); margin: 0; }
.plStatGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.plStat { flex: 1; min-width: 120px; background: var(--pl-slate); border: 1px solid var(--pl-border); border-radius: var(--pl-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.plStat .v { font-size: 22px; font-weight: 900; color: var(--pl-gold); }
.plStat.mint .v { color: var(--pl-mint); } .plStat.sky .v { color: var(--pl-sky); } .plStat.rose .v { color: var(--pl-rose); } .plStat.neutral .v { color: var(--pl-muted); } .plStat.text .v { color: var(--pl-text); }
.plStat .l { font-size: 11px; line-height: 1.35; color: var(--pl-muted); }
.plBadge { display: inline-block; border: 1px solid var(--pl-border); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 900; color: var(--pl-muted); background: var(--pl-raised); white-space: nowrap; }
.plBadge.gold { color: var(--pl-gold); background: var(--pl-gold-soft); border-color: var(--pl-gold); }
.plBadge.mint { color: var(--pl-mint); background: var(--pl-mint-soft); border-color: #3D8C78; }
.plBadge.sky { color: var(--pl-sky); background: var(--pl-sky-soft); border-color: #3F76A7; }
.plBadge.rose { color: var(--pl-rose); background: var(--pl-rose-soft); border-color: var(--pl-rose); }
.plNavRow {
  display: flex; align-items: center; gap: 12px; background: var(--pl-raised); border-radius: var(--pl-radius-md);
  padding: 12px; text-decoration: none; color: inherit; border: 1px solid transparent; cursor: pointer; font-family: inherit; text-align: start; width: 100%;
  transition: border-color .12s, transform .12s, opacity .12s;
}
.plNavRow:hover { border-color: var(--pl-border-strong); }
.plNavRow:active { opacity: .74; transform: scale(.99); }
.plNavRow .ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--pl-radius-md); border: 1px solid var(--pl-gold); background: var(--pl-gold-soft); color: var(--pl-gold); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.plNavRow.sky .ico { border-color: #3F76A7; background: var(--pl-sky-soft); color: var(--pl-sky); }
.plNavRow.mint .ico { border-color: #3D8C78; background: var(--pl-mint-soft); color: var(--pl-mint); }
.plNavRow.rose .ico { border-color: var(--pl-rose); background: var(--pl-rose-soft); color: var(--pl-rose); }
.plNavRow.neutral .ico { border-color: var(--pl-border); background: var(--pl-slate); color: var(--pl-muted); }
.plNavRow .copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plNavRow .t { font-size: 14px; font-weight: 800; color: var(--pl-text); }
.plNavRow .d { font-size: 11px; line-height: 1.45; color: var(--pl-muted); }
.plNavRow .chev { color: var(--pl-gold); font-size: 24px; line-height: 1; }
.plNavRow.rose .t { color: var(--pl-rose); }
.plBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px;
  border-radius: var(--pl-radius-md); font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer; text-decoration: none;
  background: var(--pl-gold); color: var(--pl-navy); border: 1px solid var(--pl-gold); transition: opacity .12s, transform .12s;
}
.plBtn:active { opacity: .74; transform: scale(.99); }
.plBtn:disabled { opacity: .6; cursor: default; }
.plBtn.secondary { background: var(--pl-raised); color: var(--pl-sky); border-color: var(--pl-sky); }
.plBtn.secondary.gold { color: var(--pl-gold); border-color: var(--pl-gold); }
.plBtn.ghost { background: transparent; border-color: transparent; color: var(--pl-sky); }
.plBtn.ghost.rose { color: var(--pl-rose); }
.plBtn.danger { background: transparent; border-color: var(--pl-rose); color: var(--pl-rose); }
.plBtn.small { min-height: 36px; padding: 0 12px; border-radius: var(--pl-radius-sm); font-size: 12px; }
.plBtn.block { display: flex; width: 100%; }
.plDivider { height: 1px; background: var(--pl-border); }
.plStatus { font-size: 12px; line-height: 1.5; color: var(--pl-text-soft); margin: 0; }
.plStatus.error { color: var(--pl-rose); }
.plInput { width: 100%; padding: 12px 14px; border: 1px solid var(--pl-border); background: var(--pl-ink); color: var(--pl-text); border-radius: var(--pl-radius-md); font-size: 15px; font-family: inherit; }
.plInput::placeholder { color: var(--pl-muted-deep); }
.plColumn { max-width: 780px; margin: 0 auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.plRow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plRow .lbl { color: var(--pl-text-soft); font-size: 13px; }