/* ============================================================
   TRAIN & SHINE — Component layer (.ns-*  =  "native style")
   Every component branches on [data-platform="ios|android"].
   In RN these are real components using Platform.select + the token theme.
   ============================================================ */

/* ---------- Pressable ripple (Android) / dim (iOS) ---------- */
.ns-ripple { position:absolute; border-radius:50%; transform:scale(0); background:currentColor; opacity:.18; pointer-events:none; animation:ripple var(--dur-3) var(--ease-decel) forwards; }
@keyframes ripple { to { transform:scale(2.4); opacity:0; } }

/* ============================================================
   NAVIGATION — Header / Nav bar
   ============================================================ */
.ns-nav { flex:none; position:relative; z-index:var(--z-nav); background:transparent; }
.ns-nav.glass { background:color-mix(in oklch, var(--surface) 70%, transparent); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); }
[data-platform="android"] .ns-nav { box-shadow:none; }

.ns-nav-bar { display:flex; align-items:center; gap:8px; padding:6px 12px; min-height:44px; }
.ns-nav-bar .lead, .ns-nav-bar .trail { display:flex; align-items:center; gap:8px; }
.ns-nav-bar .trail { margin-left:auto; }
.ns-nav-title { font:var(--t-headline-w) var(--t-headline-s)/1 var(--font-ui); letter-spacing:var(--t-headline-ls); color:var(--text); white-space:nowrap; }
[data-platform="ios"] .ns-nav-title { position:absolute; left:50%; transform:translateX(-50%); max-width:60%; overflow:hidden; text-overflow:ellipsis; text-align:center; font-weight:600; }
[data-platform="android"] .ns-nav-bar { padding:6px 10px 6px 6px; min-height:60px; }
[data-platform="android"] .ns-nav-title { font:var(--t-subtitle-w) var(--t-subtitle-s)/1.1 var(--font-ui); margin-left:4px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Soft-filled header action buttons (clean, borderless) */
.ns-nav-btn { width:42px; height:42px; border:0; background:var(--fill-2); color:var(--text); display:grid; place-items:center; border-radius:14px; cursor:pointer; position:relative; overflow:hidden; transition:background var(--dur-2), transform var(--dur-1); }
.ns-nav-btn:hover { background:var(--fill); }
.ns-nav-btn:active { transform:scale(.93); }
.ns-nav-btn .icon { width:21px; height:21px; }
[data-platform="android"] .ns-nav-btn { border-radius:50%; }
.ns-nav-btn .ns-dot { position:absolute; top:9px; right:9px; }
.ns-nav-btn.text { width:auto; padding:0 10px; background:transparent; display:inline-flex; align-items:center; gap:2px; color:var(--accent); font:var(--t-body-w) var(--t-body-s)/1 var(--font-ui); border-radius:var(--r-full); }
.ns-nav-btn.text:hover { background:var(--accent-soft); }
.ns-nav-btn.text .icon { width:21px; height:21px; color:var(--accent); }

/* iOS large title */
.ns-largetitle { padding:4px 16px 10px; }
.ns-largetitle h1 { margin:0; font:var(--t-display-w) var(--t-display-s)/var(--t-display-lh) var(--font-ui); letter-spacing:var(--t-display-ls); color:var(--text); }
[data-platform="android"] .ns-largetitle h1 { font-weight:600; }

/* ============================================================
   TAB BAR / BOTTOM NAV  — floating island with expanding active chip
   ============================================================ */
.ns-tabbar {
  flex:none; display:flex; align-items:center; gap:4px; z-index:var(--z-nav);
  margin:0 16px 16px; padding:7px; border-radius:32px; box-shadow:var(--elev-3);
}
[data-platform="ios"] .ns-tabbar {
  margin-bottom:22px;
  background:color-mix(in oklch, var(--surface) 82%, transparent);
  backdrop-filter:blur(24px) saturate(1.7); -webkit-backdrop-filter:blur(24px) saturate(1.7);
  border:.5px solid color-mix(in oklch, var(--border) 55%, transparent);
}
[data-platform="android"] .ns-tabbar { margin-bottom:14px; background:var(--surface-2); }
.ns-tab {
  flex:1 1 0; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px;
  border:0; background:transparent; cursor:pointer; color:var(--text-3);
  height:48px; border-radius:24px; padding:0; overflow:hidden; position:relative;
  transition:flex-grow var(--dur-3) var(--ease-decel), background var(--dur-2) var(--ease-standard), color var(--dur-2);
}
.ns-tab .pill { display:contents; }
.ns-tab .icon { width:23px; height:23px; flex:none; }
.ns-tab .lbl { font:700 13px/1 var(--font-ui); letter-spacing:.1px; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width var(--dur-3) var(--ease-decel), opacity var(--dur-2); }
.ns-tab.on { background:var(--accent); color:var(--on-accent); flex-grow:2.4; }
.ns-tab.on .lbl { max-width:96px; opacity:1; }
.ns-tab:not(.on):active { background:var(--fill-2); }

/* ============================================================
   BUTTONS
   ============================================================ */
.ns-btn {
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; cursor:pointer; user-select:none; white-space:nowrap;
  font:var(--t-headline-w) var(--t-headline-s)/1 var(--font-ui); letter-spacing:var(--t-headline-ls);
  padding:0 18px; height:44px; border-radius:var(--r-md);
  transition:transform var(--dur-1) var(--ease-standard), opacity var(--dur-1), background var(--dur-2), box-shadow var(--dur-2);
}
.ns-btn .icon { width:20px; height:20px; }
[data-platform="ios"] .ns-btn:active { opacity:.55; }
[data-platform="ios"] .ns-btn { border-radius:var(--r-md); }
[data-platform="android"] .ns-btn { border-radius:var(--r-full); height:40px; padding:0 22px; letter-spacing:.1px; font-weight:600; }
[data-platform="android"] .ns-btn:active { transform:scale(.98); }

.ns-btn--filled { background:var(--accent); color:var(--on-accent); }
.ns-btn--filled:hover { background:var(--accent-press); }
.ns-btn--tonal { background:var(--accent-soft); color:var(--accent); }
.ns-btn--gray { background:var(--fill); color:var(--text); }
.ns-btn--outlined { background:transparent; border-color:var(--border); color:var(--accent); }
.ns-btn--text { background:transparent; color:var(--accent); padding:0 12px; }
.ns-btn--elevated { background:var(--surface); color:var(--accent); box-shadow:var(--elev-2); }
.ns-btn--danger { background:var(--danger); color:#fff; }
.ns-btn--lg { height:52px; width:100%; font-size:17px; }
[data-platform="android"] .ns-btn--lg { height:52px; border-radius:var(--r-full); }
.ns-btn--sm { height:34px; padding:0 14px; font-size:14px; }
.ns-btn[disabled] { opacity:.4; pointer-events:none; }

/* FAB (Android) */
.ns-fab { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 20px; border:0; border-radius:var(--r-lg); background:var(--accent); color:var(--on-accent); box-shadow:var(--elev-3); cursor:pointer; font:600 15px/1 var(--font-ui); }
.ns-fab .icon { width:24px; height:24px; }
.ns-fab.round { width:56px; padding:0; justify-content:center; }

/* icon button */
.ns-iconbtn { position:relative; overflow:hidden; width:40px; height:40px; border-radius:50%; border:0; background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; }
.ns-iconbtn:hover { background:var(--fill-2); }
.ns-iconbtn .icon { width:22px; height:22px; }
.ns-iconbtn--tinted { background:var(--accent-soft); color:var(--accent); }

/* ============================================================
   SWITCH / TOGGLE
   ============================================================ */
.ns-switch { position:relative; flex:none; cursor:pointer; border:0; padding:0; background:transparent; }
[data-platform="ios"] .ns-switch { width:51px; height:31px; border-radius:var(--r-full); background:var(--fill); transition:background var(--dur-2) var(--ease-standard); }
[data-platform="ios"] .ns-switch::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25); transition:transform var(--dur-2) var(--ease-spring); }
[data-platform="ios"] .ns-switch.on { background:var(--accent); }
[data-platform="ios"] .ns-switch.on::after { transform:translateX(20px); }

