/* hearth Graphite. Dark, calm, plain-language. Customers follow their device: light tokens under .cust when it asks for light. */
:root {
  --bg: #1C1C1F;
  --side: #18181A;
  --card: #212124;
  --card-2: #252529;
  --raise: #2D2D32;
  --line: #2E2E33;
  --line-2: #3B3B41;
  --text: #EDEDEF;
  --text-2: #A3A3AB;
  --text-3: #8B8B93;
  --green: #5BD08A;
  --green-text: #5BD08A;
  --red: #FF7C7C;
  --yellow: #F2C94C;
  --peri: #8E9BFF;
  --mint: #6EDDA6;
  --btn-bg: #EDEDEF;
  --btn-fg: #161618;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.light,
.cust-light {
  --bg: #F6F6F7;
  --side: #EEEEF0;
  --card: #FFFFFF;
  --card-2: #FAFAFB;
  --raise: #E4E4E8;
  --line: #E2E2E6;
  --line-2: #D2D2D8;
  --text: #1B1B1E;
  --text-2: #55555D;
  --text-3: #66666E;
  --green: #22A35A;
  --green-text: #177A43;
  --red: #C93636;
  --yellow: #B7860B;
  --btn-bg: #1B1B1E;
  --btn-fg: #FFFFFF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--text-3); opacity: 1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.grow { flex: 1 1 auto; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* shell */
.app { min-height: 100vh; display: flex; }
.side { flex: 0 0 248px; background: var(--side); border-right: 1px solid var(--line); padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; gap: 9px; padding: 2px 10px 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand svg { width: 20px; height: 20px; }
.brand .tag { font-size: 12px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; letter-spacing: 0; }
.grp { font-size: 12.5px; color: var(--text-3); padding: 0 10px; margin: 12px 0 2px; }
.item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-size: 14.5px; color: var(--text); }
.item svg { color: var(--text-2); }
.item:hover { background: var(--card); }
.item.on { background: var(--raise); }
.item .n { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.sub { margin: 2px 0 6px 17px; padding-left: 10px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.sub a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub a.on { background: var(--raise); color: var(--text); }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 6px 0; display: flex; flex-direction: column; gap: 10px; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 0 4px; }
.me { display: flex; align-items: center; gap: 10px; }
.av { width: 30px; height: 30px; border-radius: 8px; background: var(--raise); color: var(--text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.me .who { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.me .who small { color: var(--text-3); font-size: 12.5px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text); background: var(--card); }
.newc { margin: 0 2px 6px; justify-content: center; }

.main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 26px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }
.crumbs b { color: var(--text); font-weight: 600; }
.crumbs .sep { color: var(--text-3); }
.content { padding: 6px 26px 32px; display: flex; flex-direction: column; gap: 16px; }
.mbar { display: none; }
@media (max-width: 760px) {
  .side { display: none; }
  .mbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--side); }
  .top { padding: 0 16px; min-height: 46px; }
  .content { padding: 4px 16px 24px; }
}

/* type + parts */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); min-height: 34px; }
.eyebrow .live { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--yellow); }
.dot.bad { background: var(--red); }
.dot.on { background: var(--text); }
.dot.idle { border: 1.5px solid var(--text-2); width: 9px; height: 9px; }
.dot.off { border: 1.5px dashed var(--text-3); width: 9px; height: 9px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.pad { padding: 16px 18px; }
.ttl { font-size: 15px; font-weight: 600; }
.lead { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 112ch; text-wrap: pretty; }
.btn { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); border: 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--text); padding: 0 8px; font-weight: 500; }
.btn.ghost svg { color: var(--text-2); }
.btn.line { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--line-2); }
.link { color: var(--text-2); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 34px; }
.link:hover { color: var(--text); }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg > * { font: inherit; font-size: 14px; color: var(--text-2); background: transparent; border: 0; border-radius: 7px; min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.seg > .on { background: var(--raise); color: var(--text); }
.seg > .dis { color: var(--text-3); text-decoration: line-through; cursor: not-allowed; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field { font: inherit; font-size: 14px; background: var(--side); border: 1px solid var(--line-2); border-radius: 9px; min-height: 36px; padding: 0 12px; color: var(--text); }
.light .field, .cust-light .field { background: var(--card); }
.field:focus { outline: 2px solid var(--line-2); outline-offset: 1px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 1px 9px; border-radius: 999px; background: var(--raise); color: var(--text-2); white-space: nowrap; }
.pill.ok { background: rgba(91, 208, 138, 0.14); color: var(--green-text); font-weight: 700; letter-spacing: 0.07em; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.stat { display: flex; flex-direction: column; gap: 0; }
.stat .n { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.stat .l { font-size: 13px; color: var(--text-2); }
.bar { height: 5px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.under-red { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.trace { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.55; }
.trace li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.trace li .dot { margin-top: 7px; }
.trace li.dim { color: var(--text-2); }

/* chat */
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.msg .who { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14px; }
.msg .who time { color: var(--text-3); font-weight: 400; font-size: 12.5px; }
.msg .body { font-size: 15px; line-height: 1.62; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg .body p { margin: 0; }
.msg .av.bot { background: transparent; border: 1px solid var(--line-2); }
.msg .av.bot svg { width: 16px; height: 16px; }
.meta { color: var(--text-3); font-size: 12.5px; }
.code { background: var(--side); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.light .code, .cust-light .code { background: var(--card-2); }
.code .h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 2px 12px; border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.code pre { margin: 0; padding: 10px 12px; font: 13px/1.55 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd { font: 13px var(--mono); background: var(--raise); border-radius: 6px; padding: 2px 7px; }
.rcard .h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.rcard .row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-top: 1px solid var(--line); text-decoration: none; }
.rcard .row:first-of-type { border-top: 0; }
.composer { border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.composer textarea { display: block; width: 100%; font: inherit; font-size: 15px; background: transparent; color: var(--text); border: 0; resize: none; padding: 14px 16px 6px; }
.composer textarea:focus { outline: none; }
.composer .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px 8px 12px; }
.chip { font: 12.5px var(--mono); color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: 7px; min-height: 28px; padding: 0 8px; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.frame canvas { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; border-radius: 8px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* No side panel: one column of readable width, centred in the room next to the sidebar. */
.split.solo { grid-template-columns: minmax(0, 860px); justify-content: center; }

/* tools graph */
.graph-wrap { overflow-x: auto; }
.graph { min-width: 900px; display: grid; grid-template-columns: 170px 56px 176px minmax(70px, 1fr) minmax(330px, 1.5fr); align-items: center; padding: 8px 0; }
.node { border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.node.hub { border: 1.5px solid var(--text); }
.node svg { width: 24px; height: 24px; }
.node b { font-size: 15px; }
.hline { height: 1px; background: var(--line-2); }
.tools-list { display: flex; flex-direction: column; gap: 10px; }
.tool { height: 60px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); padding: 0 14px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.tool.on { border: 1.5px solid var(--text); }
.tool .r1 { display: flex; align-items: center; gap: 10px; }
.tool .r1 b { font-size: 15px; font-weight: 600; }
.tool .r2 { color: var(--text-2); font-size: 13.5px; padding-left: 19px; }
.curves { width: 100%; height: 410px; display: block; }
.curves path { fill: none; stroke: var(--line-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.curves path.hot { stroke: var(--green); stroke-width: 1.6; }

/* people */
.list-row { display: grid; grid-template-columns: 34px minmax(160px, 1.1fr) minmax(0, 1.4fr) minmax(150px, auto) auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.card > .list-row:first-child, .card > div:first-child > .list-row { border-top: 0; }
.list-row .nm { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.list-row .nm b { font-size: 15px; font-weight: 600; }
.list-row .acts { display: flex; gap: 4px; justify-content: flex-end; }
.av.inv { background: transparent; border: 1.5px dashed var(--line-2); color: var(--text-2); }
@media (max-width: 1000px) { .list-row { grid-template-columns: 34px minmax(0, 1fr); } .list-row > :nth-child(n+3) { grid-column: 2; } .list-row .acts { justify-content: flex-start; } }
.confirm { border: 1px solid rgba(255, 124, 124, 0.45); background: rgba(255, 124, 124, 0.07); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 16px 14px 64px; }

/* usage */
.stats4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats4 > div { padding: 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.stats4 > div:nth-child(-n+2) { border-top: 0; }
.stats4 > div:nth-child(odd) { border-right: 1px solid var(--line); }
.chart { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; height: 260px; }
.yax { display: flex; flex-direction: column; justify-content: space-between; color: var(--text-3); font-size: 12px; text-align: right; padding-bottom: 22px; }
.plot { position: relative; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 22px; background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25%); background-size: 100% calc(100% - 22px); background-repeat: no-repeat; }
.col { flex: 1 1 0; display: flex; flex-direction: column-reverse; gap: 2px; position: relative; height: 100%; justify-content: flex-start; }
.col i { display: block; border-radius: 3px; }
.col span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.legend { display: flex; flex-direction: column; gap: 14px; }
.legend .row { display: flex; flex-direction: column; gap: 6px; }
.legend .row .t { display: flex; align-items: center; gap: 8px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.side { min-width: 0; width: 248px; overflow: hidden; }
@media (max-width: 760px) { .crumbs > span, .crumbs .sep { display: none; } }

/* ---------- app additions ---------- */
html, body { min-height: 100%; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
.btn.sm { min-height: 30px; font-size: 13px; padding: 0 10px; }
.err { color: var(--red); }
.ok-text { color: var(--green-text); }
.center-msg { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); text-align: center; padding: 24px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 26px; font-size: 13.5px; background: var(--card); border-bottom: 1px solid var(--line); color: var(--text-2); }
.banner.bad { color: var(--red); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--btn-bg); color: var(--btn-fg); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; z-index: 60; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.sub a { cursor: pointer; }
.thread-wrap { min-height: 40vh; }
.empty-chat { padding: 40px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.empty-chat h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.caret { display: inline-block; width: 7px; height: 15px; background: var(--text-2); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
.msg .body ul, .msg .body ol { margin: 0; padding-left: 1.3em; }
.msg .body code.inl { font: 13px var(--mono); background: var(--raise); border-radius: 5px; padding: 1px 5px; }
.drawer-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 41; display: flex !important; overflow-y: auto; }

/* ---------- sign-in sheet (one card on a lit stage) ---------- */
.signin-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(1200px 500px at 50% -10%, rgba(255, 255, 255, 0.035), transparent 70%), var(--bg); }
.sheet { width: 100%; max-width: 980px; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; }
.cust-light .sheet { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.12); }
.sheet-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.sheet-h h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hpill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 13.5px; color: var(--text-2); min-width: 0; max-width: 100%; }
.hpill b { color: var(--text); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sheet-b { display: grid; grid-template-columns: minmax(0, 452px) minmax(0, 1fr); gap: 34px; padding: 24px 24px 28px; align-items: stretch; }
@media (max-width: 860px) { .sheet-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 20px 18px 24px; } .stage { padding: 22px 16px 18px; } .pname { font-size: 28px; } }
.sheet-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }

/* The stage: a softly lit panel in the portal's colour, the card centred near the top, extras below. */
.stage { --glow: rgba(255, 255, 255, 0.06); --dots: rgba(255, 255, 255, 0.055); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 30px 26px 26px; border-radius: 14px; border: 1px solid var(--line); background: var(--side); }
.stage.emp { --glow: rgba(214, 151, 72, 0.24); }
.stage.cus { --glow: rgba(84, 190, 170, 0.2); }
.cust-light .stage { --dots: rgba(20, 20, 30, 0.08); --glow: rgba(84, 190, 170, 0.22); background: #F1F2F3; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(var(--dots) 1px, transparent 1.3px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%); mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%); }
.stage-card { position: relative; }
.stage-card::before { content: ""; position: absolute; inset: -44px -40px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); }
.stage-more { display: flex; flex-direction: column; gap: 16px; }
.stage .health { background: var(--card); }
.cust-light .stage .health { background: #FFFFFF; }

.pcard { position: relative; width: 100%; min-height: 272px; border-radius: 16px; border: 1px solid var(--line-2); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--text); font: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 50px rgba(0, 0, 0, 0.5); }
.pcard.emp { background: radial-gradient(140% 120% at 100% 0%, rgba(214, 151, 72, 0.22), transparent 55%), #222124; }
.pcard.cus { background: radial-gradient(140% 120% at 100% 0%, rgba(84, 190, 170, 0.2), transparent 55%), #212325; }
.cust-light .pcard.cus { background: radial-gradient(140% 120% at 100% 0%, rgba(84, 190, 170, 0.22), transparent 55%), #FFFFFF; box-shadow: 0 22px 50px rgba(20, 20, 30, 0.14); }

/* The form column: a short greeting, the form, and (customers) the invitation opener. */
.side-h h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.side-h p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.invite-inline { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.invite-toggle { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 11px; background: transparent; color: var(--text); text-align: left; }
.invite-toggle:hover { background: var(--card-2); }
.invite-toggle > svg { color: #5CC9B3; }
.cust-light .invite-toggle > svg { color: #1F8A75; }
.invite-toggle .t { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.invite-toggle .chev { display: inline-flex; color: var(--text-3); transition: transform 0.15s; }
.invite-inline.open .invite-toggle .chev { transform: rotate(90deg); }
.invite-box { display: flex; flex-direction: column; gap: 10px; }
.invite-box p { margin: 0; font-size: 14px; }
.invite-box .field { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.invite-box .btn { min-height: 40px; }
.invite-box .err { margin: 0; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .invite-toggle .chev { transition: none; } }
.pcard-top { display: flex; align-items: center; gap: 12px; }
.picon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.picon svg { width: 20px; height: 20px; }
.emp .picon { border: 1.5px solid rgba(214, 151, 72, 0.7); color: #E2A660; background: rgba(214, 151, 72, 0.1); }
.cus .picon { border: 1.5px solid rgba(84, 190, 170, 0.7); color: #5CC9B3; background: rgba(84, 190, 170, 0.1); }
.cust-light .cus .picon { color: #1F8A75; }
.cust-light .emp .picon { color: #A86A1E; }
.pcard-top .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pcard-top .who b { font-size: 17px; font-weight: 600; }
.pcard-top .who small { color: var(--text-2); font-size: 13px; }
.ppill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.ppill.ok { border-color: rgba(91, 208, 138, 0.55); color: var(--green-text); background: rgba(91, 208, 138, 0.1); }
.ppill.bad { border-color: rgba(255, 124, 124, 0.55); color: var(--red); background: rgba(255, 124, 124, 0.08); }
.plabel { margin-top: 26px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-3); }
.pname { font: 700 36px/1.15 var(--mono); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 42px; }
.pname.empty { color: var(--text-3); }
.ptag { align-self: flex-start; font: 700 11px/1 var(--mono); letter-spacing: 0.12em; padding: 5px 8px; border-radius: 5px; }
.emp .ptag { color: #E2A660; border: 1px solid rgba(214, 151, 72, 0.55); background: rgba(214, 151, 72, 0.08); }
.cus .ptag { color: #5CC9B3; border: 1px solid rgba(84, 190, 170, 0.55); background: rgba(84, 190, 170, 0.08); }
.cust-light .cus .ptag { color: #1F7A68; }
.cust-light .emp .ptag { color: #8E5916; }
.pfoot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 18px; }
.pmeta { font: 600 11.5px/1.6 var(--mono); letter-spacing: 0.1em; color: var(--text-2); text-transform: uppercase; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ring svg { width: 62px; height: 62px; }
.ring .lbl { font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-2); }

.side-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sess { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 14px; color: var(--text-2); }
.sess b { color: var(--text); font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.sess .bar { height: 6px; }
.health { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--card-2); }
.health .h { display: flex; align-items: center; gap: 10px; }
.health .h .lbl { font: 600 11.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-2); }
.sig { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sig i { width: 3px; border-radius: 1px; background: var(--line-2); display: block; }
.sig i.on { background: var(--green); }
.sig-t { font-size: 13.5px; font-weight: 600; color: var(--green-text); }
.sig-t.bad { color: var(--red); }
.strip { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.strip i { flex: 1 1 0; border-radius: 1.5px; background: var(--green); display: block; min-height: 3px; }
.strip i.bad { background: var(--red); }
.strip i.none { background: var(--line); }
.axis { display: flex; justify-content: space-between; font: 11px/1 var(--mono); color: var(--text-3); }
.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hstats div { display: flex; flex-direction: column; gap: 2px; }
.hstats span { font-size: 12.5px; color: var(--text-3); }
.hstats b { font: 600 14px/1.3 var(--mono); }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label > span, .form .lab { font-size: 13px; color: var(--text-2); }
.form .field { min-height: 40px; width: 100%; }
.pw { display: flex; gap: 6px; }
.pw .icon-btn { width: 40px; height: 40px; flex: none; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--green); }
.note { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.note svg { margin-top: 2px; color: var(--text-3); }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.actions .btn { min-height: 40px; padding: 0 18px; }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.rules li { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.rules li.met { color: var(--text); }

/* ---------- phone and narrow widths ---------- */
/* Card text truncates instead of running under the badges. */
.pcard-top .who { flex: 1 1 auto; min-width: 0; }
.pcard-top .who b, .pcard-top .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppill { flex: none; }
.top { flex-wrap: wrap; }
.usage-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.cust-conv-grid { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 900px) {
  .usage-chart-grid, .cust-conv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .signin-page { align-items: flex-start;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .sheet { border-radius: 14px; }
  .sheet-h, .sheet-f { padding: 14px 16px; }
  .sheet-b { display: flex; flex-direction: column; padding: 16px 14px 22px; gap: 20px; }
  /* The stage dissolves on phones: card, then the form, then the meters. */
  .stage { display: contents; }
  .stage::before, .stage-card::before { display: none; }
  .stage-card { order: 1; }
  .side-col { order: 2; }
  .stage-more { order: 3; margin-top: 0; }
  .stage .health { background: var(--card-2); }
  .pcard { min-height: 0; padding: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
  .cust-light .pcard.cus { box-shadow: 0 10px 26px rgba(20, 20, 30, 0.1); }
  .pname { font-size: 26px; min-height: 32px; }
  .pcard-top { align-items: flex-start; }
  .pcard-top .who small { white-space: normal; overflow-wrap: anywhere; }
  .plabel { margin-top: 16px; }
  .pfoot { padding-top: 12px; }
  .ring svg { width: 52px; height: 52px; }
  .hpill { font-size: 12.5px; }
  .side-h h2 { font-size: 20px; }
  .sheet-f { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sheet-f .grow { display: none; }
  .actions .btn { width: 100%; justify-content: center; }
  .stats4 { grid-template-columns: minmax(0, 1fr); }
  .stats4 > div { border-right: 0 !important; border-top: 1px solid var(--line) !important; }
  .stats4 > div:first-child { border-top: 0 !important; }
  .eyebrow label .field { width: 100% !important; }
  .eyebrow label { flex: 1 1 100%; }
  .chart { height: 220px; grid-template-columns: 34px minmax(0, 1fr); }
  .plot { gap: 4px; }
  .msg { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .msg .av { width: 26px; height: 26px; }
}
.pcard-top { width: 100%; }
.composer .foot > button[type="submit"] { margin-left: auto; }
.composer .chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.link.crumb { font-size: 15px; min-height: 0; }

/* ---------- usage page (analytics) ---------- */
.u-wrap { padding: 22px 26px 40px; }
.u-panel { background: #19191C; border: 1px solid #2B2B30; border-radius: 22px; padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.u-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.u-head h1 { margin: 0 0 6px; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.u-head p { margin: 0; font-size: 16px; color: var(--text-2); max-width: 78ch; text-wrap: pretty; }
.u-seg { margin-left: auto; display: inline-flex; padding: 4px; gap: 4px; border-radius: 13px; background: #202024; border: 1px solid #2B2B30; }
.u-seg button { font: inherit; font-size: 15px; min-height: 38px; padding: 0 16px; border-radius: 9px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.u-seg button.on { background: #2E2E33; color: var(--text); }
.u-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px 40px; align-items: start; }
@media (max-width: 1100px) { .u-grid { grid-template-columns: minmax(0, 1fr); } }
.u-sec h2 { margin: 0 0 4px; font-size: 16.5px; font-weight: 500; }
.u-sec .u-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--text-3); }
.u-box { background: #1D1D21; border: 1px solid #2B2B30; border-radius: 14px; }
.u-chart { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.u-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.u-chart .say { font-size: 15px; color: var(--text); }
.u-chart svg text { fill: var(--text-3); font: 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.weeks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wk { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.wk.on { background: #202024; border-color: #2E2E33; }
.wk .pct { font-size: 12.5px; color: var(--text-2); }
.wk .track { width: 100%; max-width: 64px; height: 92px; background: #232327; border-radius: 6px; position: relative; overflow: hidden; }
.wk .fill { position: absolute; left: 0; right: 0; bottom: 0; background: #6E6E75; border-radius: 6px 6px 0 0; }
.wk.on .fill { background: #D9D9DE; }
.wk .over { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #FFFFFF; }
.wk .lbl { font-size: 12.5px; color: var(--text-2); }
.wk.on .lbl { color: var(--text); }
.ubar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 3px; background: transparent; }
.ubar i { display: block; height: 100%; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14.5px; color: var(--text-2); }
.legend-row span { display: inline-flex; align-items: center; gap: 8px; }
.legend-row b { color: var(--text); font-weight: 500; }
.legend-row i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.big { padding: 6px 18px 12px; }
.big .row { padding: 12px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.big .head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.big .head .pct { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.big .tag { white-space: nowrap; flex: none; font-size: 11.5px; color: var(--text-3); background: #26262A; border-radius: 6px; padding: 1px 7px; }
.big .bar { height: 5px; background: #26262A; }
.big .bar i { background: #4C8DF6; }
.big .head > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk .lbl { white-space: nowrap; }

@media (max-width: 640px) { .u-wrap { padding: 12px 12px 28px; } .u-panel { padding: 20px 16px 22px; border-radius: 16px; gap: 20px; } .u-head h1 { font-size: 26px; } .u-head p { font-size: 14.5px; } .u-seg { margin-left: 0; } .weeks { gap: 4px; } .wk { padding: 8px 2px 6px; } .wk .pct, .wk .lbl { font-size: 11px; } }
.u-chart svg text.pt { fill: #EDEDEF; font-size: 13.5px; }
@media (max-width: 640px) {
  .u-chart { padding: 12px 10px 10px; }
  .u-chart svg text { font-size: 16.5px; }
  .u-chart svg text.pt { font-size: 18.5px; }
}

/* ---------- phones: iPhone and Android ---------- */
/* Fill the height people can actually see (iOS Safari's bars, Android's keyboard) and keep clear of
   the notch, the rounded corners and the home bar. env() is 0 elsewhere, so desktops are unchanged. */
html { text-size-adjust: 100%; color-scheme: dark; }
/* Native controls (checkboxes, scrollbars, pickers) follow the page's theme class, not just the device. */
html.cust-light { color-scheme: light; }
.app { min-height: 100vh; min-height: 100dvh; }
.center-msg { min-height: 60vh; min-height: 60dvh; }
.side { padding-left: max(12px, env(safe-area-inset-left)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.main { padding-right: env(safe-area-inset-right); }
.drawer { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); overscroll-behavior: contain; }
.toast { bottom: calc(22px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
/* Wide screens and phones on their side: the sidebar stays put while a long conversation scrolls. */
.side:not(.drawer) { position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .mbar { position: sticky; top: 0; z-index: 30; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .main { padding-right: 0; }
  .top, .content, .banner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .content { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .u-wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  /* Segmented filters scroll sideways inside themselves instead of pushing the page wider. */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg > * { flex: none; }
  .composer .chips { flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  .composer .chips::-webkit-scrollbar { display: none; }
  .composer .chip { flex: none; }
  .list-row .acts-none { display: none; }
  .confirm { margin: 0 12px 12px; }
  /* New invite: one row per field, buttons share the last row. */
  .invite-form > label, .invite-form > fieldset { flex: 1 1 100%; }
  .invite-form > label > span:first-child, .invite-form > fieldset > span.muted { width: 52px; flex: none; }
  .invite-form > label .field { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .invite-form > .grow { display: none; }
  .invite-form > button { flex: 1 1 0; justify-content: center; }
}
/* Touch: 16 px text in fields so iPhone Safari doesn't zoom in, and 44 px targets.
   Short viewports count too: that is a phone on its side. */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .field, .composer textarea { font-size: 16px; }
  .field, .form .field, .invite-box .field { min-height: 44px; }
  .icon-btn, .pw .icon-btn { width: 44px; height: 44px; }
  .btn, .btn.sm, .invite-box .btn, .actions .btn { min-height: 44px; }
  .chip { min-height: 44px; padding: 0 12px; }
  .seg > * { min-height: 44px; }
  .u-seg button { min-height: 44px; }
  .item { min-height: 44px; }
  .sub a { padding-top: 12px; padding-bottom: 12px; }
  .link, .link.crumb, .crumbs a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .link-pill { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .composer .foot > button[type="submit"] { min-width: 44px; justify-content: center; }
  .check { min-height: 44px; }
  .check input { width: 20px; height: 20px; }
}

/* The message box stays at the bottom of the window while a conversation scrolls above it. */
.composer-dock { position: sticky; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 8px; margin-top: -6px; padding: 14px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 14px); }
.composer-dock .err { margin: 0; }
/* Phones: the conversation fills the screen under the top bar, so the message box sits at the bottom
   from the start instead of straight under the greeting. Long conversations scroll as before. */
@media (max-width: 760px) {
  .content.chat-page { flex: 1 1 auto; padding-bottom: 0; }
  .chat-page > .split { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; }
  .chat-page section[aria-label="Conversation"] { flex: 1 1 auto; }
  .chat-page .composer-dock { margin-top: auto; }
  /* An empty Visual panel would sit below the box, out of sight: it shows once there is a picture.
     !important: the panel sets its display inline. */
  .chat-page .visual-empty { display: none !important; }
}

/* ---------- Conversations, both portals: your words in a bubble, answers as a page (common/chat.jsx),
   the answer text (common/text.jsx), the message box with "/" commands, one Send/Stop button, the
   status above it and ↓ back to the newest. Loaded after chat-dock.css and graphite.css. ---------- */
:root { --acc: #B9CCE3; --acc-rgb: 185, 204, 227; --acc-text: #C6D6EA; }
.light, .cust-light { --acc: #3A5573; --acc-rgb: 58, 85, 115; --acc-text: #2F475F; }

/* one reading column, centred (a picture panel beside it on the customer side when there is one) */
.split.solo.chat-col { grid-template-columns: minmax(0, 780px); }
.chat-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chat-sec > .thread { gap: 30px; padding: 10px 0 26px; }

/* ---- your message ---- */
.msg.you, .msg.ans { display: flex; flex-direction: column; min-width: 0; }
.msg.you { align-items: flex-end; gap: 4px; }
.you-b { max-width: min(80%, 580px); padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--raise); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.light .you-b, .cust-light .you-b { background: #E6E8EE; }
.you-b.is-cmd { padding: 8px 12px; background: transparent; border: 1px solid var(--line-2); }
.you-b.is-cmd .cmd { background: transparent; padding: 0; }
.you-t { font-size: 12px; color: var(--text-3); padding-right: 6px; opacity: 0; transition: opacity 0.15s; }
.msg.you:hover .you-t, .msg.you:focus-within .you-t { opacity: 1; }
.you-who { font-size: 12.5px; color: var(--text-2); font-weight: 600; padding-right: 6px; }
.you-who time { color: var(--text-3); font-weight: 400; margin-left: 4px; }
.msg.you .att-list { justify-content: flex-end; margin-top: 2px; }

/* ---- an answer ---- */
.msg.ans { gap: 12px; }
.ans-h { display: flex; align-items: center; gap: 9px; min-height: 26px; font-size: 13px; color: var(--text-3); }
.ans-h b { color: var(--text); font-weight: 600; font-size: 14px; }
.ans-mk { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); color: var(--text); }
.ans-mk svg { width: 15px; height: 15px; }
.ans-wr { color: var(--green-text); font-size: 12.5px; }
.ans-act { display: flex; align-items: center; gap: 2px; min-width: 0; margin: -4px 0 0 -9px; }
.ans-act button { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; }
.ans-act button:hover { background: var(--card); color: var(--text); }
.ans-act .meta { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-act button:first-child + .meta, .ans-act .meta:first-child { margin-left: 9px; }
/* Copy and Retry show on the newest answer, and on any answer you point at. */
@media (hover: hover) {
  .msg.ans .ans-act { opacity: 0; transition: opacity 0.15s; }
  .msg.ans:hover .ans-act, .msg.ans:last-child .ans-act, .ans-act:focus-within { opacity: 1; }
}
.msg.ans > .card, .msg.ans > .err { margin: 0; }
.think { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14.5px; }
.think-t { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
@keyframes cx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.think-d { display: inline-flex; gap: 3px; }
.think-d i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); animation: cx-bob 1s ease-in-out infinite; }
.think-d i:nth-child(2) { animation-delay: 0.15s; }
.think-d i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cx-bob { 50% { transform: translateY(-3px); background: var(--text-2); } }

/* ---- answer text ---- */
.md { font-size: 15.5px; line-height: 1.68; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.md > * { margin: 0; }
.md > * + * { margin-top: 14px; }
.md > .md-tw, .md > .md-quote, .md > .code, .md > .md-tw + *, .md > .md-quote + *, .md > .code + * { margin-top: 18px; }
.md p { margin: 0; }
.md b { font-weight: 650; }
.md > .md-h { margin: 26px 0 4px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; }
.md > .md-h:first-child { margin-top: 0; }
.md-h1 { font-size: 21px; }
.md-h2 { font-size: 18.5px; }
.md-h3 { font-size: 16.5px; }
.md-h4, .md-h5, .md-h6 { font-size: 15.5px; }
.md-list { margin: 0; padding-left: 24px; }
.md-list > li { margin: 5px 0; padding-left: 2px; }
.md-list > li::marker { color: var(--text-3); }
ol.md-list > li::marker { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }
.md-list .md-list { margin: 4px 0 8px; }
ul.md-list { list-style: none; padding-left: 20px; }
ul.md-list > li { position: relative; }
ul.md-list.d0 > li::before, ul.md-list.d1 > li::before { content: ""; position: absolute; left: -14px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
ul.md-list.d2 { border-left: 1px solid var(--line-2); margin-left: -8px; padding-left: 22px; }
ul.md-list.d2 > li::before { content: ""; position: absolute; left: -16px; top: 0.8em; width: 7px; height: 1px; background: var(--line-2); }
/* "1. **host**" with points under it reads as a heading of the answer */
.md > ol.md-list { padding-left: 28px; }
.md > ol.md-list > li.md-titled { margin-top: 22px; }
.md > ol.md-list > li.md-titled:first-child { margin-top: 6px; }
.md > ol.md-list > li.md-titled::marker { color: var(--acc-text); font-size: 16px; }
.md > ol.md-list > li.md-titled > .md-t { display: block; font-size: 16.5px; margin-bottom: 2px; }
.md > ol.md-list > li.md-titled > .md-t code.inl { font-size: 14px; }
.md code.inl { font: 0.85em/1 var(--mono); background: var(--raise); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.md b code.inl, .md .md-h code.inl { color: var(--acc-text); background: rgba(var(--acc-rgb), 0.1); border-color: rgba(var(--acc-rgb), 0.28); }
.md-a { color: var(--acc-text); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb), 0.45); text-underline-offset: 3px; }
.md-a:hover { text-decoration-color: currentColor; }
.md > .md-hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.md-quote { margin: 0; padding: 10px 14px; border-left: 3px solid rgba(var(--acc-rgb), 0.6); background: rgba(var(--acc-rgb), 0.06); border-radius: 0 10px 10px 0; color: var(--text-2); }
.md-quote > * + * { margin-top: 8px; }
.md-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); -webkit-overflow-scrolling: touch; }
.md-table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.45; }
.md-table th { font: 600 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 10px 14px; background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.md-table td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.md-table code.inl { white-space: nowrap; overflow-wrap: normal; }
.md-table tr:first-child td { border-top: 0; }
.md-table tbody tr:hover td { background: var(--card-2); }
.md .code .h { min-height: 34px; }
.md .code.open pre { min-height: 42px; }
.md-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.16em; border-radius: 1px; background: var(--acc); animation: cx-blink 1s steps(2, jump-none) infinite; }
@keyframes cx-blink { 50% { opacity: 0; } }
.md-pending { height: 40px; border: 1px dashed var(--line-2); border-radius: 12px; }

/* ---- the box ---- */
.composer-dock > .cx-jump { position: absolute; left: 50%; top: -30px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.15s, transform 0.15s; }
.composer-dock > .cx-jump.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.composer-dock:has(> .cx-status) > .cx-jump { top: -66px; }
.cx-status { align-self: center; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); }
.light .cx-status, .cust-light .cx-status { box-shadow: 0 6px 22px rgba(20, 24, 40, 0.1); }
.cx-status .faint { margin-left: -4px; }
.cx-status kbd, .cx-cmd kbd { font: 600 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); }
.cx-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(91, 208, 138, 0.5); animation: cx-pulse 1.4s ease-out infinite; }
@keyframes cx-pulse { 70% { box-shadow: 0 0 0 7px rgba(91, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 138, 0); } }
.cx-conn { margin: 0; align-self: center; font-size: 12.5px; color: var(--yellow); }
.composer.cx { position: relative; border-radius: 22px; border-color: var(--line-2); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22); transition: border-color 0.15s, box-shadow 0.15s; }
.light .composer.cx, .cust-light .composer.cx { box-shadow: 0 10px 34px rgba(20, 24, 40, 0.08); }
.composer.cx:focus-within { border-color: rgba(var(--acc-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.12), 0 10px 34px rgba(0, 0, 0, 0.18); }
.composer.cx textarea { min-height: 54px; max-height: 40vh; font-size: 15.5px; line-height: 1.5; padding: 15px 18px 4px; overflow-y: auto; }
.composer.cx .foot { gap: 6px; padding: 6px 8px 8px 10px; flex-wrap: nowrap; }
.cx-cmd { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 32px; padding: 0 11px 0 7px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; }
.cx-cmd:hover, .cx-cmd[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); background: var(--card-2); }
.cx-send { width: 36px; height: 36px; flex: none; display: grid; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); transition: background 0.15s, transform 0.1s; }
.cx-send:active { transform: scale(0.94); }
.cx-send:disabled { background: var(--raise); color: var(--text-3); cursor: default; }
.cx-send:focus-visible, .cx-cmd:focus-visible, .ans-act button:focus-visible, .hp:focus-visible, .cx-jump:focus-visible { outline: 2px solid rgba(var(--acc-rgb), 0.7); outline-offset: 2px; }
.cx-pal { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38); }
.light .cx-pal, .cust-light .cx-pal { box-shadow: 0 18px 50px rgba(20, 24, 40, 0.16); }
.cx-pal-h { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px 8px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.cx-pal-h .faint { font-weight: 400; }
.cx-pi { display: grid; grid-template-columns: 18px 82px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.cx-pi svg { color: var(--text-2); }
.cx-pi.on, .cx-pi:hover { background: var(--raise); }
.cx-pc { font: 13px var(--mono); }
.cx-pd { color: var(--text-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-none { margin: 4px 10px 8px; font-size: 13px; }
/* Staff: the month in words, under the box. */
.composer-dock > .em-plain { justify-content: center; font: 12px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
.em-plain .em-pct { color: var(--text-2); }

/* ---- staff header: Context and Tools pills, ⋯ Rename / Delete ---- */
.hp-row { display: inline-flex; align-items: center; gap: 6px; }
.pop-w { position: relative; display: inline-flex; }
.hp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; white-space: nowrap; }
.hp:hover, .hp[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); background: var(--card); }
.hp-more { width: 30px; padding: 0; }
.pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42); }
.light .pop, .cust-light .pop { box-shadow: 0 18px 50px rgba(20, 24, 40, 0.16); }
.pop-about { width: 340px; max-width: calc(100vw - 24px); max-height: min(70vh, 640px); overflow: auto; padding: 8px; }
.pop-stack { display: flex; flex-direction: column; gap: 8px; }
.pop-menu { width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.pop-menu button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.pop-menu button svg { color: var(--text-2); }
.pop-menu button:hover { background: var(--raise); }
.pop-menu .danger, .pop-menu .danger svg { color: var(--red); }
.hp-rename { display: flex; gap: 6px; }
.hp-rename .field { width: 280px; max-width: 50vw; }

@media (prefers-reduced-motion: reduce) {
  .md-caret, .cx-pulse, .think-t, .think-d i { animation: none; }
  .think-t { color: var(--text-2); }
  .composer-dock > .cx-jump { transition: none; }
}
@media (pointer: coarse) { .cx-esc { display: none; } }
@media (max-width: 760px) {
  .chat-sec > .thread { gap: 24px; padding-top: 6px; }
  .you-b { max-width: 88%; font-size: 16px; }
  .you-t { display: none; }
  .md { font-size: 16px; }
  .md-table { font-size: 13.5px; }
  .md-table th, .md-table td { padding: 8px 12px; }
  .composer.cx textarea { min-height: 76px; padding: 13px 14px 2px; }
  .cx-send { width: 44px; height: 44px; }
  .cx-cmd { height: 44px; }
  .cx-pi { grid-template-columns: 18px minmax(0, 1fr); min-height: 52px; padding: 6px 10px; row-gap: 0; }
  .cx-pi svg { grid-row: 1 / span 2; }
  .cx-pi .cx-pc { grid-column: 2; grid-row: 1; }
  .cx-pi .cx-pd { grid-column: 2; font-size: 12.5px; }
  .cx-pal-h .faint { display: none; }
  .cx-status { min-height: 30px; font-size: 12.5px; }
  .pop.pop-about { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); }
  .hp-t { display: none; }
  .chat-top { flex-wrap: nowrap; }
  .chat-top .crumbs { min-width: 0; flex-wrap: nowrap; }
  .chat-top .crumbs b { display: none; }
  .hp-rename .field { width: auto; flex: 1 1 auto; min-width: 0; }
}
/* Touch (and short windows): 16 px in the box or iOS zooms in, fingertip-sized buttons. */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .composer.cx textarea { font-size: 16px; }
  .ans-act button { min-height: 44px; }
  .hp { min-height: 40px; min-width: 40px; }
  .hp-more { width: 40px; }
}

/* ---- what hearth did on the way (tools, thinking): one quiet line, opens to the steps ---- */
.ans-work { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 -2px; min-width: 0; }
.ans-work-h { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 0 10px 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; text-align: left; }
.ans-work-h span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-work-h:hover { background: var(--card); color: var(--text-2); }
.ans-work-h svg { width: 14px; height: 14px; flex: none; transition: transform 0.15s; }
.ans-work.open .ans-work-h svg { transform: rotate(90deg); }
.ans-work.live .ans-work-h span { color: var(--text-2); }
.ans-work-b { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px 14px; margin-left: 1px; border-left: 2px solid var(--line-2); }
.ans-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ans-steps li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ans-steps li span { min-width: 0; overflow-wrap: anywhere; }
.ans-steps svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ans-steps li.ok svg { color: var(--green-text); }
.ans-steps li.bad svg { color: var(--text-3); }
.ans-steps li.run { color: var(--text); }
.ans-steps li.run span { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
.ans-thought { margin: 0; max-height: 280px; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--text-3); overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .ans-steps li.run span { animation: none; color: var(--text); background: none; } }
@media (pointer: coarse) { .ans-work-h { min-height: 44px; } }

/* ---- Settings → Memory ---- */
.mem-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mem-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.mem-list li span { min-width: 0; overflow-wrap: anywhere; }
.mem-list time { display: block; font-size: 12px; margin-top: 2px; }
.mem-list button { flex: none; }
@media (pointer: coarse) { .mem-list button { min-width: 44px; min-height: 44px; } }
.mem-empty { margin: 6px 0 0; font-size: 13.5px; }

/* ---------- customer conversations: the sidebar keeps the newest 3, the rest open in a pop-up ---------- */
.item.more .t { color: var(--text-2); }
.item.more.on .t { color: var(--text); }
.item .count { margin-left: auto; font-size: 12px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 8px; min-width: 24px; text-align: center; flex: none; }
.item.on .count { background: var(--card-2); }
.item .reply-dot + .count { margin-left: 0; }
button.item { font: inherit; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; }
.newc.off { opacity: 0.5; cursor: not-allowed; }
.full-note { margin: -2px 4px 6px; padding: 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

html.modal-open { overflow: hidden; }
.cl-dlg { padding: 0; margin: auto; width: min(580px, calc(100vw - 32px)); max-width: none; max-height: min(680px, calc(100vh - 64px)); max-height: min(680px, calc(100dvh - 64px));
  background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.cl-dlg[open] { display: flex; flex-direction: column; }
.cl-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .cl-dlg::backdrop, .cust-light .cl-dlg::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .cl-dlg, .cust-light .cl-dlg { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.cl-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px 20px; }
.cl-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cl-s { padding: 0 18px 10px 20px; }
.cl-search { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; background: var(--side); border: 1px solid var(--line-2); border-radius: 9px; color: var(--text-2); }
.light .cl-search, .cust-light .cl-search { background: var(--card); }
.cl-search:focus-within { outline: 2px solid var(--line-2); outline-offset: 1px; }
.cl-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: transparent; border: 0; outline: 0; padding: 8px 0; -webkit-appearance: none; appearance: none; }
.cl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cl-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 10px; }
.cl-b ul { list-style: none; margin: 0; padding: 0; }
.cl-note { margin: 0; padding: 0 12px 4px; font-size: 13px; color: var(--text-3); }
.cl-grp { margin: 14px 0 4px; padding: 0 12px; font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.cl-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.cl-row:hover { background: var(--card-2); }
.cl-row.on { background: var(--raise); }
.cl-row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row .n { flex: none; font-size: 12.5px; color: var(--text-2); }
.cl-row .reply-dot { margin-left: 0; }
.cl-f { display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px 20px; border-top: 1px solid var(--line); }
.cl-f .btn:disabled { opacity: 0.5; }
.cl-meter { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-2); }
.cl-meter > span:last-child { flex: 1 1 auto; min-width: 0; }
.cl-meter b { color: var(--text); font-weight: 600; }
.cl-bar { flex: 0 0 120px; height: 5px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.cl-meter.full .cl-bar i { background: var(--yellow); }
.cl-limit { margin-top: 32px; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.cl-limit h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.cl-limit p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.cl-limit .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* search, filter, sort, select */
.cl-kbd { font: 600 11.5px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; height: 20px; display: inline-flex; align-items: center; flex: none; }
.cl-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { font: inherit; font-size: 13px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cl-chip.on { background: var(--raise); border-color: transparent; color: var(--text); }
.cl-chip .reply-dot { margin: 0; width: 7px; height: 7px; box-shadow: none; }
/* shared.css (loaded after this file) sizes every select.field; the toolbar's sort is smaller on desktop */
.cl-tools select.field.cl-sort { min-height: 30px; font-size: 13px; padding-left: 10px; flex: none; }
.cl-all { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 12px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.cl-all input, .cl-row.pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--btn-bg); flex: none; }
.cl-row.pick { cursor: pointer; }
.cl-row.pick.on { background: var(--card-2); }
.cl-li { position: relative; }
.cl-acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding-left: 8px; background: var(--card-2); border-radius: 8px; }
.cl-acts .icon-btn { width: 30px; height: 30px; border-color: transparent; }
.cl-acts .icon-btn:hover { background: var(--raise); }
@media (hover: hover) and (pointer: fine) {
  .cl-li.edit:hover .cl-acts, .cl-li.edit:focus-within .cl-acts { display: flex; }
  .cl-li.edit:hover .cl-row, .cl-li.edit:focus-within .cl-row:not(.on) { background: var(--card-2); }
}
@media (hover: none), (pointer: coarse) { .cl-kbd { display: none; } }
.cl-rename { display: flex; align-items: center; gap: 6px; padding: 3px 6px; }
.cl-rename .field { flex: 1 1 auto; min-width: 0; min-height: 34px; }
.cl-ask { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.cl-confirm .cl-ask { color: var(--text); }
.btn.danger-fill { background: var(--red); color: #1F0909; }
.light .btn.danger-fill, .cust-light .btn.danger-fill { background: #C93636; color: #fff; }
.btn.danger:disabled, .btn.danger-fill:disabled { opacity: 0.5; cursor: not-allowed; }

/* Phones: a sheet from the bottom of the screen; a phone on its side gets the whole screen. */
@media (max-height: 500px) {
  .cl-dlg { width: 100%; max-height: none; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; border: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (max-width: 760px), (max-height: 500px), (pointer: coarse) {
  .cl-f .btn { justify-content: center; }
  .cl-chip { min-height: 44px; padding: 0 13px; }
  .cl-tools select.field.cl-sort { min-height: 44px; font-size: 16px; }
  .cl-search { min-height: 44px; }
  .cl-search input { font-size: 16px; min-height: 42px; }
  .cl-row { min-height: 46px; }
  .cl-all { min-height: 44px; }
  .cl-all input, .cl-row.pick input { width: 20px; height: 20px; }
  .cl-rename { flex-wrap: wrap; }
  .cl-rename .field { flex-basis: 100%; min-height: 44px; }
  .cl-f:has(.cl-ask) { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cl-confirm .cl-ask { flex-basis: 100%; }
  .cl-f:has(.cl-ask) .btn { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .cl-dlg { width: 100%; max-height: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .cl-h { padding: 14px 14px 10px 18px; }
  .cl-s { padding: 0 14px 8px 18px; }
  .cl-b { padding: 2px 6px 10px; }
  .cl-f { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 18px max(16px, env(safe-area-inset-bottom)); }
  .cl-bar { flex-basis: 72px; }
  .cl-limit { margin-top: 16px; padding: 18px; }
  .cl-limit .acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* "Your conversations" folds the newest few open and shut; the chevron turns down when open. */
.grp-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; font: inherit; font-size: 12.5px; color: var(--text-3); text-align: left; background: transparent; border: 0; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.grp-fold:hover, .grp-fold:active { color: var(--text-2); }
.grp-fold .t { flex: 1 1 auto; min-width: 0; }
.grp-fold .reply-dot { margin-left: 0; width: 7px; height: 7px; }
.grp-fold svg { flex: none; transition: transform 0.15s ease; }
.grp-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .grp-fold svg { transition: none; } }
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) { .grp-fold { min-height: 44px; margin-top: 2px; margin-bottom: 0; } }

/* The sign-in kit both portals share (front doors, link pages, the customer sign-up). Graphite tokens plus an ice accent. */
.door {
  --ice: #B9CCE3; --ice-rgb: 185, 204, 227; --ice-text: #C6D6EA; --ice-hover: #CBDAEC; --on-ice: #0D1420;
  --d-glow: 0.3; --d-spot: rgba(185, 204, 227, 0.11); --d-dots: rgba(255, 255, 255, 0.045); --d-field: var(--side);
  --d-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  --d-pass: radial-gradient(140% 120% at 100% 0%, rgba(185, 204, 227, 0.19), transparent 55%), #222225;
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
.cust-light .door {
  --ice: #3A5573; --ice-rgb: 58, 85, 115; --ice-text: #2F475F; --ice-hover: #2F475F; --on-ice: #FFFFFF;
  --d-glow: 0.22; --d-spot: rgba(58, 85, 115, 0.1); --d-dots: rgba(0, 0, 0, 0.05); --d-field: #FFFFFF;
  --d-shadow: 0 20px 50px rgba(20, 20, 30, 0.08);
  --d-pass: radial-gradient(140% 120% at 100% 0%, rgba(58, 85, 115, 0.13), transparent 55%), #FFFFFF;
}
/* a soft light from the top and a dotted grid that fades out */
.door::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 720px; pointer-events: none; background: radial-gradient(640px 360px at 50% -60px, var(--d-spot), transparent 70%); }
.door::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 620px; pointer-events: none; background-image: radial-gradient(var(--d-dots) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(520px 380px at 50% 0, #000, transparent 75%); mask-image: radial-gradient(520px 380px at 50% 0, #000, transparent 75%); }
.door > * { position: relative; z-index: 1; }

.d-reload { min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.1); color: var(--ice-text); font: inherit; font-size: 12.5px; font-weight: 600; }
.door h1 { margin: 24px 0 6px; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.d-sub { margin: 0 0 26px; max-width: 34ch; font-size: 15px; color: var(--text-2); }

/* boxes */
.d-panel { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; text-align: left; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--d-shadow); }
.d-label { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.d-big { position: relative; width: 100%; min-height: 46px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 500; transition: background 0.12s, border-color 0.12s, transform 0.06s; }
.d-big:hover { border-color: var(--text-3); }
.d-big:active { transform: translateY(1px); }
.d-big.primary { background: var(--ice); border-color: transparent; color: var(--on-ice); box-shadow: 0 4px 14px rgba(var(--ice-rgb), var(--d-glow)), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.d-big.primary:hover { background: var(--ice-hover); }
.d-big:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.d-big:focus-visible, .d-back:focus-visible, .d-tlink:focus-visible, .d-eye:focus-visible, .d-reload:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.d-k { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-3); font: 500 11px/1 var(--mono); }
.d-big.primary .d-k { border-color: color-mix(in srgb, var(--on-ice) 30%, transparent); background: transparent; color: var(--on-ice); opacity: 0.7; }
.d-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--raise); border: 1px solid var(--line-2); color: var(--text); font-size: 12px; font-weight: 600; }
.d-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-who small { display: block; font-size: 12px; line-height: 1.2; color: var(--text-3); }

/* fields */
.d-fld { display: flex; flex-direction: column; gap: 6px; }
.d-fld label { font-size: 13px; color: var(--text-2); }
.d-labrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.d-field { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--d-field); color: var(--text); font: inherit; font-size: 15px; transition: border-color 0.12s, box-shadow 0.12s; }
.d-field::placeholder { color: var(--text-3); }
.d-field:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(var(--ice-rgb), 0.25); }
.d-field:-webkit-autofill, .d-field:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--d-field) inset; transition: background-color 9999s; }
.d-fld.bad .d-field { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.d-pw { position: relative; }
.d-pw .d-field { padding-right: 46px; }
.d-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); }
.d-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.d-cb { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.d-cb input { width: 16px; height: 16px; margin: 0; accent-color: var(--ice); }
.d-tlink { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-tlink:hover { color: var(--text); }
.d-back { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-back:hover { color: var(--text); }
.d-back svg.i { width: 14px; height: 14px; }
.d-err { margin: 0; text-align: left; font-size: 13.5px; color: var(--red); }
.d-tip { margin: 0; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--card-2); font-size: 13.5px; color: var(--text-2); }

/* choose a password */
.d-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.d-meter i { height: 4px; border-radius: 2px; background: var(--line-2); transition: background 0.2s; }
.d-meter[data-s="1"] i:nth-child(-n + 1) { background: var(--red); }
.d-meter[data-s="2"] i:nth-child(-n + 2) { background: var(--yellow); }
.d-meter[data-s="3"] i:nth-child(-n + 3) { background: var(--green); }
.d-meter[data-s="4"] i { background: var(--green); }
.d-mrow { display: flex; justify-content: space-between; margin-top: -4px; font-size: 12.5px; color: var(--text-3); }
.d-mrow b { font-weight: 500; color: var(--text-2); }
.d-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.d-checks li { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.d-checks li.met { color: var(--text); }
.d-c { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); }
.d-c svg.i { width: 10px; height: 10px; stroke-width: 2.4; opacity: 0; }
.d-checks li.met .d-c { background: var(--green); border-color: var(--green); color: #fff; }
.d-checks li.met .d-c svg.i { opacity: 1; }

/* compact variant: mono host line, the sign-in card's links and the invitation-link box */
.door.compact::after { display: none; }
.door.compact::before { height: 520px; background: radial-gradient(560px 300px at 50% -80px, var(--d-spot), transparent 70%); }
.d-chip { padding: 4px 6px; border-radius: 5px; border: 1px solid rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.08); color: var(--ice-text); font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.door h1.d-h-sm { margin: 18px 0 4px; font-size: 22px; }
.d-mono { max-width: none; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.02em; margin-bottom: 22px; }
.d-links { margin-top: 8px; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 22px; }
.d-tlink2 { min-height: 36px; padding: 4px 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-tlink2:hover, .d-tlink2[aria-expanded="true"] { color: var(--text); }
.d-tlink2:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.d-disc { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.d-disc-row { display: flex; gap: 8px; }
.d-disc-row .d-field { flex: 1; min-width: 0; }
.d-disc-row .d-big { width: auto; flex: none; }

/* more kinds of field: two side by side, mono, text box, hints */
.d-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.d-fld label em { font-style: normal; color: var(--text-3); }
.d-field.mono { font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.01em; }
textarea.d-field { display: block; min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.d-hint { margin: 0; text-align: left; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.d-hint-row { margin-top: -4px; }
.d-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the remembered account inside the sign-in box, with "Not you?" */
.d-acct { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--d-field); }
.d-acct .d-who { font-size: 14.5px; font-weight: 500; }

/* sign-up: the welcome note from the link, keep-this-link, what you sent */
.d-welcome { width: 100%; margin: 0 0 12px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.d-welcome .d-label { margin-bottom: 7px; }
.d-welcome p:last-child { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-p { margin: 0; text-align: left; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.d-p b { color: var(--text); font-weight: 500; }
.d-code { display: block; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--d-field); font: 12.5px/1.45 var(--mono); overflow-wrap: anywhere; color: var(--text); user-select: all; }
.d-btnrow { display: flex; gap: 8px; }
.d-btnrow .d-big { flex: 1; min-width: 0; padding: 0 12px; }
a.d-big { text-decoration: none; }
.d-big.ghost { min-height: 38px; background: transparent; border-color: transparent; color: var(--text-2); }
.d-big.ghost:hover { color: var(--text); border-color: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.d-small { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.d-facts { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.d-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; min-width: 0; }
.d-facts > div + div { border-top: 1px solid var(--line); }
.d-facts dt { color: var(--text-3); }
.d-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.d-quote { width: 100%; margin: 0; padding: 12px 14px; text-align: left; border-left: 3px solid var(--line-2); border-radius: 0 10px 10px 0; background: var(--card-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-err-top { width: 100%; margin-bottom: 12px; }
.d-big:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }

/* small phones (320 to 360 px): long buttons stay on one line */
@media (max-width: 420px) { .d-mono { white-space: nowrap; font-size: min(13.5px, 3.6vw); letter-spacing: 0; } }
@media (max-width: 360px) { .d-big { font-size: 13.5px; padding: 0 10px; gap: 6px; } .d-panel { padding: 12px; } }
@media (max-width: 640px) {
  .d-row { grid-template-columns: minmax(0, 1fr); }
  .door h1 { margin-top: 18px; font-size: 22px; }
  .d-sub { margin-bottom: 20px; }
  .d-panel { padding: 14px; }
  .d-k { display: none; }
  /* 16px or iOS zooms in on focus; tap targets of 44px or more, without moving the layout */
  .d-field, .d-field.mono { font-size: 16px; min-height: 46px; }
  .d-tlink { min-height: 32px; }
  .d-tlink, .d-tlink2 { position: relative; }
  .d-tlink::after, .d-tlink2::after { content: ""; position: absolute; inset: -8px -6px; }
  .d-eye { width: 44px; height: 44px; right: 1px; }
  .d-cb { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .d-big, .d-field, .d-meter i { transition: none; } }

/* Attachments: files waiting to send, files in messages, the large picture view, the drop target. */
.att-pending, .att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
.att-pending { padding: 10px 10px 0; }
.att-list { margin-top: 8px; }
.att-chip { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; width: 260px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); padding: 6px 4px 6px 8px; }
.att-chip.gone { opacity: 0.6; }
.att-chip.gone .att-name { text-decoration: line-through; }
.att-chip.bad { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.att-ext { flex: none; width: 38px; height: 38px; border-radius: 7px; background: var(--raise); color: var(--text-2); font: 600 10.5px var(--mono); display: grid; place-items: center; letter-spacing: 0.02em; overflow: hidden; }
.att-mini { flex: none; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; background: var(--raise); }
.att-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip.bad .att-sub { color: var(--red); white-space: normal; }
.att-prog { height: 3px; border-radius: 99px; background: var(--raise); overflow: hidden; margin-top: 3px; }
.att-prog i { display: block; height: 100%; background: var(--peri); transition: width 0.2s; }
.att-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; }
.att-x:hover { background: var(--raise); color: var(--text); }
.att-pic button { display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card-2); cursor: zoom-in; }
.att-pic img { display: block; max-width: min(260px, 70vw); max-height: 200px; object-fit: cover; }
.att-wait { font-size: 12.5px; }
.att-btn { flex: none; }
.composer .foot .att-btn { margin-left: -4px; }
.att-drop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 2px dashed var(--peri); pointer-events: none; }
.att-drop span { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 18px; }
.att-dialog { padding: 0; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--text); max-width: min(96vw, 1100px); max-height: 92vh; width: max-content; overflow: hidden; }
.att-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.att-dialog-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.att-dialog-bar .att-name { font-weight: 600; }
.att-dialog img { display: block; max-width: min(96vw, 1100px); max-height: calc(92vh - 60px); margin: 0 auto; object-fit: contain; }
.m-files { margin: 8px 0 0; font-size: 13px; }
.m-reply .att-pending { padding: 0 0 8px; }

@media (max-width: 760px) {
  .att-chip { width: 100%; }
  .att-pic img { max-width: 70vw; max-height: 180px; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .att-x { width: 44px; height: 44px; }
  .att-pic button { min-height: 44px; min-width: 44px; }
}

/* ---------- Files page (customer/files.jsx): a grid of previews. Here, not in customer/, because an
   operator's View as customer shows it in the employee app too. ---------- */
.top.fl-top { width: 100%; max-width: 1040px; margin-inline: auto; }
.content.fl-page { width: 100%; max-width: 1040px; margin-inline: auto; gap: 16px; }
.fl-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.fl-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.fl-hero p { margin: 6px 0 0; max-width: 64ch; line-height: 1.55; }
.fl-meter { display: flex; flex-direction: column; gap: 6px; min-width: 220px; font-size: 12.5px; color: var(--text-2); }
.fl-meter b { color: var(--text); font-weight: 600; }
.fl-meter .pj-bar i { background: var(--peri); }
.fl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-search { position: relative; flex: 1 1 240px; min-width: 0; }
.fl-search .field { width: 100%; padding-left: 34px; }
.fl-search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.fl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--card-2); }
.fl-seg button { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 8px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.fl-seg button:hover { color: var(--text); }
.fl-seg button.on { background: var(--raise); color: var(--text); }
.fl-seg button i { font-style: normal; color: var(--text-3); margin-left: 5px; font-size: 12px; }
.fl-empty { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.fl-empty p { margin: 0; }

.fl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.fl-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; min-width: 0; }
.fl-card:hover { border-color: var(--line-2); }
.fl-open { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.fl-open:focus-visible { outline: 2px solid var(--peri); outline-offset: -2px; border-radius: inherit; }
.fl-prev { height: 128px; background: var(--card-2); border-bottom: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; position: relative; }
.fl-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-big { font: 600 15px var(--mono); padding: 10px 12px; border-radius: 10px; background: var(--raise); color: var(--text-2); letter-spacing: 0.04em; position: relative; }
.fl-big.t-pdf { color: #FF8B6B; }
.fl-big.t-sheet { color: var(--green); }
.fl-big.t-text, .fl-big.t-doc { color: var(--peri); }
.fl-lines { position: absolute; inset: 14px 16px auto; display: flex; flex-direction: column; gap: 6px; opacity: 0.55; }
.fl-lines i { display: block; height: 5px; border-radius: 3px; background: var(--line-2); }
.fl-tag { position: absolute; left: 8px; bottom: 8px; font-size: 11px; padding: 3px 7px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--peri); border: 1px solid var(--line); }
.fl-cb { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 2px; min-width: 0; }
.fl-cb b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-cb .att-sub { font-size: 12px; }
.fl-foot { display: flex; align-items: center; gap: 4px; padding: 2px 6px 6px 12px; min-width: 0; }
.fl-conv { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); text-decoration: none; min-height: 32px; }
.fl-conv:hover { color: var(--text); }
.fl-conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-conv .i { flex: none; color: var(--text-3); }
.fl-ib { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.fl-ib:hover { background: var(--raise); color: var(--red); }

@media (max-width: 760px) {
  .fl-hero { align-items: stretch; }
  .fl-meter { min-width: 0; width: 100%; }
  .fl-seg { width: 100%; }
  .fl-seg button { flex: 1; }
  .fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fl-prev { height: 96px; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .fl-seg button { min-height: 44px; }
  .fl-conv { min-height: 44px; }
  .fl-ib { width: 44px; height: 44px; }
  .fl-search .field { font-size: 16px; }
}

/* Home at "/" in both portals (customer/home.jsx, employee/home.jsx) and the soft hand-off from the
   sign-in page to it (common/landing.js puts html.landing on for the moment of the switch). */
html.landing .door.px > .px-field, html.landing .door.px > .px-c, html.landing .door.px > .d-fine { opacity: 0; transition: opacity 0.18s ease-in; }
html.landing .door.px > .px-main { opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.18s ease-in, transform 0.18s ease-in; }
html.landing .app { animation: hm-land 0.32s ease-out both; }
@keyframes hm-land {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.landing .door.px > * { transition: none; }
  html.landing .app { animation: none; }
}

/* Home fills the window: the greeting (and its cards) at the top, .hm-end (the list, then the message
   box) at the foot. The box is the conversation page's dock (css/chat-dock.css), so when Home is taller
   than the window (small phones, phones on their side) it stays at the bottom and the rest scrolls under
   it; its 14 px fade sits inside the gap above it. .hm-end only groups the foot in the markup: as
   display: contents the box can stick anywhere on the page, not only inside the group. */
.content.hm { flex: 1 1 auto; padding-top: 0; padding-bottom: 16px; }
.hm-wrap { flex: 1 1 auto; width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; padding: 44px 0 0; }
.hm-end { display: contents; }
.hm-hi h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hm-hi p { margin: 6px 0 0; color: var(--text-2); }
.hm .composer-dock { margin-top: -14px; }
.hm-end > :first-child { margin-top: auto; }
/* A phone on its side has no room to hold the box over the page (the staff box alone is most of the
   screen there): it just comes last. */
@media (max-height: 500px) {
  .hm .composer-dock { position: static; }
}
.hm-lab { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hm-lab svg { color: var(--text-3); }
.hm-more { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; }
.hm-more:hover { color: var(--text); }
.hm-list { padding: 4px; display: flex; flex-direction: column; }
.hm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.hm-row:hover { background: var(--card-2); }
.hm-row > svg { color: var(--text-3); flex: none; }
.hm-row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row .n { flex: none; font-size: 12.5px; color: var(--text-3); }
.hm-row .n.on { font-size: 13px; font-weight: 600; color: var(--text-2); }
.hm-row .reply-dot { margin-left: 0; }
.hm-new { flex: none; font-size: 12px; font-weight: 600; color: var(--green-text); }
.hm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hm-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; color: var(--text); text-decoration: none; }
.hm-card:hover { background: var(--card-2); }
.hm-card .hm-lab { margin: 0 0 4px; }
.hm-card b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-card span { font-size: 13px; color: var(--text-3); }
.hm-row:focus-visible, .hm-card:focus-visible, .hm-more:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }

@media (max-width: 760px) {
  /* The phone bar already names the page. */
  .top:has(+ .content.hm) { display: none; }
  /* The box sits where a conversation's does on a phone: the dock's own 12 px over the home bar. */
  .content.hm { padding-bottom: 0; }
  .hm-wrap { gap: 22px; padding: 22px 0 0; }
  .hm-hi h1 { font-size: 25px; }
  .hm-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- token meter (Ember): one mono line under the message box, and the month used up ---------- */
.em { display: flex; align-items: center; gap: 7px; min-height: 18px; padding: 0 6px; font: 12px/1.2 var(--mono); color: var(--text-3); white-space: nowrap; }
.em-bar { color: var(--text-3); letter-spacing: 0.02em; }
.em-bar i { font-style: normal; display: inline-block; width: 0.62em; text-align: center; opacity: 0.55; }
.em-bar i.f, .em-bar i.p, .em-bar i.e { opacity: 1; }
.em-bar i.f { color: #B9CCE3; }
.em-bar i.p, .em-bar i.e { color: #E2A660; }
.em-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.em-pct { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.em-sep { color: var(--line-2); margin: 0 6px; }
.em-r b, .em-live b { color: var(--text-2); font-weight: 600; }
.em-live { color: #E2A660; font-variant-numeric: tabular-nums; }
.em.warn .em-bar i.f, .em.warn .em-pct, .em.stop .em-bar i.f, .em.stop .em-pct, .em.warn .em-r { color: var(--yellow); }
/* Running out at this pace: the line is a link to Usage and plan. */
a.em-go { color: var(--text-3); text-decoration: none; border-radius: 8px; }
a.em-go:hover .em-r, a.em-go:focus-visible .em-r { text-decoration: underline; text-underline-offset: 3px; }
a.em-go:focus-visible { outline: 2px solid var(--peri); outline-offset: 1px; }
.em.extra .em-bar i.f { color: var(--peri); }
.light .em-bar i.f, .cust-light .em-bar i.f { color: #4E6A8C; }
.light .em-bar i.p, .light .em-bar i.e, .light .em-live, .cust-light .em-bar i.p, .cust-light .em-bar i.e, .cust-light .em-live { color: #A86A1E; }
.em-short { display: none; }
.cl-limit.tm-limit { margin-top: 0; max-width: none; border-color: rgba(242, 201, 76, 0.4); }
.light .cl-limit.tm-limit, .cust-light .cl-limit.tm-limit { border-color: rgba(183, 134, 11, 0.45); }
@media (max-width: 760px) {
  .em-of, .em-long { display: none; }
  .em-short { display: inline; }
}
@media (max-width: 360px) { .em-sep, .em-r { display: none; } }
/* In the message box (customers): right of the paperclip, on the same row as Send. Phones keep it
   to one row: while writing the bar and the count; used up, the box already says "Paused until". */
.composer .foot > .em { flex: 0 1 auto; min-width: 0; min-height: 36px; padding: 0 2px 0 6px; overflow: hidden; }
.composer .foot > .em .grow { display: none; }
.composer .foot > .em .em-live { margin-left: 8px; }
@media (max-width: 400px) {
  .composer .foot > .em.writing .em-pct, .composer .foot > .em.writing .em-sep, .composer .foot > .em.writing .em-r { display: none; }
  .composer .foot > .em.stop .em-sep, .composer .foot > .em.stop .em-r { display: none; }
  .composer .foot > .em.extra .em-pct, .composer .foot > .em.extra .em-sep, .composer .foot > .em.extra .em-bar { display: none; }
}
/* Running out: the bar and when (≤400), then the share and when (≤360), so the row stays one row. */
@media (max-width: 400px) {
  .composer .foot > .em.warn:not(.writing) .em-pct, .composer .foot > .em.warn:not(.writing) .em-sep { display: none; }
}
@media (max-width: 360px) {
  .composer .foot > .em.warn:not(.writing) .em-bar { display: none; }
  .composer .foot > .em.warn:not(.writing) .em-pct, .composer .foot > .em.warn:not(.writing) .em-sep, .composer .foot > .em.warn:not(.writing) .em-r { display: inline; }
}
@media (max-width: 340px) {
  .composer .foot > .em.writing .em-bar { display: none; }
  .composer .foot > .em.writing .em-pct { display: inline; }
  .composer .foot > .em.extra .em-r { display: inline; }
}
/* Phones: Stop is a square icon button, so the row keeps the meter and Send. */
@media (max-width: 400px) {
  .composer .foot .btn.stop-sq { width: 44px; padding: 0; justify-content: center; }
  .composer .foot .btn.stop-sq .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Usage and plan (customers, customer/plan.css) and Plans and billing (staff) share these ---------- */
.bl-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.bl-h { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.bl-plan { display: flex; flex-direction: column; gap: 14px; }
.bl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bl-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-facts span { font-size: 12.5px; color: var(--text-3); }
.bl-facts b { font-size: 14px; font-weight: 600; }
.bl-empty { margin: 8px 0 0; font-size: 13.5px; }
/* a switch is a button: on = green with the knob right */
.bl-switch { position: relative; flex: none; width: 44px; height: 26px; padding: 0; border-radius: 999px; background: var(--raise); border: 1px solid var(--line-2); cursor: pointer; }
.bl-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: left 0.15s; }
.bl-switch.on { background: var(--green); border-color: transparent; }
.bl-switch.on i { left: 21px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .bl-switch i { transition: none; } }
@media (max-width: 760px) {
  .bl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px), (pointer: coarse) {
  .bl-switch { width: 52px; height: 32px; }
  .bl-switch i { width: 24px; height: 24px; }
  .bl-switch.on i { left: 23px; }
}

/* ---------- pop-ups with tabs down the side (common/modal.jsx): Settings ----------
   Claude-style: plain tabs on the left, one title per tab, sections laid flat with hairlines.
   Phones: the whole screen, title and × on top, the tabs as a row of pills that scrolls sideways.
   Desktop: up to 1150×825 (25% larger than the first 920×660). The staff Tools page's Day view uses tday-*, not td-*. */
html.modal-open { overflow: hidden; }
.td { padding: 0; margin: auto; width: min(1150px, calc(100vw - 48px)); height: min(825px, calc(100vh - 48px)); height: min(825px, calc(100dvh - 48px)); max-width: none; max-height: none;
  background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.td.td-sm { width: min(800px, calc(100vw - 48px)); height: min(700px, calc(100vh - 48px)); height: min(700px, calc(100dvh - 48px)); }
.td[open] { display: grid; grid-template-columns: 212px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.td:focus, .td:focus-visible { outline: none; }
.td::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .td::backdrop, .cust-light .td::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .td, .cust-light .td { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.td-x { position: absolute; top: 12px; right: 12px; z-index: 2; border-color: transparent; }
.td-x:hover { background: var(--raise); color: var(--text); }
.td-nav { display: flex; flex-direction: column; padding: 22px 12px 16px; min-height: 0; overflow-y: auto; }
.td-nav h2 { margin: 0 10px 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.td-tabs { display: flex; flex-direction: column; gap: 2px; }
.td-tab { font: inherit; font-size: 14.5px; color: var(--text-2); background: transparent; border: 0; border-radius: 8px; min-height: 36px; padding: 0 10px; text-align: left;
  display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.td-tab:hover { color: var(--text); background: var(--card-2); }
.td-tab[aria-selected="true"] { background: var(--raise); color: var(--text); font-weight: 500; }
.td-tab:focus-visible { outline: 2px solid var(--line-2); outline-offset: 1px; }
.td-tab .count { margin-left: auto; font-size: 12px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; }
.td-tab[aria-selected="true"] .count { background: var(--card-2); }
.td-tab .reply-dot { margin-left: 0; }
.td-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); }
.td-head { display: flex; align-items: center; min-height: 60px; padding: 14px 60px 6px 28px; flex: none; }
.td-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.td-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 28px; }
.td-pane[hidden] { display: none; }
.td-intro { margin: 2px 0 16px; font-size: 14px; line-height: 1.55; max-width: 62ch; }
.td-preview { margin: 0 0 14px; font-size: 13.5px; }

/* the Settings sections, flattened: no card, no icon tile, a hairline between them */
.td .set-sec { background: none; border: 0; border-radius: 0; padding: 20px 0; border-top: 1px solid var(--line); gap: 14px; }
.td .td-pane > .set-sec:first-child { border-top: 0; padding-top: 6px; }
.td .set-ic { display: none; }
.td .set-h h2 { font-size: 15px; }
.td .set-h p { font-size: 13.5px; }
.td .theme-opt { background: var(--side); }
.light .td .theme-opt, .cust-light .td .theme-opt { background: var(--card-2); }
/* rows: words on the left, the control on the right */
.td-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.td-row:first-child { border-top: 0; padding-top: 4px; }
.td-row > div { flex: 1 1 auto; min-width: 0; }
.td-row b { font-weight: 600; font-size: 14.5px; }
.td-row p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.td-row .btn { flex: none; }
.td-bar { height: 6px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.td-bar i { display: block; height: 100%; min-width: 4px; max-width: 100%; background: var(--green); border-radius: 99px; }
.td-bar.full i { background: var(--yellow); }
/* "Discard this report?" pinned under the form */
.td-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); flex: none; }
.td-ask > span { flex: 1 1 auto; min-width: 0; font-size: 14px; }

/* phones: the whole screen; title + close on top, the tabs scroll sideways under it */
@media (max-width: 760px) {
  .td, .td.td-sm { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .td[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .td-x { top: max(8px, env(safe-area-inset-top)); right: 8px; width: 44px; height: 44px; }
  .td-nav { padding: max(14px, env(safe-area-inset-top)) 0 0; overflow: visible; border-bottom: 1px solid var(--line); }
  .td-nav h2 { margin: 0 64px 10px 18px; font-size: 19px; line-height: 32px; }
  .td-tabs { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 14px 12px; scroll-padding: 0 14px; }
  .td-tabs::-webkit-scrollbar { display: none; }
  .td-tab { flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; }
  .td-tab[aria-selected="true"] { border-color: transparent; }
  .td-tab .count { margin-left: 2px; }
  .td-main { border-left: 0; }
  .td-head { display: none; }
  .td-body { padding: 16px 16px max(28px, env(safe-area-inset-bottom)); }
  .td-row { flex-wrap: wrap; }
  .td-row .btn { width: 100%; justify-content: center; min-height: 44px; }
  .td-ask { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .td-ask .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .td-ask > span { flex-basis: 100%; }
}
/* a phone on its side: the whole screen, tabs stay on the left */
@media (max-height: 500px) and (min-width: 761px) {
  .td, .td.td-sm { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .td[open] { grid-template-columns: 190px minmax(0, 1fr); }
  .td-nav { padding-top: 14px; }
  .td-head { min-height: 52px; padding-top: 8px; }
}
@media (pointer: coarse) { .td-tab { min-height: 44px; } .td-x { width: 44px; height: 44px; } }

/* The pixel page every door sits on (common/pixels.js draws it): the name and version in the top corners,
   the words and the status with the mark, the see-through sign-in card, and the "show" state where only
   the pixels and the mark are up. Loaded after door.css. */
.door.px::before, .door.px::after { display: none; }
.door.px > .px-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.door.px > .px-c { position: absolute; z-index: 1; transition: opacity 0.35s; }
.door.px > .px-main { position: relative; z-index: 2; }
.door.px > a.px-name { z-index: 3; }
.px-tl { top: 24px; left: 28px; top: max(24px, env(safe-area-inset-top)); }
/* the version sits on the name's middle line, with the same gutter */
.px-tr { top: 36px; right: 28px; top: max(36px, env(safe-area-inset-top)); }
.px-name { display: inline-flex; align-items: center; gap: 10px; font-size: 40px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.px-name .d-chip { font-size: 10px; letter-spacing: 0.1em; }
a.px-name { margin: -6px -8px; padding: 6px 8px; color: inherit; text-decoration: none; border-radius: 8px; transition: opacity 0.15s; }
a.px-name:hover { opacity: 0.75; }
a.px-name:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 4px; }
.px-no { font: 500 15px var(--mono); color: var(--text-2); }
/* the hint and the status; pixels.js sets --px-mark-t/-b/-l/-r to where the mark ended up, and reads
   --px-room (space kept under the mark) and --px-shift (the mark's offset from the middle) */
.door.px[data-state="show"] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.px-tap { margin: 0; color: var(--text-3); }
.px-stat { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.px-stat > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.px-stat b { font-weight: 600; color: var(--text-2); }
.px-stat b.err { color: var(--red); }
.px[data-state="in"] .px-under, .px[data-state="in"] .px-foot { opacity: 0; }
/* the hint centred under the mark, the status at the foot of the page */
.door.px { --px-room: 110px; }
.door.px > .px-under { top: calc(var(--px-mark-b, 60%) + 24px); left: 24px; right: 24px; text-align: center; }
.door.px > .px-foot { left: 24px; right: 24px; bottom: max(26px, env(safe-area-inset-bottom)); }
.px-tap { font-size: 11px; }
/* short windows (a phone held sideways): a little less room under the mark */
@media (min-width: 641px) and (max-height: 520px) { .door.px { --px-room: 90px; } }

.px-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 100px 20px; }
.px-stage { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
/* hidden as well as faded once it has faded, so saved-password prompts don't find a field */
.px[data-state="show"] .px-stage { opacity: 0; transform: translateY(24px) scale(0.97); pointer-events: none; visibility: hidden; transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s; }
.px[data-state="show"] { cursor: pointer; }
.px-card { width: 400px; max-width: 100%; display: flex; flex-direction: column; padding: 30px 28px 22px; text-align: left; border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--d-shadow); }
.px-card h1.d-h-sm { margin: 0 0 4px; }
.px-card .d-mono { margin-bottom: 22px; }
.px-fields { display: flex; flex-direction: column; gap: 12px; }
.px-card .d-disc .d-hint { text-align: left; }
/* the sign-in card: centred, the remembered account on top, the password box carries its own arrow */
.px-card.si { align-items: center; text-align: center; padding: 34px 28px 20px; }
.si-top { width: 100%; text-align: left; }
.si-av { width: 52px; height: 52px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: rgba(var(--ice-rgb), 0.14); border: 1px solid rgba(var(--ice-rgb), 0.38); color: var(--ice-text); font-size: 21px; font-weight: 600; }
.px-card.si h1.d-h-sm { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-sub { margin: 6px 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text-2); }
.si-sub .d-tlink { font-size: 14px; color: var(--ice-text); }
.si-sub .d-tlink:hover { color: var(--text); }
.si .px-fields { width: 100%; margin-top: 22px; gap: 10px; text-align: left; }
/* the boxes say what they're for; the labels stay for screen readers */
.si .d-labrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.si .d-field { min-height: 48px; border-radius: 12px; }
.si-go { position: relative; }
.si-go .d-pw .d-field { padding-right: 92px; }
.si-go .d-eye { right: 48px; }
.si-arrow { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ice); color: var(--on-ice); box-shadow: 0 3px 10px rgba(var(--ice-rgb), var(--d-glow)); transition: background 0.12s; }
.si-arrow:hover { background: var(--ice-hover); }
.si-arrow:disabled { background: var(--card-2); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); cursor: not-allowed; }
.si-arrow:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.si-arrow svg.i { width: 16px; height: 16px; stroke-width: 2; }
.si-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.si-row .d-tlink { font-size: 13.5px; }
.si-rule { width: 100%; height: 1px; margin: 18px 0 2px; background: var(--line); }
.px-fine { margin: 18px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.px-fine svg.i { width: 13px; height: 13px; }

/* every other door page (sign-up, its status page, invitations, resets) in the same card as the sign-in */
.px-step { margin: 0 0 10px; font: 600 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.px-card .d-mono .dot { margin-right: 8px; vertical-align: 1px; }
/* the host line breaks before its tag, never inside either; a little smaller on phones so it fits on one line at 375 px */
.px-card .d-mono { white-space: normal; }
.px-card .d-mono > span { white-space: nowrap; }
@media (max-width: 420px) { .px-card .d-mono { font-size: min(13px, 3.4vw); } }
.px-text { margin: -8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.px-text b { color: var(--text); font-weight: 500; }
.px-card .d-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.px-card .d-acct + .d-panel { margin-top: 14px; }
.px-card .d-quote { margin-bottom: 4px; }
.px-card .d-tip { font-size: 13px; }
.px-card .d-row { grid-template-columns: minmax(0, 1fr); }

/* a newer version is out: a small bar at the top */
.door.px > .px-newer { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 6px 6px 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--d-shadow); font-size: 13px; color: var(--text-2); white-space: nowrap; }

@media (max-width: 640px) {
  .px-tl { top: max(16px, env(safe-area-inset-top)); left: 18px; }
  .px-tr { top: max(22px, env(safe-area-inset-top)); right: 18px; }
  .px-name { font-size: 28px; }
  .px-no { font-size: 12px; }
  .door.px > .px-under { top: calc(var(--px-mark-b, 60%) + 22px); left: 16px; right: 16px; }
  .door.px > .px-foot { left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .px-tap { font-size: 10.5px; }
  .px-stat { gap: 4px 14px; font-size: 10.5px; }
  .px-main { align-items: flex-start; padding: 66px 16px 80px; }
  .px-stage { width: 100%; }
  .px-card { width: 100%; padding: 22px 16px 16px; }
  .px-card.si { padding: 26px 16px 14px; }
  .si .d-field { min-height: 52px; }
  .si-go .d-pw .d-field { padding-right: 100px; }
  .si-go .d-eye { right: 52px; }
  .si-arrow { width: 40px; height: 40px; }
  .si-arrow::after { content: ""; position: absolute; inset: -4px; }
  .door.px > .px-newer { font-size: 12.5px; }
}
/* landscape phones and tablets: the sign-in card's small links get phone-sized taps too */
@media (pointer: coarse) {
  .si .d-tlink2, .si .d-cb { min-height: 44px; }
  .si-row .d-tlink, .si-sub .d-tlink { position: relative; }
  .si-row .d-tlink::after, .si-sub .d-tlink::after { content: ""; position: absolute; inset: -12px -6px; }
}
@media (prefers-reduced-motion: reduce) { .px-stage { transition: none; } }

/* ---------- your profile (both portals): avatar colours, Settings ---------- */
.av.tint { color: hsl(var(--hue) 70% 84%); background: hsl(var(--hue) 30% 26%); box-shadow: inset 0 0 0 1px hsl(var(--hue) 30% 34%); }
.light .av.tint, .cust-light .av.tint { color: hsl(var(--hue) 55% 28%); background: hsl(var(--hue) 62% 90%); box-shadow: inset 0 0 0 1px hsl(var(--hue) 40% 80%); }

.me .who > span, .me .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.av.pf-big { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }

/* The form in Settings. */
.pf-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-sec .pf-form { max-width: 560px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pf-field .field { width: 100%; }
.pf-field .field[aria-invalid="true"] { border-color: var(--red); }
.pf-h { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.pf-colors { display: grid; grid-template-columns: repeat(9, 32px); gap: 6px; }
.pf-sw { padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; line-height: 0; }
.pf-sw .av { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.pf-sw:hover .av { filter: brightness(1.12); }
.pf-sw.on { outline: 2px solid var(--text); outline-offset: 2px; }
.pf-sw:focus-visible { outline: 2px solid var(--line-2); outline-offset: 2px; }
.pf-sw.on:focus-visible { outline-color: var(--text); }
.pf-sign { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.pf-sign svg { flex: none; color: var(--text-3); }
.pf-sign b { color: var(--text); font-weight: 600; }
.pf-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-acts .btn:disabled { opacity: 0.5; cursor: default; }
.pf-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--green-text); }
.pf-form .err { margin: 0; }

/* ---------- answers per day, a year at a time (GitHub-style grid) ---------- */
:root { --yg0: #2A2A2F; --yg1: #1E4630; --yg2: #2A7347; --yg3: #3FA466; --yg4: #5BD08A; }
.light, .cust-light { --yg0: #E7E7EB; --yg1: #C2EACF; --yg2: #8BD6A6; --yg3: #47B873; --yg4: #24914F; }
.yg-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.yg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.yg-head b { font-size: 15px; font-weight: 600; }
.yg-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-3); }
.yg-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2.5px; }
.yg-legend i:first-child { margin-left: 4px; }
.yg-legend i:last-child { margin-right: 4px; }
.yg-body { display: flex; align-items: flex-start; min-width: 0; }
.yg-days { flex: none; display: block; }
.yg-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: thin; }
.yg { display: block; max-width: none; cursor: pointer; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
.yg-lbl { fill: var(--text-3); font-size: 10px; font-family: inherit; }
.yg rect.yg-c, .yg-legend i.l0 { fill: var(--yg0); background: var(--yg0); }
.yg rect.l1, .yg-legend i.l1 { fill: var(--yg1); background: var(--yg1); }
.yg rect.l2, .yg-legend i.l2 { fill: var(--yg2); background: var(--yg2); }
.yg rect.l3, .yg-legend i.l3 { fill: var(--yg3); background: var(--yg3); }
.yg rect.l4, .yg-legend i.l4 { fill: var(--yg4); background: var(--yg4); }
.yg rect.on { stroke: var(--text); stroke-width: 1.5; }
.yg-wrap .yg-pick { margin: 0; min-height: 20px; font-size: 13.5px; color: var(--text-2); }
.yg-pick b { color: var(--text); font-weight: 600; }
.yg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
.yg-stats > div { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.light .yg-stats > div, .cust-light .yg-stats > div { background: var(--bg); }
.yg-stats dt { font-size: 12px; color: var(--text-3); }
.yg-stats dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yg-stats dd small { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); }
.yg-wrap .yg-empty { margin: 0; font-size: 13.5px; }

/* The Usage page and the Usage section in Settings. */
.ug-page { max-width: 920px; gap: 18px; }
.ug-intro h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.ug-intro p { margin: 6px 0 0; max-width: 66ch; line-height: 1.55; }
.ug-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.set-sec .ug-open { align-self: flex-start; }

@media (max-width: 760px) {
  .pf-field .field { font-size: 16px; min-height: 44px; }
  .pf-colors { grid-template-columns: repeat(5, 48px); gap: 10px; }
  .pf-sw .av { width: 48px; height: 44px; border-radius: 11px; font-size: 15px; }
  .pf-acts .btn { min-height: 44px; padding: 0 18px; }
  .yg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ug-card { padding: 16px 14px; }
  .ug-intro h1 { font-size: 22px; }
}
@media (pointer: coarse) {
  button.me-id { min-height: 44px; }
}

/* Projects: list, holdups, map, outline, people; and the unit-checked calculation card. */
.pj-page { max-width: 1280px; gap: 16px; }
.pj-intro h1, .pj-head h1, .pj-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.pj-intro p, .pj-head p, .pj-hero p { margin: 6px 0 0; max-width: 72ch; line-height: 1.55; }
.pj-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pj-row > label { font-size: 14px; color: var(--text-2); }
.pj-new { display: flex; flex-direction: column; gap: 8px; }
.pj-new label { font-weight: 600; }
.pj-new .field { flex: 1 1 260px; min-width: 0; }

.pj-starters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pj-starter { font: inherit; text-align: left; color: inherit; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-height: 118px; cursor: pointer; }
.pj-starter:hover { border-color: var(--line-2); }
.pj-starter:disabled { opacity: 0.6; cursor: default; }
.pj-starter-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--raise); display: grid; place-items: center; color: var(--text-2); }
.pj-starter b { font-size: 14px; font-weight: 600; }
.pj-starter span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.pj-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; align-items: stretch; }
.pj-mcp { display: flex; flex-direction: column; gap: 12px; }
.pj-mcp h2 { margin: 0; font-size: 16px; font-weight: 600; }
.pj-mcp.compact { gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pj-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-tool { font: 12px var(--mono); padding: 4px 8px; border-radius: 7px; background: var(--side); border: 1px solid var(--line); color: var(--text); }
.pj-tool.chg { color: var(--yellow); border-color: rgba(242, 201, 76, 0.28); }
.pj-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pj-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.pj-num { width: 22px; height: 22px; border-radius: 50%; background: var(--raise); color: var(--text); display: grid; place-items: center; font-size: 11px; font-weight: 650; }
.pj-conn { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.pj-dotok { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.16); flex: none; }
.pj-snip { margin: 0; padding: 10px 12px; font: 11.5px/1.5 var(--mono); color: var(--text-2); background: var(--side); border: 1px solid var(--line); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pj-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-tabs button { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 34px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--text-2); border: 1px solid transparent; }
.pj-tabs button.on { background: var(--raise); color: var(--text); }
.pj-tabs button.narrow { display: none; }
.pj-cols { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.pj-cols.with-tools { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 300px); }
.pj-toolshed { display: flex; flex-direction: column; gap: 10px; }
.pj-trow { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.pj-trow > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-trow code { font: 12.5px var(--mono); color: var(--text); }
.pj-trow p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.pj-ask { display: flex; flex-direction: column; gap: 8px; }
.pj-ask-box { min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.45; }

.pj-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pj-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; color: inherit; text-decoration: none; min-height: 44px; }
.pj-item:hover { border-color: var(--line-2); }
.pj-item-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-item-h b { font-size: 15.5px; overflow-wrap: anywhere; }
.pj-item-f { font-size: 13px; }
.pj-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--raise); }
.pj-bar i { display: block; min-width: 4px; }

/* Status colours, shared by pills, the bar, the key and the map's legend. */
.pj-st.done, .k.done, .pj-bar .done { --c: var(--green); }
.pj-st.active, .k.active, .pj-bar .active { --c: var(--peri); }
.pj-st.blocked, .k.blocked, .pj-bar .blocked { --c: var(--red); }
.pj-st.todo, .k.todo, .pj-bar .todo { --c: var(--text-3); }
.pj-st.cancelled, .k.cancelled, .pj-bar .cancelled { --c: var(--line-2); }
.k.chain { --c: var(--yellow); }
.pj-bar i.pj-st { background: var(--c); }
.pill.pj-st { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text); }
.pill.pj-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); vertical-align: -1px; }
.k.chain { border-radius: 2px; height: 3px; width: 14px; vertical-align: 2px; }

.pj-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pj-hold { display: flex; flex-direction: column; gap: 12px; }
.pj-hold-g h3 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase; }
.pj-hold-g ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pj-hold-g li, .pj-hold-g p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.pj-counts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--text-2); }
.pj-counts span { display: inline-flex; align-items: center; gap: 6px; }
.pj-link { font: inherit; color: var(--text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pj-link:hover { text-decoration-color: var(--text-2); }
.pj-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pj-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 7px; padding: 2px 4px 2px 8px; font-size: 13.5px; }
.pj-chip button { font: inherit; color: var(--text-2); background: none; border: 0; cursor: pointer; min-width: 24px; min-height: 24px; }
.pj-chain { margin: 0; line-height: 1.7; }

.pj-mapcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pm-bar { display: flex; align-items: center; gap: 6px; }
.pm-stage { position: relative; width: 100%; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.pm-stage canvas { position: absolute; inset: 0; display: block; }
.pm-text { cursor: pointer; }
.pm-key { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.pm-key span { display: inline-flex; align-items: center; gap: 5px; }
.pj-sel { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pj-sel p { margin: 0; line-height: 1.5; }

.pj-outline, .pj-people { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pj-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pj-add .field.grow { flex: 1 1 240px; min-width: 0; }
.pj-hours { width: 84px; }
.pj-tree, .pj-tree ul { list-style: none; margin: 0; padding: 0; }
.pj-tree { border-top: 1px solid var(--line); overflow-x: auto; }
.pj-tree li.on > .pj-tr { background: var(--raise); }
.pj-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 8px; border-bottom: 1px solid var(--line); min-height: 44px; }
.pj-title { min-width: 120px; }
.pj-kind { font: 11.5px var(--mono); color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.pj-kind.goal { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.pj-kind.objective { color: var(--peri); border-color: color-mix(in srgb, var(--peri) 40%, transparent); }
.pj-wait { font-size: 13px; }
.pj-wait.held { color: var(--yellow); }
.pj-status { min-height: 30px; padding: 0 8px; }
.pj-acts { display: inline-flex; gap: 2px; }
.pj-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pj-members li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pj-roles { margin: 0; font-size: 13px; line-height: 1.5; }

.pj-calc { display: flex; flex-direction: column; gap: 4px; }
.pj-calc-v { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pj-calc-c { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }

@media (max-width: 1100px) {
  .pj-starters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-split { grid-template-columns: minmax(0, 1fr); }
  .pj-cols, .pj-cols.with-tools { grid-template-columns: minmax(0, 1fr); }
  .pj-cols > :not(.on) { display: none; }
  .pj-tabs button.narrow { display: inline-block; }
  .pj-tabs button.wide { display: none; }
}
@media (max-width: 900px) {
  .pj-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pj-starters { grid-template-columns: minmax(0, 1fr); }
  .pj-head > .pj-conn { display: none; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .pj-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pj-chip button { min-width: 44px; min-height: 44px; }
  .pj-status { min-height: 44px; }
  .pj-hours { width: 96px; }
  .pj-acts .btn { min-width: 44px; }
}

/* ---------- Report a problem (customer/feedback.jsx): your reports on the left, one report or the new
   one on the right. Phones: the whole screen, the list first, then a report with ‹ Reports.
   The thread pieces (.rp-steps, .rp-msg, .rp-reply, .rp-event, .rp-ctx) are shared with staff. ---------- */
.rp { padding: 0; margin: auto; max-width: none; max-height: none; background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.rp::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .rp::backdrop, .cust-light .rp::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .rp, .cust-light .rp { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.rp:focus, .rp:focus-visible { outline: none; }
.rp .icon-btn.rp-x { border-color: transparent; flex: none; }
.rp .icon-btn.rp-x:hover { background: var(--raise); color: var(--text); }
.rp2 { width: min(980px, calc(100vw - 48px)); height: min(700px, calc(100vh - 48px)); height: min(700px, calc(100dvh - 48px)); }
.rp2[open] { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.rp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* the list */
.rp-side { display: flex; flex-direction: column; min-height: 0; background: var(--side); border-right: 1px solid var(--line); }
.light .rp-side, .cust-light .rp-side { background: var(--card-2); }
.rp-side-h { padding: 20px 16px 12px 18px; flex: none; }
.rp-side-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.rp-side-h p { margin: 4px 0 14px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.rp-side .rp-x-list { display: none; }
.rp-new { width: 100%; justify-content: center; min-height: 38px; }
.rp-new.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent); }
.rp-lbl { font: 600 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 6px 18px; flex: none; display: flex; justify-content: space-between; }
.rp-side .rp-scroll { padding: 0 8px 12px; }
.rp-empty { margin: 6px 10px; font-size: 13.5px; line-height: 1.5; }
.rp-row { font: inherit; color: var(--text); width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 10px; cursor: pointer; }
.rp-row:hover { background: var(--card-2); }
.light .rp-row:hover, .cust-light .rp-row:hover { background: var(--card); }
.rp-row.on { background: var(--raise); }
.rp-row:focus-visible { outline: 2px solid var(--line-2); outline-offset: -2px; }
.rp-row > svg { margin-top: 3px; color: var(--red); }
.rp-row > svg:has(path[d^="M6 12.5"]) { color: var(--yellow); }
.rp-row b { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rp-meta { grid-column: 2; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.rp-meta .reply-dot { margin-left: auto; width: 8px; height: 8px; }

/* the right side: a header, what scrolls, what stays at the bottom */
.rp-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rp-mode, .rp-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
.rp-mode[hidden] { display: none; }
.rp-pane-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 14px 0 28px; flex: none; }
.rp-pane-h > div { flex: 1 1 auto; min-width: 0; }
.rp-pane-h h3 { margin: 4px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: anywhere; }
.rp-pane-h > div > h3:first-child { margin-top: 6px; }
.rp-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rp-pane .rp-scroll { padding: 18px 28px 24px; }
.rp-back { display: none; }
.rp-pick-one { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-3); }
.rp-pick-one p { margin: 0; max-width: 36ch; }

/* the new report: a big title, the words under it, the choices in one row of pickers */
.rp-compose { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.rp-preview { margin: 0 0 12px; font-size: 13.5px; }
.rp-big { font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); background: none; border: 0; padding: 0; outline: none; width: 100%; }
.rp-big::placeholder, .rp-plain::placeholder { color: var(--text-3); font-weight: 400; }
.rp-plain { font: inherit; font-size: 15px; line-height: 1.6; color: var(--text); background: none; border: 0; padding: 0; outline: none; width: 100%; resize: none; field-sizing: content; min-height: 4.8em; margin-top: 12px; overflow: hidden; display: block; }
.rp-plain.rp-line { min-height: 0; }
.rp-big:focus-visible, .rp-plain:focus-visible { outline: none; }
.rp-opt { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.rp-q { font-size: 13px; color: var(--text-2); }
.rp-q em { font-style: normal; color: var(--text-3); }
.rp-opt .rp-plain { min-height: 3.2em; margin-top: 6px; font-size: 14.5px; }
.rp-opt .rp-plain.rp-line { min-height: 0; }
.rp-compose .att-pending { margin-top: 12px; }
.rp-ctx { margin: 18px 0 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.rp-ctx svg { margin-top: 1.5px; }
.rp-ctx > span { min-width: 0; overflow-wrap: anywhere; }
.rp-link { font: inherit; font-size: 13px; color: var(--text-2); background: none; border: 0; padding: 0 2px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; vertical-align: middle; min-height: 28px; }
.rp-link:hover { color: var(--text); }
.rp-compose .err { margin: 12px 0 0; }
.rp-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px 12px 28px; border-top: 1px solid var(--line); }
.rp-pick { position: relative; font: inherit; font-size: 13.5px; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px; min-height: 32px; padding: 0 10px 0 11px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.light .rp-pick, .cust-light .rp-pick { background: var(--card); }
.rp-pick:focus-within { outline: 2px solid var(--line-2); outline-offset: 1px; }
.rp-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; border: 0; }
.rp-pick select:disabled { cursor: default; }
.rp-pick .rp-k { color: var(--text-3); }
.rp-pick svg.i { width: 14px; height: 14px; }
.rp-pick > svg:first-child { color: var(--red); }
.rp-pick > svg:first-child:has(path[d^="M6 12.5"]) { color: var(--yellow); }
.rp-pick .rp-chev { color: var(--text-3); width: 12px; height: 12px; }
.rp-pick.add { background: transparent; border-style: dashed; color: var(--text-2); }
.rp-pick.add:hover { color: var(--text); }
.rp-foot .att-btn { border-color: transparent; margin-left: -8px; }
.rp-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); }
.rp-foot .rp-hint { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-3); }
.rp-foot .btn { flex: none; }

/* one report: where it is, what was sent, what the team said */
.rp-steps { display: flex; margin: 2px 0 22px; list-style: none; padding: 0; }
.rp-steps li { flex: 1 1 0; min-width: 0; position: relative; padding-top: 16px; font-size: 12.5px; color: var(--text-3); }
.rp-steps li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.rp-steps li::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); box-sizing: border-box; }
.rp-steps li.done { color: var(--text-2); }
.rp-steps li.done::before, .rp-steps li.done::after { background: var(--text-2); border-color: var(--text-2); }
.rp-steps li.now { color: var(--text); font-weight: 600; }
.rp-steps li.now::after { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.18); }
.rp-steps li.now:last-child:not(:first-child)::after { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px rgba(91, 208, 138, 0.18); }
.rp-steps.no li.now:last-child::after { background: var(--text-3); border-color: var(--text-3); box-shadow: none; }
.rp-steps li:last-child { flex: 0 0 auto; }
.rp-steps li:last-child::before { display: none; }
.rp-thread { display: flex; flex-direction: column; gap: 12px; }
.rp-msg { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 14px 16px; min-width: 0; }
.rp-msg.fresh { border-color: var(--line-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.rp-more-msg { margin-right: 28px; }
.rp-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.rp-who b { color: var(--text); font-weight: 600; }
.rp-msg .rbody dd { font-size: 14px; }
.rp-msg .att-list, .rp-reply .att-list { margin-top: 10px; }
.rp-msg .rp-ctx { margin-top: 12px; }
.rp-reply { margin-left: 28px; border-radius: 12px; padding: 12px 16px; background: rgba(91, 208, 138, 0.08); border: 1px solid rgba(91, 208, 138, 0.25); min-width: 0; }
.rp-reply .rp-who b { color: var(--green-text); }
.rp-text { margin: 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-event { margin: 0 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--text-2); }
.rp-event b { font-weight: 600; color: var(--text); }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); padding: 0; }
.rp-dot.st-new { background: var(--peri); }
.rp-dot.st-plan { background: var(--yellow); }
.rp-dot.st-done { background: var(--green); }
.rp-later { margin: 18px 0 0; font-size: 13px; color: var(--text-3); display: flex; gap: 8px; align-items: center; }
/* answering under a report */
.rp-reply-box { flex: none; border-top: 1px solid var(--line); padding: 10px 16px 12px 20px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.rp-reply-box .err { margin: 0; }
.rp-reply-row { display: flex; align-items: flex-end; gap: 8px; }
.rp-reply-row .att-btn { border-color: transparent; flex: none; }
.rp-reply-row .rp-plain { margin: 0; min-height: 36px; max-height: 160px; overflow-y: auto; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--side); font-size: 14.5px; line-height: 1.5; }
.light .rp-reply-row .rp-plain, .cust-light .rp-reply-row .rp-plain { background: var(--card-2); }
.rp-reply-row .rp-plain:focus-visible { outline: 2px solid var(--line-2); outline-offset: 1px; }
.rp-reply-row .btn { flex: none; min-height: 36px; }
/* "Discard this report?" in place of the buttons */
.rp-ask { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); }
.rp-ask > span { flex: 1 1 auto; min-width: 0; font-size: 14px; }

/* phones: the whole screen; the list first, a report or the new one over it with ‹ Reports */
@media (max-width: 760px) {
  .rp2, .rp2[open] { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
  .rp-side, .rp-pane { flex: 1 1 auto; border-right: 0; }
  .rp2.at-list .rp-pane, .rp2:not(.at-list) .rp-side { display: none; }
  .rp-side, .light .rp-side, .cust-light .rp-side { background: var(--card); }
  .rp-side-h { padding: max(10px, env(safe-area-inset-top)) 6px 12px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rp-side-h h2 { font-size: 20px; }
  .rp-side .rp-x-list { display: inline-flex; }
  .rp-side-h p, .rp-side-h .rp-new { grid-column: 1 / -1; }
  .rp-side-h .rp-new { min-height: 46px; width: calc(100% - 12px); }
  .rp-row { padding: 12px 10px; }
  .rp-pane-h { padding: max(8px, env(safe-area-inset-top)) 6px 0 6px; flex-wrap: wrap; }
  .rp-back { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 15px; color: var(--text-2); background: none; border: 0; min-height: 44px; padding: 0 10px; cursor: pointer; }
  .rp-back svg { transform: rotate(180deg); }
  .rp-pane-h > div { flex-basis: 100%; order: 3; padding: 0 12px; }
  .rp-pane-h > div:empty { display: none; }
  .rp-pane-h .rp-x { margin-left: auto; }
  .rp-pane .rp-scroll { padding: 14px 18px 20px; }
  .rp-reply, .rp-more-msg { margin-left: 14px; margin-right: 0; }
  .rp-more-msg { margin-left: 0; margin-right: 14px; }
  .rp-big, .rp-plain, .rp-opt .rp-plain, .rp-reply-row .rp-plain { font-size: 16px; }
  .rp-pick, .rp-link { min-height: 44px; }
  .rp .icon-btn.rp-x, .rp-foot .att-btn, .rp-reply-row .att-btn { width: 44px; height: 44px; }
  .rp-bar { padding: 10px 16px; gap: 6px; }
  .rp-foot { padding: 10px 16px max(12px, env(safe-area-inset-bottom)); }
  .rp-foot .rp-hint { display: none; }
  .rp-foot .att-btn { margin-left: -6px; }
  .rp-foot .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .rp-foot .btn.ghost { flex: 0 0 auto; padding: 0 14px; }
  .rp-reply-box { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
  .rp-reply-row .rp-plain { min-height: 44px; padding: 10px 12px; }
  .rp-reply-row .btn { min-height: 44px; }
  .rp-ask { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .rp-ask .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .rp-ask > span { flex-basis: 100%; }
}
@media (max-width: 400px) { .rp-pick .rp-k { display: none; } }
/* a phone on its side: the whole screen, the list stays on the left */
@media (max-height: 500px) and (min-width: 761px) {
  .rp2 { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .rp2[open] { grid-template-columns: 250px minmax(0, 1fr); }
  .rp-side-h { padding-top: 12px; }
  .rp-side-h p { display: none; }
  .rp-pane-h { padding-top: 10px; }
}
/* touch screens of any width (a phone on its side, a tablet): 16 px text so iOS doesn't zoom, 44 px taps */
@media (pointer: coarse) {
  .rp-big, .rp-plain, .rp-opt .rp-plain, .rp-reply-row .rp-plain { font-size: 16px; }
  .rp-pick, .rp-link, .rp-new, .rp-reply-row .btn, .rp-reply-row .rp-plain, .rp-foot .btn, .rp-ask .btn, .rp-pick-one .btn { min-height: 44px; }
  .rp .icon-btn.rp-x, .rp-foot .att-btn, .rp-reply-row .att-btn { width: 44px; height: 44px; }
}

/* ---------- pop-ups scroll without a scroll bar (common/scroll.js) ----------
   Wheel, trackpad, touch and keys still scroll. A soft fade at the top or bottom edge shows while
   there is more that way: the content fades into the pop-up's own background, in either theme. */
@property --edge-up { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --edge-down { syntax: "<length>"; inherits: false; initial-value: 0px; }
.td-nav, .td-body, .td-tabs, .cl-b, .pf-body, .sh-b, .rp-scroll, .rp-reply-box textarea, .rp textarea { scrollbar-width: none; }
.td-nav::-webkit-scrollbar, .td-body::-webkit-scrollbar, .td-tabs::-webkit-scrollbar, .cl-b::-webkit-scrollbar, .pf-body::-webkit-scrollbar,
.sh-b::-webkit-scrollbar, .rp-scroll::-webkit-scrollbar, .rp textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.td-nav, .td-body, .cl-b, .pf-body, .sh-b, .rp-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-up), #000 calc(100% - var(--edge-down)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-up), #000 calc(100% - var(--edge-down)), transparent 100%);
  transition: --edge-up 0.15s, --edge-down 0.15s;
}
@media (prefers-reduced-motion: reduce) { .td-nav, .td-body, .cl-b, .pf-body, .sh-b, .rp-scroll { transition: none; } }

/* ---------- sharing: the dialog (a cl-dlg), the shared view, the public page ---------- */
.sh-dlg { width: min(560px, calc(100vw - 32px)); }
.sh-sub { margin: -6px 0 6px; padding: 0 20px; color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-b { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.sh-opts { display: flex; flex-direction: column; gap: 8px; }
.sh-opt { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.sh-opt.on { border-color: var(--line-2); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sh-opt.off { opacity: 0.6; }
.sh-opt > input { margin: 9px 0 0; width: 16px; height: 16px; accent-color: var(--btn-bg); cursor: pointer; }
.sh-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
.sh-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-t label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.sh-opt.off .sh-t label { cursor: default; }
.sh-t b { font-size: 14.5px; font-weight: 600; }
.sh-t small { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.sh-people { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sh-matches { display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); }
.sh-match { font: inherit; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.sh-match:hover, .sh-match:focus-visible { background: var(--raise); }
.sh-match .nm, .sh-person .nm { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sh-match .nm b { font-size: 14px; }
.sh-match .nm small { font-size: 12.5px; color: var(--text-3); }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 2px 0 4px; border-radius: 999px; background: var(--raise); font-size: 13px; }
.av.sm { width: 22px; height: 22px; border-radius: 999px; font-size: 11px; }
.sh-chip button { width: 24px; height: 24px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.sh-chip button:hover { color: var(--text); background: var(--card-2); }
.sh-what { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.sh-what p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sh-what p b { color: var(--text); }
.sh-what .d-label { color: var(--text-3); }
.sh-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--side); border: 1px solid var(--line); }
.light .sh-link, .cust-light .sh-link { background: var(--card-2); }
.sh-link code { flex: 1 1 auto; min-width: 0; font: 12.5px var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-b .err { margin: 0; }
.btn.sh-open { margin-right: 2px; }
.sh-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); flex-wrap: wrap; }
.sh-banner > div { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; flex: 1 1 240px; }
.sh-banner .faint { font-size: 13px; }
.sh-ro { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.item .n.sh-from { font-size: 12px; }
@media (max-width: 760px) {
  .cl-dlg.sh-dlg { width: 100%; height: auto; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
  .sh-opt { grid-template-columns: 20px minmax(0, 1fr); }
  .sh-opt .sh-ic { display: none; }
  .sh-b { padding: 4px 14px 12px; }
  .sh-sub { padding: 0 18px; }
  .sh-chip { min-height: 36px; }
  .sh-chip button { width: 32px; height: 32px; }
  .sh-banner .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px), (pointer: coarse) {
  .sh-opt > input { width: 20px; height: 20px; margin-top: 7px; }
  .sh-match { min-height: 46px; }
}

/* the public page: no sidebar, no account */
.pub { min-height: 100vh; min-height: 100dvh; }
.pub-top { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--side); }
.pub-main { max-width: 820px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 20px; }
.pub-h h1 { margin: 8px 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.pub-h .faint { margin: 0; font-size: 13.5px; }
.pub-f { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.grp-fold .count { flex: none; font-size: 11.5px; line-height: 18px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 7px; }

/* ---------- shared additions: settings, theme, reports, staff replies ---------- */
.me .icon-btn { width: 32px; height: 32px; }
.me { gap: 6px; }
.me .who { margin-right: 2px; }
.icon-btn.on { color: var(--text); background: var(--raise); }
.item .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #0F2418; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.light .item .badge { color: #fff; }
.reply-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.18); flex: none; }

/* dropdowns match text boxes everywhere */
select.field, .light select.field, .cust-light select.field { appearance: none; -webkit-appearance: none; min-height: 36px; padding: 0 32px 0 12px; line-height: 1.2;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select.field:disabled { opacity: 0.6; }

/* settings */
.set-sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-h { display: flex; gap: 14px; align-items: flex-start; }
.set-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.set-h p { margin: 3px 0 0; font-size: 14px; line-height: 1.55; max-width: 70ch; }
.set-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--raise); color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.set-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-opt { font: inherit; text-align: left; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.theme-opt:hover { border-color: var(--text-3); }
.theme-opt.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.16); }
.theme-opt .swatch { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }
.theme-opt .theme-l { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14.5px; }
.theme-opt .theme-l svg { color: var(--green); }
.theme-opt .faint { font-size: 12.5px; line-height: 1.4; }
.made { border: 1px solid rgba(91, 208, 138, 0.5); background: rgba(91, 208, 138, 0.08); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tokline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tokline code { flex: 1 1 260px; overflow-wrap: anywhere; background: var(--side); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.tok-list { display: flex; flex-direction: column; }
.tok { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 14px; min-width: 0; }
.tok:first-child { border-top: 0; }
.tok > svg { color: var(--text-2); }
.tok b { font-weight: 600; }
.snips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.snip { border: 1px solid var(--line); border-radius: 10px; background: var(--side); min-width: 0; overflow: hidden; }
.snip-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.snip pre { margin: 0; padding: 10px 12px; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 760px) {
  .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-opt { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .theme-opt .swatch { grid-row: span 2; }
  .snips { grid-template-columns: minmax(0, 1fr); }
  .set-sec { padding: 16px; }
}

/* MCP: token access and the list of tools */
.tok { flex-wrap: wrap; }
.tok-t { min-width: 0; flex: 1 1 220px; }
.tok-m { display: block; font-size: 13px; margin-top: 1px; }
.mcp-access > button { white-space: nowrap; }
.pill.mcp-chg { color: var(--yellow); background: rgba(242, 201, 76, 0.13); font-weight: 600; }
.pill.mcp-op { color: var(--peri); background: rgba(142, 155, 255, 0.14); font-weight: 600; }
.pill.mcp-dev { color: var(--text); font-weight: 600; }
.pill.mcp-new { color: #B9CCE3; background: transparent; box-shadow: inset 0 0 0 1px rgba(185, 204, 227, 0.45); font-weight: 600; }
.pill.mcp-out { color: #B9CCE3; background: rgba(185, 204, 227, 0.14); font-weight: 600; }
.light .pill.mcp-new, .cust-light .pill.mcp-new { color: #3A5573; box-shadow: inset 0 0 0 1px rgba(58, 85, 115, 0.45); }
.light .pill.mcp-out, .cust-light .pill.mcp-out { color: #3A5573; background: rgba(58, 85, 115, 0.1); }
.light .pill.mcp-op, .cust-light .pill.mcp-op { color: #4B57D6; }
.mcp-find { position: relative; display: flex; align-items: center; min-width: 180px; }
.mcp-find svg { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.mcp-find .field { width: 100%; padding-left: 34px; }
.mcp-cat { columns: 2 320px; column-gap: 24px; }
.mcp-g { break-inside: avoid; margin: 0 0 18px; }
.mcp-gh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); padding: 0 2px 6px; border-bottom: 1px solid var(--line); }
.mcp-gh span { margin-left: auto; letter-spacing: 0; font-weight: 500; color: var(--text-3); text-transform: none; }
.mcp-t { padding: 8px 2px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mcp-t1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mcp-t1 code { font: 13px var(--mono); color: var(--text); margin-right: auto; overflow-wrap: anywhere; }
.mcp-d { font-size: 13.5px; color: var(--text-3); line-height: 1.45; }
.mcp-kept { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.55; }
.mcp-kept b { color: var(--text-2); font-weight: 600; }
@media (max-width: 760px) {
  .mcp-make > .grow { flex-basis: 100%; }
  .mcp-make .seg, .mcp-filters .seg, .tok .seg { width: 100%; }
  .mcp-make .seg > *, .mcp-filters .seg > *, .tok .seg > * { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .mcp-make .btn { width: 100%; justify-content: center; }
  .mcp-find { flex-basis: 100%; }
  .mcp-cat { columns: 1; }
  .tok-t { flex-basis: 100%; }
  .tok > svg { display: none; }
}

/* reports: status, kind, form, body */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--raise); color: var(--text-2); }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-new { color: var(--peri); background: rgba(142, 155, 255, 0.14); }
.st-seen { color: var(--text-2); }
.st-plan { color: var(--yellow); background: rgba(242, 201, 76, 0.13); }
.st-done { color: var(--green-text); background: rgba(91, 208, 138, 0.14); }
.st-no { color: var(--text-3); }
.light .st-new { color: #4B57D6; }
.kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.kind svg { width: 14px; height: 14px; }
.kind-bug svg { color: var(--red); }
.kind-feature svg { color: var(--yellow); }
.rform { display: flex; flex-direction: column; gap: 14px; }
.rform label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rform label > span { font-size: 13px; color: var(--text-2); }
.rform em { font-style: normal; color: var(--text-3); }
.rform .field { width: 100%; }
.rform textarea.field { padding: 9px 12px; resize: vertical; line-height: 1.5; }
.rrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rkind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rkind button { font: inherit; color: var(--text); text-align: left; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-height: 64px; }
.rkind button svg { width: 22px; height: 22px; color: var(--text-2); }
.rkind button span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rkind button small { color: var(--text-3); font-size: 12.5px; }
.rkind button.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.15); }
.rkind button.on:first-child svg { color: var(--red); }
.rkind button.on:last-child svg { color: var(--yellow); }
.ract { display: flex; justify-content: flex-end; gap: 8px; }
.rbody { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rbody dt { font-size: 12.5px; color: var(--text-3); margin-bottom: 2px; }
.rbody dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
@media (max-width: 560px) { .rrow, .rkind { grid-template-columns: minmax(0, 1fr); } }

/* a message held at a guardrail (common/chat.jsx Card "guard") and the paused message box */
.gd-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(242, 201, 76, 0.38); background: rgba(242, 201, 76, 0.07); max-width: 620px; }
.gd-card.declined { border-color: rgba(255, 124, 124, 0.38); background: rgba(255, 124, 124, 0.06); }
.gd-card.granted { border-color: rgba(91, 208, 138, 0.38); background: rgba(91, 208, 138, 0.06); }
.gd-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(242, 201, 76, 0.16); color: var(--yellow); }
.gd-card.declined .gd-ic { background: rgba(255, 124, 124, 0.14); color: var(--red); }
.gd-card.granted .gd-ic { background: rgba(91, 208, 138, 0.14); color: var(--green-text); }
.gd-card b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.gd-card p { margin: 0; color: var(--text-2); font-size: 14px; }
.gd-chip { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--yellow); background: rgba(242, 201, 76, 0.13); }
.light .gd-chip, .light .gd-ic { color: #8A6508; }
.gd-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 14px; }
.gd-lock .grow { flex: 1; }
@media (max-width: 760px), (pointer: coarse) { .gd-lock .btn { min-height: 44px; } }


@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .me .icon-btn { width: 44px; height: 44px; flex: none; }
  .me { gap: 4px; }
  .me .who { min-width: 0; }
}


/* ---------- The Claude-style "Recents" sidebar both portals share (common/sidebar.jsx): head with
   Hide, rows, Recents with a ⋯ menu per row, you at the bottom with a menu that opens upwards; the
   icon rail it folds to on a desktop; the phone bar. Only the middle scrolls, so the head and you
   stay in view on short windows and phones. ---------- */
.side.sb-side { flex: 0 0 313px; width: 313px; padding: 10px 10px 8px; gap: 1px; overflow: hidden; }
.side.drawer.sb-side { width: min(320px, 88vw); padding: max(10px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.sb-head { flex: none; display: flex; align-items: center; gap: 4px; height: 40px; padding-left: 8px; margin-bottom: 6px; }
.sb-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 650; font-size: 16.5px; letter-spacing: -0.01em; }
.sb-brand svg.i { width: 19px; height: 19px; }
.sb-brand .tag { font-size: 11.5px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; line-height: 18px; letter-spacing: 0; }
.sb-ib { position: relative; width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); text-decoration: none; cursor: pointer; }
.sb-ib:focus-visible, .sb-acct:focus-visible, .sb-r:focus-visible, .sb-dots:focus-visible, .sb-lbl:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
.sb-nav { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sb-side .item { min-height: 36px; position: relative; width: 100%; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; background: transparent; border: 0; cursor: pointer; }
.sb-side .item .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-side .item .n, .sb-side .item .badge { flex: none; margin-left: auto; }
.sb-side .item .badge + .n { margin-left: 6px; }
.sb-side .item > .sb-dot { flex: none; margin-left: auto; width: 7px; height: 7px; }
.sb-side .item:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
.sb-kbd { margin-left: auto; font: 11px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; line-height: 18px; }
/* New conversation: claude.ai's filled + circle */
.sb-new { font-weight: 600; margin-bottom: 2px; }
.sb-plus { width: 22px; height: 22px; margin-left: -3px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--text); color: var(--bg); }
.sb-plus svg.i { color: var(--bg) !important; stroke-width: 2.2; }
.sb-new.off { opacity: 0.5; cursor: not-allowed; }
.sb-new.off:hover { background: transparent; }
.sb-note { list-style: none; margin: 0 0 6px; padding: 0 10px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.sb-fold > svg.i:last-child { margin-left: 4px; color: var(--text-3); transition: transform 0.15s; }
.sb-fold[aria-expanded="true"] > svg.i:last-child { transform: rotate(90deg); }
.sb-fold .reply-dot { margin-left: auto; width: 7px; height: 7px; }
/* Author display:flex on .sb-sub wins over the UA [hidden] { display:none }, so closed folds
   would still show their children. Force hidden shut. */
[hidden] { display: none !important; }
.sb-sub { display: flex; flex-direction: column; gap: 1px; }
.sb-sub .item { padding-left: 36px; color: var(--text-2); }
.sb-sub .item.on { color: var(--text); }
.sb-sub.flush .item { padding-left: 10px; color: var(--text); }
.sb-sub.flush .item svg.i { color: var(--text-2); }
/* Recents */
.sb-lbl { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 14px 0 2px; padding: 0 8px 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.sb-lbl:hover { color: var(--text-2); }
.sb-lbl > svg.i { opacity: 0; transition: transform 0.15s, opacity 0.15s; }
.sb-lbl:hover > svg.i, .sb-lbl:focus-visible > svg.i, .sb-lbl[aria-expanded="false"] > svg.i { opacity: 1; }
.sb-lbl[aria-expanded="true"] > svg.i { transform: rotate(90deg); }
.sb-lbl .reply-dot { margin-left: 0; width: 7px; height: 7px; }
.sb-lbl .badge { margin-left: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #0F2418; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.light .sb-lbl .badge, .cust-light .sb-lbl .badge { color: #fff; }
.sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-li { position: relative; }
.sb-c { color: var(--text-2) !important; padding-right: 36px; }
.sb-c.on { color: var(--text) !important; }
.sb-c .reply-dot { margin-left: 4px; }
.sb-dots { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); cursor: pointer; opacity: 0; }
.sb-li:hover .sb-dots, .sb-li.open .sb-dots, .sb-li.on .sb-dots, .sb-dots:focus-visible { opacity: 1; }
.sb-li:hover .sb-c, .sb-li.open .sb-c { background: var(--card); }
.sb-li.on .sb-c { background: var(--raise); }
.sb-dots:hover, .sb-li.open .sb-dots { color: var(--text); background: var(--raise); }
.sb-li.on .sb-dots:hover, .sb-li.on.open .sb-dots { background: var(--line-2); }
.sb-all .t { color: var(--text-3); }
.sb-rename { padding: 1px 0; }
.sb-rename .field { width: 100%; min-height: 36px; font-size: 14.5px; }
/* You at the bottom */
.sb-foot { flex: none; display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.sb-acct { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sb-acct.open { background: var(--card); }
.sb-acct .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-acct .who b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct .who small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct > svg.i { flex: none; color: var(--text-3); }
.sb-avw { position: relative; flex: none; display: inline-flex; }
.av.sb-av { width: 30px; height: 30px; border-radius: 50%; font-size: 12.5px; }
.sb-st { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--side); background: var(--text-3); }
.sb-st.ok { background: var(--green); }
.sb-st.warn { background: var(--yellow, #E6B450); }
.sb-st.bad { background: var(--red); }
.sb-bug, .sb-search { width: 36px; height: 36px; color: var(--text-3); }
/* Menus (account, row ⋯) */
.sb-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.light .sb-menu, .cust-light .sb-menu { box-shadow: 0 18px 50px rgba(20, 20, 30, 0.16); }
.sb-mh { padding: 6px 10px 4px; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-mstat { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font-size: 12.5px; color: var(--text-3); }
.sb-mi { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.sb-mi:focus-visible { background: var(--raise); outline: none; }
.sb-mi > svg.i { color: var(--text-2); }
.sb-mi .t { white-space: nowrap; }
.sb-mi .r { margin-left: auto; padding-left: 10px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.sb-mi .badge { margin-left: auto; }
.sb-mi.danger, .sb-mi.danger > svg.i { color: var(--red); }
.sb-sep { height: 1px; margin: 5px 10px; background: var(--line); }
.sb-theme { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; font-size: 14.5px; }
.sb-theme > svg.i { color: var(--text-2); }
.sb-seg { margin-left: auto; display: inline-flex; padding: 2px; background: var(--side); border: 1px solid var(--line-2); border-radius: 8px; }
.sb-seg button { font: inherit; font-size: 11.5px; padding: 2px 7px; border-radius: 6px; color: var(--text-2); background: transparent; border: 0; cursor: pointer; }
.sb-seg button.on { background: var(--raise); color: var(--text); }
.sb-seg button:focus-visible { outline: 2px solid var(--text-2); outline-offset: 1px; }
/* The tooltip (useTips) */
.sb-tip { position: fixed; z-index: 90; pointer-events: none; max-width: 280px; padding: 5px 10px; font-size: 13px; line-height: 1.35; white-space: pre-line; color: var(--text); background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.light .sb-tip, .cust-light .sb-tip { box-shadow: 0 10px 30px rgba(20, 20, 30, 0.14); }
/* The icon rail (desktop, sidebar folded) */
.side.sb-rail { flex: 0 0 60px; width: 60px; padding: 10px 0; align-items: center; gap: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.sb-r { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); text-decoration: none; cursor: pointer; }
.sb-r.on { background: var(--raise); color: var(--text); }
.sb-r.off { opacity: 0.5; cursor: not-allowed; }
.sb-r:first-child { margin-bottom: 6px; }
.sb-rb { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--green); color: #0B2615; font: 600 10px/16px -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; text-align: center; }
.sb-rdot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.sb-rail .sb-bug, .sb-rail .sb-search { width: 40px; height: 40px; }
.sb-rme { margin-top: 2px; }
@media (hover: hover) {
  .sb-ib:hover, .sb-r:hover { background: var(--card); color: var(--text); }
  .sb-acct:hover { background: var(--card); }
  .sb-mi:hover { background: var(--raise); }
}
/* The phone bar, like Claude's app: ☰ · title · new */
@media (max-width: 760px) {
  .mbar.sb-bar { gap: 6px; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); background: var(--bg); }
  .sb-mb { width: 44px; height: 44px; color: var(--text); }
  .sb-mb.off { opacity: 0.4; }
  .sb-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 15.5px; white-space: nowrap; }
  .sb-title > span { overflow: hidden; text-overflow: ellipsis; }
}
/* Touch and small screens: 44 px rows, ⋯ always shown (no hover to find it). */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .sb-side .item, .sb-mi { min-height: 44px; font-size: 15.5px; }
  .sb-ib { width: 44px; height: 44px; }
  .sb-lbl { min-height: 40px; font-size: 13px; }
  .sb-lbl > svg.i { opacity: 1; }
  .sb-dots { width: 40px; height: 40px; right: 2px; opacity: 1; }
  .sb-c { padding-right: 46px; }
  .sb-acct { height: 54px; }
  .sb-theme { min-height: 52px; font-size: 15.5px; }
  .sb-theme { gap: 10px; }
  .sb-seg button { min-height: 36px; padding: 0 8px; font-size: 13px; }
  .sb-rename .field { min-height: 44px; font-size: 16px; }
  .sb-menu { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sb-fold > svg.i:last-child, .sb-lbl > svg.i { transition: none; } }

/* ---------- "Your sign-up" on the customer front page ---------- */
.d-welcome.d-signup { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.d-welcome.d-signup .d-label { margin: 0; }
.d-welcome.d-signup .d-signup-t { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); white-space: normal; }
.d-signup-t b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.d-ask { font-size: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.d-signup .d-big { justify-content: space-between; }
.d-signup.again { margin-bottom: 16px; }

/* ---------- touch: fingertip-sized controls (44 px) ----------
   Loaded after the other files in src/css (alphabetical), so it wins over rules that size controls
   for a mouse, e.g. shared.css's 36 px select.field. Same conditions as graphite.css's touch block. */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  select.field, .light select.field, .cust-light select.field { min-height: 44px; }
  /* "Forgot?" on the sign-in pages: a 44 px tap area without moving anything. */
  .d-tlink { padding: 12px 8px; margin: -12px -8px; }
  /* 16px or iOS zooms in on focus: the sign-up's text box too, on a phone held sideways */
  textarea.d-field { font-size: 16px; }
  /* Project page tabs (Holdups, Outline, Tools, Map). */
  .pj-tabs button { min-height: 44px; }
  /* Inline links in the Projects MCP card and its steps: a 44 px tap area without moving the text. */
  .pj-mcp p a, .pj-steps a { padding-block: 14px; }
}

/* The version in the sign-in's top-right corner as a button, and the "What's new" panel it drops
   (common/whatsnew.jsx): just the number in the corner, and a small quiet card over the pixels. */
.door.px > button.px-no { z-index: 5; display: inline-flex; align-items: center; gap: 7px; margin: -7px -10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-3); font: 500 13px var(--mono); cursor: pointer; transition: opacity 0.35s, color 0.15s; }
.door.px > button.px-no:hover, .door.px > button.px-no[aria-expanded="true"] { color: var(--text); }
.door.px > button.px-no:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.wn-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--ice); }

.door.px > .wn-pop { position: absolute; z-index: 6; top: max(68px, calc(env(safe-area-inset-top) + 40px)); right: 22px; width: 312px; max-width: calc(100% - 24px); padding: 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32); text-align: left; cursor: auto; animation: wn-in 0.18s ease-out; max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; scrollbar-width: none; }
.cust-light .door.px > .wn-pop { box-shadow: var(--d-shadow); }
.door.px > .wn-pop::-webkit-scrollbar { display: none; }
@keyframes wn-in { from { opacity: 0; transform: translateY(-6px); } }
.wn-h { margin: 0 12px 2px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text-3); }
.wn-i { padding: 8px 12px 10px; }
.wn-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.wn-v { font: 500 12px var(--mono); color: var(--text-2); }
.wn-row time { margin-left: auto; white-space: nowrap; }
/* the version you have */
.wn-now { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ice); }
.wn-t { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.wn-i:first-of-type .wn-t { color: var(--text); }

/* touch: a 44 px tap area round the small version */
@media (hover: none) { .door.px > button.px-no { padding: 15px 14px; margin: -15px -14px; } }
@media (max-width: 640px) {
  .door.px > button.px-no { font-size: 12px; }
  .door.px > .wn-pop { left: auto; right: 12px; width: min(312px, calc(100% - 24px)); top: max(54px, calc(env(safe-area-inset-top) + 32px)); }
}
@media (prefers-reduced-motion: reduce) { .door.px > .wn-pop { animation: none; } }

/* Pages narrower than the room next to the sidebar sit in the middle of it, like the conversation
   column, with each page's title bar lined up over its content. */
.content.ug-page, .content.pj-page { width: 100%; margin-inline: auto; }
.top:has(+ .content.ug-page) { width: 100%; max-width: 920px; margin-inline: auto; }
.top:has(+ .content.pj-page) { width: 100%; max-width: 1180px; margin-inline: auto; }

/* ---------- Usage and plan (customer/plan.jsx): pl- = parts, pb- = the "Dashboard" layout ---------- */
.content.ug-page.pb { max-width: 1160px; }
.top.pb-topbar:has(+ .content.pb) { max-width: 1160px; }
.pb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pb-rail { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.pb-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pb-p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.pb-p b { color: var(--text); }
.pb-act { align-self: flex-start; }

/* the plan: a ring, what's left, the facts */
.pb-plan { display: flex; flex-direction: column; gap: 14px; }
.pb-plan-top { display: flex; align-items: center; gap: 16px; }
.pb-ring { --ring: var(--text); flex: none; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--p) * 1turn), var(--raise) 0); display: grid; place-items: center; }
.pb-ring.extra { --ring: var(--peri); }
.pb-ring.out { --ring: var(--yellow); }
.pb-ring > div { width: 82px; height: 82px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pb-ring b { font-size: 18px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pb-ring.extra b, .pb-ring.out b { font-size: 13px; }
.pb-ring span { font-size: 11.5px; color: var(--text-3); }
.pb-plan-n { min-width: 0; }
.pb-plan-n p { margin: 0; }
.pb-plan-n .pb-left { margin: 6px 0 2px; font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pb-left span { font-size: 15px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.pb-plan-n .faint { font-size: 13px; }
.pb-facts { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pb-facts div { display: flex; justify-content: space-between; gap: 12px; min-height: 34px; align-items: center; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pb-facts div:last-child { border-bottom: 0; }
.pb-facts dt { color: var(--text-3); flex: none; }
.pb-facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* the hearth team's answer to a budget request, once */
.pb-notice { display: flex; flex-direction: column; gap: 8px; }
.pb-notice.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 6%, var(--card)); }
.pb-notice.warn { border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); }
.pb-notice-by { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 11px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.pb-notice.ok .bl-h { color: var(--green-text); }
.pb-quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--card-2); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }

/* extra usage */
.pb-extra { display: flex; flex-direction: column; gap: 10px; }
.pb-extra .bl-row { gap: 8px; }
.pl-state { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--raise); color: var(--text-2); letter-spacing: 0.01em; white-space: nowrap; }
.pl-state.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-text); }
.pl-state.warn { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.pl-spent { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pl-spent-bar { flex: 1 1 auto; height: 6px; border-radius: 99px; background: var(--raise); overflow: hidden; }
.pl-spent-bar i { display: block; height: 100%; border-radius: 99px; background: var(--peri); min-width: 4px; }

.pb-how { padding: 14px 18px; font-size: 13.5px; }
.pb-how summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text-2); list-style: none; }
.pb-how summary::-webkit-details-marker { display: none; }
.pb-how summary svg:last-child { transition: transform 0.15s; }
.pb-how[open] summary svg:last-child { transform: rotate(90deg); }
.pb-how p { margin: 8px 0 0; line-height: 1.55; font-size: 13px; }

/* tokens per local day */
.pb-days { display: flex; flex-direction: column; gap: 14px; }
.pb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pb-nums div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-nums span { font-size: 12.5px; color: var(--text-3); }
.pb-nums b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pb-nums em { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.pb-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 140px; align-items: end; padding-bottom: 1px; border-bottom: 1px solid var(--line-2); }
.pb-bar { height: 100%; display: flex; align-items: flex-end; }
.pb-bar i { display: block; width: 100%; height: 3px; border-radius: 3px 3px 1px 1px; background: var(--text-2); }
.pb-bar.none i { background: var(--raise); }
.pb-bar.later i { background: var(--raise); opacity: 0.6; }
.pb-bar.part i { background: repeating-linear-gradient(135deg, var(--text-3) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--text-3); }
.pb-bar.part.none i, .pb-bar.part.later i { background: repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 4px); box-shadow: none; }
.pb-bar.today i { background: var(--text); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--text-3); }
.pb-bar:hover i { background: var(--text); }
.pb-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; margin-top: -8px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pb-axis span { grid-row: 1; text-align: center; white-space: nowrap; }
.pb-say { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
.pb-say.near, .pb-say.out { border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); }

/* where the tokens went */
.pl-where { display: flex; flex-direction: column; margin-top: 8px; }
.pl-tr { display: grid; grid-template-columns: minmax(0, 1fr) 140px 72px 44px; gap: 14px; align-items: center; min-height: 42px; border-top: 1px solid var(--line); font-size: 14px; color: inherit; text-decoration: none; }
a.pl-tr:hover .t span { text-decoration: underline; text-underline-offset: 3px; }
.pl-tr .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-tr .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tr .t svg { flex: none; color: var(--text-3); }
.pl-tr b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pl-pct { font-size: 12.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.pl-share { display: block; height: 6px; border-radius: 99px; background: var(--raise); overflow: hidden; }
.pl-share i { display: block; height: 100%; border-radius: 99px; background: var(--text-2); }

/* asking for a budget: a pop-up, a bottom sheet on phones */
.pl-ask { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.pl-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-amt { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; text-align: left; min-width: 0; }
.pl-amt b { font-size: 15px; font-weight: 600; }
.pl-amt span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pl-amt:hover { border-color: var(--text-3); }
.pl-amt.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--card-2); }
.pl-amt:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }
.pl-other { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pl-other .field { width: 110px; }
.pl-buys { margin: 0; font-size: 14px; color: var(--text-2); }
.pl-buys b { color: var(--text); font-weight: 600; }
.pl-note { width: 100%; }
.pl-fine { margin: 0; font-size: 12.5px; }
.pb-dlg { padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; scrollbar-width: none; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); }
.pb-dlg::-webkit-scrollbar { display: none; }
.pb-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.pb-dlg-in { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }

@media (max-width: 1100px) {
  .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-rail, .pb-main { grid-column: 1; grid-row: auto; position: static; }
  .pb-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pb-notice, .pb-how { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pl-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t n" "s s"; row-gap: 6px; padding: 10px 0; min-height: 0; }
  .pl-tr .t { grid-area: t; }
  .pl-tr b { grid-area: n; }
  .pl-share { grid-area: s; height: 4px; }
  .pl-pct { display: none; }
  .pl-amt { min-height: 54px; }
  .pl-note, .pl-other .field { font-size: 16px; min-height: 44px; }
  .pb-rail { grid-template-columns: minmax(0, 1fr); }
  .pb-nums b { font-size: 17px; }
  .pb-bars { height: 110px; gap: 2px; }
  .pb-axis { gap: 2px; }
  .pb-dlg { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .pb-dlg-in { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
  .pb-dlg .icon-btn { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
}
@media (max-width: 760px), (pointer: coarse) {
  .pb-act, .pb-dlg .pf-acts .btn { min-height: 44px; }
  .pb-how summary { min-height: 40px; }
}
@media (max-width: 360px) {
  .pl-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-ring { width: 88px; height: 88px; }
  .pb-ring > div { width: 68px; height: 68px; }
  .pb-plan-n .pb-left { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .pb-how summary svg { transition: none; } }