/* ============================================================
   ENGINEERING.CSS — Engineering Operations module (v1.20.1)

   The approved Engineering Operations visual language, ported to vanilla CSS
   and scoped entirely under `.eng-root` so it never leaks into the rest of the
   platform. Token palette (light + dark) mirrors the Sarpras Operations design
   system exactly; every colour is a token — nothing hardcoded. Theme follows
   the app's [data-theme] attribute.
   ============================================================ */

/* ── Tokens (scoped) ──────────────────────────────────────────────────── */
.eng-root {
  /* Product redesign (v1.31.24.0): Engineering no longer carries its own palette or
     fonts — every canonical token (canvas, surfaces, borders, text, status
     colours, fonts) is INHERITED from platform.css so this module renders in
     the same design language as the rest of the product. Only the module's
     own token NAMES remain, as aliases. See docs/DESIGN-SYSTEM.md §2. */
  --rail:var(--surface);
  --border-faint:color-mix(in srgb, var(--border) 60%, transparent);
  --text-dim:var(--muted); --text-faint:var(--faint); --text-ghost:color-mix(in srgb, var(--faint) 60%, transparent);
  --accent-2:color-mix(in srgb, var(--accent) 88%, white); --accent-weak:var(--accent-subtle); --accent-line:color-mix(in srgb, var(--accent) 22%, transparent);
  --crit:var(--danger); --crit-weak:var(--danger-bg);
  --c-green:var(--ok); --c-blue:var(--info); --c-amber:var(--warn); --c-violet:#6E56A6; --c-teal:#1E7F8C; --c-neutral:var(--faint);
  --c-green-weak:var(--ok-bg); --c-blue-weak:var(--info-bg); --c-amber-weak:var(--warn-bg);
  --c-violet-weak:color-mix(in srgb, var(--c-violet) 12%, transparent); --c-teal-weak:color-mix(in srgb, var(--c-teal) 12%, transparent); --c-neutral-weak:color-mix(in srgb, var(--faint) 12%, transparent);
  --eng-max:1180px;
  color:var(--text); font-family:var(--font-sans);
  /* v1.20.2 — Engineering adopts the shell frame: NO own background (inherits
     the platform canvas) so it never reads as a separate white panel. Mirrors
     the Petty Cash v1.16.2.5 fix that stopped PC "looking like a different app". */
  background:transparent;
  min-height:100%;
}
:root[data-theme="dark"] .eng-root {
  --accent-line:color-mix(in srgb, var(--accent) 32%, transparent);
  --c-violet:#A98FD2; --c-teal:#4FB8C4;
}

.eng-root *,.eng-root *::before,.eng-root *::after{box-sizing:border-box;}
.eng-ic{display:inline-block;vertical-align:middle;flex-shrink:0;}
/* v1.20.2 — unified workspace geometry (left-aligned, shared max-width + gutters)
   so Engineering aligns with Driver Ops / Petty Cash / Analytics instead of the
   old centered prototype frame. */
.eng-content{
  max-width:var(--workspace-max-width);
  margin-left:0;margin-right:0;
  padding:var(--workspace-pad-top) var(--workspace-pad-inline) var(--workspace-pad-bottom);
}
.eng-flex1{flex:1;}
.eng-muted{color:var(--text-faint);font-size:13px;}
.eng-muted-inline{color:var(--text-faint);font-weight:600;}
.eng-pad{padding:20px 4px;} .eng-pad-sm{padding:6px 0;}
.eng-dot-sep{color:var(--text-ghost);}
.eng-mt{margin-top:16px;}
.eng-mb{margin-bottom:16px;}
.eng-empty-dash{color:var(--text-ghost);font-weight:600;}

/* ── page + section headers ───────────────────────────────────────────── */
.eng-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.eng-page-crumb{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
.eng-page-title{font-family:var(--font-display);font-weight:600;font-size:var(--type-display-lg);letter-spacing:-.015em;margin:0;}
.eng-page-lede{font-size:14px;color:var(--text-dim);margin:10px 0 0;max-width:720px;line-height:1.55;}
.eng-page-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.eng-level{margin-top:44px;}
.eng-sec-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;}
.eng-sec-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-fg);}
.eng-sec-title{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.02em;margin-top:3px;}
.eng-sec-sub{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);margin-bottom:2px;}
.eng-link{background:none;border:none;color:var(--accent-fg);font-weight:700;font-size:12.5px;cursor:pointer;font-family:var(--font-sans);margin-left:auto;}

/* ── grids + cards ────────────────────────────────────────────────────── */
.eng-grid{display:grid;gap:16px;}
/* Grid items default to min-width:auto (content-based minimum), which a
   nested flex row's own min-width:0 (.eng-attn-main etc.) does NOT override
   at this outer level — the .eng-card grid item still refuses to shrink
   below its content's natural/nowrap text width, forcing horizontal
   overflow at narrow mobile widths even after .eng-grid.-lead correctly
   collapses to one column. min-width:0 here lets the card actually honor
   the column's width and let its own ellipsis/wrap rules do their job. */
