/* ============================================================
   BotDoTax · Client Portal — public, single-client surface
   Ported from the design system (designs/ledger/portal.css,
   "Workspace" direction). Lighter & calmer than the internal
   Ledger app: a co-branded, responsive, scrollable page reached
   by a private tokenized link (no login). Layout reflows via CSS
   CONTAINER queries so the same markup fits desktop and phone.
   Everything is scoped under `.portal` so it never collides with
   the DaisyUI utilities the authenticated app relies on.
   ============================================================ */

.portal {
  --acc-h: 162;                              /* firm accent hue (emerald) */
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* accent (deeper than the app so it reads on white) */
  --em: oklch(0.60 0.13 var(--acc-h));
  --em-bright: oklch(0.52 0.14 var(--acc-h));
  --em-soft: oklch(0.60 0.13 var(--acc-h) / 0.11);
  --em-line: oklch(0.60 0.13 var(--acc-h) / 0.30);
  --on-em: oklch(0.99 0.01 165);

  /* calm cool-neutral palette */
  --nh: 200;
  --nc: 0.005;
  --page: oklch(0.974 var(--nc) var(--nh));
  --card: oklch(1 0 0);
  --soft: oklch(0.966 var(--nc) var(--nh));
  --line: oklch(0.30 0.02 var(--nh) / 0.10);
  --line-2: oklch(0.30 0.02 var(--nh) / 0.16);
  --txt-hi: oklch(0.28 0.014 var(--nh));
  --txt-mid: oklch(0.47 0.013 var(--nh));
  --txt-low: oklch(0.62 0.012 var(--nh));

  --amber: oklch(0.62 0.13 66);
  --amber-soft: oklch(0.62 0.13 66 / 0.13);
  --radius: 13px;
  --radius-sm: 9px;
}

/* dark theme — activates only when the body carries data-theme="dark" */
[data-theme="dark"] .portal {
  --em: oklch(0.78 0.15 var(--acc-h));
  --em-bright: oklch(0.85 0.16 var(--acc-h));
  --em-soft: oklch(0.78 0.15 var(--acc-h) / 0.15);
  --em-line: oklch(0.78 0.15 var(--acc-h) / 0.34);
  --on-em: oklch(0.17 0.02 165);
  --page: oklch(0.185 0.01 var(--nh));
  --card: oklch(0.215 0.011 var(--nh));
  --soft: oklch(0.235 0.012 var(--nh));
  --line: oklch(1 0 0 / 0.09);
  --line-2: oklch(1 0 0 / 0.16);
  --txt-hi: oklch(0.96 0.006 var(--nh));
  --txt-mid: oklch(0.75 0.011 var(--nh));
  --txt-low: oklch(0.56 0.012 var(--nh));
}

.portal *, .portal *::before, .portal *::after { box-sizing: border-box; }
.portal .mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }

/* ============================================================
   PORTAL ROOT — the reflow container
   ============================================================ */
.portal {
  container-type: inline-size; container-name: portal;
  background: var(--page); color: var(--txt-hi);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  width: 100%; min-height: 100vh;
}
.portal a { color: inherit; text-decoration: none; }
.portal ::selection { background: var(--em-soft); }

/* ---- co-brand lockup (firm leads, BotDoTax underneath) ---- */
.portal .pbrand { display: flex; align-items: center; gap: 13px; }
.portal .flogo { width: 42px; height: 42px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: -0.02em; background: var(--em); color: var(--on-em); position: relative; }
.portal .flogo::after { content: ""; position: absolute; inset: 0; border-radius: 11px; border: 1px solid oklch(1 0 0/0.18); }
.portal .pbrand .ftext { min-width: 0; }
.portal .fname { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--txt-hi); white-space: nowrap; }
.portal .fby { font-family: var(--mono); font-size: 10.5px; color: var(--txt-low); margin-top: 3px; letter-spacing: 0.01em; line-height: 1.45; }
.portal .fby b { color: var(--txt-mid); font-weight: 600; }
.portal .fby .bd { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 4px;
  background: var(--txt-low); vertical-align: -2px; margin-right: 5px; opacity: .85; }
.portal .fby .bd svg { width: 9px; height: 9px; stroke: var(--page); stroke-width: 3; fill: none; }

/* ---- buttons ---- */
.portal .pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 20px;
  border-radius: 11px; font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--card); color: var(--txt-hi); transition: .14s; }
