/* ============================================================
   StorageStack — Design Tokens
   v1.1 · 2026-10-16  (superset of v1.0 · 2026-05-22)
   Source of truth for every visual decision. Consume directly.
   v1.1 rule: every v1.0 name is kept. Values are unchanged except
   the two owner decisions of 2026-10-16, marked [D1] and [D2]:
   Ink text on Sunset buttons, and AA text on badges and pills.
   New tokens, compat aliases and patterns are appended from §11 on.
   Spec: DESIGN-SYSTEM-v1.1.md (§10 Decisions)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- 1. PALETTE — locked brand colors ---------- */

  /* Warm core */
  --ss-sunset:    #FF6B1A;
  --ss-sun:       #FF9F1C;
  --ss-honey:     #FFC233;

  /* Cool counterpoint */
  --ss-lavender:  #A89EE8;
  --ss-iris:      #6B5FCF;

  /* Neutrals */
  --ss-ink:       #1F1B2E;
  --ss-slate:     #5C5870;
  --ss-cream:     #FFF4E1;
  --ss-bone:      #F7F5F0;
  --ss-mist:      #EEEAE0;
  --ss-paper:     #FFFFFF;

  /* Product tints (locked) */
  --ss-tint-social:  var(--ss-iris);     /* SocialEngine */
  --ss-tint-lock:    var(--ss-sunset);   /* LockEngine */
  --ss-tint-lien:    #B07A00;            /* LienEngine — Honey deepened */

  /* ---------- 2. SEMANTIC COLOR TOKENS ---------- */

  /* Surfaces */
  --color-surface-page:     var(--ss-cream);
  --color-surface-app:      var(--ss-bone);
  --color-surface-section:  var(--ss-paper);
  --color-surface-card:     var(--ss-paper);
  --color-surface-raised:   var(--ss-paper);
  --color-surface-inverse:  var(--ss-ink);
  --color-surface-muted:    var(--ss-mist);

  /* Text */
  --color-text-primary:    var(--ss-ink);
  --color-text-secondary:  var(--ss-slate);
  --color-text-inverse:    var(--ss-cream);
  --color-text-link:       var(--ss-iris);
  --color-text-link-hover: #5446B8;
  --color-text-on-primary: var(--ss-ink);   /* [D1] was #FFFFFF (2.85:1 on Sunset, fails AA). Ink is 5.9:1 */

  /* Borders */
  --color-border-default:  var(--ss-mist);
  --color-border-strong:   #D7D2C4;
  --color-border-focus:    var(--ss-iris);

  /* Actions */
  --color-action-primary:        var(--ss-sunset);
  --color-action-primary-hover:  #E85A0E;
  --color-action-primary-active: #CC4F0A;
  --color-action-secondary:      var(--ss-ink);
  --color-action-ghost-hover:    rgba(31, 27, 46, 0.06);

  /* State (harmonized with warm palette) */
  --color-state-success:    #2E8757;
  --color-state-success-bg: #E3F2E9;
  --color-state-warning:    #B07A00;
  --color-state-warning-bg: #FFF1CC;
  --color-state-danger:     #C8362B;
  --color-state-danger-bg:  #FBE5E1;
  --color-state-info:       var(--ss-iris);
  --color-state-info-bg:    #ECE9FA;

  /* ---------- 3. TYPOGRAPHY ---------- */

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* Modular scale (1.25 minor third), anchored at 16px body */
  --text-display:     56px;  --lh-display:     1.05; --ls-display:     -0.02em;
  --text-h1:          44px;  --lh-h1:          1.10; --ls-h1:          -0.02em;
  --text-h2:          32px;  --lh-h2:          1.15; --ls-h2:          -0.01em;
  --text-h3:          24px;  --lh-h3:          1.25; --ls-h3:          -0.005em;
  --text-body-lg:     18px;  --lh-body-lg:     1.55; --ls-body-lg:      0;
  --text-body:        16px;  --lh-body:        1.55; --ls-body:         0;
  --text-small:       14px;  --lh-small:       1.50; --ls-small:        0;
  /* v1.1: --text-data (13) and --text-title (20) slot into this scale, see §11 */
  --text-caption:     12px;  --lh-caption:     1.40; --ls-caption:      0.02em;
  --text-eyebrow:     12px;  --lh-eyebrow:     1.40; --ls-eyebrow:      0.10em;

  /* ---------- 4. SPACING (4px base) ---------- */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;

  /* Section rhythm — use these on landing page sections */
  --section-y-sm:  var(--space-7);
  --section-y-md:  var(--space-8);
  --section-y-lg:  var(--space-9);
  --section-y-xl:  var(--space-10);

  /* ---------- 5. LAYOUT ---------- */
  --container-max:   1200px;
  --container-pad:   24px;
  --grid-columns:    12;
  --grid-gutter:     24px;

  /* Breakpoints (referenced, used in @media via px)
     v1.1: product screens use --bp-phone / --bp-tablet / --bp-rail (§13).
     --bp-sm / --bp-lg / --bp-xl stay for marketing layouts. */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- 6. RADII — derived from the logo bar radius ----------
     The logo bar uses ~24% of its height for corner radius. The 16px
     control radius keeps UI and brand mark visually consistent. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---------- 7. BORDERS ---------- */
  --border-thin:    1px;
  --border-default: 1.5px;
  --border-thick:   2px;

  /* ---------- 8. ELEVATION — soft, restrained (2 levels) ---------- */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(31, 27, 46, 0.04),
                  0 2px 6px rgba(31, 27, 46, 0.05);
  --shadow-md:    0 4px 12px rgba(31, 27, 46, 0.06),
                  0 12px 32px rgba(31, 27, 46, 0.08);
  --shadow-focus: 0 0 0 3px rgba(107, 95, 207, 0.35);

  /* ---------- 9. MOTION ---------- */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --ease-standard:   cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.2);

  /* ---------- 10. Z-INDEX ---------- */
  --z-base:      1;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     1000;
  --z-toast:     1500;
}