.eng-grid > .eng-card{min-width:0;}
.eng-grid.-lead{grid-template-columns:1.5fr 1fr;} .eng-grid.-2{grid-template-columns:1fr 1fr;} .eng-grid.-3{grid-template-columns:repeat(3,1fr);}
.eng-stack{display:flex;flex-direction:column;gap:16px;}
.eng-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;}

/* V1 Redesign Phase 8 (v1.30.9.20) — genuine 5-column kanban (Open/Joined/
   In progress/Postponed/Verify), replacing the single flowing card grid
   above for the Work Queue screen specifically (.eng-card-grid itself is
   untouched — still used elsewhere, e.g. inside a single column's body).
   Horizontal-scroll on narrow widths rather than a pill-filtered single
   list: preserves full at-a-glance visibility of every column without a
   new filter-state interaction the mockup's mobile treatment would need
   (a deliberate, disclosed scope simplification for this phase). */
.eng-kanban{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:6px;}
.eng-kanban-col{flex:0 0 300px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.eng-kanban-col-head{display:flex;align-items:center;gap:8px;padding:0 2px;}
.eng-kanban-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-faint);}
.eng-kanban-dot[data-col="joined"]{background:var(--c-blue);}
.eng-kanban-dot[data-col="in_progress"]{background:var(--accent);}
.eng-kanban-dot[data-col="postponed"]{background:var(--c-amber);}
.eng-kanban-dot[data-col="verify"]{background:var(--c-green);}
.eng-kanban-col-label{font-family:var(--font-sans);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);}
.eng-kanban-col-count{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-left:auto;}
.eng-kanban-col-body{display:flex;flex-direction:column;gap:10px;}
.eng-kanban-col-body .eng-card{width:100%;}
.eng-kanban-col-empty{font-size:12px;color:var(--text-faint);padding:14px 0;text-align:center;border:1px dashed var(--border);border-radius:12px;}
@media (max-width:767px){
  .eng-kanban-col{flex-basis:78vw;}
}

/* V1 Redesign Phase 8 (v1.30.9.20) — numbered lifecycle stepper, drawer-only.
   Deliberately its own shape (numbered circles), not a reskin of any
   Assignment Board component, per the mockup's own "visually distinct...
   same tokens, different shape" requirement. */
.eng-stepper{display:flex;gap:0;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:16px;}
.eng-stepper-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.eng-stepper-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:700;font-size:11px;background:var(--surface-2,var(--border));color:var(--text-faint);}
.eng-stepper-step[data-reached="true"] .eng-stepper-num{background:var(--accent);color:#fff;}
.eng-stepper-label{font-family:var(--font-sans);font-weight:600;font-size:10px;color:var(--text-faint);text-align:center;}
.eng-stepper-step[data-reached="true"] .eng-stepper-label{color:var(--text);}
.eng-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);}
.eng-card.-pad{padding:24px;}
.eng-card-head{margin-bottom:14px;} .eng-card-h-title{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;}
.eng-card-h-sub{font-size:12px;color:var(--text-faint);margin-top:2px;}
.eng-card-cta{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-faint);}

