/* ============================================================
   pa-apps.css — the porcelain app panes.

   ONE CSS CANON: every value here reads a juwel-ds.css custom property,
   the same runtime truth os/jui-porcelain.css and os/porcelain-shell.css
   read. No second palette, no hardcoded hex, so light porcelain and dark
   void both come out right with zero per-theme rules.

   These classes only ever apply INSIDE .psh-surface-body[data-pa-app] —
   a pane is a guest on the shell's desk, never a competing shell.
   ============================================================ */

/* ── the pane body ── */
.pa-body{display:flex;flex-direction:column;gap:var(--s4);}
.pa-body > * + *{margin-top:0;}

/* ── headings ── */
.pa-head{display:flex;flex-direction:column;gap:3px;}
.pa-h{
  font-size:var(--fs-h3);font-weight:650;letter-spacing:-.015em;
  color:var(--ink);margin:0;line-height:1.2;
}
.pa-sub{font-size:var(--fs-small);color:var(--ink-3);margin:0;line-height:1.4;}

/* ── notes: the honest-state voice ──
   meta = quiet fact · warn = you need to do something · err = it failed */
.pa-note{font-size:13px;line-height:1.5;color:var(--ink-2);margin:0;}
.pa-note.pa-meta{color:var(--ink-3);font-size:12.5px;}
.pa-note.pa-warn{
  color:var(--topaz-ink);background:var(--topaz-soft);
  border:1px solid color-mix(in srgb,var(--topaz) 40%,transparent);
  border-radius:var(--r-md);padding:9px 12px;
}
.pa-note.pa-err{
  color:var(--garnet-deep);background:var(--garnet-soft);
  border:1px solid color-mix(in srgb,var(--garnet) 40%,transparent);
  border-radius:var(--r-md);padding:9px 12px;
}
.pa-note.pa-ok{
  color:var(--sapphire-ink);background:var(--sapphire-soft);
  border:1px solid color-mix(in srgb,var(--sapphire) 35%,transparent);
  border-radius:var(--r-md);padding:9px 12px;
}

/* ── loading — her thinking, not a fake skeleton of data ── */
.pa-loading{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);}
.pa-spin{
  width:13px;height:13px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);border-top-color:var(--ink-3);
  animation:pa-spin .8s linear infinite;
}
@keyframes pa-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .pa-spin{animation-duration:2.4s;}
}

/* ── actions — ink = you act ── */
.pa-acts{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}
.pa-btn{
  appearance:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:550;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-full);padding:6px 14px;white-space:nowrap;
  transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.pa-btn:hover{border-color:var(--ink-4);background:var(--surface-2);}
.pa-btn:active{transform:scale(.97);}
.pa-btn:disabled{opacity:.5;cursor:default;}
.pa-btn.ink{background:var(--ink);color:var(--surface);border-color:var(--ink);font-weight:600;}
.pa-btn.ink:hover{background:var(--ink-1);border-color:var(--ink-1);}
.pa-btn.ghost{border-color:transparent;color:var(--ink-3);}
.pa-btn.ghost:hover{color:var(--ink);background:var(--surface-2);border-color:var(--line);}

