/* ============================================================
   components.css — Asentra Mobile Design System (M00 PART 02)
   ------------------------------------------------------------
   Reusable presentation components. No business logic.
   Sits on top of the tokens defined in css/app.css.
   ============================================================ */

/* ---------- Buttons ---------- */
/* Base .btn lives in app.css; variants + states live here. */

/* Small inline callout (used in preview/header notes) */
.notice {
  display:flex; gap:var(--s-2); align-items:flex-start;
  padding:var(--s-2) var(--s-3); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--ink-2);
  background:var(--info-bg); border:1px solid var(--brand-100);
}
.notice--success { background:var(--success-bg); border-color:transparent; color:var(--success); }
.notice--danger { background:var(--danger-bg); border-color:transparent; color:var(--danger); }

/* M03: stacked cards inside one block (WO detail / asset columns) */
.card-stack { display:flex; flex-direction:column; gap:var(--s-3); }

/* M03: location breadcrumb — wraps safely on narrow phones */
.crumb { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px;
         font-size:var(--fs-sm); color:var(--ink-2); margin-top:4px; }
.crumb__item { font-weight:600; overflow-wrap:anywhere; }
.crumb__sep { color:var(--ink-3); }

/* ---------- Buttons ---------- */
.btn--primary { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.btn--primary:active { background:var(--brand-700); }
.btn--secondary { background:var(--surface-2); border-color:var(--border); color:var(--ink-1); }
.btn--secondary:active { background:var(--surface); }
.btn--outline { background:transparent; border-color:var(--brand-600); color:var(--brand-600); }
.btn--outline:active { background:var(--brand-50); }
.btn--icon {
  width:var(--tap); min-height:var(--tap); padding:0; gap:0;
  display:grid; place-items:center; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border); color:var(--ink-2);
}
.btn--icon:active { background:var(--surface-2); }
.btn[disabled], .btn.is-disabled { opacity:.5; pointer-events:none; box-shadow:none; }

/* ---------- Cards ---------- */
.task-list { display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-4); }
.task-card {
  display:flex; flex-direction:column; gap:var(--s-3);
  width:100%; text-align:left; cursor:pointer;
}
.task-card:active { background:var(--surface-2); }
.task-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); min-width:0; }
.task-card__head > div { min-width:0; }
.task-card__num { font-size:var(--fs-xs); color:var(--ink-3); font-weight:600; letter-spacing:.02em; }
.task-card__title { font-weight:700; font-size:var(--fs-md); overflow-wrap:anywhere; }
.task-card__meta { font-size:var(--fs-sm); color:var(--ink-2); margin-top:2px; overflow-wrap:anywhere; }
.task-card__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; }
.task-card .priority { flex:0 0 auto; }

.task-back { padding-left:0; margin:calc(var(--s-2) * -1) 0 var(--s-2); }
.task-hero__title { font-size:var(--fs-xl); font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere; margin:4px 0 var(--s-3); }
.task-hero__chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.detail-list .row { padding-left:0; padding-right:0; }
.detail-list .row:first-child { padding-top:0; }
.detail-list .row:last-child { padding-bottom:0; }
.task-instruction { font-size:var(--fs-md); color:var(--ink-2); overflow-wrap:anywhere; }
.task-actions { margin-top:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); }
.task-actions .notice { margin-bottom:0; }

.cl-list { display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-4); }
.cl-item { display:flex; flex-direction:column; gap:var(--s-2); }
.cl-item__label { font-weight:700; font-size:var(--fs-md); overflow-wrap:anywhere; }
.cl-item.is-done { border-color:var(--brand-200); }
.seg { display:flex; gap:8px; }
.seg__btn {
  flex:1 1 0; min-height:var(--tap); border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--surface-2);
  font-weight:700; font-size:var(--fs-md);
}
.seg__btn.is-on { background:var(--brand-50); border-color:var(--brand-600); color:var(--brand-700); }
.seg__btn.is-on.seg--fail { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
.measure { display:flex; align-items:center; gap:var(--s-2); }
.measure .input { flex:1 1 auto; min-width:0; }
.measure__unit {
  flex:0 0 auto; min-width:44px; font-weight:700; font-size:var(--fs-md); color:var(--ink-2);
}

.ev-groups { display:flex; flex-direction:column; gap:var(--s-4); margin-top:var(--s-4); }
.ev-group__title { font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); margin-bottom:var(--s-2); }
.ev-item { display:flex; gap:var(--s-3); align-items:flex-start; }
.ev-thumb {
  flex:0 0 auto; width:56px; height:56px; border-radius:var(--r-md);
  background:var(--brand-50); color:var(--brand-700);
  display:grid; place-items:center; font-size:var(--fs-xs); font-weight:700; text-align:center;
}
.ev-item__main { flex:1 1 auto; min-width:0; }
.ev-item__note { font-size:var(--fs-md); overflow-wrap:anywhere; }
.ev-item__meta { font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; }