/* ── buttons ──────────────────────────────────────────────────────────── */
.eng-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-sans);font-weight:700;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s,filter .12s,transform .12s;white-space:nowrap;}
.eng-btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text);}
.eng-btn.-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;border:none;box-shadow:0 6px 16px -10px var(--accent);}
.eng-btn.-primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
.eng-btn.-ghost{background:transparent;border-color:var(--border);}
.eng-btn.-sm{height:32px;padding:0 12px;font-size:12px;border-radius:9px;}
.eng-btn.-big{height:52px;font-size:14.5px;border-radius:13px;flex:1;min-width:150px;}
.eng-btn.-tone-violet{background:var(--c-violet-weak);color:var(--c-violet);border:none;}
.eng-btn.-tone-muted{color:var(--text-dim);}
.eng-btn.-danger{color:var(--crit,#d64545);border-color:var(--border);}
.eng-btn.-danger:hover{background:var(--c-red-weak,rgba(214,69,69,.10));border-color:var(--crit,#d64545);color:var(--crit,#d64545);}
/* Admin-only delete/archive control (v1.20.6, Objective 2) */
.eng-danger-zone{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-faint);}
.eng-danger-hint{font-size:11.5px;line-height:1.35;color:var(--text-faint);}
.eng-icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);display:grid;place-items:center;cursor:pointer;flex:none;}
.eng-icon-btn:hover{color:var(--text);background:var(--surface-2);}

/* ── pills / priority / category / avatars ────────────────────────────── */
.eng-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.01em;white-space:nowrap;}
.eng-pill[data-pill="active"]{background:var(--c-blue-weak);color:var(--c-blue);}
.eng-pill[data-pill="sched"]{background:var(--c-amber-weak);color:var(--c-amber);}
.eng-pill[data-pill="done"]{background:var(--c-green-weak);color:var(--c-green);}
.eng-pill[data-pill="neutral"]{background:var(--surface-2);color:var(--text-faint);}
.eng-pill[data-pill="cancel"]{background:var(--surface-2);color:var(--text-faint);}
.eng-prio{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;}
.eng-prio.-mono{font-family:var(--font-mono);letter-spacing:.02em;}
.eng-prio-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;}
.eng-cat-tile{display:grid;place-items:center;flex:none;}
.eng-cat-tile[data-tone="c-blue"]{background:var(--c-blue-weak);color:var(--c-blue);} .eng-cat-tile[data-tone="c-green"]{background:var(--c-green-weak);color:var(--c-green);}
.eng-cat-tile[data-tone="c-amber"]{background:var(--c-amber-weak);color:var(--c-amber);} .eng-cat-tile[data-tone="c-violet"]{background:var(--c-violet-weak);color:var(--c-violet);}
.eng-cat-tile[data-tone="c-teal"]{background:var(--c-teal-weak);color:var(--c-teal);} .eng-cat-tile[data-tone="crit"]{background:var(--crit-weak);color:var(--crit);}
.eng-cat-tile[data-tone="c-neutral"]{background:var(--c-neutral-weak);color:var(--c-neutral);}
.eng-ava{border-radius:50%;color:#fff;display:inline-grid;place-items:center;font-weight:600;font-family:var(--font-sans);flex:none;}
.eng-stack{display:inline-flex;align-items:center;}
.eng-stack-ava,.eng-stack-more{border:2px solid var(--surface);}
.eng-stack-ava.-active{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--c-blue);}
.eng-stack-more{background:var(--surface-3);color:var(--text-dim);font-size:10px;}

/* ── KPIs / hero ──────────────────────────────────────────────────────── */
.eng-hero{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:46px;margin-top:22px;padding-top:32px;border-top:1px solid var(--border-faint);}
.eng-hero-strip{margin-top:22px;padding-top:28px;border-top:1px solid var(--border-faint);}
.eng-hero-health{display:flex;align-items:center;gap:22px;padding-right:42px;border-right:1px solid var(--border-faint);}
.eng-hero-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:700;max-width:130px;line-height:1.4;}
.eng-hero-stats{display:grid;}
.eng-hero-stats.-c3{grid-template-columns:repeat(3,1fr);} .eng-hero-stats.-c4{grid-template-columns:repeat(4,1fr);} .eng-hero-stats.-c5{grid-template-columns:repeat(5,1fr);}
.eng-kpi{padding:0 26px;border-right:1px solid var(--border-faint);}
.eng-kpi:first-child{padding-left:0;} .eng-kpi:last-child{border-right:none;padding-right:0;}
.eng-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;}
.eng-kpi-value{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;}
.eng-kpi.-alert .eng-kpi-value{color:var(--c-amber);}
.eng-kpi-cap{font-size:12px;color:var(--text-faint);margin-top:3px;font-weight:600;}
.eng-ring-num{font-family:var(--font-display);font-weight:600;font-size:26px;fill:var(--text);}
.eng-grade{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:700;padding:5px 13px;border-radius:999px;background:var(--c-green-weak);color:var(--c-green);}
.eng-grade[data-tone="amber"],.eng-grade[data-tone="crit"]{background:var(--c-amber-weak);color:var(--c-amber);}

/* ── verify banner ────────────────────────────────────────────────────── */
.eng-verify-banner{border-radius:16px;border:1px solid var(--border);background:var(--c-amber-weak);padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.eng-verify-ic{width:44px;height:44px;border-radius:13px;background:var(--surface);color:var(--c-amber);display:grid;place-items:center;flex:none;}
.eng-verify-txt{flex:1;min-width:220px;}
.eng-verify-title{font-family:var(--font-display);font-weight:600;font-size:18px;}
.eng-verify-sub{font-size:12.5px;color:var(--text-dim);margin-top:3px;font-weight:600;}
.eng-verify-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ── filter bar / chips / search ──────────────────────────────────────── */
.eng-filterbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 8px;}
.eng-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.eng-chip{border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-sans);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background-color .12s,border-color .12s,color .12s;}
.eng-chip:hover{border-color:var(--border-strong);color:var(--text);}
.eng-chip[data-on="true"]{background:var(--accent-weak);border-color:var(--accent-line);color:var(--accent-fg);}
.eng-chip-count{font-family:var(--font-mono);font-size:11px;font-weight:700;opacity:.7;}
.eng-newest{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-faint);font-weight:600;}
.eng-search{position:relative;}
.eng-search-input{height:38px;width:300px;max-width:100%;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);padding:0 14px;font-family:var(--font-sans);font-size:13px;color:var(--text);}
.eng-search-input:focus{outline:2px solid var(--accent-line);outline-offset:1px;}

/* Mobile: 16px font prevents iOS Safari zoom on focus */
@media (max-width: 600px){
  .eng-search-input{font-size:16px;}
}

