/* ===== Portal 3.0 card styles: shared skeleton for the chat cards, the decisions tray and the Settings picker =====
   Active only when card-style.js has set <html data-card-style>; without it cards.css alone applies.
   Every rule here is :root[data-card-style] + the cards.css selector it restyles, so it beats the
   cards.css light/rose patches by one attribute. Colours come from palettes.css (--cs-*), fonts from the
   active style file (--cs-fd display, --cs-fb body, --cs-fm mono; inherit until it loads).
   44px minimum targets are kept; motion only under prefers-reduced-motion: no-preference. */

/* ---- card shell ---- */
:root[data-card-style] .pc-card{position:relative;padding:16px;border:1px solid var(--cs-line);border-radius:var(--cs-r);
  background:var(--cs-card);color:var(--cs-ink);box-shadow:var(--cs-shadow);font-family:var(--cs-fb,inherit);line-height:1.5}
:root[data-card-style] .msg.card-pending .msg-bubble{border-left-color:var(--cs-acc)}
:root[data-card-style] .pc-head{gap:6px 10px;margin-bottom:8px}
:root[data-card-style] .pc-chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:999px;
  font-size:.76em;font-weight:700;letter-spacing:.03em;text-transform:none;background:var(--cs-chip-bg);color:var(--cs-chip-ink)}
:root[data-card-style] .pc-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
:root[data-card-style] .pc-card[data-state="answered"] .pc-chip,:root[data-card-style] .pc-card[data-state="closed"] .pc-chip,
:root[data-card-style] .pc-card[data-state="superseded"] .pc-chip,:root[data-card-style] .pc-card[data-state="expired"] .pc-chip,
:root[data-card-style] .pc-card[data-state="ready"] .pc-chip,:root[data-card-style] .pc-status-card[data-state="done"] .pc-chip{background:var(--cs-card-2);color:var(--cs-muted)}
:root[data-card-style] .pc-status-card[data-state="failed"] .pc-chip{background:var(--cs-bad);color:var(--cs-on-bad)}
:root[data-card-style] .pc-left{margin-left:auto;font-family:var(--cs-fm,inherit);font-size:.78em;color:var(--cs-muted)}
:root[data-card-style] .pc-prompt{margin:0 0 4px;font-family:var(--cs-fd,inherit);font-weight:700;font-size:1.12em;line-height:1.3;overflow-wrap:anywhere}
:root[data-card-style] .pc-card[data-state="expired"]{box-shadow:none;background:var(--cs-card-2)}
:root[data-card-style] .pc-card[data-state="expired"] .pc-prompt{color:var(--cs-muted)}

/* ---- go rows ---- */
:root[data-card-style] .pc-rows{margin-top:6px}
:root[data-card-style] .pc-row{padding:12px 0;border-top:1px solid var(--cs-line)}
:root[data-card-style] .pc-row:first-child{border-top:0}
:root[data-card-style] .pc-line{gap:12px}
:root[data-card-style] .pc-num{min-width:1.6em;font-family:var(--cs-fm,inherit);font-weight:600;color:var(--cs-muted)}
:root[data-card-style] .pc-label{font-weight:600}
:root[data-card-style] .pc-ctl{margin-top:8px}
:root[data-card-style] .pc-status{color:var(--cs-muted);font-size:.88em}
:root[data-card-style] .pc-detail{margin:12px 0 0;padding:14px;border:1px solid var(--cs-line);border-left:1px solid var(--cs-line);
  border-radius:var(--cs-rs);background:var(--cs-card-2);color:var(--cs-ink)}
:root[data-card-style] .pc-detail[hidden]{display:none}
:root[data-card-style] .pc-ask:not(:empty){margin-top:12px;padding-top:12px;border-top:1px dashed var(--cs-ls)}
:root[data-card-style] .pc-ask-line{gap:10px}
:root[data-card-style] .pc-ask-hint{margin-top:8px;color:var(--cs-muted);font-size:.84em}
:root[data-card-style] .pc-ask-pending:not(:empty){margin-top:10px;padding:0 0 0 12px;border-left:2px solid var(--cs-acc2);color:var(--cs-ink);font-size:.88em}
:root[data-card-style] .pc-count-note{margin-top:6px;padding-left:12px;border-left:2px solid var(--cs-acc2);color:var(--cs-ink);font-size:.86em}
:root[data-card-style] .pc-confirm{border:1px solid var(--cs-acc2);border-radius:var(--cs-rs);background:var(--cs-card-2)}
:root[data-card-style] .pc-confirm[hidden]{display:none}
:root[data-card-style] .pc-confirm-title{font-family:var(--cs-fd,inherit)}
:root[data-card-style] .pc-footer,:root[data-card-style] .pc-end,:root[data-card-style] .pc-note-label{color:var(--cs-muted)}

