/* Client portal (CHG-179). Light only, the look of the CHG-179 mockup (draft 25): one centred column, quiet lines, one main button.
   Every rule sits under .portal, and widths come from the .portal container, not the window: the same sheet styles the real
   portal and the clickable prototype inside the living page. --brand comes from the organisation registry (set by app.js). */
.portal {
  color-scheme: light;
  --canvas: #f5f5f6; --paper: #fff; --tint: #fafafa; --ink: #18181b; --muted: #5b5b63; --faint: #8c8c94; --line: #e7e7ea;
  --brand: #18181b; --s-received: #a1a1aa; --s-working: #3a6fd0; --s-waiting: #b8730c; --s-done: #1f9254; --s-proto: #7c4dcc;
  --r: 8px; --rc: 12px;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  container-type: inline-size;
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--canvas); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
body:has(> .portal) { margin: 0; }
.portal, .portal * { box-sizing: border-box; }
.portal p { margin: 0; }
.portal h1, .portal h2, .portal h3 { margin: 0; text-wrap: balance; }
.portal h1 { font-size: clamp(1.6rem, 4cqw, 2.1rem); letter-spacing: -0.02em; }
.portal h2 { font-size: 1.1rem; }
.portal h3 { font-size: 1rem; }
.portal a { color: inherit; }
.portal [data-go] { cursor: pointer; }
.portal button, .portal input, .portal textarea, .portal select { font: inherit; color: inherit; }
.portal button { cursor: pointer; }
.portal :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.portal .muted { color: var(--muted); }
.portal .small { font-size: 0.86rem; }
.portal .pad { padding: 24px 16px; }
.portal .band { background: #fef3c7; color: #78350f; font-size: 13px; padding: 8px 16px; }
.portal [hidden] { display: none !important; }

.portal .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 12px max(16px, calc((100cqw - 1120px) / 2));
  background: var(--paper); border-bottom: 1px solid var(--line); overflow-x: auto; }
.portal .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.portal .logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 0.8rem; font-weight: 700; }
.portal .tabs { display: flex; gap: 4px; }
.portal .tabs a { padding: 6px 12px; border-radius: var(--r); text-decoration: none; color: var(--muted); white-space: nowrap; }
.portal .tabs a[aria-current="page"] { background: var(--canvas); color: var(--ink); font-weight: 600; }

.portal main { flex: 1 0 auto; width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 16px 120px; display: grid; gap: 20px; align-content: start; }
.portal main:focus { outline: none; }
.portal .hello { display: grid; gap: 6px; }
.portal .box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc); min-width: 0; }
.portal .box > .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.portal .box > .body, .portal .box.body { padding: 16px; display: grid; gap: 12px; }

.portal .rows > a, .portal .rows > div { display: grid; grid-template-columns: minmax(140px, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--line); text-decoration: none; }
.portal .rows > :first-child { border-top: 0; }
.portal .rows > a:hover { background: var(--tint); }
.portal .cell small { display: block; color: var(--faint); font-size: 0.8rem; }