.ready-card { display:flex; flex-direction:column; gap:8px; }
.ready-row { display:flex; justify-content:space-between; gap:var(--s-3); font-size:var(--fs-sm); }
.ready-row span:last-child { font-weight:700; }
.ready--ok { color:var(--success); }
.ready--no { color:var(--warning); }
.ready--opt { color:var(--ink-3); }

.info-card { display:flex; flex-direction:column; gap:2px; }
.info-card__label { font-size:var(--fs-sm); color:var(--ink-2); }
.info-card__value { font-size:var(--fs-2xl); font-weight:800; line-height:1.1; }
.info-card__hint { font-size:var(--fs-xs); color:var(--ink-3); }

/* ---------- Status chips ---------- */
.status {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:600; white-space:nowrap;
}
.status__dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.status--new { background:var(--info-bg); color:var(--info); }
.status--assigned { background:var(--brand-50); color:var(--brand-700); }
.status--accepted { background:var(--info-bg); color:var(--info); }
.status--progress { background:var(--warning-bg); color:var(--warning); }
.status--completed { background:var(--success-bg); color:var(--success); }
.status--hold { background:var(--surface-2); color:var(--ink-2); }
.status--overdue { background:var(--danger-bg); color:var(--danger); }
.status--rework { background:var(--danger-bg); color:var(--danger); }

/* ---------- Priority badges ---------- */
.priority {
  display:inline-flex; align-items:center; padding:2px 8px;
  border-radius:var(--r-sm); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
}
.priority--low { background:var(--surface-2); color:var(--ink-2); }
.priority--medium { background:var(--info-bg); color:var(--info); }
.priority--high { background:var(--warning-bg); color:var(--warning); }
.priority--critical { background:var(--danger); color:#fff; }

/* Role badge — one style for all three roles (no per-role theme) */
.role-badge {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:600; white-space:nowrap;
  background:var(--brand-50); color:var(--brand-700);
}
.role-badge:empty { display:none; }

/* ---------- Forms ---------- */
.field { display:flex; flex-direction:column; gap:6px; margin-top:var(--s-4); }
.field:first-child { margin-top:0; }
.field__label { font-size:var(--fs-sm); font-weight:600; color:var(--ink-1); }
.req { color:var(--danger); margin-left:2px; }
.field__help { font-size:var(--fs-xs); color:var(--ink-3); }
.field__error { font-size:var(--fs-xs); color:var(--danger); display:none; }
.field--error .field__error { display:block; }

.input, .textarea, .select {
  width:100%; font:inherit; font-size:var(--fs-md); color:var(--ink-1);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px var(--s-3); min-height:var(--tap);
}
.textarea { min-height:96px; resize:vertical; line-height:1.45; }
.select {
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.input::placeholder, .textarea::placeholder { color:var(--ink-3); }
.input:focus, .textarea:focus, .select:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-50);
}
.field--error .input, .field--error .textarea, .field--error .select {
  border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg);
}
.input[disabled], .textarea[disabled], .select[disabled] {
  background:var(--surface-2); color:var(--disabled); pointer-events:none;
}

.choice { display:flex; align-items:flex-start; gap:10px; min-height:var(--tap); padding:6px 0; cursor:pointer; }
.choice input { flex:0 0 auto; width:22px; height:22px; margin-top:1px; accent-color:var(--brand-600); }
.choice__text { font-size:var(--fs-md); }