/* ============================================================
   Base reset + element defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-text-link-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

::selection { background: var(--ss-honey); color: var(--ss-ink); }

/* ============================================================
   Type utilities
   ============================================================ */
.t-display  { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 700; }
.t-h1       { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 700; }
.t-h2       { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 700; }
.t-h3       { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 700; }
.t-body-lg  { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.t-body     { font-size: var(--text-body); line-height: var(--lh-body); }
.t-small    { font-size: var(--text-small); line-height: var(--lh-small); }
.t-caption  { font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }
.t-eyebrow  { font-size: var(--text-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; }
.t-secondary { color: var(--color-text-secondary); }
.t-mono     { font-family: var(--font-mono); }

/* ============================================================
   Buttons — primary, secondary, ghost · sm/md/lg
   ============================================================ */
.btn {
  --btn-py: 12px;
  --btn-px: 20px;
  --btn-fs: var(--text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: var(--border-default) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  min-height: 44px;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--sm { --btn-py: 8px; --btn-px: 14px; --btn-fs: var(--text-small); min-height: 36px; }
.btn--lg { --btn-py: 16px; --btn-px: 28px; --btn-fs: var(--text-body-lg); min-height: 52px; }

.btn--primary {
  background: var(--color-action-primary);
  color: var(--color-text-on-primary);
}
.btn--primary:hover { background: var(--color-action-primary-hover); }
.btn--primary:active { background: var(--color-action-primary-hover); }  /* [D1] Ink on -active (#CC4F0A) is 3.7:1; -hover is 4.7:1 */

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--ss-ink);
}
.btn--secondary:hover { background: var(--color-action-ghost-hover); }

.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
}
.btn--ghost:hover { background: var(--color-action-ghost-hover); }

/* Soft tinted buttons — for row actions where meaning needs to read at a glance.
   Bg = state-bg token, text = state token. Hover deepens the tint. */
.btn--primary-soft {
  background: #FFE2D0;
  color: var(--ss-sunset);
}
.btn--primary-soft:hover { background: #FFD0B5; }

.btn--info {
  background: var(--color-state-info-bg);
  color: var(--color-state-info);
}
.btn--info:hover { background: #DDD7F4; }

.btn--success {
  background: var(--color-state-success-bg);
  color: var(--color-state-success);
}
.btn--success:hover { background: #D0E8DA; }

.btn--danger {
  background: var(--color-state-danger-bg);
  color: var(--color-state-danger);
}
.btn--danger:hover { background: #F5D0CA; }

.btn--warning {
  background: var(--color-state-warning-bg);
  color: var(--color-state-warning);
}
.btn--warning:hover { background: #FFE6B0; }

/* ============================================================
   Form controls
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-small); font-weight: 700; color: var(--color-text-primary); }
.field__help { font-size: var(--text-small); color: var(--color-text-secondary); }
.field__error { font-size: var(--text-small); color: var(--color-state-danger); }

.input, .textarea, .select {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-text-primary);
  background: var(--color-surface-card);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-border-strong); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-secondary); opacity: 0.7; }
.textarea { min-height: 96px; resize: vertical; }
.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--color-state-danger); }

/* Checkbox / radio */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.check__box {
  width: 20px; height: 20px;
  border: var(--border-default) solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface-card);
  display: inline-grid; place-items: center;
  transition: all var(--duration-fast) var(--ease-standard);
}
.check__box--radio { border-radius: 999px; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check input:checked + .check__box {
  background: var(--ss-ink); border-color: var(--ss-ink);
}
.check input:checked + .check__box::after {
  content: ""; width: 10px; height: 10px;
  background: var(--ss-cream);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.5l3.5 3.5L14 4' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.5l3.5 3.5L14 4' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.check input:checked + .check__box--radio::after {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ss-cream); -webkit-mask: none; mask: none;
}
.check input:focus-visible + .check__box { box-shadow: var(--shadow-focus); }

/* Toggle */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track {
  width: 40px; height: 24px; border-radius: 999px;
  background: var(--color-border-strong);
  transition: background var(--duration-base) var(--ease-standard);
  position: relative;
}
.toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--ss-paper);
  transition: left var(--duration-base) var(--ease-emphasized);
}
.toggle input:checked + .toggle__track { background: var(--ss-sunset); }
.toggle input:checked + .toggle__track::after { left: 19px; }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--shadow-focus); }

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--color-surface-card);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); }