/* ── assignment card ──────────────────────────────────────────────────── */
.eng-card[data-act]{cursor:pointer;padding:20px;position:relative;overflow:hidden;transition:box-shadow .15s,transform .15s,border-color .15s;}
.eng-card[data-act]:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--border-strong);}
.eng-card-crit{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--crit);}
.eng-card-top{display:flex;align-items:flex-start;gap:13px;}
.eng-card-main{flex:1;min-width:0;}
.eng-card-line1{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.eng-card-id{font-family:var(--font-mono);font-size:11px;color:var(--text-ghost);}
.eng-card-title{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25;}
.eng-card-loc{display:flex;align-items:center;gap:7px;margin-top:6px;color:var(--text-faint);font-size:12.5px;font-weight:600;}
.eng-card-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eng-card-badges{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.eng-ubadge{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:999px;}
.eng-ubadge[data-tone="crit"]{background:var(--crit-weak);color:var(--crit);} .eng-ubadge[data-tone="c-amber"]{background:var(--c-amber-weak);color:var(--c-amber);}
.eng-card-ctx{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;}
.eng-card-foot{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-faint);}
.eng-card-foot-left{display:flex;align-items:center;gap:9px;}
.eng-card-dur{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);font-weight:600;}
.eng-card-target{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap;}
.eng-wait-inline{font-size:12px;color:var(--c-amber);font-weight:700;display:inline-flex;align-items:center;gap:6px;}

/* ── feed / attn / live / hist rows ───────────────────────────────────── */
.eng-feed-row,.eng-attn-row,.eng-live-row,.eng-hist-row,.eng-vq-row,.eng-avail-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--border-faint);cursor:pointer;}
.eng-feed-row:first-child,.eng-avail-row:first-child{border-top:none;}
.eng-feed-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;}
.eng-feed-ic[data-tone="c-blue"],.eng-tl-dot[data-tone="c-blue"],.eng-tlc-cdot[data-tone="c-blue"]{background:var(--c-blue-weak);color:var(--c-blue);}
.eng-feed-ic[data-tone="c-green"],.eng-tl-dot[data-tone="c-green"],.eng-tlc-cdot[data-tone="c-green"]{background:var(--c-green-weak);color:var(--c-green);}
.eng-feed-ic[data-tone="c-amber"],.eng-tl-dot[data-tone="c-amber"],.eng-tlc-cdot[data-tone="c-amber"]{background:var(--c-amber-weak);color:var(--c-amber);}
.eng-feed-ic[data-tone="c-violet"],.eng-tl-dot[data-tone="c-violet"],.eng-tlc-cdot[data-tone="c-violet"]{background:var(--c-violet-weak);color:var(--c-violet);}
.eng-feed-ic[data-tone="c-neutral"],.eng-tl-dot[data-tone="c-neutral"],.eng-tlc-cdot[data-tone="c-neutral"]{background:var(--c-neutral-weak);color:var(--c-neutral);}
.eng-feed-ic[data-tone="accent"],.eng-tl-dot[data-tone="accent"],.eng-tlc-cdot[data-tone="accent"]{background:var(--accent-weak);color:var(--accent-fg);}
.eng-feed-ic[data-tone="text-faint"],.eng-tl-dot[data-tone="text-faint"],.eng-tlc-cdot[data-tone="text-faint"]{background:var(--surface-2);color:var(--text-faint);}
.eng-feed-ic[data-tone="crit"],.eng-tl-dot[data-tone="crit"],.eng-tlc-cdot[data-tone="crit"]{background:var(--crit-weak);color:var(--crit);}
.eng-feed-main,.eng-attn-main,.eng-live-main,.eng-hist-main,.eng-vq-main{flex:1;min-width:0;}
.eng-feed-label,.eng-attn-title,.eng-live-name,.eng-hist-title,.eng-vq-title{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eng-feed-sub,.eng-attn-sub,.eng-live-task,.eng-hist-sub,.eng-vq-sub{font-size:12px;color:var(--text-faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eng-feed-time{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);font-weight:600;white-space:nowrap;}
.eng-attn-sub{display:flex;align-items:center;gap:6px;font-weight:600;}
.eng-live-ava{position:relative;flex:none;} .eng-live-pulse{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--c-blue);border:2px solid var(--surface);}
.eng-live-dur{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--c-blue);}
.eng-avail-name{flex:1;font-size:13.5px;font-weight:700;}
.eng-hist-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;}