/* ── rows — one row shape across every pane ── */
.pa-list{display:flex;flex-direction:column;}
.pa-row{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line-2);
}
.pa-row:last-child{border-bottom:0;}
.pa-row-lead{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  min-width:52px;flex:none;letter-spacing:.02em;
}
.pa-row-mid{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.pa-row-t{
  font-size:13.5px;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pa-row-s{
  font-size:12px;color:var(--ink-3);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pa-row-click{cursor:pointer;border-radius:var(--r-sm);}
.pa-row-click:hover{background:var(--surface-2);}
.pa-row-click:focus-visible{outline:1.5px solid var(--ink-4);outline-offset:1px;}

.pa-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-full);padding:2px 8px;flex:none;
}
.pa-tag.on{
  color:var(--sapphire-ink);background:var(--sapphire-soft);
  border-color:color-mix(in srgb,var(--sapphire) 35%,transparent);
}
.pa-tag.warn{
  color:var(--topaz-ink);background:var(--topaz-soft);
  border-color:color-mix(in srgb,var(--topaz) 40%,transparent);
}

/* A tag standing in for a value the server did not recognise. Dashed, so it
   reads as provisional rather than as a real classification, and carries a
   title attribute with the caller's original. */
.pa-tag.pa-tag-muted{
  border-style:dashed;opacity:.72;cursor:help;
}

/* ── day / section headers inside a list ──
   Two placements, two rules. A header that OPENS a list still needs air
   under the stat block above it (the pane body's flex gap alone left it
   touching the stat hint line). A header MID list separates two groups of
   rows that carry no gap between them, so it needs more. */
.pa-day{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:5px;border-bottom:1px solid var(--line);
}
.pa-list > .pa-day{padding-top:16px;}
.pa-list > .pa-day:first-child{padding-top:4px;}

/* ── stats ── */
.pa-stats{display:flex;gap:26px;flex-wrap:wrap;}
.pa-stat{display:flex;flex-direction:column;gap:2px;}
.pa-stat-l{
  font-size:9.5px;font-weight:550;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);
}
.pa-stat-v{font-size:20px;font-weight:650;letter-spacing:-.015em;color:var(--ink);}
.pa-stat-h{font-size:11px;color:var(--ink-3);}

/* ── forms (sign in, compose) ── */
.pa-form{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;}
.pa-input{
  appearance:none;font:inherit;font-size:13.5px;color:var(--ink);flex:1;min-width:160px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 12px;
  transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);
}
.pa-input:focus{outline:none;border-color:var(--ink-4);background:var(--surface-2);}
.pa-input::placeholder{color:var(--ink-4);}

/* ── the detail read (a mail body, a doc, an event) ── */
.pa-read{
  font-size:13px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;max-height:260px;overflow-y:auto;
}

/* ── the brain galaxy: clusters as bars, honest counts ── */
.pa-bars{display:flex;flex-direction:column;gap:7px;}
.pa-bar{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.pa-bar-l{flex:none;min-width:104px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pa-bar-t{flex:1;height:6px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden;}
.pa-bar-f{height:100%;background:var(--irid-soft);border-radius:var(--r-full);
  transform-origin:left center;animation:pa-grow .6s var(--ease-out) both;}
@keyframes pa-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.pa-bar-n{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:30px;text-align:right;}

/* ── the ledger receipt ── */
.pa-receipt{
  font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-2);
  white-space:pre-line;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;
}

/* ── SUPER first-login working surfaces ── */
.pa-term,.pa-code{display:flex;flex-direction:column;gap:8px;min-height:220px;}
.pa-term-out{
  font-family:var(--mono);font-size:12px;line-height:1.45;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;min-height:140px;max-height:280px;overflow:auto;white-space:pre-wrap;margin:0;
}
.pa-term-form{display:flex;align-items:center;gap:8px;}
.pa-term-ps{font-family:var(--mono);font-size:12px;color:var(--ink-3);flex:none;}
.pa-term-in,.pa-code-ta,.pa-input{
  flex:1;font:inherit;font-size:13px;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;
}
.pa-code-ta{
  font-family:var(--mono);min-height:240px;resize:vertical;line-height:1.45;
}
.pa-term-xterm,.pa-code-monaco,.pa-fc{min-height:220px;}
.pa-browser-frame{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  min-height:240px;background:var(--surface-2);
}
.pa-browser-frame iframe{width:100%;height:280px;border:0;background:var(--surface);}
.psh-surface:has([data-pa-app="terminal"]),
.psh-surface:has([data-pa-app="code"]),
.psh-surface:has([data-pa-app="browser"]){width:min(720px,92vw);}