/* SkifComm2 — phone-first shell CSS (first pass, 2026-07-21).
 * Implements ART's DESIGN_DIRECTION_2026-07-21.md: sibling palette (warm paper +
 * trust-teal, NOT navy/pearl), AA-verified tokens, light-surface floor (dark ONLY
 * on the call video stage), ≥44pt taps, visible non-color focus ring, safe-area.
 * Width spec from SKIFCOMM2_L0_SHELL: phone → tablet cap → PC never widens.
 * First pass = functional + on-brand + accessible; ART audits once it renders.
 */
:root {
  /* SURFACES (light default) */
  --sk-surface:    #F8F6F2;   /* warm paper — app background */
  --sk-card:       #FFFFFF;   /* elevated cards, list rows, sheets */
  --sk-hairline:   #E2DFD8;   /* warm 1px dividers (decorative; pair borders ≥3:1 on controls) */
  /* INK */
  --sk-ink:        #1A2027;   /* primary body/heading (15.2:1 on surface) */
  --sk-ink-muted:  #4A5560;   /* secondary/meta (7.05:1) */
  /* BRAND / TRUST (teal) */
  --sk-brand:      #0F6E6E;   /* primary — links, header chrome, primary fill */
  --sk-brand-tint: #E4F0EF;   /* selected row, chips, monogram tile */
  --sk-focus:      #0F6E6E;   /* focus ring (5.6:1) */
  /* WARM human accent (guest/invite) */
  --sk-warm:       #B84A2E;
  /* SEMANTIC */
  --sk-danger:     #C1312B;   /* end-call / destructive */
  --sk-on-fill:    #FFFFFF;
  --shell-max:     520px;     /* tablet upper bound — hard cap; PC does not reflow */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #ece9e2; }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--sk-ink);
  touch-action: manipulation;   /* kill 300ms tap delay */
}

/* Visible, non-color focus indicator on EVERY interactive element (AA) */
:focus-visible { outline: 2px solid var(--sk-focus); outline-offset: 2px; border-radius: 6px; }

/* SHELL ROOT — width-capped on ALL viewports; PC = centered capped column, not reflow */
.sc2-shell {
  max-width: var(--shell-max); margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  background: var(--sk-surface);
  display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(26,32,39,.18);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.sc2-app { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Top app-bar (teal chrome = sanctioned reverse type, ≤2-word labels) */
.sc2-top {
  background: var(--sk-brand); color: var(--sk-on-fill);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-weight: 600; letter-spacing: .01em;
  position: sticky; top: 0; z-index: 5;
}
.sc2-top .wordmark { font-size: 18px; }
.sc2-top .spacer { flex: 1; }
.sc2-top button {
  background: transparent; border: 0; color: var(--sk-on-fill);
  font: inherit; font-weight: 600; padding: 10px; min-height: 44px; min-width: 44px; cursor: pointer;
}

/* Content */
.sc2-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.sc2-h { font-weight: 600; color: var(--sk-ink); font-size: 17px; margin: 6px 2px 4px; }
.sc2-sub { color: var(--sk-ink-muted); font-size: 14px; margin: 0 2px 14px; }

/* Address-book / contact rows (light card, dark ink) */
.sc2-list { display: flex; flex-direction: column; gap: 8px; }
.sc2-row {
  background: var(--sk-card); border: 1px solid var(--sk-hairline); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  min-height: 56px; cursor: pointer;
}
.sc2-row:active { background: var(--sk-brand-tint); }
.sc2-row .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc2-row .meta { color: var(--sk-ink-muted); font-size: 14px; }
/* Monogram avatar (no stock faces — inclusivity-safe per ART §5) */
.sc2-avatar {
  width: 40px; height: 40px; border-radius: 20px; flex: none;
  background: var(--sk-brand-tint); color: var(--sk-brand);
  display: grid; place-items: center; font-weight: 700;
}
/* Presence = shape + label, never color alone */
.sc2-presence { font-size: 13px; color: var(--sk-ink-muted); }

/* Buttons (≥44pt; teal primary, warm guest/invite, outline secondary) */
.sc2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 18px; border-radius: 12px; border: 0;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  background: var(--sk-brand); color: var(--sk-on-fill); width: 100%;
}
.sc2-btn.secondary { background: transparent; color: var(--sk-brand); border: 1px solid var(--sk-brand); }
.sc2-btn.warm { background: transparent; color: var(--sk-warm); border: 1px solid var(--sk-warm); }
.sc2-btn.danger { background: var(--sk-danger); color: var(--sk-on-fill); }
.sc2-btn:active { filter: brightness(.95); }

/* Login (light surface, first-run friendly) */
.sc2-login { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; gap: 14px; }
.sc2-login h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; color: var(--sk-ink); }
.sc2-login p { margin: 0 0 12px; color: var(--sk-ink-muted); }
.sc2-field { display: flex; flex-direction: column; gap: 6px; }
.sc2-field label { font-size: 14px; color: var(--sk-ink-muted); font-weight: 600; }
.sc2-field input {
  font: inherit; font-size: 16px; padding: 13px 14px;   /* 16px so iOS doesn't zoom */
  border: 1px solid var(--sk-hairline); border-radius: 10px;
  background: #fff; color: var(--sk-ink); min-height: 48px;
}
.sc2-note { font-size: 13px; color: var(--sk-ink-muted); text-align: center; margin-top: 8px; }
.sc2-err { color: var(--sk-danger); font-size: 14px; min-height: 18px; }

/* Mounted comm hub host */
#sc2-hub { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Tablet upper bound: hold the cap, more comfort — never a desktop reflow */
@media (min-width: 768px) { .sc2-body { padding: 20px; } }
@media (pointer: coarse) { .sc2-btn, .sc2-row, .sc2-top button { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }