/* ============================================================================
   Stoculmeu — design system foundation (2026-09)
   Loaded AFTER the Sneat theme so these tokens/primitives win.
   Goal: one restrained, Apple-ish visual language; dark-mode ready.
   ============================================================================ */

:root {
  /* --- accent: follows the theme's primary, with a safe fallback --- */
  --ds-accent:        var(--bs-primary, #6366f1);
  --ds-accent-rgb:    var(--bs-primary-rgb, 99, 102, 241);
  --ds-accent-weak:   rgba(var(--ds-accent-rgb), .10);
  --ds-accent-line:   rgba(var(--ds-accent-rgb), .28);

  /* --- Apple HIG semantic layer (2026-09).
     These carry the canonical Apple system-colour values. The --ds-* tokens
     below alias them wherever the value is already byte-identical — this is an
     organizational rename, NOT a recolor. Values that don't yet match Apple
     exactly (--ds-hairline, Tailwind-derived page-local palettes, the softer
     tertiary-label, etc.) are deliberately left untouched for a later pass. --- */
  --apple-blue:   #0088ff;  --apple-green:  #34c759;  --apple-orange: #ff8d28;
  --apple-red:    #ff383c;  --apple-yellow: #ffcc00;  --apple-teal:   #00c3d0;
  --apple-indigo: #6155f5;  --apple-purple: #cb30e0;  --apple-pink:   #ff2d55;
  --apple-mint:   #00c8b3;

  /* --- Fixed brand action palette (2026-09).
     The four colours used for the Money account-card action buttons
     (Deposit / Withdraw / Edit / Delete), the category-card action buttons
     and the Notes Board note-colour palette. Deliberately NOT redefined per
     theme — these must render identically in light and dark. --- */
  --brand-green:  rgb(48, 209, 88);    /* #30d158 */
  --brand-orange: rgb(255, 141, 40);   /* #ff8d28 */
  --brand-blue:   rgb(0, 136, 255);    /* #0088ff */
  --brand-red:    rgb(255, 45, 85);    /* #ff2d55 */

  --apple-label:           #1d1d1f;
  --apple-secondary-label: #6e6e73;
  --apple-tertiary-label:  #8e8e93;
  --apple-system-grouped-background:           #f5f5f7;
  --apple-secondary-system-grouped-background: #ffffff;
  --apple-tertiary-system-grouped-background:  #fafafa;
  --apple-system-fill:           #f2f2f7;
  --apple-secondary-system-fill: #e9e9ef;
  --apple-separator: rgba(60,60,67,.29);

  /* --- Apple system colours: cyan + brown (light) --- */
  --apple-cyan:  #00c0e8;   /* rgb(0,192,232) */
  --apple-brown: #ac7f5e;   /* rgb(172,127,94) */

  /* --- Apple system gray tiers (light) — chrome / borders / fills, NOT text.
     Text keeps --apple-label / --apple-secondary-label / --apple-tertiary-label. --- */
  --apple-gray-1: #8e8e93;  /* systemGray  142,142,147 */
  --apple-gray-2: #aeaeb2;  /* systemGray2 174,174,178 */
  --apple-gray-3: #c7c7cc;  /* systemGray3 199,199,204 */
  --apple-gray-4: #d1d1d6;  /* systemGray4 209,209,214 */
  --apple-gray-5: #e5e5ea;  /* systemGray5 229,229,234 */
  --apple-gray-6: #f2f2f7;  /* systemGray6 242,242,247 */

  /* --- Apple increased-contrast variants (light). Defined for a future
     @media (prefers-contrast: more); NOT wired to anything yet. --- */
  --apple-red-hc:    #e9152d;  --apple-orange-hc: #c55300;  --apple-yellow-hc: #a16a00;
  --apple-green-hc:  #008932;  --apple-mint-hc:   #008575;  --apple-teal-hc:   #008198;
  --apple-cyan-hc:   #007eae;  --apple-blue-hc:   #1e6ef4;  --apple-indigo-hc: #564ade;
  --apple-purple-hc: #b02fc2;  --apple-pink-hc:   #e7124d;  --apple-brown-hc:  #956d51;

  /* --- neutral surfaces (Apple-ish greys) --- */
  --ds-bg:            var(--apple-system-grouped-background);   /* app background */
  --ds-surface:       var(--apple-secondary-system-grouped-background);   /* cards / sheets */
  --ds-surface-2:     var(--apple-tertiary-system-grouped-background);   /* nested / striped */
  --ds-elevated:      #ffffff;

  /* --- icon sizing scale (SF Symbols-ish; chrome icons are uniform 20) --- */
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;

  /* --- text --- */
  --ds-text:          var(--apple-label);
  --ds-text-2:        var(--apple-secondary-label);
  --ds-text-3:        var(--apple-tertiary-label);

  /* --- lines & depth --- */
  --ds-hairline:      rgba(0, 0, 0, .09);
  --ds-hairline-2:    rgba(0, 0, 0, .055);
  --ds-shadow-sm:     0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --ds-shadow:        0 1px 3px rgba(0,0,0,.06), 0 12px 32px -14px rgba(20,20,40,.16);
  --ds-shadow-lg:     0 2px 8px rgba(0,0,0,.06), 0 30px 60px -20px rgba(20,20,40,.28);

  /* --- shape --- */
  --ds-radius-sm:     10px;
  --ds-radius:        14px;
  --ds-radius-lg:     18px;
  --ds-radius-modal:  24px;
  --ds-radius-pill:   999px;

  /* --- spacing scale --- */
  --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px;
  --ds-5: 24px; --ds-6: 32px; --ds-7: 48px; --ds-8: 64px;

  /* --- iOS system palette (light) --- */
  --ds-blue:   var(--apple-blue);   --ds-green:  var(--apple-green);   --ds-orange: var(--apple-orange);
  --ds-red:    var(--apple-red);    --ds-yellow: var(--apple-yellow);  --ds-teal:   var(--apple-teal);
  --ds-indigo: var(--apple-indigo); --ds-purple: var(--apple-purple); --ds-pink:   var(--apple-pink);
  --ds-mint:   var(--apple-mint);
  --ds-fill:   var(--apple-system-fill);   /* systemGray6 — input / segmented track fill */
  --ds-fill-2: var(--apple-secondary-system-fill);   /* systemGray5 */
  --ds-separator: var(--apple-separator);   /* iOS opaque-ish separator */

  /* --- Puppertino (codedgar) — buttons / fields / shadows, verbatim --- */
  --p-btn-border:  #cacaca;
  --p-btn-bg:      #ffffff;
  --p-btn-col:     #000000;
  --p-btn-shadow:  0 1px 0.375px rgba(0,0,0,.05), 0 0.25px 0.375px rgba(0,0,0,.15);
  --p-prim-bg:     var(--ds-blue);
  --p-prim-bg-ac:  color-mix(in srgb, var(--ds-blue) 92%, #000);
  --p-prim-col:    #f5f5f5;
  --p-prim-shadow: inset 0 1px 1px rgba(255,255,255,.41), 0 2px 3px -2px rgba(0,0,0,.3);
  --p-input-bg:    #ffffff;
  --p-input-col:   rgba(0,0,0,.85);
  --p-input-plac:  rgba(0,0,0,.28);
  --p-input-bd:    rgba(0,0,0,.15);
  --p-input-shadow: 0 .5px 2.5px rgba(0,0,0,.22);
  /* one canonical keyboard-focus ring for the modern app */
  --focus-ring:    color-mix(in srgb, var(--ds-blue) 50%, transparent);
  --focus-ring-w:  3px;
  --p-focus-ring:  var(--focus-ring);   /* legacy alias */
  --p-invalid:     #d6513c;
  --p-shadow-2:    0 2px 10px rgba(0,0,0,.1);
  --p-shadow-3:    0 10px 20px rgba(0,0,0,.1);
  --p-shadow-4:    0 20px 30px rgba(0,0,0,.2);

  /* --- semantic status (mapped to iOS system colours) --- */
  --ds-ok:   #248a3d;  --ds-ok-bg:   rgba(52,199,89,.14);
  --ds-warn: #b25e00;  --ds-warn-bg: rgba(255,149,0,.15);
  --ds-err:  #d70015;  --ds-err-bg:  rgba(255,59,48,.12);

  /* semantic status aliases — shared across Accounts pages (home + kanban +
     dashboard/expenses/history/categories); no single CSS file is loaded by
     all of them, so they live here. Page-local *-soft tints stay page-local. */
  --ma-danger:  var(--apple-red);
  --ma-success: var(--apple-green);
  --ma-warning: var(--apple-orange);

  --hover-lift:    -1px;   /* interactive lift for cards + buttons on :hover */

  --ds-ease: cubic-bezier(.32, .72, 0, 1);   /* soft spring-ish */
}

/* --- dark mode: prefers-color-scheme + explicit [data-theme] --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --apple-label:#f5f5f7; --apple-secondary-label:#a1a1a6; --apple-tertiary-label:#8e8e93;
    --apple-system-grouped-background:#000000;
    --apple-secondary-system-grouped-background:#1c1c1e;
    --apple-tertiary-system-grouped-background:#2c2c2e;
    --apple-system-fill:#1c1c1e; --apple-secondary-system-fill:#2c2c2e;
    --apple-separator: rgba(84,84,88,.6);
    --ds-bg: var(--apple-system-grouped-background);
    --ds-surface: var(--apple-secondary-system-grouped-background);
    --ds-surface-2: var(--apple-tertiary-system-grouped-background);
    --ds-elevated: #2c2c2e;
    --ds-text: var(--apple-label);
    --ds-text-2: var(--apple-secondary-label);
    --ds-text-3: var(--apple-tertiary-label);
    --ds-hairline: rgba(255,255,255,.12);
    --ds-hairline-2: rgba(255,255,255,.07);
    --ds-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --ds-shadow: 0 1px 3px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.6);
    --ds-shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 30px 60px -20px rgba(0,0,0,.7);
    --ds-accent-weak: rgba(var(--ds-accent-rgb), .18);
    --apple-blue:#0091ff; --apple-green:#30d158; --apple-orange:#ff9230; --apple-red:#ff4245;
    --apple-yellow:#ffd600; --apple-teal:#00d2e0; --apple-indigo:#6d7cff; --apple-purple:#db34f2;
    --apple-pink:#ff375f; --apple-mint:#00dac3;
    --apple-cyan:#3cd3fe; --apple-brown:#b78a66;
    --apple-gray-1:#8e8e93; --apple-gray-2:#636366; --apple-gray-3:#48484a;
    --apple-gray-4:#3a3a3c; --apple-gray-5:#2c2c2e; --apple-gray-6:#1c1c1e;
    --apple-red-hc:#ff6165; --apple-orange-hc:#ffa056; --apple-yellow-hc:#fedf43;
    --apple-green-hc:#4ad968; --apple-mint-hc:#54dfcb; --apple-teal-hc:#3bddec;
    --apple-cyan-hc:#6dd9ff; --apple-blue-hc:#5cb8ff; --apple-indigo-hc:#a7aaff;
    --apple-purple-hc:#ea8dff; --apple-pink-hc:#ff8ac4; --apple-brown-hc:#dba679;
    --ds-blue:var(--apple-blue); --ds-green:var(--apple-green); --ds-orange:var(--apple-orange); --ds-red:var(--apple-red);
    --ds-yellow:var(--apple-yellow); --ds-teal:var(--apple-teal); --ds-indigo:var(--apple-indigo); --ds-purple:var(--apple-purple);
    --ds-pink:var(--apple-pink); --ds-mint:var(--apple-mint);
    --ds-fill:var(--apple-system-fill); --ds-fill-2:var(--apple-secondary-system-fill); --ds-separator: var(--apple-separator);
    --ds-ok:#30d158; --ds-ok-bg:rgba(48,209,88,.18);
    --ds-warn:#ff9f0a; --ds-warn-bg:rgba(255,159,10,.18);
    --ds-err:#ff453a; --ds-err-bg:rgba(255,69,58,.18);
    --p-btn-border:#454545; --p-btn-bg:#262525; --p-btn-col:#fcfcfc;
    --p-input-bg:#040404; --p-input-col:#fff; --p-input-plac:#5a5a5a; --p-input-bd:#454545;
    --p-input-shadow: 0 .5px 2px rgba(0,0,0,.5);
    --p-shadow-2:0 2px 10px rgba(0,0,0,.5); --p-shadow-3:0 10px 24px rgba(0,0,0,.55);
    --p-shadow-4:0 20px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --apple-blue:#0091ff; --apple-green:#30d158; --apple-orange:#ff9230; --apple-red:#ff4245;
  --apple-yellow:#ffd600; --apple-teal:#00d2e0; --apple-indigo:#6d7cff; --apple-purple:#db34f2;
  --apple-pink:#ff375f; --apple-mint:#00dac3;
  --apple-cyan:#3cd3fe; --apple-brown:#b78a66;
  --apple-gray-1:#8e8e93; --apple-gray-2:#636366; --apple-gray-3:#48484a;
  --apple-gray-4:#3a3a3c; --apple-gray-5:#2c2c2e; --apple-gray-6:#1c1c1e;
  --apple-red-hc:#ff6165; --apple-orange-hc:#ffa056; --apple-yellow-hc:#fedf43;
  --apple-green-hc:#4ad968; --apple-mint-hc:#54dfcb; --apple-teal-hc:#3bddec;
  --apple-cyan-hc:#6dd9ff; --apple-blue-hc:#5cb8ff; --apple-indigo-hc:#a7aaff;
  --apple-purple-hc:#ea8dff; --apple-pink-hc:#ff8ac4; --apple-brown-hc:#dba679;
  --apple-label:#f5f5f7; --apple-secondary-label:#a1a1a6; --apple-tertiary-label:#8e8e93;
  --apple-system-grouped-background:#000000;
  --apple-secondary-system-grouped-background:#1c1c1e;
  --apple-tertiary-system-grouped-background:#2c2c2e;
  --apple-system-fill:#1c1c1e; --apple-secondary-system-fill:#2c2c2e;
  --apple-separator: rgba(84,84,88,.6);
  --ds-blue:var(--apple-blue); --ds-green:var(--apple-green); --ds-orange:var(--apple-orange); --ds-red:var(--apple-red);
  --ds-yellow:var(--apple-yellow); --ds-teal:var(--apple-teal); --ds-indigo:var(--apple-indigo); --ds-purple:var(--apple-purple);
  --ds-pink:var(--apple-pink); --ds-mint:var(--apple-mint);
  --ds-fill:var(--apple-system-fill); --ds-fill-2:var(--apple-secondary-system-fill); --ds-separator: var(--apple-separator);
  --ds-ok:#30d158; --ds-ok-bg:rgba(48,209,88,.18);
  --ds-warn:#ff9f0a; --ds-warn-bg:rgba(255,159,10,.18);
  --ds-err:#ff453a; --ds-err-bg:rgba(255,69,58,.18);
  --p-btn-border:#454545; --p-btn-bg:#262525; --p-btn-col:#fcfcfc;
  --p-input-bg:#040404; --p-input-col:#fff; --p-input-plac:#5a5a5a; --p-input-bd:#454545;
  --p-input-shadow: 0 .5px 2px rgba(0,0,0,.5);
  --p-shadow-2:0 2px 10px rgba(0,0,0,.5); --p-shadow-3:0 10px 24px rgba(0,0,0,.55);
  --p-shadow-4:0 20px 40px rgba(0,0,0,.6);
  --ds-bg: var(--apple-system-grouped-background);
  --ds-surface: var(--apple-secondary-system-grouped-background);
  --ds-surface-2: var(--apple-tertiary-system-grouped-background);
  --ds-elevated: #2c2c2e;
  --ds-text: var(--apple-label);
  --ds-text-2: var(--apple-secondary-label);
  --ds-text-3: var(--apple-tertiary-label);
  --ds-hairline: rgba(255,255,255,.12);
  --ds-hairline-2: rgba(255,255,255,.07);
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --ds-shadow: 0 1px 3px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.6);
  --ds-shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 30px 60px -20px rgba(0,0,0,.7);
  --ds-accent-weak: rgba(var(--ds-accent-rgb), .18);
}

/* ===========================================================================
   Opt-in primitives — scope with .ds so we don't restyle the whole app yet.
   A converted page wraps its content in <div class="ds"> … </div>.
   =========================================================================== */
.ds {
  color: var(--ds-text);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}
.ds ::selection { background: rgba(var(--ds-accent-rgb), .22); }

/* --- Lucide icon defaults (em-based so utility font-size classes keep working) --- */
svg.lyc, .lyc { width: 1em; height: 1em; stroke-width: 1.5; vertical-align: -0.14em;
  flex: 0 0 auto; display: inline-block; }
.lyc-lg { width: 1.3em; height: 1.3em; }
/* Chrome icons are a uniform 20px (SF Symbols-style toolbars): sidebar menu,
   navbar, icon-only action buttons. Inline-in-text icons stay at 1em. */
.menu-icon.lyc { width: var(--icon-20); height: var(--icon-20); }
.icon-md { width: var(--icon-20); height: var(--icon-20); }
.layout-navbar .lyc { width: var(--icon-20); height: var(--icon-20); }
.pbtn-icon > .lyc, .pbtn-icon > svg { width: var(--icon-20); height: var(--icon-20); }

/* NB: FontAwesome/Boxicon <i> elements are swapped to Lucide at runtime by
   icon-shim.js. We deliberately do NOT hide them until then — a brief glimpse of
   the old glyph is less jarring than every icon on the page blanking out on each
   navigation. The flash goes away for good as each template is converted to
   native <i data-lucide>. */

/* --- page header --- */
.ds .page-head { display:flex; align-items:flex-start; gap:var(--ds-4);
  flex-wrap:wrap; margin-bottom: var(--ds-6); }
.ds .page-head .ph-main { flex:1 1 auto; min-width:0; }
.ds .page-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); font-weight: 600;
  letter-spacing: -0.021em; line-height: 1.15; margin: 0; color: var(--ds-text); }