.search { position:relative; display:flex; align-items:center; }
.search .ic { position:absolute; left:12px; width:18px; height:18px; color:var(--ink-3); pointer-events:none; }
.search .input { padding-left:38px; }

/* Password / trailing-action input */
.input-wrap { position:relative; display:flex; align-items:center; width:100%; }
.input-wrap .input { padding-right:48px; }
.input-toggle {
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:var(--tap); height:var(--tap);
  display:grid; place-items:center;
  color:var(--ink-2); border-radius:var(--r-md);
}
.input-toggle:active { background:var(--surface-2); }
.input-toggle[aria-pressed="true"] { color:var(--brand-600); }
.input-toggle .ic { width:20px; height:20px; }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:var(--s-4); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab {
  flex:0 0 auto; position:relative; padding:10px 2px;
  font-size:var(--fs-md); font-weight:600; color:var(--ink-2); white-space:nowrap; min-height:var(--tap);
}
.tab .count { margin-left:6px; color:var(--ink-3); font-weight:600; }
.tab.is-active { color:var(--brand-600); }
.tab.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:3px; border-radius:3px 3px 0 0; background:var(--brand-600);
}

/* ---------- Notification badge (reusable numeric) ---------- */
.notif-badge {
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--r-pill); background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; line-height:1; border:2px solid var(--surface);
}

/* ---------- Toast ---------- */
.toast-region {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index:50;
  display:flex; flex-direction:column; gap:8px;
  width:calc(100% - 24px); max-width:min(480px, calc(var(--app-max) - 24px)); pointer-events:none;
}
.toast {
  pointer-events:auto; background:var(--ink-1); color:#fff;
  padding:12px 14px; border-radius:var(--r-md); box-shadow:var(--sh-lg);
  font-size:var(--fs-sm); display:flex; align-items:center; gap:8px;
  animation:toast-in .15s ease-out;
}
.toast--info { background:var(--brand-600); }
.toast--success { background:var(--success); }
.toast--warning { background:var(--warning); }
.toast--error { background:var(--danger); }
.toast.is-leaving { animation:toast-out .15s ease-in forwards; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes toast-out { to { opacity:0; transform:translateY(8px); } }

/* ---------- Bottom sheet ---------- */
.sheet { position:fixed; inset:0; z-index:60; display:none; }
.sheet.is-open { display:block; }
.sheet__scrim { position:absolute; inset:0; background:rgba(15,22,40,.45); animation:fade-in .15s ease-out; }
.sheet__panel {
  position:absolute; left:0; right:0; bottom:0; margin:0 auto;
  max-width:var(--app-max); max-height:80vh; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s-4) var(--s-4) calc(var(--s-5) + var(--safe-bottom));
  box-shadow:var(--sh-lg); animation:slide-up .2s ease-out;
}
.sheet__grab { width:36px; height:4px; border-radius:var(--r-pill); background:var(--border); margin:0 auto var(--s-3); }
.sheet__title { font-size:var(--fs-lg); font-weight:700; margin-bottom:var(--s-3); }
.sheet__close { position:absolute; top:var(--s-3); right:var(--s-4); }
.sheet-actions { display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-4); }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes slide-up { from { transform:translateY(100%); } to { transform:none; } }

/* ---------- Common UI states ---------- */
.state {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:var(--s-8) var(--s-4); color:var(--ink-2);
}
.state__icon {
  width:56px; height:56px; border-radius:var(--r-lg);
  background:var(--surface-2); color:var(--ink-3);
  display:grid; place-items:center; margin-bottom:var(--s-2);
}
.state__icon .ic { width:26px; height:26px; }
.state__title { font-weight:700; color:var(--ink-1); font-size:var(--fs-md); }
.state__text { font-size:var(--fs-sm); color:var(--ink-2); }
.state__action { margin-top:var(--s-3); }
.state--error .state__icon { background:var(--danger-bg); color:var(--danger); }
.state--empty .state__icon, .state--no-results .state__icon { background:var(--brand-50); color:var(--brand-600); }
.state--loading .state__icon { background:transparent; }