[data-platform="android"] .ns-switch { width:52px; height:32px; border-radius:var(--r-full); background:var(--fill); border:2px solid var(--border); transition:background var(--dur-2),border-color var(--dur-2); }
[data-platform="android"] .ns-switch::after { content:""; position:absolute; top:8px; left:8px; width:16px; height:16px; border-radius:50%; background:var(--text-3); transition:all var(--dur-2) var(--ease-standard); }
[data-platform="android"] .ns-switch.on { background:var(--accent); border-color:var(--accent); }
[data-platform="android"] .ns-switch.on::after { width:24px; height:24px; top:2px; left:24px; background:#fff; }

/* ============================================================
   CHECKBOX / RADIO
   ============================================================ */
.ns-check, .ns-radio { position:relative; flex:none; width:24px; height:24px; cursor:pointer; border:2px solid var(--border); background:transparent; padding:0; display:grid; place-items:center; transition:background var(--dur-1),border-color var(--dur-1); }
.ns-check { border-radius:7px; }
[data-platform="android"] .ns-check { border-radius:3px; }
.ns-check .icon { width:16px; height:16px; color:var(--on-accent); opacity:0; transform:scale(.5); transition:opacity var(--dur-1),transform var(--dur-1) var(--ease-spring); }
.ns-check.on { background:var(--accent); border-color:var(--accent); }
.ns-check.on .icon { opacity:1; transform:scale(1); }
.ns-radio { border-radius:50%; }
.ns-radio::after { content:""; width:12px; height:12px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform var(--dur-1) var(--ease-spring); }
.ns-radio.on { border-color:var(--accent); }
.ns-radio.on::after { transform:scale(1); }

/* ============================================================
   SEGMENTED (iOS) / CHIPS (Android)
   ============================================================ */
.ns-segmented { display:inline-flex; padding:2px; background:var(--fill); border-radius:9px; position:relative; }
.ns-segmented button { flex:1; border:0; background:transparent; cursor:pointer; padding:7px 16px; border-radius:7px; font:600 13px/1 var(--font-ui); color:var(--text); white-space:nowrap; z-index:1; transition:color var(--dur-2); }
.ns-segmented .thumb { position:absolute; top:2px; bottom:2px; border-radius:7px; background:var(--surface); box-shadow:var(--elev-1); transition:transform var(--dur-2) var(--ease-standard), width var(--dur-2) var(--ease-standard); z-index:0; }

.ns-chip { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; font:500 14px/1 var(--font-ui); transition:background var(--dur-2),border-color var(--dur-2); }
[data-platform="android"] .ns-chip { border-radius:var(--r-sm); }
.ns-chip .icon { width:18px; height:18px; }
.ns-chip .lead-check { width:0; overflow:hidden; transition:width var(--dur-2); display:flex; }
.ns-chip.on { background:var(--accent-soft); border-color:transparent; color:var(--accent); }
.ns-chip.on .lead-check { width:18px; }
.ns-chip--solid { background:var(--fill); border-color:transparent; }

/* ============================================================
   SLIDER / RANGE  +  STEPPER
   ============================================================ */
.ns-slider { position:relative; height:36px; display:flex; align-items:center; }
.ns-slider .track { position:absolute; left:0; right:0; height:4px; border-radius:2px; background:var(--fill); }
[data-platform="android"] .ns-slider .track { height:6px; }
.ns-slider .fill { position:absolute; left:0; height:4px; border-radius:2px; background:var(--accent); }
[data-platform="android"] .ns-slider .fill { height:6px; }
.ns-slider .thumb { position:absolute; border-radius:50%; transform:translateX(-50%); cursor:grab; }
[data-platform="ios"] .ns-slider .thumb { width:28px; height:28px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.28); }
[data-platform="android"] .ns-slider .thumb { width:20px; height:20px; background:var(--accent); box-shadow:0 0 0 0 var(--accent-soft); transition:box-shadow var(--dur-2); }
[data-platform="android"] .ns-slider .thumb:active { box-shadow:0 0 0 10px var(--accent-soft); }

.ns-stepper { display:inline-flex; align-items:center; background:var(--fill); border-radius:9px; overflow:hidden; }
.ns-stepper button { border:0; background:transparent; width:42px; height:34px; color:var(--accent); cursor:pointer; display:grid; place-items:center; }
.ns-stepper button:active { background:var(--fill); }
.ns-stepper .val { min-width:40px; text-align:center; font:600 16px/1 var(--font-ui); color:var(--text); border-left:1px solid var(--separator); border-right:1px solid var(--separator); height:34px; display:grid; place-items:center; }

