/* Portal components shared by /intake, /portal, /buyer and /internal/inventory.
   Sits on top of /poly.css and uses its tokens. Page-specific styles go in their own file. */

.app{padding:48px 28px 96px}
.app h1{font-size:clamp(30px,4vw,46px);font-weight:300;margin-top:14px;max-width:22ch}
.app h1 em{font-style:italic;font-weight:400}
.app h2{font-size:clamp(22px,2.6vw,28px);font-weight:400}
.app h2 em{font-style:italic}
.muted{color:var(--muted)}
.small{font-size:14px}
.nowrap{white-space:nowrap}
.spacer{flex:1}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stackv > * + *{margin-top:14px}

/* cards */
.card{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:22px 22px}
.card + .card{margin-top:18px}
.card h3{font-size:19px;font-weight:500;font-family:var(--sans);letter-spacing:-.005em}
.card .cap{font-size:12.5px;color:var(--muted);font-weight:500}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cards .card + .card{margin-top:0}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:28px;overflow-x:auto;scrollbar-width:none}
.tabs button{font:500 14.5px var(--sans);color:var(--ink2);background:none;border:0;padding:12px 14px;
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.tabpanel{padding-top:26px}

/* forms */
.f{display:block;margin-top:16px}
.f > span{display:block;font-size:13px;color:var(--ink2);font-weight:500;margin-bottom:7px}
.f input,.f select,.f textarea{width:100%;padding:11px 13px;font:15.5px/1.4 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:7px}
.f textarea{min-height:96px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.f[data-invalid] input,.f[data-invalid] select,.f[data-invalid] textarea{border-color:#8c2f24}
.f .err{display:none;color:#8c2f24;font-size:13px;margin-top:6px}
.f[data-invalid] .err{display:block}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.fgrid .full{grid-column:1/-1}

/* chips (product pickers, filters). Base look/size (min-height 44px per spec 3.4's
   mobile tap-target rule) comes from poly.css's canonical .chip rule — this file
   only adds the app-chrome-specific state hook: these chips are real
   <button aria-pressed> toggles (buyer.js filters, inventory.js category editor),
   not poly.css's checkbox-based [data-on] pattern, so the pressed/focus rules
   below don't exist upstream and stay here. A duplicate base rule (14px font,
   38px min-height) used to live here and win the cascade over poly.css's 44px —
   deleted, was shrinking these chips below the mobile tap-target minimum. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* status pills — semantic (ok/warn/bad), intentionally not on the single
   brand --accent: pill meaning is carried by color, kept distinct per D4 item 6. */
.pill{display:inline-block;font:500 12px var(--sans);padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink2);background:var(--paper);white-space:nowrap}
.pill.ok{background:#e5eee3;border-color:#bfd3bb;color:#2f5a33}
.pill.warn{background:#f5ecd9;border-color:#e2cf9f;color:#6b4f12}
.pill.bad{background:#f4e1dd;border-color:#dfb7ae;color:#7a2c20}
.pill.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* tables: always inside .tablewrap so the page never scrolls sideways */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:var(--paper2)}
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
table.t th{text-align:left;font-size:12.5px;color:var(--muted);
  font-weight:500;padding:11px 14px;background:var(--paper3);border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tr[data-click]{cursor:pointer}
table.t tr[data-click]:hover td{background:var(--paper)}
table.t .num{text-align:right;font-variant-numeric:tabular-nums}

/* timeline */
.timeline{list-style:none;margin-top:18px;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;padding:10px 0;position:relative}
.timeline li::before{content:"";position:absolute;left:10px;top:30px;bottom:-10px;width:1px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);margin-top:1px}
.timeline li[data-state="done"] .dot{background:var(--ink);border-color:var(--ink)}
.timeline li[data-state="current"] .dot{background:var(--ink);border-color:var(--ink);outline:3px solid var(--paper);outline-offset:2px}
.timeline li[data-state="upcoming"] .lbl{color:var(--muted)}
.timeline .at{font-size:13px;color:var(--muted);white-space:nowrap}

/* drawer */
.drawer-bg{position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 35%, transparent);z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--paper);z-index:61;
  overflow-y:auto;padding:28px 26px 60px;border-left:1px solid var(--line)}
.drawer .close-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:20px;line-height:1}

/* dropzone */
.dropzone{border:1.5px dashed var(--line);border-radius:10px;padding:28px;text-align:center;background:var(--paper);
  cursor:pointer;transition:border-color .15s,background .15s}
.dropzone[data-over]{border-color:var(--ink);background:var(--paper2)}
.bar{height:6px;border-radius:3px;background:var(--line2);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .2s}

/* notices + toast + empty */
.notice{border-left:2px solid var(--ink);background:var(--paper2);padding:14px 16px;border-radius:0 8px 8px 0;font-size:15px;color:var(--ink2)}
.notice.bad{border-left-color:#8c2f24}
.empty{padding:34px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:9px;font-size:14.5px;z-index:80;max-width:calc(100% - 32px)}
/* FC-23: poly.css:83 already sets .btn[disabled]{opacity:.32}; this app-chrome
   copy only needs to add pointer-events, not redeclare opacity at a
   different value than the shared token. */
.btn[disabled]{pointer-events:none}
/* FC-14: .btn-sm only trimmed padding/font, so it still rendered at poly.css's
   shared 48px .btn min-height -- a touch tall next to buyer.css's 40px
   .actrow1 controls and its own in-drawer submit buttons. */
.btn-sm{padding:9px 15px;font-size:14px;min-height:40px}

/* secondary-but-real app actions (Counter, Pass, Refresh, Edit intake...).
   poly.css deleted the old outline .btn-quiet (spec 3.8 bans outline buttons);
   this reuses the same class name so no markup edits are needed anywhere it's
   already applied, but gives it the addendum D4 "quiet filled" treatment
   instead: a hairline border, no transparent/outline look, no shadow. */
.btn-quiet{background:var(--paper3);color:var(--ink);border:1px solid var(--line)}
.btn-quiet:hover{background:var(--paper2);border-color:var(--ink2)}

@media (max-width:720px){
  .app{padding:32px 20px 80px}
  .fgrid{grid-template-columns:1fr}
  .card{padding:18px 16px}
}