.portal .pbtn:hover { border-color: var(--txt-low); }
.portal .pbtn svg { width: 17px; height: 17px; stroke-width: 2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal .pbtn.primary { background: var(--em); color: var(--on-em); border-color: transparent; }
.portal .pbtn.primary:hover { filter: brightness(1.06); border-color: transparent; }
.portal .pbtn.soft { background: var(--em-soft); color: var(--em-bright); border-color: var(--em-line); }
.portal .pbtn.soft:hover { background: var(--em-soft); filter: brightness(0.98); }
.portal .pbtn.sm { height: 36px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; }
.portal .pbtn.block { width: 100%; }

/* ---- reassurance / private-link line ---- */
.portal .reassure { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--txt-mid); font-weight: 500; }
.portal .reassure svg { width: 15px; height: 15px; color: var(--em-bright); stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- section label ---- */
.portal .psec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.portal .psec .pt { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; color: var(--txt-hi); display: flex; align-items: center; gap: 9px; }
.portal .psec .pt .ct { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--txt-low); }

/* ---- card ---- */
.portal .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* ---- inline flash messages ---- */
.portal .pflash { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; border: 1px solid var(--em-line); background: var(--em-soft); color: var(--em-bright); }
.portal .pflash.alert { border-color: oklch(0.62 0.15 28 / 0.35); background: oklch(0.62 0.15 28 / 0.12); color: oklch(0.52 0.16 28); }
.portal .pflash svg { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   UPLOAD ZONE
   ============================================================ */
.portal .pdrop { border: 1.8px dashed var(--line-2); border-radius: var(--radius); background: var(--soft);
  padding: 30px 26px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 7px; }
.portal .pdrop:hover { border-color: var(--em); background: var(--em-soft); }
.portal .pdrop.drag { border-color: var(--em); background: var(--em-soft); }
.portal .pdrop .dico { width: 58px; height: 58px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--em-bright); margin-bottom: 6px; transition: .15s; }
.portal .pdrop .dico svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal .pdrop.drag .dico { background: var(--em); color: var(--on-em); transform: translateY(-2px); }
.portal .pdrop .dt { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--txt-hi); }
.portal .pdrop .dt b { color: var(--em-bright); }
.portal .pdrop .ds { font-size: 12.5px; color: var(--txt-low); font-family: var(--mono); line-height: 1.5; max-width: 380px; }
.portal .pdrop .dbtns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }

/* compact inline variant (returning client) */
.portal .pdrop.inline { flex-direction: row; text-align: left; align-items: center; gap: 18px; padding: 20px 22px; }
.portal .pdrop.inline .dico { margin-bottom: 0; width: 50px; height: 50px; }
.portal .pdrop.inline .dico svg { width: 23px; height: 23px; }
.portal .pdrop.inline .dmain { min-width: 0; flex: 1; }
.portal .pdrop.inline .ds { max-width: none; }
.portal .pdrop.inline .dbtns { margin-top: 0; flex: none; }