/* ============================================================
   INPUTS / TEXTAREA / SELECT
   ============================================================ */
.ns-field { display:block; }
.ns-field .flabel { display:block; font:var(--t-footnote-w) var(--t-footnote-s)/1.2 var(--font-ui); color:var(--text-2); margin:0 0 7px 2px; }
.ns-input, .ns-textarea {
  width:100%; border:1px solid var(--border); background:var(--surface); color:var(--text);
  font:var(--t-body-w) var(--t-body-s)/1.3 var(--font-ui); padding:13px 14px; border-radius:var(--r-md);
  outline:none; transition:border-color var(--dur-2), box-shadow var(--dur-2); -webkit-appearance:none;
}
.ns-input::placeholder, .ns-textarea::placeholder { color:var(--text-3); }
.ns-input:focus, .ns-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ns-textarea { resize:none; min-height:96px; }
[data-platform="ios"] .ns-input, [data-platform="ios"] .ns-textarea { background:var(--fill-2); border-color:transparent; }
[data-platform="ios"] .ns-input:focus, [data-platform="ios"] .ns-textarea:focus { background:var(--surface); border-color:var(--accent); }
/* Android M3 outlined with notch label */
[data-platform="android"] .ns-field.outlined { position:relative; padding-top:6px; }
[data-platform="android"] .ns-field.outlined .flabel { position:absolute; top:18px; left:12px; margin:0; padding:0 4px; background:var(--bg-grouped); transition:all var(--dur-2) var(--ease-standard); pointer-events:none; }
[data-platform="android"] .ns-field.outlined.float .flabel { top:-3px; font-size:11px; color:var(--accent); }
.ns-input.err, .ns-textarea.err { border-color:var(--danger); }
.ns-help { font:var(--t-footnote-w) var(--t-footnote-s)/1.3 var(--font-ui); color:var(--text-3); margin:6px 0 0 2px; }
.ns-help.err { color:var(--danger); }

.ns-select { display:flex; align-items:center; justify-content:space-between; width:100%; cursor:pointer; }
.ns-select .icon { color:var(--text-3); width:20px; height:20px; }

/* search bar */
.ns-search { display:flex; align-items:center; gap:8px; background:var(--fill); border-radius:var(--r-md); padding:9px 12px; color:var(--text-3); }
.ns-search .icon { width:18px; height:18px; }
.ns-search input { border:0; background:transparent; outline:none; color:var(--text); font:var(--t-callout-w) var(--t-callout-s)/1 var(--font-ui); width:100%; }

/* ============================================================
   FILE / VIDEO UPLOAD
   ============================================================ */
.ns-drop { border:2px dashed var(--border); border-radius:var(--r-lg); padding:24px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; cursor:pointer; transition:border-color var(--dur-2),background var(--dur-2); }
.ns-drop:hover { border-color:var(--accent); background:var(--accent-soft); }
.ns-drop .ico { width:48px; height:48px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.ns-drop .ico .icon { width:24px; height:24px; }
.ns-filerow { display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface); border:1px solid var(--separator); border-radius:var(--r-md); }
.ns-filerow .thumb { width:46px; height:46px; border-radius:var(--r-sm); flex:none; }

/* ============================================================
   LIST / ROWS
   ============================================================ */
.ns-list { background:var(--surface); border-radius:var(--r-lg); overflow:hidden; }
[data-platform="ios"] .ns-list { border:.5px solid var(--separator); }
[data-platform="android"] .ns-list { background:transparent; border-radius:0; }
.ns-row { position:relative; display:flex; align-items:center; gap:13px; padding:13px 16px; background:var(--surface); cursor:pointer; overflow:hidden; min-height:48px; }
.ns-row + .ns-row { box-shadow:inset 0 .5px 0 var(--separator); }
[data-platform="ios"] .ns-row + .ns-row::before { content:""; position:absolute; top:0; left:52px; right:0; height:.5px; background:var(--separator); }
[data-platform="ios"] .ns-row + .ns-row { box-shadow:none; }
.ns-row .r-icon { width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--fill-2); color:var(--text-2); }
.ns-row .r-icon .icon { width:18px; height:18px; }
.ns-row .r-main { flex:1; min-width:0; }
.ns-row .r-title { font:var(--t-callout-w) var(--t-callout-s)/1.25 var(--font-ui); color:var(--text); font-weight:500; }
.ns-row .r-sub { font:var(--t-footnote-w) var(--t-footnote-s)/1.3 var(--font-ui); color:var(--text-2); margin-top:2px; }
.ns-row .r-trail { display:flex; align-items:center; gap:6px; color:var(--text-3); font:var(--t-callout-w) var(--t-callout-s)/1 var(--font-ui); }
.ns-row .r-trail .icon { width:20px; height:20px; }

.ns-section-label { font:var(--t-footnote-w) var(--t-footnote-s)/1 var(--font-ui); color:var(--text-2); padding:18px 16px 7px; text-transform:uppercase; letter-spacing:.4px; }
[data-platform="ios"] .ns-section-label { font-weight:500; }

/* ============================================================
   CARD / AVATAR / BADGE / PILL
   ============================================================ */
.ns-card { background:var(--surface); border-radius:var(--r-lg); padding:16px; box-shadow:var(--elev-1); }
[data-platform="ios"] .ns-card { border:.5px solid var(--separator); }
.ns-card--elev { box-shadow:var(--elev-2); }
.ns-avatar { border-radius:50%; flex:none; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-weight:700; overflow:hidden; }
.ns-badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--r-full); font:700 11px/1 var(--font-ui); letter-spacing:.2px; background:var(--accent-soft); color:var(--accent); }
.ns-badge--solid { background:var(--accent); color:var(--on-accent); }
.ns-badge--success { background:color-mix(in oklch,var(--success) 16%,transparent); color:var(--success); }
.ns-badge--warning { background:color-mix(in oklch,var(--warning) 18%,transparent); color:var(--warning); }
.ns-badge--danger { background:color-mix(in oklch,var(--danger) 16%,transparent); color:var(--danger); }
.ns-dot { width:9px; height:9px; border-radius:50%; background:var(--danger); border:2px solid var(--surface); }

