/* ============================================================================
 * COAI PA APP — panels/panels.css
 * Panel-level layout ONLY. Every colour, font, radius and easing comes from
 * design/bos-tokens.css. Load bos-tokens.css FIRST.
 * ONE exception, and it is deliberate: --bos-paper (the document preview frame)
 * falls back to #fff, because a printed page is white regardless of theme.
 *
 * Breakpoints follow the live SPA: 1024 / 768 / 520 (command/index.html:426-490).
 * There is no 390px tier in the SPA and there is none here — 390px is the test
 * device width and the 520 tier has to survive it.
 * ========================================================================= */

/* ── shared states ──────────────────────────────────────────────────────── */
.pk-state{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:38px 22px; min-height:220px;
  border:1px dashed var(--bos-line); border-radius:var(--bos-r-lg);
  background:var(--bos-surface-1); }
.pk-state__mark{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; border:1px solid var(--bos-line-strong); color:var(--bos-dim);
  font-family:var(--bos-font-display); font-size:15px; }
.pk-state__mark--bad{ color:var(--bos-atlas); border-color:var(--bos-atlas); }
.pk-state__title{ font-family:var(--bos-font-display); font-weight:500; font-size:15px;
  color:var(--bos-text-hi); }
.pk-state__detail{ font-size:13px; line-height:1.5; color:var(--bos-muted); max-width:44ch; }
.pk-state__code{ font-family:var(--bos-font-mono); font-size:9px; letter-spacing:1px;
  color:var(--bos-faint); text-transform:uppercase; }
.pk-state__btn{ margin-top:6px; }
.pk-spinner{ width:26px; height:26px; border-radius:50%;
  border:2px solid var(--bos-line-strong); border-top-color:var(--ag,var(--bos-accent));
  animation:pk-spin .9s linear infinite; }
@keyframes pk-spin{ to{ transform:rotate(360deg); } }

/* ── sections / fields ──────────────────────────────────────────────────── */
.pk-section__head{ margin-bottom:16px; }
.pk-section__title{ font-family:var(--bos-font-display); font-weight:300; font-size:24px;
  letter-spacing:-.3px; color:var(--bos-text-hi); margin:0; }
.pk-section__sub{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--bos-muted);
  max-width:60ch; }

.pk-field{ margin-bottom:14px; }
.pk-field__label{ display:block; margin-bottom:6px; font-family:var(--bos-font-mono);
  font-size:8px; letter-spacing:1.4px; text-transform:uppercase; color:var(--bos-dim); }