/* selected-files affordance (driven by the documents Stimulus controller) */
.portal .pdrop.has-files { border-style: solid; border-color: var(--em); }
.portal .dz-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; justify-content: center; }
.portal .pdrop.inline .dz-files { justify-content: flex-start; }
.portal .dz-file { font-family: var(--mono); font-size: 11px; color: var(--txt-mid); background: var(--soft);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   CHECKLIST — "what your firm needs from you"
   ============================================================ */
.portal .checklist { display: flex; flex-direction: column; }
.portal .crow { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.portal .crow:last-child { border-bottom: none; }
.portal .cbox { width: 24px; height: 24px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1.6px solid var(--line-2); }
.portal .cbox svg { width: 14px; height: 14px; stroke-width: 3; display: none; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal .crow.done .cbox { background: var(--em); border-color: var(--em); }
.portal .crow.done .cbox svg { display: block; stroke: var(--on-em); }
.portal .crow.todo .cbox { border-style: dashed; }
.portal .cinfo { min-width: 0; flex: 1; }
.portal .cname { font-size: 13.5px; font-weight: 700; color: var(--txt-hi); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.portal .cform { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--em-bright); background: var(--em-soft);
  border: 1px solid var(--em-line); border-radius: 5px; padding: 2px 6px; letter-spacing: 0.02em; white-space: nowrap; flex: none; }
.portal .cdesc { font-size: 11.5px; color: var(--txt-low); margin-top: 3px; }
.portal .crow.done .cname { color: var(--txt-mid); }
.portal .cpill { font-size: 11px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.portal .cpill .pd { width: 7px; height: 7px; border-radius: 50%; }
.portal .cpill.received { color: var(--em-bright); } .portal .cpill.received .pd { background: var(--em); }
.portal .cpill.needed { color: var(--amber); } .portal .cpill.needed .pd { background: var(--amber); }
.portal .cpill.optional { color: var(--txt-low); } .portal .cpill.optional .pd { background: var(--txt-low); }

/* ============================================================
   YOUR DOCUMENTS
   ============================================================ */
.portal .docs { display: flex; flex-direction: column; }
.portal .doc { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.portal .doc:last-child { border-bottom: none; }
.portal .doc .dfi { width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--em-bright); }
.portal .doc .dfi svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal .doc .dn { min-width: 0; flex: 1; }
.portal .doc .dname { font-size: 13.5px; font-weight: 700; color: var(--txt-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal .doc .dmeta { font-size: 11.5px; color: var(--txt-low); font-family: var(--mono); margin-top: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portal .doc .dmeta .ent { color: var(--em-bright); font-weight: 600; }
.portal .doc .dstat { font-size: 11.5px; font-weight: 700; color: var(--em-bright); display: inline-flex; align-items: center; gap: 6px; flex: none; }
.portal .doc .dstat svg { width: 14px; height: 14px; stroke-width: 2.6; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal .doc .dget { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); color: var(--txt-mid); cursor: pointer; background: var(--card); }
.portal .doc .dget:hover { color: var(--txt-hi); background: var(--soft); }
.portal .doc .dget svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* empty state */
.portal .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 24px; color: var(--txt-low); }
.portal .empty .eico { width: 48px; height: 48px; border-radius: 13px; background: var(--soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--txt-low); margin-bottom: 4px; }
.portal .empty .eico svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal .empty .et { font-size: 13.5px; font-weight: 700; color: var(--txt-mid); }
.portal .empty .es { font-size: 12px; font-family: var(--mono); }

/* ============================================================
   CPA NOTE
   ============================================================ */
.portal .note { display: flex; gap: 14px; padding: 18px; }
.portal .note .nava { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; background: var(--em-soft); color: var(--em-bright); border: 1px solid var(--em-line); }
.portal .note .nbody { min-width: 0; }
.portal .note .nby { font-size: 11px; font-family: var(--mono); color: var(--txt-low); margin-bottom: 6px; }
.portal .note .nby b { color: var(--txt-mid); font-weight: 600; }
.portal .note .ntext { font-size: 13.5px; color: var(--txt-hi); line-height: 1.6; }
.portal .note .ntext b { font-weight: 700; }

/* ---- contact preparer ---- */
.portal .contact { display: flex; align-items: center; gap: 13px; padding: 16px 18px; }
.portal .contact .cava { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; background: var(--soft); color: var(--em-bright); border: 1px solid var(--line); }
.portal .contact .cd { min-width: 0; flex: 1; }
.portal .contact .cpn { font-size: 13.5px; font-weight: 800; color: var(--txt-hi); }
.portal .contact .cpr { font-size: 11px; font-family: var(--mono); color: var(--txt-low); margin-top: 2px; }

/* ---- footer ---- */
.portal .pfoot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center;
  padding: 26px; color: var(--txt-low); font-size: 11.5px; font-family: var(--mono); line-height: 1.6; }
.portal .pfoot .lk { display: inline-flex; align-items: center; gap: 7px; }
.portal .pfoot .lk svg { width: 13px; height: 13px; color: var(--em-bright); stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal .pfoot .sep { opacity: .5; }

/* ============================================================
   DIRECTION — "Workspace": two-column, businesslike
   A slim top bar identifies the client; a wide column holds the
   uploader and documents; a right rail carries the preparer note,
   the checklist and contact.
   ============================================================ */
.portal .ptop { display: flex; align-items: center; gap: 16px; padding: 16px 26px; background: var(--card);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.portal .ptop .who { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.portal .cli { display: flex; align-items: center; gap: 11px; }
.portal .cli .cava { width: 36px; height: 36px; border-radius: 9px; background: var(--em-soft); border: 1px solid var(--em-line);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--em-bright); }
.portal .cli .cn { font-size: 13px; font-weight: 800; color: var(--txt-hi); }
.portal .cli .cs { font-size: 10.5px; font-family: var(--mono); color: var(--txt-low); margin-top: 2px; }
.portal .stage { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 24px 26px; max-width: 1180px; margin: 0 auto; }
.portal .rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.portal .main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.portal .wtop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.portal .wtop h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.portal .railcard .rh { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-low); }

@container portal (min-width: 840px) {
  .portal .stage { grid-template-columns: 1fr 320px; }
}