.spinner {
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--brand-600);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Stat grid (Home task summary) ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-2); }
/* M05 PART 01: five Security summary values stay readable on narrow phones. */
.security-stat-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-2); }
.security-stat-grid .stat:last-child { grid-column:1 / -1; }
.stat {
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s-3) 4px; text-align:center;
}
.stat__n { font-size:var(--fs-lg); font-weight:800; line-height:1.1; }
.stat--progress .stat__n { color:var(--warning); }
.stat--done .stat__n { color:var(--success); }
.stat--urgent .stat__n { color:var(--danger); }
.stat__l { font-size:var(--fs-xs); color:var(--ink-2); margin-top:2px; }

/* ---------- Activity type chip ---------- */
.tl-type {
  display:inline-block; margin:2px 0 4px; padding:1px 7px; border-radius:var(--r-sm);
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.tl-type--assigned { background:var(--brand-50); color:var(--brand-700); }
.tl-type--updated  { background:var(--warning-bg); color:var(--warning); }
.tl-type--notif    { background:var(--info-bg); color:var(--info); }

/* ---------- M06 PART 06 — compact activity list (Finding / Occurrence) ---------- */
.activity-list { display:flex; flex-direction:column; }
.activity-item {
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-2) 0; border-bottom:1px solid var(--line, rgba(0,0,0,.06));
}
.activity-item:last-child { border-bottom:0; padding-bottom:0; }
.activity-item__time {
  flex:0 0 auto; min-width:44px; font-size:var(--fs-xs);
  color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:2px;
}
.activity-item__main { flex:1 1 auto; min-width:0; }
.activity-item__title { font-size:var(--fs-sm); font-weight:600; }
.activity-item__detail { font-size:var(--fs-sm); color:var(--ink-2); overflow-wrap:anywhere; }
.activity-item__meta { font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; }

/* ============================================================
   M07 PART 01 — Device & connectivity status UI
   ------------------------------------------------------------
   Small, shared, compact. Reuses the existing .status chips, .row,
   .card, and .seg patterns — no new chip family, no shell redesign.
   ============================================================ */

/* Compact shared status strip (reusable on any screen from PART 02) */
.dev-strip {
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3);
  align-items:center;
}
.dev-strip__item { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.dev-strip__label { font-size:var(--fs-xs); color:var(--ink-3); font-weight:600; }

/* App-bar indicator (additive — the shell layout is unchanged) */
.dev-pin { position:relative; }
.dev-pin__dot {
  position:absolute; top:9px; right:9px; width:9px; height:9px;
  border-radius:50%; background:var(--ok); border:2px solid var(--surface);
}
.dev-pin__dot.is-warn { background:var(--warn); }
.dev-pin__dot.is-bad  { background:var(--danger); }
/* Offline is the one state worth a stronger cue than a dot */
.dev-pin.is-offline { color:var(--danger); }

/* Capability rows on MOB-DEV-001 */
.dev-row__hint {
  display:block; font-size:var(--fs-xs); color:var(--ink-3);
  margin-top:2px; overflow-wrap:anywhere;
}
.dev-row .row__label { min-width:0; }

/* Simulation control group: label + segmented value buttons */
.dev-ctrl { display:flex; flex-direction:column; gap:var(--s-2); }
.dev-ctrl__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.dev-ctrl__title { font-weight:700; font-size:var(--fs-md); }
.dev-ctrl .seg { flex-wrap:wrap; }
/* Multi-value capabilities wrap instead of squeezing below the 44px tap size.
   88px keeps all three Network/Location values on one row at 360px. */
.dev-ctrl .seg__btn {
  flex:1 1 auto; min-width:88px; font-size:var(--fs-sm); padding:0 var(--s-2);
}
/* Four-value groups (Sync) split evenly 2+2 on phone instead of an uneven 3+1 */
@media (max-width:599px) {
  .dev-ctrl .seg--pair .seg__btn { flex:1 1 calc(50% - 4px); min-width:0; }
}
.dev-ctrl .seg__btn.is-on.seg--warn {
  background:var(--warning-bg); border-color:var(--warning); color:var(--warning);
}
.dev-ctrl .seg__btn.is-on.seg--bad {
  background:var(--danger-bg); border-color:var(--danger); color:var(--danger);
}

/* Tablet: capability controls may sit two-up — same codebase, wider layout */
@media (min-width:768px) {
  .dev-ctrl .seg__btn { min-width:112px; }
}

/* ============================================================
   M07 PART 02 — Camera & evidence capture readiness
   ------------------------------------------------------------
   Extends the existing .ev-* evidence components. No new evidence
   taxonomy and no separate media component.
   ============================================================ */

/* Captured thumbnail: same 56px box as the M02 IMG tile, now an image */
.ev-thumb--img {
  object-fit:cover; padding:0; border:1px solid var(--border);
  background:var(--surface-2);
}

/* Capture action host (button + camera-unavailable notice) */
.ev-capture { display:flex; flex-direction:column; }
.ev-capture .btn .ic { width:18px; height:18px; }

/* Upload state + capture tag under an evidence note */
.ev-item__states {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px;
}
.ev-item__states:empty { display:none; }
.ev-item__tag {
  font-size:var(--fs-xs); font-weight:600; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--border);
  padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap;
}