.pk-field.is-required .pk-field__label::after{ content:" *"; color:var(--ag,var(--bos-accent)); }
.pk-field__hint{ margin-top:5px; font-size:11.5px; line-height:1.45; color:var(--bos-faint); }
.pk-input, .pk-textarea{ font-size:14px; }
.pk-textarea{ resize:vertical; min-height:64px; }
.pk-select{ appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--bos-dim) 50%),
                   linear-gradient(135deg,var(--bos-dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.pk-twoup{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pk-count{ margin-top:5px; text-align:right; font-family:var(--bos-font-mono); font-size:9px;
  color:var(--bos-faint); }

.pk-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.pk-chip{ padding:7px 13px; min-height:34px; border-radius:var(--bos-r-pill);
  border:1px solid var(--bos-line-strong); background:transparent; cursor:pointer;
  font-family:var(--bos-font-body); font-size:12.5px; color:var(--bos-muted);
  transition:color .16s var(--bos-ease), border-color .16s var(--bos-ease),
             background-color .16s var(--bos-ease); }
.pk-chip:hover{ color:var(--bos-text-hi); border-color:var(--ag,var(--bos-accent)); }
.pk-chip.is-on{ color:var(--bos-accent-ink); background:var(--ag,var(--bos-accent));
  border-color:var(--ag,var(--bos-accent)); font-weight:600; }

/* ── DOCUMENT panel ─────────────────────────────────────────────────────── */
.pk-doc__grid, .pk-mkt__grid{ display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:18px; align-items:start; }
.pk-doc__form, .pk-mkt__form{ padding:18px 18px 16px; }

.pk-items{ display:flex; flex-direction:column; gap:8px; }
.pk-items__head{ display:flex; align-items:center; justify-content:space-between;
  margin:16px 0 7px; }
.pk-items__add{ min-height:30px; padding:5px 11px; font-size:12px; }
.pk-item{ display:grid; grid-template-columns:minmax(0,1fr) 56px 84px 26px; gap:6px;
  align-items:center; }
.pk-item .pk-input{ padding:9px 10px; font-size:13px; border-radius:var(--bos-r-sm); }
.pk-item__qty, .pk-item__price{ text-align:right; }
.pk-item__del{ width:26px; height:26px; border-radius:var(--bos-r-sm); cursor:pointer;
  border:1px solid var(--bos-line); background:transparent; color:var(--bos-faint);
  font-size:15px; line-height:1; }
.pk-item__del:hover{ color:var(--bos-atlas); border-color:var(--bos-atlas); }

.pk-totals{ margin-top:12px; padding-top:11px; border-top:1px solid var(--bos-line); }
.pk-totals__row{ display:flex; justify-content:space-between; padding:4px 0; font-size:13px;
  color:var(--bos-muted); }
.pk-totals__row.is-strong{ margin-top:5px; padding-top:8px; font-size:15px;
  border-top:1px solid var(--bos-line); color:var(--bos-text-hi); font-weight:600; }
.pk-totals__val{ font-family:var(--bos-font-display); font-variant-numeric:tabular-nums; }
.pk-totals__row.is-strong .pk-totals__val{ color:var(--ag,var(--bos-accent)); }
.pk-totals__none{ font-size:12px; color:var(--bos-faint); }

.pk-doc__actions{ margin-top:18px; }
.pk-doc__actions .bos-btn{ width:100%; }
.pk-doc__hint{ margin-top:8px; text-align:center; font-family:var(--bos-font-mono);
  font-size:9px; letter-spacing:1px; color:var(--bos-faint); }

.pk-result{ padding:16px; }
.pk-result__top{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.pk-result__badge{ background:var(--bos-sentinel); }
.pk-result__id{ font-family:var(--bos-font-mono); font-size:9px; letter-spacing:1px;
  color:var(--bos-faint); }
.pk-result__title{ margin:0 0 12px; font-family:var(--bos-font-display); font-weight:500;
  font-size:17px; color:var(--bos-text-hi); }
/* --bos-paper is white on purpose: this frame shows a PRINTED page, so it is the
   one surface in the app that is not part of the dark theme. */
.pk-result__frame{ width:100%; height:min(62vh,560px); border:1px solid var(--bos-line-strong);
  border-radius:var(--bos-r-md); background:var(--bos-paper,#fff); display:block; }
.pk-result__bar{ display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; }
.pk-result__foot{ margin-top:10px; font-size:11.5px; color:var(--bos-faint); }

/* ── TEAM panel ─────────────────────────────────────────────────────────── */
.pk-team__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px; }
.pk-agent{ padding:15px 16px; display:flex; flex-direction:column; gap:11px; }
.pk-agent__top{ display:flex; align-items:center; gap:11px; }
.pk-agent__avatar{ width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--bos-font-display); font-weight:600; font-size:14px;
  color:var(--ag); background:color-mix(in srgb, var(--ag) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--ag) 45%, transparent); }
.pk-agent__id{ flex:1 1 auto; min-width:0; }
.pk-agent__name{ font-family:var(--bos-font-display); font-weight:600; font-size:14px;
  letter-spacing:.6px; color:var(--bos-text-hi); }
.pk-agent__role{ font-size:11.5px; color:var(--bos-muted-2); }
.pk-agent__brief{ margin:0; font-size:12.5px; line-height:1.5; color:var(--bos-muted); }
.pk-agent__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  padding:10px 0; border-top:1px solid var(--bos-line); border-bottom:1px solid var(--bos-line); }
.pk-agent__stat{ text-align:center; }
.pk-agent__statval{ font-family:var(--bos-font-display); font-weight:600; font-size:19px;
  line-height:1; color:var(--ag); font-variant-numeric:tabular-nums; }
.pk-agent__statlabel{ margin-top:4px; font-family:var(--bos-font-mono); font-size:7px;
  letter-spacing:.9px; text-transform:uppercase; color:var(--bos-dim); }
.pk-agent__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; }
.pk-agent__last{ font-size:11px; color:var(--bos-faint); }
.pk-agent__locked{ font-family:var(--bos-font-mono); font-size:8px; letter-spacing:1px;
  text-transform:uppercase; color:var(--bos-faint); border:1px solid var(--bos-line);
  border-radius:var(--bos-r-pill); padding:4px 9px; }
.pk-agent__locked--soft{ opacity:.6; }
.pk-agent__cta{ --agring:color-mix(in srgb, var(--ag) 50%, transparent); }

.pk-pill{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:var(--bos-r-pill); border:1px solid var(--bos-line);
  font-family:var(--bos-font-mono); font-size:8px; letter-spacing:1px;
  text-transform:uppercase; color:var(--bos-muted-2); white-space:nowrap; }
.pk-pill__dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.pk-pill.is-online{ color:var(--bos-accent); border-color:color-mix(in srgb,var(--bos-accent) 40%,transparent); }
.pk-pill.is-online .pk-pill__dot{ box-shadow:0 0 6px var(--bos-accent); }
.pk-pill.is-standby{ color:var(--bos-gold); }
.pk-pill.is-offline{ color:var(--bos-atlas); }
.pk-pill.is-unknown{ color:var(--bos-faint); }

.pk-team__note{ margin:14px 0 0; font-size:11.5px; line-height:1.55; color:var(--bos-faint);
  max-width:76ch; }
.pk-team__warn{ margin-bottom:12px; padding:10px 13px; border-radius:var(--bos-r-md);
  border:1px solid var(--bos-line-strong); background:var(--bos-surface-1);
  font-size:12.5px; color:var(--bos-muted); }

.pk-feed{ margin-top:22px; }
.pk-feed__title{ margin:0 0 9px; font-family:var(--bos-font-display); font-weight:500;
  font-size:14px; letter-spacing:.4px; color:var(--bos-text-hi); }
.pk-feed__note{ font-size:12.5px; color:var(--bos-faint); }
.pk-feed__list{ list-style:none; margin:0; padding:0; border:1px solid var(--bos-line);
  border-radius:var(--bos-r-md); overflow:hidden; }
.pk-feed__item{ display:grid; grid-template-columns:82px minmax(0,1fr) auto; gap:10px;
  align-items:baseline; padding:10px 13px; font-size:12.5px;
  border-bottom:1px solid var(--bos-line-soft); }
.pk-feed__item:last-child{ border-bottom:0; }
.pk-feed__who{ font-family:var(--bos-font-mono); font-size:9px; letter-spacing:1px; }
.pk-feed__what{ color:var(--bos-text); overflow-wrap:anywhere; }
.pk-feed__when{ font-family:var(--bos-font-mono); font-size:9px; color:var(--bos-faint);
  white-space:nowrap; }

/* ── MARKETING panel ────────────────────────────────────────────────────── */
.pk-mkt__banner{ display:flex; align-items:center; gap:8px; margin-bottom:16px;
  padding:9px 13px; border-radius:var(--bos-r-md);
  border:1px solid color-mix(in srgb, var(--bos-atlas) 32%, transparent);
  background:color-mix(in srgb, var(--bos-atlas) 7%, transparent);
  font-size:12px; color:var(--bos-muted); }
.pk-mkt__bannerdot{ width:6px; height:6px; border-radius:50%; background:var(--bos-atlas);
  flex:0 0 6px; }
.pk-mkt__actions{ margin-top:16px; }
.pk-mkt__actions .bos-btn{ width:100%; }

.pk-draft{ padding:16px; }
.pk-draft__top{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.pk-draft__stage{ font-family:var(--bos-font-mono); font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--bos-faint); }
.pk-draft__body{ font-size:14.5px; line-height:1.62; color:var(--bos-text); }
.pk-draft__body--live{ white-space:pre-wrap; max-height:min(58vh,520px); overflow-y:auto;
  overscroll-behavior:contain; }
.pk-draft__p{ margin:0 0 12px; }
.pk-draft__p:last-child{ margin-bottom:0; }
.pk-draft__refuse{ margin-bottom:12px; padding:10px 13px; border-radius:var(--bos-r-md);
  border:1px solid color-mix(in srgb, var(--bos-atlas) 45%, transparent);
  background:color-mix(in srgb, var(--bos-atlas) 9%, transparent);
  font-size:12.5px; line-height:1.5; color:var(--bos-text); }
.pk-draft__refuse strong{ color:var(--bos-atlas); }
.pk-draft__bar{ display:flex; gap:9px; flex-wrap:wrap; margin-top:15px;
  padding-top:13px; border-top:1px solid var(--bos-line); }
.pk-caret{ display:inline-block; width:7px; height:15px; vertical-align:-2px;
  background:var(--bos-atlas); animation:pk-blink 1s steps(2) infinite; }
@keyframes pk-blink{ 50%{ opacity:0; } }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  /* matches command/index.html:427 — glass costs more than it gives on phones */
  .pk-state, .pk-draft, .pk-result, .pk-agent{ backdrop-filter:none !important; }
}
@media (max-width:900px){
  .pk-doc__grid, .pk-mkt__grid{ grid-template-columns:minmax(0,1fr); }
  .pk-result__frame{ height:min(52vh,440px); }
}
@media (max-width:768px){
  .pk-section__title{ font-size:21px; }
  /* 16px stops iOS Safari zooming the page on focus — same fix as index.html:443 */
  .pk-input, .pk-textarea, .pk-item .pk-input{ font-size:16px !important; }
  .pk-feed__item{ grid-template-columns:70px minmax(0,1fr); }
  .pk-feed__when{ grid-column:2; }
}
@media (max-width:520px){
  .pk-doc__form, .pk-mkt__form, .pk-result, .pk-draft, .pk-agent{ padding:14px; }
  .pk-twoup{ grid-template-columns:1fr; }
  .pk-item{ grid-template-columns:minmax(0,1fr) 48px 26px; row-gap:5px; }
  .pk-item__price{ grid-column:1 / 3; text-align:left; }
  .pk-item__del{ grid-row:2; grid-column:3; }
  .pk-team__grid{ grid-template-columns:minmax(0,1fr); }
  .pk-state{ padding:28px 16px; min-height:180px; }
  .pk-result__frame{ height:min(46vh,380px); }
  .pk-draft__body{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .pk-spinner{ animation-duration:2.4s; }
  .pk-caret{ animation:none; }
  .pk-chip, .bos-btn{ transition:none; }
}