/* ── mywork hero (member) ─────────────────────────────────────────────── */
.eng-mywork{border-radius:18px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-md);padding:24px;position:relative;overflow:hidden;}
.eng-mywork-bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c-violet);}
.eng-mywork[data-active="true"] .eng-mywork-bar{background:var(--c-blue);}
.eng-mywork-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.eng-mywork-info{flex:1;min-width:180px;}
.eng-mywork-kicker{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;}
.eng-mywork-title{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.02em;margin-top:4px;line-height:1.15;cursor:pointer;}
.eng-mywork-loc{font-size:13px;color:var(--text-faint);font-weight:600;margin-top:6px;display:flex;align-items:center;gap:7px;}
.eng-mywork-time{text-align:right;flex:none;}
.eng-mywork-num{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.eng-mywork-cap{font-size:11px;color:var(--text-faint);font-weight:600;}
.eng-mywork .eng-action-row{margin-top:18px;}

/* ── action rows / notes ──────────────────────────────────────────────── */
.eng-action-row{display:flex;gap:10px;flex-wrap:wrap;}
.eng-action-note{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:13px;font-weight:700;font-size:13.5px;}
.eng-action-note.-ok{background:var(--c-green-weak);color:var(--c-green);}
.eng-action-note.-wait{background:var(--c-amber-weak);color:var(--c-amber);}
.eng-action-note.-muted{background:var(--surface-2);color:var(--text-faint);}
.eng-pulse-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;}
@media (prefers-reduced-motion:no-preference){.eng-pulse-dot,.eng-live-pulse{animation:engPulse 1.8s infinite;}}
@keyframes engPulse{0%{box-shadow:0 0 0 0 rgba(63,114,214,.5);}70%{box-shadow:0 0 0 6px rgba(63,114,214,0);}100%{box-shadow:0 0 0 0 rgba(63,114,214,0);}}

/* ── donut / legend / barlist ─────────────────────────────────────────── */
.eng-donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.eng-donut{position:relative;flex:none;} .eng-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.eng-donut-num{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.025em;}
.eng-donut-lbl{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin-top:2px;}
.eng-legend{display:flex;flex-direction:column;gap:10px;flex:1;}
.eng-legend-li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-dim);font-weight:600;}
.eng-legend-sw{width:10px;height:10px;border-radius:4px;flex:0 0 10px;} .eng-legend-v{margin-left:auto;color:var(--text);font-family:var(--font-mono);font-size:12px;}
.eng-barlist{display:flex;flex-direction:column;gap:12px;}
.eng-bar-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;}
.eng-bar-name{font-size:12.5px;font-weight:600;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eng-bar-track{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.eng-bar-fill{display:block;height:100%;border-radius:999px;}
.eng-bar-fill[data-tone="blue"]{background:var(--c-blue);} .eng-bar-fill[data-tone="amber"]{background:var(--c-amber);}
.eng-bar-val{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);font-weight:600;}

/* ── insight / toggle / roadmap / settings ────────────────────────────── */
.eng-insight{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--border-faint);}
.eng-insight:first-child{border-top:none;}
.eng-insight-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--text-faint);}
.eng-insight[data-sev="crit"] .eng-insight-dot{background:var(--crit);} .eng-insight[data-sev="info"] .eng-insight-dot{background:var(--c-blue);}
.eng-insight-t{font-size:13.5px;font-weight:700;} .eng-insight-d{font-size:12.5px;color:var(--text-faint);margin-top:3px;line-height:1.5;}
.eng-toggle{width:42px;height:25px;border-radius:999px;background:var(--surface-3);position:relative;flex:none;transition:background .15s;}
.eng-toggle[data-on="true"]{background:var(--accent);}
.eng-toggle-knob{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .15s var(--ease-standard,ease);}
.eng-toggle[data-on="true"] .eng-toggle-knob{transform:translateX(17px);} /* v1.31.23.0: was left:3px→20px (layout per frame); same 17px travel, compositor-only */
.eng-rule{display:flex;align-items:center;gap:16px;padding:15px 0;border-top:1px solid var(--border-faint);}
.eng-rule:first-child{border-top:none;} .eng-rule-txt{flex:1;} .eng-rule-t{font-size:13.5px;font-weight:700;} .eng-rule-s{font-size:12.5px;color:var(--text-faint);margin-top:2px;}
.eng-settings-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;} .eng-settings-t{font-size:14px;font-weight:700;}
.eng-badge-wrap,.eng-cat-wrap,.eng-sev-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.eng-sev-wrap{flex-direction:column;gap:9px;}
.eng-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--surface-2);color:var(--text-dim);font-family:var(--font-mono);}
.eng-cat-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.eng-roadmap{display:flex;align-items:center;gap:14px;}
.eng-roadmap-ic{width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--text-faint);display:grid;place-items:center;flex:none;}
.eng-roadmap-txt{flex:1;} .eng-roadmap-t{font-size:14px;font-weight:700;} .eng-roadmap-d{font-size:12.5px;color:var(--text-faint);margin-top:2px;}