/* ============================================================
   Badge / pill
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: var(--text-caption);
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--ss-mist);
  color: var(--ss-ink);
  line-height: 1.4;
}
.badge--sunset { background: var(--ss-sunset); color: var(--color-text-on-primary); }  /* [D1] */
.badge--lavender { background: var(--ss-lavender); color: var(--ss-ink); }
.badge--success { background: var(--color-state-success-bg); color: var(--color-state-success-fg); }  /* [D2] */
.badge--warning { background: var(--color-state-warning-bg); color: var(--color-state-warning-fg); }  /* [D2] */
.badge--danger { background: var(--color-state-danger-bg); color: var(--color-state-danger-fg); }     /* [D2] */
.badge--info { background: var(--color-state-info-bg); color: var(--color-state-info-fg); }           /* [D2] */

/* Pill — same component as .badge, the name Manage uses (README component inventory).
   [D2] text uses the AA -fg tokens. Manage's css/styles.css copy of these rules is
   deleted when this lands (MIGRATION issue 1). */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 10px;
  font-size: var(--text-caption); font-weight: 700; line-height: 1.4;
  border-radius: var(--radius-pill);
  background: var(--ss-mist); color: var(--color-text-secondary);
}
.pill--success { background: var(--color-state-success-bg); color: var(--color-state-success-fg); }
.pill--warning { background: var(--color-state-warning-bg); color: var(--color-state-warning-fg); }
.pill--danger  { background: var(--color-state-danger-bg);  color: var(--color-state-danger-fg); }
.pill--info    { background: var(--color-state-info-bg);    color: var(--color-state-info-fg); }
.pill--neutral { background: var(--ss-mist);                color: var(--color-text-secondary); }