/* progress bar + ring */
.ns-progress { height:8px; border-radius:var(--r-full); background:var(--fill); overflow:hidden; }
.ns-progress .bar { height:100%; border-radius:var(--r-full); background:var(--accent); transition:width var(--dur-4) var(--ease-decel); }
.ns-ring { transform:rotate(-90deg); }
.ns-ring circle { fill:none; stroke-linecap:round; }
.ns-ring .bg { stroke:var(--fill); }
.ns-ring .fg { stroke:var(--accent); transition:stroke-dashoffset var(--dur-4) var(--ease-decel); }

/* stat tile */
.ns-stat { background:var(--surface); border-radius:var(--r-lg); padding:15px; box-shadow:var(--elev-1); }
[data-platform="ios"] .ns-stat { border:.5px solid var(--separator); }
.ns-stat .label { font:var(--t-footnote-w) var(--t-footnote-s)/1 var(--font-ui); color:var(--text-2); }
.ns-stat .value { font:700 28px/1 var(--font-ui); color:var(--text); margin-top:8px; letter-spacing:-.5px; }
.ns-stat .delta { display:inline-flex; align-items:center; gap:3px; font:600 12px/1 var(--font-ui); margin-top:8px; }
.ns-stat .delta.up { color:var(--success); }
.ns-stat .delta.down { color:var(--danger); }
.ns-stat .delta .icon { width:14px; height:14px; }

/* empty state */
.ns-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:40px 24px; }
.ns-empty .e-ico { width:64px; height:64px; border-radius:50%; background:var(--fill); color:var(--text-3); display:grid; place-items:center; margin-bottom:6px; }
.ns-empty .e-ico .icon { width:30px; height:30px; }
.ns-empty .e-title { font:600 17px/1.2 var(--font-ui); color:var(--text); }
.ns-empty .e-sub { font:var(--t-subhead-w) var(--t-subhead-s)/1.4 var(--font-ui); color:var(--text-2); max-width:28ch; }

/* skeleton */
.ns-skel { background:linear-gradient(100deg, var(--fill-2) 30%, var(--fill) 50%, var(--fill-2) 70%); background-size:200% 100%; animation:skel 1.3s linear infinite; border-radius:var(--r-sm); }
@keyframes skel { to { background-position:-200% 0; } }

/* spinners */
.ns-spinner { display:inline-block; }
[data-platform="android"] .ns-spinner { width:32px; height:32px; border:3px solid var(--fill); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
[data-platform="ios"] .ns-spinner { width:28px; height:28px; position:relative; animation:spin 1s steps(12) infinite; }
[data-platform="ios"] .ns-spinner i { position:absolute; top:0; left:50%; width:2.5px; height:7px; margin-left:-1.25px; border-radius:2px; background:var(--text-3); transform-origin:1.25px 14px; }

/* ============================================================
   OVERLAYS — backdrop, bottom sheet, dialog, action sheet, menu, toast
   These are absolutely-positioned inside the .phone-screen.
   ============================================================ */
.ns-scrim { position:absolute; inset:0; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity var(--dur-3) var(--ease-standard); z-index:var(--z-sheet); }
.ns-scrim.show { opacity:1; pointer-events:auto; }

.ns-sheet { position:absolute; left:0; right:0; bottom:0; z-index:calc(var(--z-sheet) + 1); background:var(--bg-grouped); border-radius:var(--r-2xl) var(--r-2xl) 0 0; box-shadow:var(--elev-3); transform:translateY(110%); transition:transform var(--dur-3) var(--ease-decel); max-height:90%; display:flex; flex-direction:column; will-change:transform; }
[data-platform="android"] .ns-sheet { background:var(--surface-2); }
.ns-sheet.show { transform:translateY(0); }
.ns-sheet .grab { width:36px; height:5px; border-radius:3px; background:var(--text-3); opacity:.5; margin:10px auto 4px; flex:none; cursor:grab; touch-action:none; }
.ns-sheet .sheet-head { display:flex; align-items:center; justify-content:space-between; padding:6px 18px 12px; }
.ns-sheet .sheet-body { padding:0 18px 28px; overflow-y:auto; }

/* dialog (alert) */
.ns-dialog { position:absolute; z-index:var(--z-dialog); left:50%; top:50%; transform:translate(-50%,-46%) scale(.92); opacity:0; transition:opacity var(--dur-2) var(--ease-standard), transform var(--dur-3) var(--ease-decel); background:var(--bg-grouped); }
.ns-dialog.show { transform:translate(-50%,-50%) scale(1); opacity:1; }
[data-platform="ios"] .ns-dialog { width:272px; border-radius:var(--r-lg); background:color-mix(in oklch,var(--surface) 88%,transparent); backdrop-filter:blur(20px); overflow:hidden; text-align:center; }
[data-platform="ios"] .ns-dialog .d-body { padding:19px 16px 16px; }
[data-platform="ios"] .ns-dialog .d-title { font:600 17px/1.3 var(--font-ui); color:var(--text); }
[data-platform="ios"] .ns-dialog .d-msg { font:var(--t-footnote-w) 13px/1.4 var(--font-ui); color:var(--text); margin-top:4px; }
[data-platform="ios"] .ns-dialog .d-actions { display:flex; border-top:.5px solid var(--separator); }
[data-platform="ios"] .ns-dialog .d-actions.stack { flex-direction:column; }
[data-platform="ios"] .ns-dialog .d-act { flex:1; padding:12px; border:0; background:transparent; color:var(--accent); font:var(--t-body-w) 17px/1 var(--font-ui); cursor:pointer; }
[data-platform="ios"] .ns-dialog .d-act + .d-act { border-left:.5px solid var(--separator); }
[data-platform="ios"] .ns-dialog .d-actions.stack .d-act + .d-act { border-left:0; border-top:.5px solid var(--separator); }
[data-platform="ios"] .ns-dialog .d-act.primary { font-weight:600; }
[data-platform="ios"] .ns-dialog .d-act.destructive { color:var(--danger); }
[data-platform="ios"] .ns-dialog .d-act:active { background:var(--fill-2); }

[data-platform="android"] .ns-dialog { width:300px; border-radius:var(--r-xl); background:var(--surface-2); padding:24px; box-shadow:var(--elev-3); }
[data-platform="android"] .ns-dialog .d-ico { color:var(--accent); margin-bottom:14px; }
[data-platform="android"] .ns-dialog .d-ico .icon { width:26px; height:26px; }
[data-platform="android"] .ns-dialog .d-title { font:var(--t-subtitle-w) var(--t-subtitle-s)/1.3 var(--font-ui); color:var(--text); }
[data-platform="android"] .ns-dialog .d-msg { font:var(--t-callout-w) 14px/1.45 var(--font-ui); color:var(--text-2); margin-top:10px; }
[data-platform="android"] .ns-dialog .d-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
[data-platform="android"] .ns-dialog .d-act { border:0; background:transparent; color:var(--accent); font:600 14px/1 var(--font-ui); padding:10px 12px; border-radius:var(--r-full); cursor:pointer; }
[data-platform="android"] .ns-dialog .d-act:hover { background:var(--accent-soft); }
[data-platform="android"] .ns-dialog .d-act.destructive { color:var(--danger); }

/* action sheet (iOS) */
.ns-actionsheet { position:absolute; left:8px; right:8px; bottom:0; z-index:calc(var(--z-sheet)+1); transform:translateY(110%); transition:transform var(--dur-3) var(--ease-decel); padding-bottom:10px; }
.ns-actionsheet.show { transform:translateY(0); }
.ns-actionsheet .grp { background:color-mix(in oklch,var(--surface) 90%,transparent); backdrop-filter:blur(20px); border-radius:var(--r-lg); overflow:hidden; }
.ns-actionsheet .grp.cancel { margin-top:8px; }
.ns-actionsheet .as-title { text-align:center; padding:15px; font:var(--t-footnote-w) 13px/1.3 var(--font-ui); color:var(--text-2); border-bottom:.5px solid var(--separator); }
.ns-actionsheet .as-act { width:100%; border:0; background:transparent; padding:17px; font:var(--t-body-w) 20px/1 var(--font-ui); color:var(--accent); cursor:pointer; }
.ns-actionsheet .as-act + .as-act { border-top:.5px solid var(--separator); }
.ns-actionsheet .as-act.cancel { font-weight:600; }
.ns-actionsheet .as-act.destructive { color:var(--danger); }
.ns-actionsheet .as-act:active { background:var(--fill-2); }

/* custom unified "more" menu — solid bottom sheet, identical on both platforms */
.ns-sheet.more-sheet { max-height:none; }
.menu-sheet { padding:6px 12px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:4px; }
.menu-row { display:flex; align-items:center; gap:14px; width:100%; border:0; background:transparent; cursor:pointer; padding:15px 12px; border-radius:var(--r-md); color:var(--text); font:600 16px/1 var(--font-ui); text-align:left; transition:background var(--dur-1); }
.menu-row:active { background:var(--fill-2); }
.menu-row .icon { width:21px; height:21px; color:var(--text-2); flex:none; }
.menu-row.danger { color:var(--danger); }
.menu-row.danger .icon { color:var(--danger); }
.menu-row.cancel { justify-content:center; margin-top:4px; color:var(--text-2); font-weight:700; background:var(--fill-2); }
.menu-row.cancel:active { background:var(--fill); }

/* menu / dropdown / context */
.ns-menu { position:absolute; z-index:var(--z-menu); min-width:200px; background:var(--surface-2); border-radius:var(--r-md); box-shadow:var(--elev-3); padding:6px; transform-origin:top right; transform:scale(.9); opacity:0; transition:opacity var(--dur-2),transform var(--dur-2) var(--ease-decel); }
[data-platform="ios"] .ns-menu { background:color-mix(in oklch,var(--surface) 92%,transparent); backdrop-filter:blur(20px); border:.5px solid var(--separator); }
.ns-menu.show { transform:scale(1); opacity:1; }
.ns-menu .m-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; cursor:pointer; color:var(--text); font:var(--t-callout-w) var(--t-callout-s)/1 var(--font-ui); }
.ns-menu .m-item:hover { background:var(--fill-2); }
.ns-menu .m-item .icon { width:19px; height:19px; color:var(--text-2); margin-left:auto; }
.ns-menu .m-item.destructive { color:var(--danger); }
.ns-menu .m-item.destructive .icon { color:var(--danger); }
.ns-menu .m-sep { height:.5px; background:var(--separator); margin:5px 0; }

/* toast / snackbar */
.ns-toast { position:absolute; z-index:var(--z-toast); left:12px; right:12px; display:flex; align-items:center; gap:12px; transform:translateY(-20px); opacity:0; transition:opacity var(--dur-2),transform var(--dur-3) var(--ease-decel); }
[data-platform="ios"] .ns-toast { top:56px; background:color-mix(in oklch,var(--surface) 90%,transparent); backdrop-filter:blur(20px); border:.5px solid var(--separator); border-radius:var(--r-full); padding:11px 18px; box-shadow:var(--elev-2); }
[data-platform="ios"] .ns-toast.show { transform:translateY(0); opacity:1; }
[data-platform="android"] .ns-toast { bottom:24px; top:auto; background:var(--text); color:var(--bg); border-radius:var(--r-xs); padding:14px 16px; box-shadow:var(--elev-3); transform:translateY(20px); }
[data-platform="android"] .ns-toast.show { transform:translateY(0); opacity:1; }
.ns-toast .t-msg { flex:1; font:var(--t-subhead-w) 14px/1.3 var(--font-ui); }
[data-platform="ios"] .ns-toast .icon { color:var(--success); width:20px; height:20px; }
.ns-toast .t-act { border:0; background:transparent; color:var(--accent); font:700 14px/1 var(--font-ui); cursor:pointer; }
[data-platform="android"] .ns-toast .t-act { color:var(--accent); }

/* ============================================================
   DATE / TIME PICKERS
   ============================================================ */
.ios-wheel { position:relative; display:flex; background:var(--surface); border-radius:var(--r-md); height:170px; overflow:hidden; }
[data-platform="ios"] .ios-wheel { border:.5px solid var(--separator); }
.ios-wheel .band { position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%); height:36px; background:var(--fill-2); border-radius:9px; pointer-events:none; }
.ios-wheel .wcol { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }
.ios-wheel .wcol span { color:var(--text-2); font:400 19px/1 var(--font-ui); opacity:.45; }
.ios-wheel .wcol span:first-child, .ios-wheel .wcol span:last-child { opacity:.2; font-size:16px; }
.ios-wheel .wcol b { color:var(--text); font:600 20px/1 var(--font-ui); z-index:1; }