/* Evidence row actions (Edit note / Remove) stay touch-friendly */
.ev-item__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:2px; }
.ev-item__actions .link { padding-left:0; padding-right:0; }

/* Capture sheet preview */
.cap-preview { display:flex; gap:var(--s-3); align-items:flex-start; margin-bottom:var(--s-3); }
.cap-preview__img {
  flex:0 0 auto; width:96px; height:96px; border-radius:var(--r-md);
  object-fit:cover; border:1px solid var(--border); background:var(--surface-2);
}
.cap-preview__meta { flex:1 1 auto; min-width:0; }

/* Compact capture/pending summary reused on role surfaces */
.ev-pending-line { font-size:var(--fs-sm); color:var(--ink-2); margin-top:4px; }
.ev-pending-line .status { margin-left:6px; }

/* Tablet: the sheet preview may breathe a little */
@media (min-width:768px) {
  .cap-preview__img { width:112px; height:112px; }
}

/* ============================================================
   M07 PART 03 — QR scan & field context readiness
   ------------------------------------------------------------
   Reuses .btn, .notice, and .card. Adds only the small result block.
   ============================================================ */

.qr-scan { display:block; }
.qr-actions { display:flex; flex-direction:column; gap:var(--s-2); }
.qr-actions .btn .ic { width:18px; height:18px; }

/* Resolved-context result card */
.qr-res { margin-top:var(--s-2); padding:var(--s-3); }
.qr-res__title { font-weight:700; font-size:var(--fs-md); overflow-wrap:anywhere; }
.qr-res__meta { font-size:var(--fs-sm); color:var(--ink-2); overflow-wrap:anywhere; }
.qr-res__msg { font-size:var(--fs-sm); color:var(--ink-2); margin-top:var(--s-2); overflow-wrap:anywhere; }
/* The raw code can be long — wrap it instead of overflowing the card */
.qr-res__code {
  font-size:var(--fs-xs); color:var(--ink-3); margin-top:var(--s-2);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap:anywhere; word-break:break-all;
}

/* Tablet: the two demo buttons may sit beside the primary action */
@media (min-width:768px) {
  .qr-actions { flex-direction:row; flex-wrap:wrap; }
  .qr-actions .btn { flex:1 1 200px; }
}

/* ============================================================
   M07 PART 04 — Location & permission readiness
   ------------------------------------------------------------
   Reuses .btn, .notice, .card, and the PART 03 .qr-res result block.
   Adds only the small host wrapper.
   ============================================================ */

.loc-host { display:block; }
.loc-check { display:block; }
.loc-check .btn .ic { width:18px; height:18px; }
/* The longest headline ("You are not at the assigned work location") must wrap
   inside the narrow two-column card on tablet, never overflow it. */
.loc-check .notice { min-width:0; }
.loc-check .notice strong { min-width:0; overflow-wrap:anywhere; }
/* Keep the readiness block visually separate from the action above it */
.loc-host:not(:empty) { border-top:1px solid var(--border); padding-top:var(--s-3); }

/* ============================================================
   M07 PART 05 — Offline draft & pending sync
   ------------------------------------------------------------
   Reuses .notice, .status chips, and .card. Compact by design: the
   pending line collapses to nothing when there is nothing pending.
   ============================================================ */