/* ============================================================
   Alert
   ============================================================ */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border-default);
  background: var(--color-surface-section);
}
.alert--success { background: var(--color-state-success-bg); border-color: transparent; }
.alert--warning { background: var(--color-state-warning-bg); border-color: transparent; }
.alert--danger  { background: var(--color-state-danger-bg);  border-color: transparent; }
.alert--info    { background: var(--color-state-info-bg);    border-color: transparent; }

/* ============================================================
   Container + layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; }
.grid  { display: grid; }

/* ============================================================
   Focus ring (utility)
   ============================================================ */
.focus-ring:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ============================================================
   v1.1 ADDITIONS · 2026-10-16
   Everything below is new. Nothing above changed value, so a
   v1.0 page renders identically (see DESIGN-SYSTEM-v1.1.md §1).
   ============================================================ */

:root {
  /* ---------- 11. TYPE — operations tier ----------
     The v1.0 scale has no size between caption (12) and small (14)
     and nothing between body-lg (18) and h3 (24). Production filled
     the gaps with 66 ad-hoc px sizes (13px alone: 598 uses). */
  --text-data:   13px;  --lh-data:   1.45; --ls-data:   0;     /* table cells, row meta, dense lists */
  --text-title:  20px;  --lh-title:  1.25; --ls-title: -0.005em; /* card + section titles */
  --text-floor:  12px;  /* nothing renders smaller. Ever. */

  /* Mono labels may use 500 (the font file already loads it). Sans: 400 + 700 only. */
  --font-weight-mono-medium: 500;

  /* ---------- 12. SEMANTIC COLOR — what production kept inventing ---------- */

  /* Surfaces */
  --color-surface-subtle:    var(--ss-bone);            /* table heads, chips, zebra rows, inset panels on paper */
  --color-surface-hover:     rgba(31, 27, 46, 0.04);    /* row hover on paper or bone */
  --color-surface-selected:  var(--ss-cream);           /* selected row / active list item */
  --color-overlay-scrim:     rgba(31, 27, 46, 0.40);    /* behind sheets + modals */

  /* Borders */
  --color-border-subtle:     #F4F1EA;                   /* dividers INSIDE a card (row separators) */

  /* Text */
  --color-text-tertiary:     #6E6A80;                   /* timestamps, meta. 5.2:1 on paper, 4.8:1 on bone (AA) */
  --color-text-accent:       #BA4E12;                   /* Sunset as TEXT (overdue, counts). 5.0:1 on paper */
  --color-text-on-primary-aa: var(--color-text-on-primary); /* @deprecated v1.1: D1 made Ink the default; kept so early adopters don't break */

  /* Actions */
  --color-action-primary-soft:       #FFE2D0;           /* was hard-coded in .btn--primary-soft */
  --color-action-primary-soft-hover: #FFD0B5;
  --color-action-primary-soft-fg:    #AA4711;           /* 4.7:1 on soft bg (Sunset text was 2.3:1) */

  /* State foregrounds that pass AA on their own tint (v1.0 pairs are 3.3–4.3:1) */
  --color-state-success-fg:  #29794E;   /* 4.6:1 on success-bg */
  --color-state-warning-fg:  #906400;   /* 4.7:1 on warning-bg */
  --color-state-danger-fg:   #C03329;   /* 4.6:1 on danger-bg  */
  --color-state-info-fg:     #655AC4;   /* 4.6:1 on info-bg    */

  /* State borders (alert cards, outlined pills) */
  --color-state-success-border: #BFE0CC;
  --color-state-warning-border: #F0D27A;
  --color-state-danger-border:  #F2C2BA;
  --color-state-info-border:    #CFC9F2;

  /* Soft-button hovers (were hard-coded in v1.0 component rules) */
  --color-state-info-bg-hover:    #DDD7F4;
  --color-state-success-bg-hover: #D0E8DA;
  --color-state-danger-bg-hover:  #F5D0CA;
  --color-state-warning-bg-hover: #FFE6B0;

  /* ---------- 13. BREAKPOINTS — the three that production actually uses ----------
     Custom properties cannot be read inside @media, so these are the
     documented values. Write the px literal in the query:
       @media (max-width: 480px)  phone      — single column, 16px inputs (iOS zoom)
       @media (max-width: 768px)  tablet     — burger nav, tables become cards or swipe
       @media (max-width: 900px)  rail       — COMMS rail becomes the bottom bar        */
  --bp-phone:  480px;
  --bp-tablet: 768px;   /* same value as --bp-md */
  --bp-rail:   900px;

  /* ---------- 14. MOBILE + TOUCH ---------- */
  --tap-min:            44px;    /* every interactive target, every viewport */
  --sticky-bar-max:     96px;    /* a sticky action bar may never be taller */
  --bottom-bar-h:       56px;    /* COMMS bottom bar (≤900px) */
  --sheet-max-h:        85vh;
  --sheet-radius:       var(--radius-xl);
  --row-min-h:          64px;    /* list row, phone */
  --ss-chrome-h:        0px;     /* height of the fixed app header; pages set it so sticky bars sit below it */

  /* ---------- 15. DATA STATES ---------- */
  --state-slow-after:   10s;     /* show the "still loading" state after this (JS reads it) */
  --skeleton-bg:        var(--ss-mist);
  --skeleton-shine:     #F6F3EC;

  /* ---------- 16. Z-INDEX additions ---------- */
  --z-popover:  150;
  --z-sheet:    1100;
}

/* ============================================================
   17. COMPATIBILITY ALIASES (deprecated names)
   In a cascade layer on purpose: any unlayered definition (for
   example the legacy :root block in manage's styles.css) still
   wins, so loading this file changes nothing that is defined
   today. Names that are defined NOWHERE today start resolving to
   brand tokens instead of their hand-typed fallbacks; that is the
   intended fix (DESIGN-SYSTEM-v1.1.md §7.2).
   Every name here is deprecated: ds-lint flags new uses.
   ============================================================ */
@layer ss-compat {
  :root {
    /* 17a. Legacy SuperStorage block (manage css/styles.css :root). @deprecated v1.1 */
    --brand-navy:      var(--ss-iris);
    --brand-navy-dark: var(--color-text-link-hover);
    --brand-blue-soft: var(--ss-lavender);
    --brand-red:       var(--color-state-danger);
    --bg:              var(--color-surface-app);
    --panel:           var(--color-surface-card);
    --panel-2:         var(--color-surface-subtle);
    --border:          var(--color-border-default);
    --text:            var(--color-text-primary);
    --muted:           var(--color-text-secondary);
    --accent:          var(--color-action-primary);
    --accent-2:        var(--color-text-link);
    --success:         var(--color-state-success);
    --warn:            var(--color-state-warning);
    --danger:          var(--color-state-danger);
    --info:            var(--color-state-info);

    /* 17b. Names used in manage but defined nowhere. @deprecated v1.1 */
    --ss-line:                 var(--color-border-default);
    --line:                    var(--color-border-default);
    --color-border:            var(--color-border-default);
    --color-border-secondary:  var(--color-border-strong);
    --color-warning-border:    var(--color-state-warning-border);
    --ss-ink-soft:             var(--color-text-secondary);
    --ink-soft:                var(--color-text-secondary);
    --color-text-muted:        var(--color-text-secondary);
    --ink:                     var(--color-text-primary);
    --color-text:              var(--color-text-primary);
    --ss-surface:              var(--color-surface-card);
    --color-surface:           var(--color-surface-card);
    --color-surface-2:         var(--color-surface-subtle);
    --color-surface-sunken:    var(--color-surface-subtle);
    --color-bg-muted:          var(--color-surface-subtle);
    --ss-paper-2:              var(--color-surface-subtle);
    --bg-1:                    var(--color-surface-card);
    --ss-sunset-light:         var(--ss-cream);
    --ss-sunset-bg:            var(--color-action-primary-soft);
    --ss-orange:               var(--ss-sunset);
    --brand:                   var(--color-action-primary);
    --color-brand-primary:     var(--color-action-primary);
    --color-accent:            var(--ss-iris);
    --color-danger:            var(--color-state-danger);
    --color-feedback-error:    var(--color-state-danger);
    --ss-danger:               var(--color-state-danger);
    --color-success:           var(--color-state-success);
    --ss-success:              var(--color-state-success);
    --color-state-warn:        var(--color-state-warning);
    --advice-fg:               var(--color-state-warning-fg);
    /* --color-state-danger-fg, --color-border-subtle, --color-text-tertiary,
       --color-surface-subtle and --z-popover are now REAL tokens (§12, §16). */
  }
}