/* ── table (history) ──────────────────────────────────────────────────── */
.eng-table-wrap{overflow-x:auto;} .eng-table{width:100%;border-collapse:collapse;min-width:640px;}
.eng-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--border);}
.eng-table td{padding:13px 12px;border-bottom:1px solid var(--border-faint);font-size:13px;}
.eng-table tbody tr{cursor:pointer;} .eng-table tbody tr:hover{background:var(--hover);}
.eng-table .-right{text-align:right;} .eng-table .-mono{font-family:var(--font-mono);}
.eng-td-title{display:inline-flex;align-items:center;gap:10px;font-weight:700;} .eng-cat-dot{width:8px;height:8px;border-radius:3px;flex:0 0 8px;}
/* Mobile: below .eng-table's own min-width (640px) the table can no longer
   fit the viewport and needs horizontal scroll to read Status/Waktu Kerja.
   Reflow into stacked key-value rows instead (classic responsive-table
   pattern) — hide the header row, block-ify table/tr/td, label each cell via
   data-label + ::before. Every column stays visible; nothing is dropped.
   Desktop/tablet (>640px) render exactly as before. */
@media (max-width:640px){
  .eng-table-wrap{overflow-x:visible;}
  .eng-table{display:block;width:100%;min-width:0;}
  .eng-table thead{display:none;}
  .eng-table tbody{display:flex;flex-direction:column;gap:10px;}
  .eng-table tr{display:flex;flex-direction:column;border:1px solid var(--border-faint);border-radius:12px;padding:2px 14px;}
  .eng-table tbody tr:hover{background:none;}
  .eng-table td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--border-faint);text-align:right;}
  .eng-table td:last-child{border-bottom:none;}
  .eng-table td::before{content:attr(data-label);flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);text-align:left;}
}

/* ── empty state ──────────────────────────────────────────────────────── */
.eng-empty{padding:56px 24px;text-align:center;border:1px dashed var(--border-strong);border-radius:16px;display:flex;flex-direction:column;align-items:center;}
.eng-empty-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-faint);margin-bottom:16px;}
.eng-empty-t{font-family:var(--font-display);font-weight:600;font-size:16px;} .eng-empty-h{font-size:13px;color:var(--text-faint);margin-top:6px;max-width:340px;}

/* ── timeline rail ────────────────────────────────────────────────────── */
.eng-tl{display:flex;flex-direction:column;}
/* v1.20.3 RC1 — the time column is `auto`-sized so it always contains the full
   timestamp ("Kemarin 09:45", dates, any locale) at any font size; the fixed
   widths clipped it, letting the timestamp overflow into the event circle. The
   node column always equals the dot diameter so the connector stays centred. */
.eng-tl-row{display:grid;grid-template-columns:auto 26px 1fr;gap:14px;align-items:start;}
.eng-tl.-dense .eng-tl-row{grid-template-columns:auto 22px 1fr;gap:12px;}
/* v1.20.2 — the timestamp is vertically centred against the dot via line-height
   (matching the dot's height) instead of a guessed padding, so time · dot · label
   share one baseline. */
.eng-tl-time{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);font-weight:600;text-align:right;line-height:26px;white-space:nowrap;}
.eng-tl.-dense .eng-tl-time{font-size:11.5px;line-height:22px;}
.eng-tl-node{display:flex;flex-direction:column;align-items:center;align-self:stretch;}
.eng-tl-dot{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--border);}
.eng-tl.-dense .eng-tl-dot{width:22px;height:22px;}
/* Connector: centred under the dot (node column width == dot width) and flush —
   fills the full gap to the next dot with no floating break. */
.eng-tl-line{flex:1 0 auto;width:2px;background:var(--border);margin-top:4px;min-height:14px;border-radius:2px;}
.eng-tl-body{padding-bottom:18px;line-height:26px;padding-top:0;} .eng-tl.-dense .eng-tl-body{padding-bottom:14px;line-height:22px;}
.eng-tl-body .eng-tl-meta,.eng-tl-body .eng-tl-reason{line-height:1.35;}
.eng-tl-label{font-size:13.5px;font-weight:700;letter-spacing:-.006em;}
.eng-tl-meta{display:flex;align-items:center;gap:7px;margin-top:5px;flex-wrap:wrap;}
.eng-tl-actor{font-size:12px;color:var(--text-faint);font-weight:600;}
.eng-tl-status{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.eng-tl-reason{margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:9px;background:var(--surface-2);color:var(--text-dim);font-size:12.5px;font-weight:600;}
.eng-tl-reason[data-warn="true"]{background:var(--c-amber-weak);color:var(--c-amber);}
.eng-tl-reason-tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.85;}

