/* ==========================================================================
   lab-tier0.css
   MarginArc Tier 0 component grammar, extracted from the shipped reference:
   lab-handoff/assets/reference/dunes-point-eleconnex-vision-v2.html
   Class names, selectors, spacing, radius and shadow token usage are preserved
   from the reference so it stays a living style guide. Colors resolve only to
   custom properties (or hex) defined in assets/marginarc-design-tokens.css.
   Token remaps vs the reference (reference tokens not in the design system):
     --danger        -> --error
     --danger-tint   -> --error-tint
     --warn-text     -> #A85D00  (present in tokens as --dv-4)
   No tokens are redefined here; import marginarc-design-tokens.css first.
   ========================================================================== */

/* --- icon helper (reference line 59, .ico) --------------------------------- */
.ico{width:1em;height:1em;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;flex:none}

/* ==========================================================================
   1. MARKER / EYEBROW SECTION HEADER (reference "shared section grammar", ~95-103)
   number + hairline + uppercase eyebrow
   ========================================================================== */
.sechead{max-width:780px}
.marker{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.marker .no{font-size:13px;font-weight:600;color:var(--accent-deep);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.marker .line{height:1px;width:44px;background:var(--border-strong)}
.marker .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.sechead h2{margin:0 0 16px}
.lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--text-mid);max-width:66ch}

/* ==========================================================================
   2. DESK WINDOW CHROME (reference "03 watch one order", 143-152, 208-209)
   window shell, three dots, toolbar row, segmented control, progress rail
   ========================================================================== */