/* ============================================================
   18. BASE — type floor + touch targets
   ============================================================ */
.t-data  { font-size: var(--text-data);  line-height: var(--lh-data); }
.t-title { font-size: var(--text-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); font-weight: 700; }
.t-tertiary { color: var(--color-text-tertiary); }
.t-num { font-variant-numeric: tabular-nums; }

/* .btn--sm is 36px for mouse density; on touch screens it meets the 44px rule. */
@media (pointer: coarse) {
  .btn--sm { min-height: var(--tap-min); }
}

/* v1.0 soft buttons, now token-driven. [D2] soft-primary text is the AA -fg (Sunset on soft was 2.3:1) */
.btn--primary-soft       { background: var(--color-action-primary-soft); color: var(--color-action-primary-soft-fg); }
.btn--primary-soft:hover { background: var(--color-action-primary-soft-hover); }
.btn--info:hover         { background: var(--color-state-info-bg-hover); }
.btn--success:hover      { background: var(--color-state-success-bg-hover); }
.btn--danger:hover       { background: var(--color-state-danger-bg-hover); }
.btn--warning:hover      { background: var(--color-state-warning-bg-hover); }

/* [D2] the soft state buttons use the AA -fg text too */
.btn--info    { color: var(--color-state-info-fg); }
.btn--success { color: var(--color-state-success-fg); }
.btn--danger  { color: var(--color-state-danger-fg); }
.btn--warning { color: var(--color-state-warning-fg); }
/* .btn--aa and .badge--aa (opt-in classes in the first v1.1 draft) are no-ops now: D1/D2 are the default. */