/* ── Development Seed Manager (dev-only; never rendered in staging/prod) ──── */
.eng-seedmgr{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-style:dashed;border-color:var(--border-strong);}
.eng-seedmgr-t{font-size:13.5px;font-weight:700;}
.eng-seedmgr-s{font-size:12px;color:var(--text-faint);margin-top:3px;max-width:52ch;}
.eng-seedmgr-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ── timeline cards (page) ────────────────────────────────────────────── */
.eng-tl-cards{display:flex;flex-direction:column;gap:16px;}
.eng-tlc{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;}
.eng-tlc-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:20px 24px;cursor:pointer;}
.eng-tlc-main{min-width:0;} .eng-tlc-badges{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap;}
.eng-tlc-title{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.018em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eng-tlc-meta{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap;font-size:12.5px;color:var(--text-dim);font-weight:600;}
.eng-tlc-metalbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-ghost);}
.eng-tlc-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none;}
.eng-tlc-time{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);font-weight:600;}
.eng-chev{transition:transform .18s;} .eng-tlc[data-open="true"] .eng-chev{transform:rotate(180deg);}
.eng-tlc-collapsed{display:flex;align-items:center;gap:9px;padding:0 24px 20px;cursor:pointer;}
.eng-tlc-cdot{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;}
.eng-tlc-clabel{font-size:12.5px;color:var(--text-dim);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eng-tlc-ccount{margin-left:auto;font-size:12px;color:var(--text-ghost);font-weight:600;white-space:nowrap;}
.eng-tlc-body{padding:20px 24px 22px;border-top:1px solid var(--border-faint);} .eng-tlc-detail{display:flex;justify-content:flex-end;margin-top:6px;}

/* ── drawer + scrim + modal ───────────────────────────────────────────── */
.eng-scrim{position:fixed;inset:0;background:var(--scrim);z-index:120;display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .2s;}
.eng-scrim.-open{opacity:1;pointer-events:auto;} .eng-scrim.-center{justify-content:center;align-items:center;}
/* Design System Program Phase 10 (Canonical Drawer Migration): the create/
   report modal (still .eng-scrim -center, unmigrated this phase) can be
   opened via the sidebar CTA while the Assignment Detail drawer is also
   open (openEngineeringCreate() never clears st.drawerId) — that drawer
   now renders through the canonical shell, whose z-index
   (--drawer-z-panel: 10001, platform.css) sits far above this file's
   z-index:120. Without this, the modal would render UNDER the drawer —
   unreachable. Scoped to .-center only, the same targeted pattern used
   for Gudang's equivalent modals (gudang.css). */
.eng-scrim.-center{z-index:10050;}
/* .eng-drawer/-head/-body/-foot/-title/-loc are gone — that shell is now
   js/components/drawer.js's job (see engineering-drawer.js's Phase 10
   comment above renderDrawer()). .eng-drawer-head-main/-head-txt/-badges
   stay: the category tile + status badges now render as the first block
   of the canonical body instead of a shell-header slot, reusing these
   same classes for identical styling. */
.eng-drawer-head-main{display:flex;gap:14px;min-width:0;} .eng-drawer-head-txt{min-width:0;}
.eng-drawer-badges{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.eng-sec{margin-top:26px;} .eng-sec:first-child{margin-top:0;}
.eng-sec-t{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-ghost);font-weight:700;margin-bottom:12px;}
.eng-kv{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--border-faint);font-size:13px;}
.eng-kv:first-of-type{border-top:none;} .eng-kv-k{color:var(--text-faint);} .eng-kv-v{color:var(--text);font-weight:600;}
.eng-total-time{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;}
.eng-total-num{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.eng-total-cap{font-size:12px;color:var(--text-faint);font-weight:600;}
.eng-member-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border-faint);}
.eng-member-info{flex:1;min-width:0;} .eng-member-name{font-size:13.5px;font-weight:700;}
.eng-member-state{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:2px;}
.eng-member-dur{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-dim);}
.eng-joinable{margin-top:12px;font-size:12.5px;color:var(--c-green);font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.eng-attach-placeholder{display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;border:1px dashed var(--border-strong);color:var(--text-faint);}
.eng-attach-t{font-size:12.5px;font-weight:600;} .eng-attach-s{color:var(--text-ghost);margin-top:2px;font-size:12px;}
.eng-note-body{font-size:13px;color:var(--text-dim);line-height:1.6;margin:0;}
/* v1.20.x stabilization (Issue 3): the modal box is a capped FLEX COLUMN — the
   header and footer are pinned (flex:0 0 auto) and only the BODY scrolls, so the
   Publish/Simpan action is always reachable without scrolling the whole dialog.
   Spacing tightened so the common field set fits a desktop viewport with no scroll. */
.eng-modal-box{width:540px;max-width:94vw;max-height:90vh;display:flex;flex-direction:column;background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);border:1px solid var(--border);padding:22px 24px;}
.eng-modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex:0 0 auto;}
.eng-modal-kicker{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px;}
.eng-modal-title{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.022em;margin:0;}
.eng-modal-body{display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1 1 auto;min-height:0;padding-right:2px;}
.eng-field{display:flex;flex-direction:column;gap:6px;} .eng-field>span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);}
.eng-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.eng-input{width:100%;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);padding:0 13px;font-family:var(--font-sans);font-size:13.5px;color:var(--text);}
.eng-input:focus{outline:2px solid var(--accent-line);outline-offset:1px;}
.eng-textarea{height:68px;padding:9px 13px;resize:vertical;}
/* V1: create-form validation message (past-dated Deadline) — this module had
   no field-level error affordance before; reuses the modal's own type scale. */