.ds .page-head .ph-sub { margin: .3rem 0 0; color: var(--ds-text-2); font-size: .95rem;
  max-width: 62ch; }
.ds .page-head .ph-actions { display:flex; gap:var(--ds-2); flex-wrap:wrap; align-self:center; }
.ds .page-head .ph-eyebrow { font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ds-accent); margin-bottom:.25rem; }

/* --- section / grouped card --- */
.ds .section { background: var(--ds-surface); border: 1px solid var(--ds-hairline-2);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm);
  overflow: clip; margin-bottom: var(--ds-5); }
.ds .section > .section-head { padding: var(--ds-4) var(--ds-5); display:flex;
  align-items:center; gap:var(--ds-3); border-bottom: 1px solid var(--ds-hairline-2); }
.ds .section > .section-head h2 { font-size: 1.02rem; font-weight: 550; margin:0;
  letter-spacing: -0.01em; }
.ds .section > .section-head .sh-sub { font-size:.82rem; color:var(--ds-text-3); }
.ds .section > .section-body { padding: var(--ds-5); }
.ds .section > .section-body.flush { padding: 0; }

/* --- hairline list (Apple grouped list) --- */
.ds .rows { display:flex; flex-direction:column; }
.ds .rows > .row-item { display:flex; align-items:center; gap: var(--ds-3);
  padding: var(--ds-3) var(--ds-5); border-top: 1px solid var(--ds-hairline-2);
  transition: background .12s var(--ds-ease); }