/* ---- buttons (44px targets kept) ---- */
:root[data-card-style] .pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 16px;
  border:1px solid var(--cs-ls);border-radius:var(--cs-rb);background:var(--cs-btn);color:var(--cs-ink);font-family:inherit;font-weight:600;
  white-space:nowrap;-webkit-tap-highlight-color:transparent}
:root[data-card-style] .pc-btn:hover:not(:disabled){border-color:var(--cs-acc2)}
:root[data-card-style] .pc-btn[hidden]{display:none}
:root[data-card-style] .pc-wide{display:flex;width:100%;margin-top:12px}
:root[data-card-style] .pc-primary{background:linear-gradient(135deg,var(--cs-go-a),var(--cs-go-b));border-color:transparent;color:var(--cs-on-go);font-weight:700}
:root[data-card-style] .pc-primary:hover:not(:disabled){background:var(--cs-acc-h);border-color:var(--cs-acc-h);color:var(--cs-on-acc)}
:root[data-card-style] .pc-more,:root[data-card-style] .pc-link{background:transparent;border-color:transparent;color:var(--cs-acc2);padding:0 10px}
:root[data-card-style] .pc-more:hover:not(:disabled),:root[data-card-style] .pc-link:hover:not(:disabled){border-color:transparent;background:var(--cs-acc-soft)}
:root[data-card-style] .pc-link{text-decoration:underline;text-underline-offset:3px}

/* ---- focus: one visible ring everywhere the cards and tray put focus ---- */
:root[data-card-style] .pc-card :focus-visible,:root[data-card-style] .pc-tray :focus-visible,:root[data-card-style] .pc-tray-strip :focus-visible,
:root[data-card-style] .pc-tray-btn:focus-visible,:root[data-card-style] .pc-btn:focus-visible,:root[data-card-style] .pc-note:focus-visible,
:root[data-card-style] .pc-input:focus-visible,:root[data-card-style] .pc-form .pc-field-input:focus-visible,:root[data-card-style] .pc-tray-head:focus-visible{
  outline:3px solid var(--cs-focus);outline-offset:2px}

/* ---- text fields ---- */
:root[data-card-style] .pc-note,:root[data-card-style] .pc-form .pc-field-input{min-height:44px;border:1px solid var(--cs-ls);border-radius:var(--cs-rs);
  background:var(--cs-field);color:var(--cs-ink)}
:root[data-card-style] .pc-note::placeholder,:root[data-card-style] .pc-form .pc-field-input::placeholder{color:var(--cs-muted);opacity:1}
:root[data-card-style] .pc-note:hover,:root[data-card-style] .pc-form .pc-field-input:hover{border-color:var(--cs-acc2)}

/* ---- choice: each option is a framed 44px+ row; checked takes the soft accent ---- */
:root[data-card-style] .pc-legend{color:var(--cs-muted);font-size:.84em}
:root[data-card-style] .pc-choice .pc-option,:root[data-card-style] .pc-choice .pc-option:first-child{margin-top:8px;padding:2px 8px 2px 0;
  border:1px solid var(--cs-line);border-radius:var(--cs-rs);background:var(--cs-card)}
:root[data-card-style] .pc-choice .pc-option:hover{border-color:var(--cs-ls)}
:root[data-card-style] .pc-choice .pc-option:has(.pc-input:checked){border-color:var(--cs-acc2);background:var(--cs-acc-soft)}
:root[data-card-style] .pc-option .pc-input{accent-color:var(--cs-acc2)}
:root[data-card-style] .pc-option .pc-opt-label{padding-left:12px}
:root[data-card-style] .pc-option .pc-detail{margin:2px 4px 10px 12px}
:root[data-card-style] .pc-option .pc-rec{padding:2px 9px;border-radius:999px;border:1px solid var(--cs-acc);background:var(--cs-rec-bg);color:var(--cs-rec-ink);
  font-size:.72em;letter-spacing:.04em}
:root[data-card-style] .pc-option .pc-picked{border:1px solid var(--cs-acc2);background:var(--cs-acc2);color:var(--cs-on-acc2)}