.m3-cal { background:var(--surface); border-radius:var(--r-md); padding:14px; }
[data-platform="ios"] .m3-cal { border:.5px solid var(--separator); }
.m3-cal .cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.m3-cal .cal-head .mlabel { font:600 15px/1 var(--font-ui); color:var(--text); }
.m3-cal .cal-head button { border:0; background:transparent; color:var(--text-2); width:32px; height:32px; border-radius:50%; cursor:pointer; display:grid; place-items:center; }
.m3-cal .cal-head button:hover { background:var(--fill-2); }
.m3-cal .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; text-align:center; }
.m3-cal .wd { font:600 11px/1 var(--font-ui); color:var(--text-3); padding:5px 0; }
.m3-cal .day { aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font:400 13px/1 var(--font-ui); color:var(--text); cursor:pointer; }
.m3-cal .day:hover { background:var(--fill-2); }
.m3-cal .day.sel { background:var(--accent); color:var(--on-accent); font-weight:600; }
.m3-cal .day.today { box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); }
.m3-cal .day.mute { opacity:.35; }
.ring-host .ring-val { position:absolute; inset:0; display:grid; place-items:center; font:700 18px/1 var(--font-num); color:var(--text); }

/* ============================================================
   SIGNATURE COMPONENTS  (the Train & Shine point of view)
   "The Path" — a training cycle drawn as a route you traverse.
   Borrows the waypoint/route idea (onX), progress-fills (Strava),
   editorial spacing (Substack) — but is our own thing.
   ============================================================ */