.desk{margin-top:42px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.deskbar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface)}
.wdots{display:flex;gap:6px}
.wdots i{width:10px;height:10px;border-radius:50%;background:var(--sunken);border:1px solid var(--border-strong)}
.deskbar .t{font-size:13px;font-weight:600;color:var(--text-mute);letter-spacing:.02em}
.seg{margin-left:auto;display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;gap:2px}
.seg button{border:0;background:transparent;color:var(--text-mid);font:600 13.5px 'Inter';padding:9px 18px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button.on{background:var(--ink);color:#fff}
.seg button.on.ai{background:var(--accent)}
.deskgrid{display:grid;grid-template-columns:1.04fr 1fr}
.deskprog{height:2px;background:var(--sunken)}
.deskprog i{display:block;height:100%;width:0;background:var(--accent)}

/* ==========================================================================
   3. MAIL VIEW (reference "03 watch one order", 153-169, 322-326)
   mailhead From/To/Subject rows, order line items (.pline), brand tag chips
   ========================================================================== */
.mail{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.mailhead{padding:16px 22px 13px;border-bottom:1px solid var(--border)}
.mailhead .row{display:flex;gap:8px;font-size:13px;color:var(--text-mid);padding:2.5px 0;min-width:0}
.mailhead .k{color:var(--text-mute);width:56px;flex:none}
.mailhead .v{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.samp{float:right;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);border:1px dashed var(--border-strong);border-radius:var(--r-xs);padding:3px 8px}
.mailbody{padding:18px 22px 22px;font-size:14px;color:var(--text-mid);flex:1}
.mailbody .hi{margin-bottom:12px}
.pline{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r-sm);margin-top:8px;background:#fff;transition:background var(--dur-slow) var(--ease)}
.pline .qty{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);width:58px;flex:none}
.pline .desc{color:var(--text-mid);min-width:0}
.pline .tag{margin-left:auto;font-size:11px;font-weight:600;border-radius:var(--r-xs);padding:3.5px 9px;white-space:nowrap;opacity:0;transform:scale(.8);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.pline.tagged .tag{opacity:1;transform:none}
.pline .sweep{position:absolute;inset:0;border-radius:var(--r-sm);background:var(--accent-tint);opacity:0;pointer-events:none}
.pline.scan .sweep{animation:scan .55s var(--ease)}
.mailsig{font-size:13px;color:var(--text-mute);margin-top:14px}
/* exception / flag treatment on a line (reference 322-326) */
.pline .flagtag{margin-left:auto;font-size:11px;font-weight:600;border-radius:var(--r-xs);padding:3.5px 9px;background:var(--warning-tint);color:#A85D00;display:none;white-space:nowrap}
.pline.flag{background:var(--warning-tint);border-color:var(--warning)}
.pline.flag .flagtag{display:inline-block;animation:tagin .3s var(--ease-out)}
.pline.flag .tag{display:none}

/* ==========================================================================
   4. ORDER RECORD SIDE (reference "03 watch one order", 170-190)
   header row, field rows (label + value), skeleton pending + done states, check
   ========================================================================== */
.orderp{display:flex;flex-direction:column;min-width:0}
.ophead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 22px;border-bottom:1px solid var(--border)}
.ophead .t{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.ophead .t .ico{color:var(--accent-deep);font-size:16px}
.fields{padding:4px 22px 8px}
.field{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--surface);font-size:13.5px;min-height:39px}
.field:last-child{border-bottom:0}
.field .fk{color:var(--text-mute);width:118px;flex:none}
.field .fv{color:var(--text);font-weight:500;display:flex;align-items:center;gap:7px;opacity:0;transform:translateY(3px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);min-width:0}
.field.done .fv{opacity:1;transform:none}
.field .fv .ok{color:var(--success);font-size:15px}
.field .skel{height:9px;border-radius:5px;background:var(--sunken);flex:1;max-width:150px;transition:opacity var(--dur-slow)}
.field.done .skel{display:none}

/* ==========================================================================
   5. STATUS PILLS (reference 174-176, 327)
   neutral, work (red family), ok (green), warn (amber)
   ========================================================================== */
.status{font-size:11.5px;font-weight:600;border-radius:var(--r-pill);padding:4.5px 11px;background:var(--sunken);color:var(--text-mute);transition:background var(--dur-slow),color var(--dur-slow);white-space:nowrap}
.status.work{background:var(--error-tint);color:var(--error)}
.status.ok{background:var(--success-tint);color:var(--success)}
.status.warn{background:var(--warning-tint);color:#A85D00}

/* ==========================================================================
   6. BIG TABULAR CLOCK (reference 177-181)
   ========================================================================== */
.clockrow{display:flex;align-items:baseline;gap:12px;padding:16px 22px 12px}
.clock{font-size:40px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.clock.hot{color:var(--error)}
.clock.cool{color:var(--success)}
.clockrow .cl{font-size:12.5px;color:var(--text-mute)}

/* ==========================================================================
   7. CAPTION / STATUS BAR UNDER DESK (reference 191-198)
   one-line narration + step counter, replay affordance
   ========================================================================== */
.steps{margin-top:auto;border-top:1px solid var(--border);background:var(--surface);padding:13px 22px;min-height:64px;display:flex;align-items:center;gap:12px}
.steps .sc{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--error-tint);color:var(--error);transition:background var(--dur-slow),color var(--dur-slow)}
.steps.ai .sc{background:var(--accent-tint);color:var(--accent-deep)}
.steps .st{font-size:13.5px;color:var(--text);font-weight:500;line-height:1.4}
.steps .sn{font-size:11.5px;color:var(--text-mute);font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap}
.replay{display:none;align-items:center;gap:7px;margin-left:8px;border:0;background:transparent;color:var(--accent-deep);font:600 12.5px 'Inter';cursor:pointer;padding:6px 8px;border-radius:var(--r-sm)}
.replay.show{display:inline-flex}
.replay:hover{background:var(--accent-tint)}

/* ==========================================================================
   8. CHIPS (reference 63-65)
   prospect logo chip (white chip, hairline, radius) + .lw text wordmark fallback
   ========================================================================== */
.chip{background:#fff;border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:8px 14px;min-height:44px;box-shadow:var(--shadow-xs)}
.chip img{height:22px;width:auto;object-fit:contain}
.lw{font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-.01em;white-space:nowrap}

/* ==========================================================================
   9. CARDS (reference 200-205, 213-226, 302-305; shared polish 247-248)
   white card, hairline, radius, shadow, hover lift
   ========================================================================== */
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-xs)}
.stat .l{font-size:12.5px;color:var(--text-mute);margin-bottom:7px}
.stat .v{font-size:15.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stat .mut{color:#586B83;font-weight:500}
.stat .pos{color:var(--success)}
.stat .ico{color:var(--accent-deep);font-size:13px}
.scard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px}
.scard .n{font-size:12px;font-weight:600;color:var(--accent-deep);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.scard h3{font-size:18px}
.scard p{font-size:14px;line-height:1.6;color:var(--text-mid)}
.pcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm)}
.pcard .ic{width:46px;height:46px;border-radius:var(--r);background:var(--accent-tint);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.pcard h3{margin-bottom:9px}
.pcard p{font-size:14.5px;line-height:1.6}
.ecard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
.ecard .ev{font-size:30px;font-weight:700;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ecard .el{font-size:14px;color:var(--text-mid);margin-top:8px;line-height:1.55}
.ecard .es{font-size:12px;color:var(--text-mute);margin-top:14px;padding-top:10px;border-top:1px solid var(--surface)}
.scard,.pcard,.stat,.ecard{transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)}
.scard:hover,.pcard:hover,.ecard:hover,.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* ==========================================================================
   10. BUTTONS (reference 106-111, 249-250)
   primary accent + secondary/ghost
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 15px/1 'Inter';padding:14px 22px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-deep);color:#fff}
.btn-s{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-s:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn .ico{transition:transform var(--dur) var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

/* ==========================================================================
   11. KEYFRAMES (reference 168, 326) + reduced-motion guards (362-370)
   scan = line-item sweep; tagin = flag tag pop-in.
   (No skeleton-shimmer or clock-tick keyframe exists in the reference: the
   skeletons are static bars toggled by .field.done, and the clock is JS-driven.)
   ========================================================================== */
@keyframes scan{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
@keyframes tagin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .pline.scan .sweep{animation:none}
  .pline .tag,.field .fv,.status,.clock,.steps .sc{transition:none}
  .pline.flag .flagtag{animation:none}
}