/* ---- form ---- */
:root[data-card-style] .pc-form .pc-field{border-top:1px solid var(--cs-line);padding:10px 0}
:root[data-card-style] .pc-form .pc-field:first-of-type{border-top:0}
:root[data-card-style] .pc-optional,:root[data-card-style] .pc-hint{color:var(--cs-muted)}
:root[data-card-style] .pc-yn{min-width:84px}
:root[data-card-style] .pc-form .pc-yn[aria-pressed="true"]{background:var(--cs-acc2);border-color:var(--cs-acc2);color:var(--cs-on-acc2)}
:root[data-card-style] .pc-value{border-left:2px solid var(--cs-acc2);border-radius:0 var(--cs-rs) var(--cs-rs) 0;background:var(--cs-card-2);color:var(--cs-ink)}
:root[data-card-style] .pc-value[hidden]{display:none}
:root[data-card-style] .pc-warn{padding:10px 12px;border-radius:var(--cs-rs);background:var(--cs-card-2);color:var(--cs-ink);font-size:.9em}

/* ---- result: table, bars, line ---- */
:root[data-card-style] .pc-table th,:root[data-card-style] .pc-table td{border-top-color:var(--cs-line)}
:root[data-card-style] .pc-table td{font-family:var(--cs-fm,inherit)}
:root[data-card-style] .pc-table thead th{color:var(--cs-muted);font-family:var(--cs-fm,inherit);font-size:.86em}
:root[data-card-style] .pc-bar-label{color:var(--cs-muted)}
:root[data-card-style] .pc-bar-value{font-family:var(--cs-fm,inherit)}
:root[data-card-style] .pc-bar-track,:root[data-card-style] .pc-progress{background:var(--cs-track);box-shadow:inset 0 0 0 1px var(--cs-ls);border-radius:999px}
:root[data-card-style] .pc-bar-fill,:root[data-card-style] .pc-progress-fill{background:var(--cs-acc2);border-radius:inherit;transform-origin:left}
:root[data-card-style] .pc-line-path{stroke:var(--cs-acc2)}

/* ---- status and file request ---- */
:root[data-card-style] .pc-earlier{border-left-color:var(--cs-line);color:var(--cs-muted)}
:root[data-card-style] .pc-status-stub{color:var(--cs-muted)}
:root[data-card-style] .pc-drop{gap:12px;padding:16px;border:2px dashed var(--cs-ls);border-radius:var(--cs-rs);background:var(--cs-card-2)}
:root[data-card-style] .pc-drop.pc-drop-over{border-color:var(--cs-acc2);background:var(--cs-acc-soft)}
:root[data-card-style] .pc-drop-text,:root[data-card-style] .pc-accept,:root[data-card-style] .pc-say{color:var(--cs-muted)}

/* ---- decisions tray, its chat-header button and the phone strip ---- */
:root[data-card-style] .pc-tray-btn{font-family:var(--cs-fb,inherit)}
:root[data-card-style] .pc-tray-btn[data-state="waiting"]{border-color:var(--cs-acc2);background:var(--cs-card);color:var(--cs-ink)}
:root[data-card-style] .pc-tray-btn[data-state="waiting"]:hover{background:var(--cs-acc-soft)}
:root[data-card-style] .pc-tray-btn[data-state="waiting"] .pc-tray-ic{color:var(--cs-acc2)}
:root[data-card-style] .pc-tray-btn[data-state="checking"] .pc-tray-ic{border-top-color:var(--cs-acc)}
:root[data-card-style] .pc-tray-btn[data-state="error"] .pc-tray-ic{background:var(--cs-bad)}
:root[data-card-style] .pc-tray-n{background:var(--cs-acc);color:var(--cs-on-acc);font-family:var(--cs-fm,inherit)}
:root[data-card-style] .pc-tray{padding:14px;border:1px solid var(--cs-ls);border-radius:var(--cs-r);background:var(--cs-card);color:var(--cs-ink);
  box-shadow:var(--cs-tray-shadow);font-family:var(--cs-fb,inherit);transform-origin:top right}