.portal .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.82rem; white-space: nowrap; background: var(--canvas); color: var(--muted); }
.portal .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.portal .pill.green, .portal .pill.s-done { background: #e8f5ee; color: var(--s-done); }
.portal .pill.amber, .portal .pill.s-waiting { background: #fbf1e1; color: var(--s-waiting); }
.portal .pill.blue, .portal .pill.s-working { background: #e9f0fb; color: var(--s-working); }
.portal .pill.s-proto { background: #f1ebfb; color: var(--s-proto); }
.portal .pill.s-try { background: #e3f4f1; color: #0f7a6c; }
.portal .pill.red { background: #fbe9e9; color: #b42318; }
.portal .pill.s-received, .portal .pill.grey { background: var(--canvas); color: var(--muted); }

.portal table.reqs { width: 100%; border-collapse: collapse; }
.portal .reqs th { text-align: left; font-weight: 400; color: var(--faint); font-size: 0.82rem; padding: 10px 16px; background: var(--tint); border-bottom: 1px solid var(--line); }
.portal .reqs td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.portal .reqs tr:last-child td { border-bottom: 0; }
.portal .reqs tr { cursor: pointer; }
.portal .reqs tr:hover td { background: var(--tint); }
.portal .reqs td.num { color: var(--faint); width: 56px; }
.portal .reqs td.right, .portal .reqs th.right { text-align: right; color: var(--muted); white-space: nowrap; }
.portal .empty { padding: 18px 16px; color: var(--muted); }

.portal .seg { display: inline-flex; background: var(--canvas); border-radius: var(--r); padding: 3px; gap: 2px; }
.portal .seg button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; color: var(--muted); }
.portal .seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.portal .crumbs { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.portal .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); text-decoration: none; }
.portal .btn:hover { background: var(--tint); }
.portal .btn.main { background: var(--brand); border-color: var(--brand); color: #fff; }
.portal .btn.main:hover { filter: brightness(1.15); }
.portal .btn:disabled { opacity: .5; cursor: default; }
.portal .title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.portal .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal .facts > div { padding: 14px 16px; border-left: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.portal .facts > div:first-child { border-left: 0; }
.portal .facts small { color: var(--faint); font-size: 0.8rem; }
.portal .facts b { font-size: 1.05rem; overflow-wrap: anywhere; }

.portal .ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.portal .ptabs button { border: 0; background: none; padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.portal .ptabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.portal .caps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.portal .cap { padding: 16px; display: grid; gap: 8px; align-content: start; }
.portal .cap ul, .portal .plain { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 2px; }

.portal .screen { display: grid; gap: 12px; padding: 16px; }
.portal .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 170px; gap: 16px; align-items: start; }
.portal .compare:not(:has(.phone)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal .shot { display: grid; gap: 6px; margin: 0; }
.portal .shot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); display: block; }
.portal .shot.phone img { max-width: 170px; }
.portal .shot figcaption { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.86rem; }
.portal .tryproto { display: grid; gap: 8px; justify-items: start; }
.portal iframe.try { display: block; width: 100%; height: min(75vh, 720px); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.portal .what { background: var(--tint); border-radius: var(--r); padding: 10px 12px; }
.portal .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.portal .steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.portal .steps div { display: grid; gap: 6px; font-size: 0.8rem; color: var(--faint); }
.portal .steps div::before { content: ""; height: 4px; border-radius: 2px; background: var(--line); }
.portal .steps div.done { color: var(--ink); }
.portal .steps div.done::before { background: var(--brand); }
.portal .steps div.now { color: var(--ink); font-weight: 600; }
.portal .steps div.now::before { background: linear-gradient(90deg, var(--brand) 50%, var(--line) 50%); }

.portal .msgs { display: grid; gap: 12px; }
.portal .msg { display: grid; gap: 4px; max-width: 760px; padding: 12px 14px; border-radius: var(--rc); background: var(--tint); border: 1px solid var(--line); }
.portal .msg.you { justify-self: end; background: #f2f2f4; }
.portal .msg .who { font-size: 0.8rem; color: var(--faint); }
.portal .msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.portal textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); resize: vertical; }
.portal input[type="text"], .portal select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.portal label.field { display: grid; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.portal .files { display: flex; flex-wrap: wrap; gap: 6px; }
.portal .file { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--canvas); font-size: 0.86rem; text-decoration: none; }
.portal .note { padding: 12px 14px; border-radius: var(--r); background: #f2f2f4; color: var(--muted); }
.portal .note.ok { background: #e8f5ee; color: var(--s-done); }
.portal .note.err { background: #fbe9e9; color: #b42318; }

/* The dock holds New request and its sheet. It has no height and sticks to the bottom of the view, so both float over the
   page at the bottom right while it scrolls, and stay inside the portal (no position: fixed, which a frame would pin elsewhere). */
.portal .dock { position: sticky; bottom: 20px; z-index: 6; height: 0; display: flex; justify-content: flex-end; align-items: flex-end;
  padding: 0 20px; margin-bottom: 20px; pointer-events: none; }
.portal .dock > * { pointer-events: auto; }
.portal .orb { display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 10px 30px rgba(0,0,0,.12); text-align: left; }
.portal .orb .dot { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, #9fd0ff 30%, #3a6fd0 75%); box-shadow: 0 0 0 4px #e9f0fb; }
.portal .orb small { display: block; color: #0f7a6c; font-size: 0.75rem; font-weight: 600; }
.portal .orb b { font-size: 1rem; }
.portal .sheet { width: min(440px, calc(100cqw - 32px)); max-height: min(680px, calc(100vh - 40px)); overflow: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.18); padding: 18px; display: grid; gap: 12px; }
.portal .sheet .head { display: flex; justify-content: space-between; align-items: center; }
.portal .x { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.portal .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.portal .grid { display: grid; gap: 12px; min-width: 0; }
.portal .panel { display: grid; gap: 12px; min-width: 0; }

@container (max-width: 760px) {
  .portal .rows > a, .portal .rows > div { grid-template-columns: 1fr 1fr; }
  .portal .facts { grid-template-columns: 1fr 1fr; }
  .portal .facts > div:nth-child(3) { border-left: 0; }
  .portal .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .portal .reqs .hide-s { display: none; }
  .portal .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal .compare, .portal .compare:not(:has(.phone)) { grid-template-columns: 1fr; }
  .portal .dock { padding: 0 12px; bottom: 12px; margin-bottom: 12px; }
  .portal .orb { padding: 8px 14px 8px 8px; }
  .portal .orb .dot { width: 34px; height: 34px; }
}