.eng-form-error{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--crit,#d64545);margin-top:-4px;}
/* Mobile: collapse two-column field pairs to one column (matches .form-grid's
   own 600px collapse in style.css) and bump input font to 16px so iOS Safari
   never auto-zooms on focus (same guard/threshold as .gud-input in gudang.css). */
@media (max-width:600px){
  .eng-field-row{grid-template-columns:1fr;}
  .eng-input{font-size:16px;}
}
.eng-modal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-faint);flex-wrap:wrap;gap:12px;flex:0 0 auto;}
.eng-modal-hint{font-size:12px;color:var(--text-faint);display:inline-flex;align-items:center;gap:7px;} .eng-modal-actions{display:flex;gap:10px;}
.eng-opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-faint);font-style:normal;opacity:.8;}
.eng-attach-placeholder--form{margin-top:2px;}

/* ── Engineering Personnel selector (v1.20.6, Objective 4) ─────────────── */
.eng-person-list{display:flex;flex-direction:column;max-height:210px;overflow-y:auto;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);}
.eng-person-row{display:flex;align-items:center;gap:11px;padding:9px 12px;background:transparent;border:none;border-bottom:1px solid var(--border-faint);cursor:pointer;text-align:left;font-family:var(--font-sans);color:var(--text);}
.eng-person-row:last-child{border-bottom:none;}
.eng-person-row:hover{background:var(--surface);}
.eng-person-row.-on{background:var(--accent-line,rgba(80,120,255,.10));}
.eng-person-ava{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));}
.eng-person-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.eng-person-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eng-person-role{font-size:11px;color:var(--text-faint);}
.eng-person-check{flex:none;color:var(--accent-fg);display:inline-flex;}
.eng-person-empty{padding:14px 12px;font-size:12.5px;color:var(--text-faint);}

/* ── entry animation ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){.eng-content{animation:engFadeUp .4s cubic-bezier(.2,.7,.2,1) both;}}
@keyframes engFadeUp{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1080px){
  /* V1 mobile fix — was ".eng-grid.-lead,.eng-grid.-2,.eng-grid.-3{...}" as one
     comma-separated rule. ".-2" and ".-3" are not valid CSS class selectors (a
     class name can't start with a hyphen immediately followed by a digit), and
     a qualified-rule selector list is dropped IN FULL if any member fails to
     parse — so this rule silently never applied at any width, for ANY of the
     three classes, including .eng-grid.-lead (which alone would have been
     perfectly valid). That's why "Perlu Tindakan"/"Engineering Sedang Bekerja"
     and "Recent Activity"/"Mini Operational Analytics" (both .eng-grid.-lead
     rows in engineering-dashboard.js) stayed two-column and got clipped on
     mobile — confirmed by rendering the real dashboard in a live headless
     browser (Chromium silently dropped the whole rule; ruleCount inside this
     media block was 2, not 3). .eng-grid.-2/.eng-grid.-3 were already
     independently invalid/dead at their own base declaration (line ~88, same
     digit-after-hyphen problem) — out of scope here since nothing reported
     depends on them; only .eng-grid.-lead is split out so its override can
     actually parse. */
  .eng-grid.-lead{grid-template-columns:1fr;}
  .eng-hero{grid-template-columns:1fr;gap:28px;}
  .eng-hero-health{border-right:none;padding-right:0;border-bottom:1px solid var(--border-faint);padding-bottom:24px;}
}
@media (max-width:760px){
  /* padding now flows from the responsive --workspace-* tokens (platform.css) */
  .eng-hero-stats.-c4,.eng-hero-stats.-c5,.eng-hero-stats.-c3{grid-template-columns:1fr 1fr;gap:18px 0;}
  .eng-card-grid{grid-template-columns:1fr;}
  .eng-drawer{width:100%;max-width:100%;}
  .eng-btn.-big{min-width:0;}
  .eng-bar-row{grid-template-columns:90px 1fr auto;}
  /* timeline: keep the time column auto-sized (never clips the timestamp) and the
     node column matched to the 26px dot so time · dot · label stay aligned. */
  .eng-tl-row{grid-template-columns:auto 26px 1fr;gap:10px;}
  .eng-tl-time{font-size:11px;}
  .eng-tlc-head{padding:16px;gap:12px;}
  .eng-tlc-collapsed{padding:0 16px 16px;}
  .eng-tlc-body{padding:16px;}
}
/* Phase 11J — defensive pass: no reproducible overflow/clip bug found (grid
   already collapses to 1fr at 760px, card padding already flows from the
   shared --workspace-pad-* tokens which platform.css already tightens at
   600px); no breakpoint below that existed for the narrowest real phones. */
@media (max-width:380px){
  .eng-card-grid{gap:12px;}
  .eng-hero-stats.-c4,.eng-hero-stats.-c5,.eng-hero-stats.-c3{gap:12px 0;}
}