.ds .rows > .row-item:first-child { border-top: 0; }
.ds .rows > .row-item:hover { background: var(--ds-surface-2); }
.ds .rows > .row-item .ri-main { flex:1 1 auto; min-width:0; }
.ds .rows > .row-item .ri-title { font-weight: 450; }
.ds .rows > .row-item .ri-sub { font-size:.82rem; color: var(--ds-text-3); }

/* --- icon tile --- */
.ds .tile { width: 40px; height: 40px; border-radius: 11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: var(--ds-accent-weak); color: var(--ds-accent); }
.ds .tile.neutral { background: var(--ds-surface-2); color: var(--ds-text-2); }

/* --- buttons: Puppertino (codedgar). Base = white/hairline pill-rect;
       one filled primary per view; rest quiet. --- */
.ds .btn { border-radius: 10px; font-weight: 400; letter-spacing: -.006em;
  padding: .45rem 1.2rem;
  background: var(--p-btn-bg); border: 1px solid var(--p-btn-border); color: var(--p-btn-col);
  box-shadow: var(--p-btn-shadow);
  transition: transform .08s var(--ds-ease), filter .15s, background .15s, box-shadow .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.ds .btn:active { transform: scale(.97); }
.ds .btn:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 1px; }
.ds .btn[disabled], .ds .btn:disabled { background: var(--ds-fill); color: var(--ds-text-3);
  box-shadow: none; pointer-events: none; }