/* Quiet row action: what every row button is except the row's one primary */
.btn--row {
  --btn-py: 8px; --btn-px: 14px; --btn-fs: var(--text-small);
  min-height: 36px;
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--row:hover { background: var(--color-action-ghost-hover); }
@media (pointer: coarse) { .btn--row { min-height: var(--tap-min); } }

/* ============================================================
   19. LIST ROW — the unit of work (Hub call-backs, inbox, chores)
   need · person · when · who · one line of context · actions
   ============================================================ */
.ss-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  min-height: var(--row-min-h);
  background: var(--color-surface-card);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  transition: background var(--duration-fast) var(--ease-standard);
}
.ss-row:hover { background: var(--color-surface-hover); }
.ss-row[aria-selected="true"], .ss-row.is-selected { background: var(--color-surface-selected); }
.ss-row__need    { font-size: var(--text-body); line-height: 1.35; font-weight: 700; color: var(--color-text-primary); margin: 0; text-wrap: pretty; }
.ss-row__who     { font-size: var(--text-data); line-height: var(--lh-data); color: var(--color-text-secondary); }
.ss-row__context { font-size: var(--text-data); line-height: var(--lh-data); color: var(--color-text-tertiary);
                   display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ss-row__side    { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.ss-row__owner   { font-size: var(--text-data); color: var(--color-text-tertiary); white-space: nowrap; }
.ss-row__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) {
  .ss-row { grid-template-columns: 1fr; }
  .ss-row__side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .ss-row__actions { flex: 1 0 100%; flex-wrap: wrap; justify-content: stretch; }
  .ss-row__actions .btn { flex: 1 1 auto; min-width: var(--tap-min); min-height: var(--tap-min); }
}

/* ============================================================
   20. STICKY ACTION BAR — max 96px, every viewport
   ============================================================ */
.ss-stickybar {
  position: sticky;
  top: var(--ss-chrome-h, 0px);       /* pages set --ss-chrome-h to the fixed header height */
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-3);
  max-height: var(--sticky-bar-max);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-card);
  border-bottom: var(--border-thin) solid var(--color-border-default);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ss-stickybar__id    { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.ss-stickybar__name  { font-weight: 700; font-size: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-stickybar__meta  { font-size: var(--text-data); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-stickybar__actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
@media (max-width: 480px) {
  .ss-stickybar__actions .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-stickybar__actions .btn { min-width: var(--tap-min); padding-left: 12px; padding-right: 12px; }
  /* phone: the primary, one more action, and More — the rest move into the More sheet */
  .ss-stickybar__actions .btn:nth-child(n+3):not(:last-child) { display: none; }
  .ss-stickybar__meta { white-space: normal; }
}

/* ============================================================
   21. SHEET — bottom sheet ≤768px, side panel above
   ============================================================ */
.ss-scrim { position: fixed; inset: 0; background: var(--color-overlay-scrim); z-index: var(--z-sheet); }
.ss-sheet {
  position: fixed; z-index: calc(var(--z-sheet) + 1);
  right: 0; top: 0; bottom: 0; width: min(440px, 100%);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.ss-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
                  padding: var(--space-4); border-bottom: var(--border-thin) solid var(--color-border-default); }
.ss-sheet__title { font-size: var(--text-title); line-height: var(--lh-title); font-weight: 700; margin: 0; }
.ss-sheet__body { padding: var(--space-4); overflow: auto; flex: 1 1 auto; }
.ss-sheet__foot { padding: var(--space-3) var(--space-4); border-top: var(--border-thin) solid var(--color-border-default);
                  display: flex; gap: var(--space-2); justify-content: flex-end; }
.ss-sheet__grip { display: none; }
.ss-sheet[hidden], .ss-scrim[hidden] { display: none; }
@media (max-width: 768px) {
  .ss-sheet { top: auto; left: 0; width: 100%; max-height: var(--sheet-max-h);
              border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; }
  .ss-sheet__grip { display: block; width: 40px; height: 4px; border-radius: var(--radius-pill);
                    background: var(--color-border-strong); margin: var(--space-2) auto 0; }
  .ss-sheet__foot .btn { flex: 1 1 0; min-height: var(--tap-min); }
}

/* Filter sheet: a sheet whose body is a list of .ss-filter options */
.ss-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
             min-height: var(--tap-min); padding: 0 var(--space-2); border-radius: var(--radius-md); cursor: pointer; }
.ss-filter:hover { background: var(--color-surface-hover); }
.ss-filter__count { font-size: var(--text-data); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }

/* ============================================================
   22. DATA STATES — loading · slow · empty · stale · error
   ============================================================ */
.ss-skel {
  display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--skeleton-bg) 0%, var(--skeleton-shine) 50%, var(--skeleton-bg) 100%);
  background-size: 200% 100%;
  animation: ss-shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes ss-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ss-skel { animation: none; } }

.ss-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
}
.ss-state__icon  { font-size: var(--text-h3); line-height: 1; }
.ss-state__title { font-size: var(--text-body); font-weight: 700; margin: 0; color: var(--color-text-primary); }
.ss-state__body  { font-size: var(--text-small); color: var(--color-text-secondary); margin: 0; max-width: 44ch; }
.ss-state__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }

.ss-state--empty { background: var(--ss-cream); border: var(--border-default) dashed var(--color-border-strong); }
.ss-state--empty .ss-state__icon { color: var(--ss-sunset); }
.ss-state--slow  { background: var(--color-surface-subtle); }
.ss-state--slow .ss-state__icon { color: var(--color-text-secondary); }
.ss-state--error { background: var(--color-state-danger-bg); border: var(--border-thin) solid var(--color-state-danger-border); }
.ss-state--error .ss-state__icon, .ss-state--error .ss-state__title { color: var(--color-state-danger-fg); }

/* Stale: a one-line stamp, never a full panel */
.ss-stale {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--ls-caption);
  color: var(--color-text-tertiary);
}
.ss-stale--warn { color: var(--color-state-warning-fg); }

/* "No number yet" inside a stat: a dash plus a caption, never display-size text */
.ss-nodata { font-size: inherit; color: var(--color-text-tertiary); }
.ss-nodata__why { display: block; font-size: var(--text-data); color: var(--color-text-tertiary); margin-top: var(--space-1); }