.ns-path { position:relative; padding-left:6px; }
.ns-path-node { position:relative; display:flex; gap:16px; padding-bottom:6px; }
.ns-path-rail { position:relative; flex:none; width:30px; display:flex; flex-direction:column; align-items:center; }
/* the connecting line segment (drawn above each dot, joining to the previous) */
.ns-path-node:not(:first-child) .ns-path-rail::before {
  content:""; position:absolute; top:-6px; bottom:calc(100% - 13px); left:50%; transform:translateX(-50%);
  width:2.5px; background:var(--separator); border-radius:2px;
}
.ns-path-node.done .ns-path-rail::before,
.ns-path-node.today .ns-path-rail::before { background:var(--accent); }
.ns-path-dot {
  position:relative; z-index:1; width:26px; height:26px; border-radius:50%; flex:none; margin-top:0;
  display:grid; place-items:center; background:var(--surface); border:2.5px solid var(--border); color:transparent;
  transition:background var(--dur-2), border-color var(--dur-2);
}
.ns-path-dot .icon { width:14px; height:14px; }
.ns-path-node.done .ns-path-dot { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ns-path-node.today .ns-path-dot { border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 5px var(--accent-soft); }
.ns-path-node.today .ns-path-dot::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.ns-path-node.rest .ns-path-dot { width:16px; height:16px; margin:5px 0; border-width:2px; border-style:dashed; }
.ns-path-body { flex:1; min-width:0; padding-bottom:18px; }
.ns-path-daylabel { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.ns-path-daylabel .d { font:700 13px/1 var(--font-ui); letter-spacing:0.3px; text-transform:uppercase; color:var(--text); }
.ns-path-node.today .ns-path-daylabel .d { color:var(--accent); }
.ns-path-daylabel .dt { font:var(--t-caption-w) var(--t-caption-s)/1 var(--font-ui); color:var(--text-3); }
.ns-path-daylabel .tag { margin-left:auto; }
.ns-path-rest { font:var(--t-subhead-w) var(--t-subhead-s)/1.3 var(--font-ui); color:var(--text-3); font-style:italic; padding:2px 0 16px; }

/* compact activity chip inside a path card */
.ns-mini { display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--surface); border-radius:var(--r-md); cursor:pointer; transition:transform var(--dur-1); }
[data-platform="ios"] .ns-mini { border:.5px solid var(--separator); box-shadow:var(--elev-1); }
[data-platform="android"] .ns-mini { background:var(--surface-2); }
.ns-mini + .ns-mini { margin-top:8px; }
.ns-mini:active { transform:scale(.985); }
.ns-mini .m-ic { width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.ns-mini .m-ic .icon { width:17px; height:17px; }
.ns-mini.is-done .m-ic { background:var(--accent); color:var(--on-accent); }
.ns-mini .m-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ns-mini .m-title { font:600 15px/1.2 var(--font-ui); color:var(--text); }
.ns-mini.is-done .m-title { color:var(--text-3); text-decoration:line-through; }
.ns-mini .m-sub { font:var(--t-caption-w) var(--t-caption-s)/1 var(--font-ui); color:var(--text-3); margin-top:0; }

/* ---- Hero stat block (Strava-style big numerics) ---- */
.ns-hero { padding:4px 2px 8px; }
.ns-hero .hero-eyebrow { display:flex; align-items:center; gap:7px; color:var(--accent); }
.ns-hero .hero-num { display:flex; align-items:baseline; gap:8px; margin-top:6px; color:var(--text); }
.ns-hero .hero-num .unit { font:700 15px/1 var(--font-ui); color:var(--text-3); text-transform:uppercase; letter-spacing:0.4px; }

.ns-metric { display:flex; flex-direction:column; gap:5px; min-width:0; }
.ns-metric .m-val { color:var(--text); white-space:nowrap; }
.ns-metric .m-lbl { font:600 10px/1.25 var(--font-ui); color:var(--text-2); text-transform:uppercase; letter-spacing:0.4px; }
.ns-metric-row { display:flex; gap:14px; }
.ns-metric-row .ns-metric { flex:1; padding:0; }
.ns-metric-row .ns-metric + .ns-metric { border-left:1px solid var(--separator); padding-left:14px; }

/* ---- Editorial chart (elevation-profile area, onX-leaning) ---- */
.ns-chart { width:100%; display:block; overflow:visible; }
.ns-chart .grid line { stroke:var(--separator); stroke-width:1; }
.ns-chart .area { fill:url(#chartGrad); }
.ns-chart .line { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ns-chart .pt { fill:var(--surface); stroke:var(--accent); stroke-width:2.5; }
.ns-chart .pt.hl { fill:var(--accent); }
.ns-chart .xlab { fill:var(--text-3); font:600 10px/1 var(--font-ui); text-anchor:middle; }

/* ---- Segment / PR badge (Strava-leaning, used sparingly) ---- */
.ns-pr { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--r-xs); background:color-mix(in oklch,var(--warning) 18%,transparent); color:var(--warning); font:800 11px/1 var(--font-ui); letter-spacing:0.3px; }
.ns-pr .icon { width:13px; height:13px; }

/* App-screen scaffolding (sample app) */
.app-screen { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); }
.app-root { position:relative; flex:1; overflow:hidden; }
.app-dock { position:relative; flex:none; z-index:var(--z-nav); }
.app-tabbar { position:relative; }

/* ============================================================
   ACTIVE-WORKOUT MINI-BAR  (Spotify "now playing", reimagined)
   Sits in the dock above the tab bar. Collapsed = thin progress
   strip; tap to expand into a "now training" panel.
   ============================================================ */
.mini-player { margin:0 16px 8px; }
.mini-player:empty { display:none; }
.mini-bar {
  display:flex; align-items:center; gap:12px; padding:9px 10px 9px 12px;
  border-radius:18px; cursor:pointer; position:relative; overflow:hidden;
  background:var(--mini-bg, var(--accent)); color:var(--on-accent);
  box-shadow:var(--elev-3); transition:transform var(--dur-1), opacity var(--dur-2);
}
[data-platform="ios"] .mini-bar { backdrop-filter:saturate(1.4); }
.mini-bar:active { transform:scale(.99); }
.mini-bar .mb-ic { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.2); color:#fff; }
.mini-bar .mb-ic .icon { width:21px; height:21px; }
.mini-bar .mb-main { flex:1; min-width:0; }
.mini-bar .mb-title { font:700 14px/1.15 var(--font-ui); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-bar .mb-sub { font:600 11.5px/1.2 var(--font-ui); color:rgba(255,255,255,.82); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-bar .mb-act { width:40px; height:40px; border-radius:50%; flex:none; border:0; cursor:pointer; display:grid; place-items:center; background:#fff; color:var(--accent); transition:transform var(--dur-1); }
.mini-bar .mb-act:active { transform:scale(.9); }
.mini-bar .mb-act .icon { width:22px; height:22px; }
.mini-bar .mb-progress { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.25); }
.mini-bar .mb-progress .mb-fill { height:100%; background:#fff; border-radius:0 3px 3px 0; transition:width var(--dur-4) var(--ease-decel); }

/* expanded "now training" panel — a sheet that rises from the dock */
.now-panel {
  position:absolute; left:0; right:0; bottom:0; z-index:calc(var(--z-sheet) + 2);
  background:var(--bg-grouped); border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:var(--elev-3); transform:translateY(110%); transition:transform var(--dur-3) var(--ease-decel);
  max-height:88%; display:flex; flex-direction:column; will-change:transform;
}
[data-platform="android"] .now-panel { background:var(--surface-2); }
.now-panel.show { transform:translateY(0); }
.now-panel .grab { width:36px; height:5px; border-radius:3px; background:var(--text-3); opacity:.5; margin:10px auto 2px; flex:none; cursor:grab; touch-action:none; }
.now-head { display:flex; align-items:center; gap:12px; padding:10px 18px 14px; }
.now-head .nh-art { width:54px; height:54px; border-radius:15px; flex:none; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); box-shadow:var(--elev-2); }
.now-head .nh-art .icon { width:26px; height:26px; }
.now-body { padding:0 18px 26px; overflow-y:auto; }
.now-prog-num { display:flex; align-items:baseline; gap:8px; color:var(--text); margin:2px 0 14px; }

/* ============================================================
   SPOTIFY-LEANING: color-blocked hero + scannable media cards
   ============================================================ */
.ns-feature {
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:20px;
  background:
    radial-gradient(125% 150% at 88% -15%, color-mix(in oklch, var(--accent) 70%, transparent) 0%, transparent 52%),
    linear-gradient(165deg, oklch(0.27 0.02 264) 0%, oklch(0.155 0.018 264) 100%);
  color:#fff; box-shadow:var(--elev-2);
  border:.5px solid color-mix(in oklch, #fff 9%, transparent);
}
/* abstract "cover art" — concentric arcs, very subtle */
.ns-feature::after {
  content:""; position:absolute; right:-50px; top:-60px; width:200px; height:200px; pointer-events:none;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at center, transparent 0 17px, color-mix(in oklch,#fff 7%,transparent) 17px 18px);
  mask-image:radial-gradient(circle at center, #000 60%, transparent 72%);
  opacity:.6;
}
.ns-feature > * { position:relative; z-index:1; }
.ns-feature .ff-glow { display:none; }
.ns-feature .ff-eyebrow { display:flex; align-items:center; gap:7px; font:800 11px/1 var(--font-ui); letter-spacing:1px; text-transform:uppercase; color:color-mix(in oklch, var(--accent) 60%, #fff); }
.ns-feature .ff-title { font:800 clamp(22px,7vw,30px)/1.02 var(--font-display); letter-spacing:-.6px; margin-top:10px; color:#fff; }
.ns-feature .ff-meta { font:600 13px/1.3 var(--font-ui); opacity:.78; margin-top:6px; }

/* scannable activity media card (rich row, Spotify-ish) */
.ns-mcard { display:flex; align-items:center; gap:13px; padding:10px; border-radius:var(--r-lg); background:var(--surface); cursor:pointer; transition:background var(--dur-2), transform var(--dur-1); position:relative; overflow:hidden; }
[data-platform="ios"] .ns-mcard { box-shadow:var(--elev-1); }
[data-platform="android"] .ns-mcard { background:var(--surface-2); }
.ns-mcard:active { transform:scale(.99); }
.ns-mcard + .ns-mcard { margin-top:10px; }
.ns-mcard .mc-art { width:56px; height:56px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--fill-2); color:var(--text-2); position:relative; overflow:hidden; }
.ns-mcard .mc-art .icon { width:24px; height:24px; }
.ns-mcard.is-done .mc-art { background:var(--accent); color:var(--on-accent); }
.ns-mcard .mc-main { flex:1; min-width:0; }
.ns-mcard .mc-title { font:700 15px/1.2 var(--font-ui); color:var(--text); }
.ns-mcard.is-done .mc-title { color:var(--text-3); }
.ns-mcard .mc-sub { font:600 12px/1.2 var(--font-ui); color:var(--text-3); margin-top:3px; display:flex; align-items:center; gap:6px; }
.ns-mcard .mc-play { width:38px; height:38px; border-radius:50%; flex:none; border:0; cursor:pointer; display:grid; place-items:center; background:var(--fill); color:var(--text); transition:background var(--dur-2), transform var(--dur-1); }
.ns-mcard .mc-play:hover { background:var(--accent); color:var(--on-accent); }
.ns-mcard .mc-play:active { transform:scale(.9); }
.ns-mcard .mc-play .icon { width:19px; height:19px; }

/* ---- Swipe-to-reveal actions (Linear-style) ---- */
.ns-swipe { position:relative; overflow:hidden; border-radius:var(--r-lg); }
.ns-swipe + .ns-swipe { margin-top:10px; }
.ns-swipe-actions { position:absolute; inset:0 0 0 auto; display:flex; align-items:stretch; z-index:0; }
.ns-swipe-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:80px; border:0; color:#fff; cursor:pointer; font:700 11px/1 var(--font-ui); letter-spacing:.2px; }
.ns-swipe-action .icon { width:20px; height:20px; }
.ns-swipe-action.done { background:var(--success); }
.ns-swipe-action.skip { background:var(--text-3); }
.ns-swipe-action.danger { background:var(--danger); }
.ns-swipe-action.edit { background:var(--info); }
.ns-swipe-content { position:relative; z-index:1; background:var(--bg); transition:transform var(--dur-2) var(--ease-standard); touch-action:pan-y; }
/* when the swipe wraps cards on a grouped bg, match the surface so actions stay hidden when closed */
.ns-swipe-content > .ns-mcard { margin:0; }

/* ============================================================
   NOTION-LEANING: stacked content blocks + quiet list rows
   ============================================================ */
.ns-block { padding:2px 0; }
.ns-block + .ns-block { margin-top:18px; }
.ns-block-h { display:flex; align-items:center; gap:8px; margin-bottom:9px; color:var(--text-3); }
.ns-block-h .icon { width:16px; height:16px; }
.ns-block-h .bh-label { font:700 11px/1 var(--font-ui); letter-spacing:.7px; text-transform:uppercase; white-space:nowrap; }
.ns-block-read { font:var(--t-body-w) var(--t-body-s)/1.6 var(--font-ui); color:var(--text); }
[data-font="editorial"] .ns-block-read { font-size:17px; line-height:1.66; }

/* a property/attribute grid like Notion's inline DB props */
.ns-props { display:flex; flex-wrap:wrap; gap:8px; }
.ns-prop { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:10px; background:var(--fill-2); color:var(--text); font:600 13px/1 var(--font-ui); white-space:nowrap; }
.ns-prop .icon { width:15px; height:15px; color:var(--text-3); }
.ns-prop b { font-weight:700; }

/* quiet callout block */
.ns-callout { display:flex; gap:11px; align-items:flex-start; padding:14px; border-radius:var(--r-md); background:var(--fill-2); }
.ns-callout .co-ic { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.ns-callout .co-ic .icon { width:16px; height:16px; }
.ns-callout .co-body { flex:1; }

/* editorial private-note entry (Substack-leaning reading) */
.note-entry { padding-left:14px; border-left:2px solid var(--separator); }
.note-entry .ns-block-read { color:var(--text); }
[data-font="editorial"] .note-entry .ns-block-read { font-size:16px; line-height:1.6; }
.note-entry .note-meta { display:flex; align-items:center; gap:6px; font:600 11px/1 var(--font-ui); color:var(--text-3); margin-top:9px; }
.note-entry .note-meta .icon { width:13px; height:13px; }

/* ---- Weekly digest (Substack-editorial) ---- */
.ns-digest-teaser {
  position:relative; overflow:hidden; cursor:pointer; margin-bottom:18px;
  border-radius:var(--r-lg); padding:18px; background:var(--surface);
  border:.5px solid var(--separator); box-shadow:var(--elev-1);
  transition:transform var(--dur-1);
}
.ns-digest-teaser:active { transform:scale(.99); }
.ns-digest-teaser::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.ns-digest-teaser .dt-kicker { display:flex; align-items:center; gap:7px; font:700 11px/1 var(--font-ui); letter-spacing:.7px; text-transform:uppercase; color:var(--accent); }
.ns-digest-teaser .dt-title { font:700 21px/1.15 var(--font-display); letter-spacing:-.3px; color:var(--text); margin-top:9px; }
.ns-digest-teaser .dt-meta { font:500 12.5px/1.3 var(--font-ui); color:var(--text-2); margin-top:7px; }
.digest-entry { font:var(--t-body-w) var(--t-body-s)/1.6 var(--font-ui); color:var(--text-2); padding-left:14px; border-left:2px solid var(--separator); }
.digest-entry + .digest-entry { margin-top:12px; }
.digest-entry b { color:var(--text); font-weight:700; }
[data-font="editorial"] .digest-entry { font-size:16px; }

.app-composer { flex:none; display:flex; align-items:center; gap:10px; padding:10px 14px calc(20px + env(safe-area-inset-bottom)); border-top:.5px solid var(--separator); background:var(--surface); }
[data-platform="android"] .app-composer { background:var(--surface-2); }
.app-footer { flex:none; display:flex; align-items:center; gap:10px; padding:12px 16px 20px; border-top:.5px solid var(--separator); background:color-mix(in oklch,var(--surface) 88%,transparent); backdrop-filter:blur(12px); }
.app-fab { position:absolute; right:16px; bottom:96px; z-index:20; }

/* Screen entrance animations — keyframes guarantee a visible end-state
   even if a rAF is dropped. Resting style of .app-screen is fully visible. */
@keyframes appFade   { from { opacity:0; transform:scale(.992); } to { opacity:1; transform:none; } }
@keyframes appPushIos     { from { transform:translateX(100%); }            to { transform:translateX(0); } }
@keyframes appPushAndroid { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.app-screen.enter-fade    { animation:appFade var(--dur-2) var(--ease-standard); }
.app-screen.enter-ios     { animation:appPushIos var(--dur-3) var(--ease-ios); box-shadow:-12px 0 28px rgba(0,0,0,.16); }
.app-screen.enter-android { animation:appPushAndroid var(--dur-3) var(--ease-decel); }
@media (prefers-reduced-motion: reduce) { .app-screen.enter-fade,.app-screen.enter-ios,.app-screen.enter-android { animation-duration:.01ms; } }