.ds .btn-primary { position: relative; overflow: hidden; border: 0;
  background: var(--p-prim-bg); color: var(--p-prim-col);
  box-shadow: var(--p-prim-shadow); }
.ds .btn-primary::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%); opacity:.17; }
.ds .btn-primary:hover { filter: brightness(1.03); }
.ds .btn-primary:active { background: var(--p-prim-bg-ac); }
.ds .btn-accent { position: relative; overflow: hidden; border: 0; color:#fff;
  background: var(--ds-accent); box-shadow: var(--p-prim-shadow); }
.ds .btn-accent::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%); opacity:.17; }
.ds .btn-success { border:0; color:#fff; background: var(--ds-green); box-shadow: var(--p-prim-shadow); }
.ds .btn-warning { border:0; color:#fff; background: var(--ds-orange); box-shadow: var(--p-prim-shadow); }
.ds .btn-danger  { border:0; color:#fff; background: var(--ds-red);   box-shadow: var(--p-prim-shadow); }
.ds .btn-quiet { background: var(--p-btn-bg); border:1px solid var(--p-btn-border);
  color: var(--p-btn-col); box-shadow: var(--p-btn-shadow); }
.ds .btn-quiet:hover { filter: brightness(.97); }
.ds .btn-plain { background: transparent; border-color: transparent; box-shadow:none; color: var(--ds-accent);
  padding-inline: .5rem; }
.ds .btn-plain:hover { background: var(--ds-accent-weak); }
.ds .btn-danger-plain { background: transparent; border-color: transparent; box-shadow:none; color: var(--ds-err);
  padding-inline: .5rem; }
.ds .btn-danger-plain:hover { background: var(--ds-err-bg); }
.ds .btn-icon { padding: .4rem; border-radius: 9px; }
.ds .btn-sm { padding: .32rem 1rem; font-size: .9rem; }
.ds .btn-lg { padding: .7rem 1.8rem; font-size: 1.1rem; border-radius: 12px; }

/* --- pill / badge --- */
.ds .pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem;
  font-weight:540; padding:.22rem .6rem; border-radius: var(--ds-radius-pill); }
.ds .pill-ok   { background: var(--ds-ok-bg);   color: var(--ds-ok); }
.ds .pill-warn { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ds .pill-err  { background: var(--ds-err-bg);  color: var(--ds-err); }
.ds .pill-neutral { background: var(--ds-surface-2); color: var(--ds-text-2); }
.ds .pill-accent  { background: var(--ds-accent-weak); color: var(--ds-accent); }

/* --- segmented control (iOS style) --- */
.ds .segmented { display:inline-flex; padding:2px; gap:2px; background: var(--ds-fill, var(--ds-surface-2));
  border: 0; border-radius: 999px; }
.ds .segmented > * { border:0; background:transparent; cursor:pointer; font-weight:460;
  font-size:.86rem; color: var(--ds-text-2); padding:.34rem .8rem; border-radius: 999px;
  display:inline-flex; align-items:center; gap:.4rem; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.ds .segmented > .is-active { background: var(--ds-surface); color: var(--ds-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); font-weight:500; }

/* --- choice chip --- */
.ds .chip { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  border:1px solid var(--ds-hairline); background: var(--ds-surface);
  border-radius: var(--ds-radius-pill); padding:.4rem .85rem .4rem .5rem;
  font-weight:460; font-size:.88rem; color: var(--ds-text-2);
  transition: border-color .15s, background .15s, color .15s; }
.ds .chip .chip-ic { width:24px; height:24px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; background: var(--ds-surface-2); color: var(--ds-text-3); }
.ds .chip.is-on { border-color: var(--ds-accent-line); background: var(--ds-accent-weak);
  color: var(--ds-accent); }
.ds .chip.is-on .chip-ic { background: var(--ds-accent); color:#fff; }

/* --- table, quieted --- */
.ds table.ds-table { width:100%; border-collapse: collapse; }
.ds table.ds-table thead th { font-size:.7rem; font-weight:540; letter-spacing:.05em;
  text-transform:uppercase; color: var(--ds-text-3); text-align:left;
  padding: .6rem var(--ds-4); border-bottom: 1px solid var(--ds-hairline-2); }
.ds table.ds-table tbody td { padding: .7rem var(--ds-4); border-top: 1px solid var(--ds-hairline-2);
  vertical-align: middle; }
.ds table.ds-table tbody tr:first-child td { border-top: 0; }
.ds table.ds-table tbody tr:hover td { background: var(--ds-surface-2); }
.ds td.align-middle, .ds th.align-middle { vertical-align: middle; }

/* --- form controls: Puppertino .p-form-text --- */
.ds .field { display:flex; flex-direction:column; gap:.35rem; }
.ds .field > label { font-size:.8rem; font-weight:460; color: var(--ds-text-2); }
.ds .control {
  background: var(--p-input-bg); border:1px solid var(--p-input-bd);
  border-radius: 8px; padding:.5rem .7rem; color: var(--ds-text);
  transition: border-color .15s, outline-color .15s; }
.ds .control::placeholder { color: var(--p-input-plac); opacity: 1; }
.ds .control:focus, .ds .control:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 0;
  border-color: var(--ds-blue); box-shadow: none; }
/* Bootstrap form controls on a .ds page → Puppertino border + focus (bg/chevron kept) */
.ds .form-control, .ds .form-select {
  border: 1px solid var(--p-input-bd); border-radius: 8px; }
.ds .form-control:focus, .ds .form-select:focus {
  outline: var(--focus-ring-w) solid var(--focus-ring); border-color: var(--ds-blue); box-shadow: none; }

/* --- empty state --- */
.ds .empty { text-align:center; padding: var(--ds-7) var(--ds-4); color: var(--ds-text-3); }
.ds .empty .lyc { width: 34px; height: 34px; margin: 0 auto var(--ds-2); opacity:.7; display:block; }

/* --- indeterminate progress bar --- */
.ds .track { height: 5px; border-radius: 3px; background: var(--ds-accent-weak); overflow:hidden; }
.ds .track > i { display:block; height:100%; width:40%; border-radius:3px; background: var(--ds-accent);
  animation: ds-ind 1.15s ease-in-out infinite; }
.ds .track.pct > i { animation:none; width: var(--pct, 0%); transition: width .35s var(--ds-ease); }
@keyframes ds-ind { 0% { margin-left:-40%; } 100% { margin-left:100%; } }

/* --- reduce motion --- */
@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}