:root[data-card-style] .pc-tray[hidden],:root[data-card-style] .pc-tray-strip[hidden]{display:none}
:root[data-card-style] .pc-tray-head{font-family:var(--cs-fd,inherit)}
:root[data-card-style] .pc-tray-row{padding:10px 0;border-top-color:var(--cs-line)}
:root[data-card-style] .pc-tray-kind{font-family:var(--cs-fm,inherit);font-weight:600;letter-spacing:.12em;color:var(--cs-acc-t)}
:root[data-card-style] .pc-tray-meta,:root[data-card-style] .pc-tray-far,:root[data-card-style] .pc-tray-empty,:root[data-card-style] .pc-tray-foot{color:var(--cs-muted)}
:root[data-card-style] .pc-tray-strip{border:1px solid var(--cs-acc2);border-radius:var(--cs-r);background:var(--cs-card);color:var(--cs-ink);font-family:var(--cs-fb,inherit)}

/* ---- Settings > Chat > Card style: picker with a preview swatch per style (no fonts loaded) ---- */
.pc-cs-group{margin:0;padding:0;border:0;min-width:0}
.pc-cs-group legend{padding:0;margin-bottom:8px}
.pc-cs-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pc-cs-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:1px solid var(--pb-border-hover);
  border-radius:10px;background:var(--pb-surface);color:var(--pb-text);cursor:pointer}
.pc-cs-opt:has(input:checked){border-color:var(--pb-blue);box-shadow:inset 0 0 0 1px var(--pb-blue)}
.pc-cs-opt input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--pb-blue);cursor:pointer}
.pc-cs-opt input:focus-visible{outline:3px solid var(--pb-blue);outline-offset:2px}
.pc-cs-name{display:block;font-weight:600}
.pc-cs-sub{display:block;font-size:11px;color:var(--pb-text-muted)}
.pc-cs-msg{margin-top:6px;font-size:12px;color:var(--pb-text-muted)}
.pc-cs-msg:empty{display:none}
.pc-cs-swatch{flex:0 0 auto;display:block;width:46px;height:34px;padding:4px;box-sizing:border-box;border-radius:var(--cs-rs);background:var(--cs-card-2);
  border:1px solid var(--cs-ls)}
.pc-cs-sw-card{display:flex;flex-direction:column;gap:3px;height:100%;padding:3px;box-sizing:border-box;border-radius:calc(var(--cs-rs) - 2px);background:var(--cs-card)}
.pc-cs-sw-card i{display:block;height:3px;border-radius:2px;background:var(--cs-ink)}
.pc-cs-sw-card i+i{width:60%;background:var(--cs-muted)}
.pc-cs-sw-card b{display:block;width:16px;height:6px;margin-top:auto;margin-left:auto;border-radius:var(--cs-rb);background:linear-gradient(135deg,var(--cs-go-a),var(--cs-go-b))}
.pc-cs-swatch[data-card-style="ledger"] .pc-cs-sw-card{box-shadow:inset 0 2px 0 var(--cs-ink)}
.pc-cs-swatch[data-card-style="afterburn"] .pc-cs-sw-card{box-shadow:inset 0 0 0 1px var(--cs-edge1,var(--cs-line))}

/* ---- motion: only when allowed ---- */
@media (prefers-reduced-motion: no-preference){
  :root[data-card-style] .pc-btn{transition:transform .12s ease,background-color .16s ease,border-color .16s ease,box-shadow .2s ease,color .16s ease}
  :root[data-card-style] .pc-btn:active:not(:disabled){transform:translateY(1px) scale(.97)}
  :root[data-card-style] .pc-choice .pc-option{transition:border-color .16s,background-color .16s,box-shadow .2s}
  :root[data-card-style] .pc-tray-btn{transition:background-color .16s,transform .12s}
  :root[data-card-style] .pc-tray-btn:active{transform:scale(.97)}
  :root[data-card-style] .pc-detail:not([hidden]){animation:pc-cs-drop .22s ease-out}
  :root[data-card-style] .pc-tray:not([hidden]){animation:pc-cs-pop .2s cubic-bezier(.2,.9,.3,1.2)}
  :root[data-card-style] .pc-bar-fill{animation:pc-cs-grow .7s cubic-bezier(.2,.8,.2,1) both}
}
@media (prefers-reduced-motion: reduce){
  :root[data-card-style] .pc-card,:root[data-card-style] .pc-card *,:root[data-card-style] .pc-card *::before,:root[data-card-style] .pc-card *::after,
  :root[data-card-style] .pc-tray,:root[data-card-style] .pc-tray *,:root[data-card-style] .pc-tray-btn,:root[data-card-style] .pc-tray-strip,
  :root[data-card-style] .pc-tray-strip *,.pc-cs-opt{transition:none!important;animation:none!important}
}
@keyframes pc-cs-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes pc-cs-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes pc-cs-grow{from{transform:scale(0,1)}to{transform:none}}