.sync-host { display:block; }
.sync-host[hidden] { display:none; }

/* Compact "n items waiting to sync" line under a screen header */
.sync-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--s-2); }
.sync-line__text { font-size:var(--fs-sm); color:var(--ink-2); overflow-wrap:anywhere; }

/* Offline / ready-to-sync banner */
.sync-banner { display:block; }
.sync-banner strong { display:inline-block; }

/* Pending item rows on the device panel */
.sync-items { display:flex; flex-direction:column; }
.sync-item {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-3); padding:var(--s-2) 0; border-bottom:1px solid var(--border);
}
.sync-item:last-child { border-bottom:0; padding-bottom:0; }
.sync-item:first-child { padding-top:0; }
.sync-item__main { flex:1 1 auto; min-width:0; }
.sync-item__title { font-size:var(--fs-sm); font-weight:600; overflow-wrap:anywhere; }
.sync-item__meta { font-size:var(--fs-xs); color:var(--ink-3); overflow-wrap:anywhere; }
.sync-item .status { flex:0 0 auto; }

/* ============================================================
   M07 PART 06 — Retry, conflict & sync queue (MOB-SYNC-001)
   ------------------------------------------------------------
   Card list, never a dense desktop table. Reuses .card, .status,
   .notice, .detail-list, and .tabs.
   ============================================================ */

.sync-queue { display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-4); }
.sync-q { display:flex; flex-direction:column; gap:var(--s-2); }
.sync-q__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3);
}
.sync-q__main { flex:1 1 auto; min-width:0; }
.sync-q__title { font-weight:700; font-size:var(--fs-md); overflow-wrap:anywhere; }
.sync-q__meta { font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; overflow-wrap:anywhere; }
.sync-q__head .status { flex:0 0 auto; }

/* Conflict detail — plain facts only, no diff/merge tooling */
.sync-conflict { display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-2); }
.sync-conflict__msg { font-size:var(--fs-sm); color:var(--ink-2); overflow-wrap:anywhere; }
.sync-conflict__remote {
  font-size:var(--fs-sm); color:var(--ink-2); overflow-wrap:anywhere;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--s-2) var(--s-3);
}
.sync-conflict .detail-list .row { padding-top:6px; padding-bottom:6px; min-height:0; }

/* Stacked, full-width actions keep the 44px tap target on phones */
.sync-actions { display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-2); }

/* Tablet: the two conflict choices may sit side by side */
@media (min-width:768px) {
  .sync-queue { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .sync-queue .state { grid-column:1 / -1; }
  /* Inside a half-width card there is ~144px per button, so 120px keeps the
     two conflict choices side by side without dropping below the tap size. */
  .sync-actions { flex-direction:row; flex-wrap:wrap; }
  .sync-actions .btn { flex:1 1 120px; padding:0 var(--s-2); }
}

/* ============================================================
   M07 PART 07 — Session, notification & low-bandwidth readiness
   ------------------------------------------------------------
   Reuses .notice, .btn, and the existing .item list rows.
   ============================================================ */

/* Session expired notice + its two actions */
.session-notice { display:block; }
.session-actions { display:flex; flex-direction:column; gap:var(--s-2); }
@media (min-width:768px) {
  .session-actions { flex-direction:row; }
  .session-actions .btn { flex:1 1 160px; }
}

/* Low-bandwidth banner — compact, distinct from the offline banner */
.lb-banner { display:block; background:var(--warn-bg); border-color:transparent; color:var(--warn); }

/* Deferred evidence thumbnail (Poor Connection): same 56px box, tappable */
.ev-thumb--defer {
  border:1px dashed var(--border); background:var(--surface-2); color:var(--ink-2);
  font-size:var(--fs-xs); font-weight:600; line-height:1.15; text-align:center;
  cursor:pointer; padding:0;
}
.ev-thumb--defer:active { background:var(--surface); }

/* Notification rows: unread emphasis + optional related action */
.notif-item { cursor:default; }
.notif-item.is-unread .item__title { font-weight:700; }
.notif-item .item__time { font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; display:block; }
.notif-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--brand-600);
}
.notif-open { padding-left:0; padding-right:0; margin-top:2px; }