/* ============================================================================
   Note Studio v2 — personal notebook (docs/design/note-studio-v2.md)
   Scoped under #note-studio with the ns2- prefix. Colours come only from the
   studio token contract (studio-tokens.css): Paper = .light-band ground,
   Night = .dark-well ground. The editor keeps its own stylesheet.
   ============================================================================ */

/* ── Token bridge: the ah-* aliases are computed on .light-band, so every
      themed island re-declares them against its own ground. ── */
#note-studio .ns2-notebook,
#note-studio .ns2-profile,
#note-studio .ns2-dialog,
#note-studio .ns2-menu {
  --ah-surface-0: var(--paper);
  --ah-surface-1: var(--surface);
  --ah-surface-2: var(--surface-2);
  --ah-surface-3: var(--surface-2);
  --ah-accent: var(--accent);
  --ah-accent-2: var(--accent);
  --ah-text-1: var(--ink);
  --ah-text-2: var(--ink-2);
  --ah-text-3: var(--muted);
  --ah-text-on-accent: var(--surface);
  --ah-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  --ns2-violet: var(--c-phys);
  /* Text and scrims that sit on cover art. The art is always the dark studio
     palette, so these mirror the cinematic ground (studio-tokens.css §20:
     --ink, --ink-2 and --void) in both themes. */
  --ns2-on-art: #EEF1FA;
  --ns2-on-art-2: #C3CBE3;
  --ns2-void: 5 7 15;
  --ns2-radius: 18px;
  --ns2-gutter: clamp(16px, 3vw, 40px);
  --ns2-focus: 3px solid var(--accent);
}

/* Accent choice (§5.1). Re-applied inside the dark header so it follows. */
#note-studio .ns2-notebook[data-accent="blue"],
#note-studio .ns2-notebook[data-accent="blue"] :is(.dark-well, .ns2-dialog, .ns2-menu) { --accent: var(--c-alg1); }
#note-studio .ns2-notebook[data-accent="teal"],
#note-studio .ns2-notebook[data-accent="teal"] :is(.dark-well, .ns2-dialog, .ns2-menu) { --accent: var(--c-geo); }
#note-studio .ns2-notebook[data-accent="rose"],
#note-studio .ns2-notebook[data-accent="rose"] :is(.dark-well, .ns2-dialog, .ns2-menu) { --accent: var(--c-calc); }
#note-studio .ns2-notebook[data-accent="ember"],
#note-studio .ns2-notebook[data-accent="ember"] :is(.dark-well, .ns2-dialog, .ns2-menu) { --accent: var(--c-ess); }
#note-studio .ns2-notebook[data-accent="amber"],
#note-studio .ns2-notebook[data-accent="amber"] :is(.dark-well, .ns2-dialog, .ns2-menu) { --accent: var(--c-sci); }

/* ── Notebook wrapper ── */
#note-studio .ns2-notebook {
  position: relative;
  color: var(--ink-2);
  padding: clamp(0.75rem, 2vw, 1.5rem) var(--ns2-gutter) 2rem;
}
/* Owner (2026-10-10/11): never edge to edge on a big monitor, but not half
   white space either. The background stays full width; the content is
   centred and capped at 1920px (1480px left half of a ~3350px-wide screen
   empty), which gives six note columns at most (four on a laptop). */
#note-studio .ns2-notebook > :not(.ns2-page-ground) { max-width: 1920px; margin-inline: auto; }
#note-studio .ns2-notebook.dark-well {
  border: 0;
  border-radius: 0 0 28px 28px;
  box-shadow: none;
  background: var(--paper);
  min-height: 70vh;
}
#note-studio .ns2-page-ground {
  position: absolute; inset: 0 0 auto 0; height: min(900px, 100%);
  pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
#note-studio .ns2-page-ground img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
#note-studio .ns2-notebook > :not(.ns2-page-ground) { position: relative; z-index: 1; }
#note-studio .ns2-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#note-studio .ns2-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#note-studio .ns2-notebook :focus-visible,
#note-studio .ns2-dialog :focus-visible,
#note-studio .ns2-menu :focus-visible { outline: var(--ns2-focus); outline-offset: 3px; }

/* ── Homework banner keeps first place above the profile (§14 #14) ── */
#note-studio .ns2-hero .ns-homework { max-width: none; margin: 0 0 1rem; text-align: left; }
#note-studio .ns2-hero { margin: 0 0 1.25rem; }

/* ── Profile header (§3.1): a dark-well island in both themes ── */
#note-studio .ns2-profile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink-2);
  border-radius: 28px;
  min-height: 236px;
  padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
}
#note-studio .ns2-ground,
#note-studio .ns2-banner { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
#note-studio .ns2-ground img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
#note-studio .ns2-banner { z-index: -1; }
/* The banners keep their subject on the left with calm space on the right;
   mirrored, the art sits behind the stats side and the text side stays calm. */
#note-studio .ns2-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; transform: scaleX(-1); }
/* Scrim: text never sits on busy art. */
#note-studio .ns2-profile::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 30%, color-mix(in srgb, var(--paper) 45%, transparent) 55%, transparent 78%);
}
#note-studio .ns2-avatar { position: relative; width: 168px; height: 168px; display: grid; place-items: center; flex: none; }
#note-studio .ns2-avatar-link { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; text-decoration: none; color: inherit; }
#note-studio .ns2-avatar-link:focus-visible { outline: var(--ns2-focus); outline-offset: 4px; }
#note-studio .ns2-avatar-disc {
  width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, var(--surface-2), var(--paper) 72%);
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 9px color-mix(in srgb, var(--gold) 18%, transparent), 0 16px 40px rgb(var(--ns2-void) / 0.55);
  overflow: hidden;
}
#note-studio .ns2-avatar.has-frame .ns2-avatar-disc { box-shadow: 0 16px 40px rgb(var(--ns2-void) / 0.55); }
#note-studio .ns2-avatar-disc .dji-av-chip,
#note-studio .ns2-avatar-disc .dji-av-disc { width: 120px !important; height: 120px !important; }
#note-studio .ns2-avatar-empty { width: 120px; height: 120px; border-radius: 50%; background: var(--surface-2); }
#note-studio .ns2-frame { position: absolute; inset: 0; pointer-events: none; }
#note-studio .ns2-frame-img { width: 100%; height: 100%; object-fit: contain; }
#note-studio .ns2-avatar-cta {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font: 700 var(--ah-fs-1)/1 var(--ah-font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.35rem 0.7rem; white-space: nowrap;
}
#note-studio .ns2-identity { min-width: 0; max-width: 46rem; }
#note-studio .ns2-eyebrow {
  margin: 0 0 0.35rem; font: 700 var(--ah-fs-1)/1.2 var(--ah-font-ui);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
#note-studio .ns2-profile h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); line-height: 1.04; letter-spacing: -0.01em;
  color: var(--ink); overflow-wrap: anywhere;
}
#note-studio .ns2-motto {
  margin: 0.6rem 0 0; max-width: 48ch; font-size: var(--ah-fs-4); line-height: 1.5; color: var(--ink-2);
}
#note-studio .ns2-motto.is-motto { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--ink); }
#note-studio .ns2-profile-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
#note-studio .ns2-profile .ns-kpis {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; max-width: none; justify-content: flex-start;
}
#note-studio .ns2-profile .ns2-kpi {
  min-width: 0; padding: 0.55rem 0.85rem; gap: 0.2rem; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#note-studio .ns2-profile .ns2-kpi .ah-kpi__value { font-size: var(--ah-fs-5); color: var(--ink); font-family: var(--font-display); }
#note-studio .ns2-profile .ns2-kpi .ah-kpi__label { color: var(--muted); font-size: 0.66rem; }

/* ── Buttons ── */
#note-studio .ns2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; padding: 0.55rem 1rem; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 700 var(--ah-fs-3)/1.2 var(--ah-font-ui); text-decoration: none; cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
#note-studio .ns2-btn:hover { border-color: var(--accent); }
#note-studio .ns2-btn--primary { background: var(--accent); border-color: transparent; color: var(--surface); }
#note-studio .ns2-btn--primary:hover { filter: brightness(1.07); border-color: transparent; }
#note-studio .ns2-btn--danger { background: var(--c-calc); border-color: transparent; color: var(--surface); }
#note-studio .ns2-btn--quiet { background: transparent; }
#note-studio .ns2-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
#note-studio .ns2-profile .ns2-btn { background: color-mix(in srgb, var(--surface) 82%, transparent); }
#note-studio .ns2-profile .ns2-btn--primary { background: var(--accent); color: var(--paper); }
#note-studio .ns2-icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
}
#note-studio .ns2-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
#note-studio .ns2-icon-btn[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--surface); }

/* ── Layout: folder rail + main (§2.1) ── */
#note-studio .ns2-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start;
}
#note-studio .ns2-main { min-width: 0; }
#note-studio .ns2-rail {
  display: flex; gap: 0.4rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  padding: 0.15rem 0.1rem 0.5rem; margin: 0 calc(-1 * var(--ns2-gutter)) 0; padding-inline: var(--ns2-gutter);
  scroll-snap-type: x proximity;
}
#note-studio .ns2-rail-group { display: contents; }
#note-studio .ns2-rail-heading,
#note-studio .ns2-rail-hint { display: none; }
#note-studio .ns2-rail-heading-row { display: contents; }
#note-studio .ns2-rail-item {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none; scroll-snap-align: start;
  min-height: 44px; padding: 0.45rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font: 600 var(--ah-fs-2)/1.2 var(--ah-font-ui); cursor: pointer; white-space: nowrap;
}
#note-studio .ns2-rail-item .ns2-ico { color: var(--ns2-folder, var(--muted)); }
#note-studio .ns2-rail-item[aria-current="true"] { background: var(--accent); border-color: transparent; color: var(--surface); }
#note-studio .ns2-rail-item[aria-current="true"] .ns2-ico,
#note-studio .ns2-rail-item[aria-current="true"] .ns2-count { color: inherit; }
#note-studio .ns2-rail-item.is-drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
#note-studio .ns2-rail-label { overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
#note-studio .ns2-rail-add { width: 44px; height: 44px; border-radius: 999px; flex: none; }
#note-studio .ns2-rail-item--quiet { border-style: dashed; }
#note-studio .ns2-count {
  font: 700 0.72rem/1 var(--ah-font-ui); color: var(--muted);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
#note-studio .ns2-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; background: var(--ns2-dot, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ns2-dot, var(--accent)) 25%, transparent);
}
#note-studio .ns2-dot--lg { width: 1.6rem; height: 1.6rem; }

@media (min-width: 1200px) {
  #note-studio .ns2-layout { grid-template-columns: 232px minmax(0, 1fr); gap: 1.5rem; }
  #note-studio .ns2-rail {
    position: sticky; top: 84px; flex-direction: column; gap: 1rem; overflow: visible;
    margin: 0; padding: 0; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin;
  }
  #note-studio .ns2-rail-group { display: flex; flex-direction: column; gap: 0.15rem; }
  #note-studio .ns2-rail-heading-row { display: flex; align-items: center; justify-content: space-between; }
  #note-studio .ns2-rail-heading {
    display: block; margin: 0 0 0.25rem 0.75rem;
    font: 700 0.68rem/1 var(--ah-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  #note-studio .ns2-rail-hint { display: block; margin: 0.15rem 0.75rem 0.4rem; font-size: var(--ah-fs-2); color: var(--muted); line-height: 1.45; }
  #note-studio .ns2-rail-add { width: 36px; height: 36px; border-radius: 10px; border-color: var(--line); }
  #note-studio .ns2-rail-item {
    width: 100%; border-radius: 12px; border-color: transparent; background: transparent; padding: 0.5rem 0.75rem; min-height: 40px;
  }
  #note-studio .ns2-rail-item:hover { background: var(--surface); border-color: var(--line); }
  #note-studio .ns2-rail-item[aria-current="true"] { background: var(--accent); }
  #note-studio .ns2-rail-label { max-width: none; flex: 1; text-align: left; }
  #note-studio .ns2-folder-item--child { padding-left: 2rem; }
  #note-studio .ns2-rail-item--quiet { border: 1px dashed var(--line-strong); }
}
@media (min-width: 1500px) { #note-studio .ns2-layout { grid-template-columns: 248px minmax(0, 1fr); } }

/* ── Toolbar (§3.4) ── */
#note-studio .ns2-toolbar { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
#note-studio .ns2-toolrow { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
#note-studio .ns2-search-wrap { position: relative; flex: 1 1 260px; min-width: 0; max-width: 560px; }
#note-studio .ns2-search-wrap .ns2-ico { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#note-studio .ns2-toolbar .ns-search {
  width: 100%; min-height: 46px; padding: 0.6rem 0.9rem 0.6rem 2.6rem;
  border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 500 var(--ah-fs-3)/1.3 var(--ah-font-ui);
}
#note-studio .ns2-toolbar .ns-search::placeholder { color: var(--muted); }
#note-studio .ns2-toolbar .ns-search:focus-visible { outline: var(--ns2-focus); outline-offset: 2px; }
#note-studio .ns2-select {
  min-height: 44px; padding: 0.5rem 2rem 0.5rem 0.8rem; border-radius: 12px;
  border: 1px solid var(--line-strong); background-color: var(--surface); color: var(--ink);
  font: 600 var(--ah-fs-2)/1.2 var(--ah-font-ui);
}
#note-studio .ns2-segment { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
#note-studio .ns2-segment .ns2-icon-btn { border: 0; border-radius: 0; }
#note-studio .ns2-segment .ns2-icon-btn + .ns2-icon-btn { border-left: 1px solid var(--line-strong); }
#note-studio .ns2-toolbtn { display: inline-flex; align-items: center; gap: 0.4rem; }
#note-studio .ns2-toolbtn[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--surface); }
#note-studio .ns2-filters { position: relative; }
#note-studio .ns2-filters > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink);
  font: 700 var(--ah-fs-2)/1.2 var(--ah-font-ui); cursor: pointer;
}
#note-studio .ns2-filters > summary::-webkit-details-marker { display: none; }
#note-studio .ns2-filters[open] > summary { border-color: var(--accent); }
#note-studio .ns2-filters-body {
  margin-top: 0.6rem; padding: 0.9rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--arch-shadow-sm);
}
#note-studio .ns2-filters-body .nsp-controls { padding: 0; }
#note-studio .ns2-filters-body .nsp-controls select,
#note-studio .ns2-filters-body .ns2-select { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
#note-studio .ns2-filters-body .nsp-info { margin: 0.6rem 0 0; font-size: var(--ah-fs-2); }
#note-studio .ns2-filter-extra { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.65rem; }
#note-studio .ns2-filter-extra label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; flex: 1 1 160px; }
#note-studio .ns2-subjects { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.25rem; }
#note-studio .ns2-subjects[hidden] { display: none; }
#note-studio .ns2-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none; min-height: 40px; padding: 0.35rem 0.85rem;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font: 600 var(--ah-fs-2)/1.2 var(--ah-font-ui); cursor: pointer; white-space: nowrap;
}
#note-studio .ns2-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink); }

/* Results status line from the shared panel (#nsEmpty). */
#note-studio .ns2-main .nsp-status { margin: 0 0 0.75rem; font-size: var(--ah-fs-2); color: var(--muted); }

/* ── Context bands, shelf, subfolders (§3.5, §3.7) ── */
#note-studio .ns2-context:empty { display: none; }
#note-studio .ns2-context { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
#note-studio .ns2-shelf { min-width: 0; }
#note-studio .ns2-band {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-radius: var(--ns2-radius);
  background: color-mix(in srgb, var(--ns2-band) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ns2-band) 30%, var(--line));
  border-left: 6px solid var(--ns2-band);
}
#note-studio .ns2-band-text { min-width: 0; position: relative; z-index: 1; }
#note-studio .ns2-band-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
#note-studio .ns2-band-sub { margin: 0.2rem 0 0; color: var(--ink-2); font-size: var(--ah-fs-3); }
#note-studio .ns2-band .ns2-eyebrow { color: var(--ns2-band); }
#note-studio .ns2-band-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; z-index: 1; }
#note-studio .ns2-band--subject { min-height: 150px; }
#note-studio .ns2-band-art { position: absolute; inset: 0 0 0 auto; width: min(52%, 560px); z-index: 0; pointer-events: none; }
#note-studio .ns2-band-cover { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%); }
#note-studio .ns2-band--subject .ns2-band-actions { margin-left: auto; }
#note-studio .ns2-band--subject:has(.ns2-band-art) .ns2-band-actions .ns2-btn:not(.ns2-btn--primary) { background: color-mix(in srgb, var(--surface) 90%, transparent); }
#note-studio .ns2-crumb {
  border: 0; background: none; padding: 0; margin: 0 0 0.25rem; color: var(--ink-2); cursor: pointer;
  font: 700 var(--ah-fs-2)/1.3 var(--ah-font-ui); text-decoration: underline; text-underline-offset: 0.2em;
}
#note-studio .ns2-crumb::after { content: ' \203A'; text-decoration: none; display: inline-block; margin-left: 0.25rem; }
#note-studio .ns2-shelf-title { margin: 0 0 0.6rem; font: 700 0.72rem/1 var(--ah-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#note-studio .ns2-shelf-list {
  list-style: none; margin: 0; padding: 0 0 0.35rem; display: grid; gap: 0.75rem;
  grid-auto-flow: column; grid-auto-columns: minmax(176px, 220px); justify-content: start; overflow-x: auto; scrollbar-width: thin;
}
#note-studio .ns2-shelf-card {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--line); text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ns2-band) 55%, var(--paper)), var(--paper));
  box-shadow: var(--arch-shadow-sm);
}
#note-studio .ns2-shelf-art, #note-studio .ns2-shelf-img { position: absolute; inset: 0; width: 100%; height: 100%; }
#note-studio .ns2-shelf-img { object-fit: cover; transition: transform 400ms ease; }
#note-studio .ns2-shelf-card:hover .ns2-shelf-img { transform: scale(1.04); }
#note-studio .ns2-shelf-text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.7rem 0.8rem;
  background: linear-gradient(to top, rgb(var(--ns2-void) / 0.86), rgb(var(--ns2-void) / 0));
  display: flex; flex-direction: column; gap: 0.15rem;
}
#note-studio .ns2-shelf-name { font: 700 var(--ah-fs-3)/1.2 var(--ah-font-ui); color: var(--ns2-on-art); border-left: 3px solid var(--ns2-band); padding-left: 0.45rem; }
#note-studio .ns2-shelf-meta { font-size: 0.74rem; color: var(--ns2-on-art-2); padding-left: calc(0.45rem + 3px); }
#note-studio .ns2-subfolders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0.75rem; }
#note-studio .ns2-folder-card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.6rem; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-left: 5px solid var(--ns2-band); background: var(--surface); color: var(--ink);
}
#note-studio .ns2-folder-card.is-drop { outline: 2px dashed var(--accent); }
#note-studio .ns2-folder-card-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#note-studio .ns2-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
#note-studio .ns2-mosaic-img { width: 100%; height: 100%; object-fit: cover; display: block; background: color-mix(in srgb, var(--ns2-band) 30%, var(--surface-2)); }
#note-studio .ns2-mosaic.is-empty { display: grid; place-items: center; grid-template-columns: 1fr; }
#note-studio .ns2-mosaic-empty { width: 44px; height: 44px; object-fit: contain; }

/* ── Grid: column counts by the space available (§2.3) ── */
#note-studio #nsNotesWrap { container-type: inline-size; container-name: ns2grid; }
#note-studio .ns2-main #nsNotesGrid {
  --ns2-cols: 1;
  display: grid; grid-template-columns: repeat(var(--ns2-cols), minmax(0, 1fr)); gap: 12px;
}
#note-studio .ns2-main #nsNotesGrid > :not(.nsp-card) { grid-column: 1 / -1; }
@container ns2grid (min-width: 560px)  { #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 2; gap: 16px; } }
@container ns2grid (min-width: 880px)  { #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 3; } }
@container ns2grid (min-width: 1000px) { #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 4; } }
@container ns2grid (min-width: 1200px) { #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 5; } }
@container ns2grid (min-width: 1560px) { #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 6; } }
/* Large text: columns drop instead of text shrinking (thresholds × 1.15 / × 1.3). */
@container ns2grid (min-width: 560px)  { body.a11y-large-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 1; } }
@container ns2grid (min-width: 644px)  { body.a11y-large-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 2; } }
@container ns2grid (min-width: 1012px) { body.a11y-large-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 3; } }
@container ns2grid (min-width: 1150px) { body.a11y-large-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 4; } }
@container ns2grid (min-width: 1380px) { body.a11y-large-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 5; } }
@container ns2grid (min-width: 560px)  { body.a11y-xlarge-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 1; } }
@container ns2grid (min-width: 728px)  { body.a11y-xlarge-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 2; } }
@container ns2grid (min-width: 1144px) { body.a11y-xlarge-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 3; } }
@container ns2grid (min-width: 1300px) { body.a11y-xlarge-text #note-studio .ns2-main #nsNotesGrid { --ns2-cols: 4; } }
#note-studio .ns2-notebook[data-layout="list"] .ns2-main #nsNotesGrid { --ns2-cols: 1 !important; gap: 8px; }

/* ── Note card (§3.6) ── */
#note-studio .ns2-card {
  position: relative; display: flex; flex-direction: column; gap: 0; padding: 0 0 0.85rem; min-height: 0;
  overflow: hidden; cursor: pointer; border-radius: var(--ns2-radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  box-shadow: var(--arch-shadow-sm);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}
#note-studio .ns2-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ns2-edge); z-index: 2;
}
#note-studio .ns2-card:hover { transform: translateY(-3px); box-shadow: var(--arch-shadow-md); border-color: color-mix(in srgb, var(--ns2-edge) 45%, var(--line)); }
#note-studio .ns2-card:focus-within { border-color: var(--accent); }
#note-studio .ns2-card.is-pinned { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
#note-studio .ns2-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
#note-studio .ns2-card.is-dragging { opacity: 0.55; }
#note-studio .ns2-card > :not(.ns2-cover):not(.ns2-card-tools):not(.ns2-pick) { margin-left: 1.05rem; margin-right: 0.9rem; }
#note-studio .ns2-cover {
  position: relative; aspect-ratio: 16 / 7; overflow: hidden; margin: 0 0 0.75rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ns2-subject) 50%, var(--paper)) 0%, color-mix(in srgb, var(--ns2-subject) 14%, var(--paper)) 100%);
}
#note-studio .ns2-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 500ms ease; }
#note-studio .ns2-card:hover .ns2-cover-img { transform: scale(1.04); }
#note-studio .ns2-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--ns2-void) / 0.7), rgb(var(--ns2-void) / 0) 58%); }
#note-studio .ns2-cover-tags { position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.6rem; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
#note-studio .ns2-subject-chip,
#note-studio .ns2-cur-tag {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
  padding: 0.22rem 0.55rem; border-radius: 999px; font: 700 0.72rem/1.2 var(--ah-font-ui); letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#note-studio .ns2-subject-chip::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ns2-subject); flex: none; }
#note-studio .ns2-cur-tag { background: rgb(var(--ns2-void) / 0.62); color: var(--ns2-on-art); }
#note-studio .ns2-card-tools { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 3; display: flex; gap: 0.3rem; }
#note-studio .ns2-card-tools .ns2-icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: rgb(var(--ns2-void) / 0.55); color: var(--ns2-on-art); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#note-studio .ns2-card-tools .ns2-icon-btn::after { content: ''; position: absolute; inset: -2px; }
#note-studio .ns2-card-tools .ns2-icon-btn { position: relative; }
#note-studio .ns2-card-tools .ns2-icon-btn:hover { color: var(--ns2-on-art); background: rgb(var(--ns2-void) / 0.75); }
#note-studio .ns2-card-tools .ns2-pin[aria-pressed="true"],
#note-studio .ns2-card-tools .ns2-star[aria-pressed="true"] { background: var(--gold); color: var(--paper); }
#note-studio .ns2-card-tools .ns2-star[aria-pressed="true"] .ns2-ico { fill: currentColor; }
#note-studio .ns2-notebook:not([data-selecting="true"]) .ns2-card:not(.is-pinned):not(:hover):not(:focus-within) .ns2-card-tools .ns2-icon-btn[aria-pressed="false"] { opacity: 0.0; }
@media (hover: none) { #note-studio .ns2-notebook .ns2-card .ns2-card-tools .ns2-icon-btn { opacity: 1 !important; } }
#note-studio .ns2-pick { position: absolute; top: 0.45rem; left: 0.6rem; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgb(var(--ns2-void) / 0.55); cursor: pointer; }
#note-studio .ns2-pick input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent); cursor: pointer; }
#note-studio .ns2-card .ns-note-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
  overflow-wrap: anywhere; text-align: left; text-decoration: none; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.32rem); line-height: 1.2; color: var(--ink);
}
#note-studio .ns2-card .ns-note-title:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
#note-studio .ns2-card .ns-note-meta { margin: 0.35rem 0 0; font: 600 0.78rem/1.4 var(--ah-font-ui); color: var(--muted); }
#note-studio .ns2-card .ns-note-preview {
  margin: 0.45rem 0 0; font-size: var(--ah-fs-2); line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 4.5em;
}
#note-studio .ns2-card .ns-note-preview .katex { font-size: 1em; }
#note-studio .ns2-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
#note-studio .ns2-status,
#note-studio .ns2-folder-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.6rem; border-radius: 999px;
  font: 700 0.72rem/1.25 var(--ah-font-ui); border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#note-studio .ns2-status--success { border-color: color-mix(in srgb, var(--c-geo) 45%, transparent); background: var(--c-geo-tint); color: var(--ink); }
#note-studio .ns2-status--success::before { content: '\2713'; color: var(--c-geo); font-weight: 900; }
#note-studio .ns2-status--warning { border-color: color-mix(in srgb, var(--c-sci) 50%, transparent); background: var(--c-sci-tint); color: var(--ink); }
#note-studio .ns2-status--warning::before { content: '!'; color: var(--c-sci); font-weight: 900; }
#note-studio .ns2-status--danger { border-color: var(--c-calc); background: var(--c-calc-tint); color: var(--ink); cursor: pointer; min-height: 32px; }
#note-studio .ns2-folder-chip .ns2-ico { width: 0.95em; height: 0.95em; }
#note-studio .ns2-card .nsp-actions { display: flex; flex-wrap: nowrap; gap: 0.35rem; margin-top: auto; padding-top: 0.75rem; }
#note-studio .ns2-card .nsp-actions .nsp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 40px; padding: 0.4rem 0.6rem;
  border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 700 0.8rem/1.2 var(--ah-font-ui); margin: 0;
  white-space: nowrap; flex-shrink: 0;
}
/* The first action ("Read note"/"Open") is the one that gives way: it may
   shrink and clip with an ellipsis, so the row can never spill out of the
   card whatever the font metrics or scrollbar width of the device. */
#note-studio .ns2-card .nsp-actions .nsp-button:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#note-studio .ns2-card .nsp-actions .nsp-button:hover { border-color: var(--accent); color: var(--accent); }
#note-studio .ns2-card .nsp-actions .ns2-more { width: 40px; padding: 0; }
/* Cards under 300px (4 across at 1366, 5-6 across at 1600+): Move keeps its
   icon and its spoken name only, which leaves "Read note" ~120px — room for
   wider fallback fonts (Linux, Windows, large system text). */
#note-studio .ns2-notebook:not([data-layout="list"]) .ns2-card { container-type: inline-size; container-name: ns2card; }
@container ns2card (max-width: 300px) {
  #note-studio .ns2-card .nsp-actions .ns2-move { min-width: 40px; padding: 0 0.55rem; }
  #note-studio .ns2-card .nsp-actions .ns2-move > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Density: compact */
#note-studio .ns2-notebook[data-density="compact"] .ns2-cover { aspect-ratio: 16 / 5; margin-bottom: 0.55rem; }
#note-studio .ns2-notebook[data-density="compact"] .ns2-card .ns-note-preview { -webkit-line-clamp: 2; max-height: 3em; }
#note-studio .ns2-notebook[data-density="compact"] .ns2-card { padding-bottom: 0.6rem; }

/* List view: one dense row per note. */
#note-studio .ns2-notebook[data-layout="list"] .ns2-card {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; column-gap: 1rem; row-gap: 0.15rem;
  padding: 0.6rem 0.75rem 0.6rem 0.6rem; align-items: center;
}
#note-studio .ns2-notebook[data-layout="list"] .ns2-card > * { margin: 0 !important; }
#note-studio .ns2-notebook[data-layout="list"] .ns2-cover { grid-column: 1; grid-row: 1 / -1; aspect-ratio: 16 / 10; border-radius: 10px; align-self: stretch; }
#note-studio .ns2-notebook[data-layout="list"] .ns2-cover-tags { left: 0.4rem; right: 0.4rem; bottom: 0.35rem; }
#note-studio .ns2-notebook[data-layout="list"] .ns2-cur-tag { display: none; }
#note-studio .ns2-notebook[data-layout="list"] .ns-note-title { grid-column: 2; grid-row: 1; -webkit-line-clamp: 1; font-size: 1.12rem; }
#note-studio .ns2-notebook[data-layout="list"] .ns-note-meta { grid-column: 2; grid-row: 2; }
#note-studio .ns2-notebook[data-layout="list"] .ns-note-preview { grid-column: 2; grid-row: 3; -webkit-line-clamp: 1; max-height: 1.5em; }
#note-studio .ns2-notebook[data-layout="list"] .ns2-chips { grid-column: 2; grid-row: 4; margin-top: 0.3rem !important; }
#note-studio .ns2-notebook[data-layout="list"] .ns2-card-tools { position: static; grid-column: 3; grid-row: 1; justify-self: end; }
#note-studio .ns2-notebook[data-layout="list"] .ns2-card-tools .ns2-icon-btn { background: var(--surface-2); color: var(--ink); opacity: 1 !important; }
#note-studio .ns2-notebook[data-layout="list"] .nsp-actions { grid-column: 3; grid-row: 2 / span 3; padding-top: 0; justify-content: flex-end; align-self: start; }
#note-studio .ns2-notebook[data-layout="list"] .nsp-actions .nsp-button:first-child { flex: none; }
@container ns2grid (max-width: 640px) {
  #note-studio .ns2-notebook[data-layout="list"] .ns2-card { grid-template-columns: 88px minmax(0, 1fr); }
  #note-studio .ns2-notebook[data-layout="list"] .nsp-actions,
  #note-studio .ns2-notebook[data-layout="list"] .ns2-card-tools { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; justify-self: start; padding-top: 0.4rem; }
  #note-studio .ns2-notebook[data-layout="list"] .ns2-cover { grid-row: 1 / span 4; }
}

/* ── Empty states (§3.9) ── */
#note-studio .ns2-empty {
  display: grid; justify-items: center; text-align: center; gap: 0.35rem;
  padding: clamp(1.5rem, 4vw, 3rem) 1.25rem; border-radius: var(--ns2-radius);
  border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--surface) 85%, transparent);
}
#note-studio .ns2-empty-img { width: clamp(140px, 18vw, 220px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 30px rgb(var(--ns2-void) / 0.25)); }
#note-studio .ns2-empty-title { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 700; color: var(--ink); }
#note-studio .ns2-empty-sub { margin: 0; max-width: 46ch; color: var(--ink-2); line-height: 1.55; }
#note-studio .ns2-empty-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; }

/* ── Bulk action bar (select mode) ── */
#note-studio .ns2-bulk {
  position: sticky; bottom: 1rem; z-index: 20; margin-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: space-between;
  padding: 0.65rem 0.75rem 0.65rem 1rem; border-radius: 18px; border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--arch-shadow-lg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#note-studio .ns2-bulk[hidden] { display: none; }
#note-studio .ns2-bulk-count { font-weight: 700; color: var(--ink); }
#note-studio .ns2-bulk-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ── Menus and dialogs (§3.8) ── */
#note-studio .ns2-menu {
  position: fixed; z-index: 10050; padding: 0.35rem; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); box-shadow: var(--arch-shadow-lg); max-width: calc(100vw - 24px);
}
#note-studio .ns2-menu-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 42px; padding: 0.5rem 0.75rem;
  border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer;
  font: 600 var(--ah-fs-3)/1.2 var(--ah-font-ui);
}
#note-studio .ns2-menu-item:hover,
#note-studio .ns2-menu-item:focus-visible { background: var(--surface-2); outline-offset: -2px; }
#note-studio .ns2-menu-item.is-danger { color: var(--c-calc); }
#note-studio .ns2-menu-sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--line); }
#note-studio .ns2-dialog {
  margin: auto; inset: 0;
  width: min(560px, calc(100vw - 24px)); max-height: min(88vh, 900px); padding: 0; border: 1px solid var(--line-strong);
  border-radius: 22px; background: var(--surface); color: var(--ink-2); box-shadow: var(--arch-shadow-lg); overflow: auto;
}
#note-studio .ns2-dialog--wide { width: min(880px, calc(100vw - 24px)); }
#note-studio .ns2-dialog::backdrop { background: rgb(var(--ns2-void, 5 7 15) / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#note-studio .ns2-dialog-form { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.35rem; }
#note-studio .ns2-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: sticky; top: -1.25rem; z-index: 2; margin: -1.25rem -1.35rem 0; padding: 1.25rem 1.35rem 0.5rem; background: var(--surface); }
#note-studio .ns2-dialog-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.85rem); font-weight: 700; color: var(--ink); }
#note-studio .ns2-dialog-x .ns2-ico { transform: rotate(45deg); }
#note-studio .ns2-dialog-msg { margin: 0; line-height: 1.55; color: var(--ink-2); }
#note-studio .ns2-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; position: sticky; bottom: -1.25rem; padding: 0.75rem 0 0; background: var(--surface); }
#note-studio .ns2-form { display: grid; gap: 0.9rem; }
#note-studio .ns2-field { display: grid; gap: 0.35rem; }
#note-studio .ns2-field-label { font: 700 var(--ah-fs-2)/1.3 var(--ah-font-ui); color: var(--ink); }
#note-studio .ns2-field-hint { font-size: 0.78rem; color: var(--muted); }
#note-studio .ns2-field-error { margin: 0; min-height: 1.2em; color: var(--c-calc); font-weight: 700; font-size: var(--ah-fs-2); }
#note-studio .ns2-input {
  width: 100%; min-height: 46px; padding: 0.55rem 0.8rem; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink); font: 500 var(--ah-fs-3)/1.3 var(--ah-font-ui);
}
#note-studio .ns2-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#note-studio .ns2-section { display: grid; gap: 0.6rem; padding-top: 0.25rem; }
#note-studio .ns2-section-title { padding: 0; font: 700 0.74rem/1 var(--ah-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#note-studio .ns2-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#note-studio .ns2-swatch { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem; border-radius: 999px; cursor: pointer; }
#note-studio .ns2-swatch input,
#note-studio .ns2-opt input,
#note-studio .ns2-seg input,
#note-studio .ns2-banner-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#note-studio .ns2-swatch:has(input:checked) .ns2-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
#note-studio .ns2-swatch:has(input:focus-visible) { outline: var(--ns2-focus); outline-offset: 2px; }
#note-studio .ns2-swatch--named { border: 1px solid var(--line); padding: 0.35rem 0.8rem 0.35rem 0.4rem; }
#note-studio .ns2-swatch--named:has(input:checked) { border-color: var(--ink); }
#note-studio .ns2-swatch-label { font-weight: 600; font-size: var(--ah-fs-2); color: var(--ink); }
#note-studio .ns2-segmented { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#note-studio .ns2-seg { position: relative; }
#note-studio .ns2-seg span { display: inline-flex; align-items: center; min-height: 42px; padding: 0.45rem 0.9rem; border-radius: 12px; border: 1px solid var(--line-strong); cursor: pointer; font-weight: 600; color: var(--ink-2); }
#note-studio .ns2-seg input:checked + span { background: var(--accent); border-color: transparent; color: var(--surface); }
#note-studio .ns2-seg input:focus-visible + span { outline: var(--ns2-focus); outline-offset: 2px; }
#note-studio .ns2-choose { display: grid; gap: 0.6rem; }
#note-studio .ns2-choose .ns2-fieldset { display: grid; gap: 0.4rem; }
#note-studio .ns2-opt {
  position: relative; display: flex; align-items: center; gap: 0.7rem; min-height: 48px; padding: 0.5rem 0.75rem;
  border-radius: 12px; border: 1px solid var(--line); cursor: pointer; color: var(--ink);
}
#note-studio .ns2-opt[hidden] { display: none; }
#note-studio .ns2-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
#note-studio .ns2-opt:has(input:focus-visible) { outline: var(--ns2-focus); outline-offset: 2px; }
#note-studio .ns2-opt--indent { margin-left: 1.5rem; }
#note-studio .ns2-opt-text { display: grid; gap: 0.1rem; min-width: 0; }
#note-studio .ns2-opt-label { font-weight: 700; overflow-wrap: anywhere; }
#note-studio .ns2-opt-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
#note-studio .ns2-choose--tiles .ns2-fieldset { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 0.6rem; }
#note-studio .ns2-choose--tiles .ns2-opt { flex-direction: column; align-items: stretch; padding: 0.4rem; gap: 0.4rem; }
#note-studio .ns2-opt-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; display: block; }
#note-studio .ns2-opt-thumb--tint { background: linear-gradient(135deg, color-mix(in srgb, var(--ns2-tint) 55%, var(--paper)), var(--paper)); }
#note-studio .ns2-choose--tiles .ns2-opt-text { padding: 0 0.25rem 0.2rem; }
#note-studio .ns2-choose--swatches .ns2-fieldset { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
#note-studio .ns2-banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.6rem; }
#note-studio .ns2-banner-opt { position: relative; display: grid; gap: 0.4rem; padding: 0.4rem; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
#note-studio .ns2-banner-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#note-studio .ns2-banner-opt:has(input:focus-visible) { outline: var(--ns2-focus); outline-offset: 2px; }
#note-studio .ns2-banner-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--paper); }
#note-studio .ns2-banner-thumb-img { width: 100%; height: 100%; object-fit: cover; }
#note-studio .ns2-banner-text { display: grid; gap: 0.1rem; padding: 0 0.25rem 0.25rem; color: var(--ink); }

/* ── Toast with an action slot (Undo) ── */
#note-studio .ns-toast { display: flex; align-items: center; gap: 0.75rem; max-width: calc(100vw - 24px); border-radius: 16px; }
#note-studio .ns-toast.is-visible:has(.ns2-toast-action) { pointer-events: auto; }
#note-studio .ns2-toast-action {
  min-height: 36px; padding: 0.3rem 0.8rem; border-radius: 10px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); font: 800 var(--ah-fs-2)/1 var(--ah-font-ui); cursor: pointer;
}
#note-studio .ns2-toast-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Editor: breadcrumb + organise row ── */
#note-studio .ns2-editor-nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
#note-studio .ns2-crumb-text { color: var(--muted); font-weight: 600; font-size: var(--ah-fs-2); overflow-wrap: anywhere; }
#note-studio .ns2-crumb-text:not(:empty)::before { content: '\203A'; margin-right: 0.5rem; }
#note-studio .ns2-organise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0.65rem; align-items: end;
  padding: 0.75rem 0.9rem; margin: 0 0 0.9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--ah-surface-1);
}
#note-studio .ns2-organise[hidden] { display: none; }
#note-studio .ns2-org-field { display: grid; gap: 0.3rem; min-width: 0; }
#note-studio .ns2-org-label { font: 700 0.7rem/1 var(--ah-font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#note-studio .ns2-org-select { min-height: 42px; }
#note-studio .ns2-org-pin[aria-pressed="true"] { background: var(--gold); border-color: transparent; color: var(--paper); }

/* ── Phone and tablet (§14 #13) ── */
@media (max-width: 899px) {
  #note-studio .ns2-profile { grid-template-columns: auto minmax(0, 1fr); min-height: 0; border-radius: 22px; row-gap: 0.85rem; }
  /* Tablet: the avatar sits beside the name and motto only; actions, tiles and
     stats run the full width below instead of stacking in a narrow column. */
  #note-studio .ns2-identity { display: contents; }
  #note-studio .ns2-avatar { grid-column: 1; grid-row: 1 / span 3; width: 136px; height: 136px; }
  #note-studio .ns2-avatar-disc, #note-studio .ns2-avatar-empty,
  #note-studio .ns2-avatar-disc .dji-av-chip, #note-studio .ns2-avatar-disc .dji-av-disc { width: 98px !important; height: 98px !important; }
  #note-studio .ns2-eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  #note-studio .ns2-profile h1 { grid-column: 2; grid-row: 2; }
  #note-studio .ns2-motto { grid-column: 2; grid-row: 3; align-self: start; margin: 0; }
  #note-studio .ns2-profile-actions, #note-studio .ns2-profile .ns-kpis, #note-studio .ns2-stats { grid-column: 1 / -1; margin: 0; }
  #note-studio .ns2-profile .ns-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Narrow screens: the chosen banner becomes a clear band across the top of
     the header (behind the avatar), fading into the night ground below. */
  #note-studio .ns2-banner { inset: 0 0 auto 0; width: 100%; height: var(--ns2-band-h, 260px); }
  #note-studio .ns2-banner img { object-position: 35% 50%; }
  #note-studio .ns2-profile::after { background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 20%, transparent) 0, color-mix(in srgb, var(--paper) 62%, transparent) calc(var(--ns2-band-h, 260px) * 0.6), var(--paper) var(--ns2-band-h, 260px)); }
}
@media (max-width: 599px) {
  #note-studio .ns2-notebook { padding-top: 0.5rem; }
  /* Phone header (§3.1): avatar 88px beside the name, motto, ONE row of three
     icon+label actions, ONE stats row — the Today rail shows on the first screen. */
  #note-studio .ns2-profile {
    grid-template-columns: 88px minmax(0, 1fr); align-items: center; padding: 1rem; column-gap: 0.85rem; row-gap: 0.7rem; --ns2-band-h: 150px;
  }
  #note-studio .ns2-identity { display: contents; }
  #note-studio .ns2-avatar { grid-column: 1; grid-row: 1 / span 2; width: 88px; height: 88px; }
  #note-studio .ns2-avatar-disc, #note-studio .ns2-avatar-empty,
  #note-studio .ns2-avatar-disc .dji-av-chip, #note-studio .ns2-avatar-disc .dji-av-disc { width: 64px !important; height: 64px !important; }
  #note-studio .ns2-avatar-cta { bottom: -6px; font-size: 0.56rem; letter-spacing: 0.04em; padding: 0.22rem 0.42rem; }
  #note-studio .ns2-eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 0.62rem; letter-spacing: 0.1em; }
  #note-studio .ns2-profile h1 { grid-column: 2; grid-row: 2; align-self: start; font-size: 1.45rem; line-height: 1.12; }
  #note-studio .ns2-motto, #note-studio .ns2-profile-actions, #note-studio .ns2-profile .ns-kpis, #note-studio .ns2-stats { grid-column: 1 / -1; margin: 0; }
  #note-studio .ns2-motto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--ah-fs-3); }
  #note-studio .ns2-motto.is-motto { font-size: 1.05rem; }
  #note-studio .ns2-profile-actions { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.45rem; }
  #note-studio .ns2-profile-actions .ns2-btn { flex-direction: column; gap: 0.2rem; min-height: 56px; padding: 0.4rem 0.3rem; font-size: 0.78rem; line-height: 1.1; text-align: center; }
  #note-studio .ns2-profile-actions .ns2-ico { width: 1.25rem; height: 1.25rem; }
  /* Method Academy stays in the site menu; the header row keeps the three notebook actions. */
  #note-studio .ns2-profile-actions:has(#ns2PackBtn:not([hidden])) .ns2-academy-link { display: none; }
  /* The four tiles give way to the stats row once it renders; before that
     they sit in one compact row. */
  #note-studio .ns2-profile .ns-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; width: 100%; }
  #note-studio .ns2-profile .ns2-kpi { padding: 0.4rem 0.5rem; }
  #note-studio .ns2-profile .ns2-kpi .ah-kpi__value { font-size: var(--ah-fs-4); }
  #note-studio .ns2-profile .ns2-kpi .ah-kpi__label { font-size: 0.58rem; letter-spacing: 0.04em; }
  #note-studio .ns2-profile:has(#ns2Stats:not([hidden])) .ns-kpis { display: none; }
  #note-studio .ns2-search-wrap { flex-basis: 100%; max-width: none; }
  #note-studio .ns2-toolrow > .ns2-select { flex: 1 1 auto; }
  #note-studio .ns2-band { padding: 1rem; }
  #note-studio .ns2-band-actions { width: 100%; }
  #note-studio .ns2-band-actions .ns2-btn { flex: 1 1 auto; }
  #note-studio .ns2-bulk { bottom: 5.5rem; }
  #note-studio .ns2-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
}

/* ── Motion, contrast, forced colours (§12) ── */
@media (prefers-reduced-motion: reduce) {
  #note-studio .ns2-card, #note-studio .ns2-cover-img, #note-studio .ns2-shelf-img { transition: none !important; }
  #note-studio .ns2-card:hover { transform: none; }
  #note-studio .ns2-card:hover .ns2-cover-img, #note-studio .ns2-shelf-card:hover .ns2-shelf-img { transform: none; }
}
body.a11y-reduce-motion #note-studio .ns2-card:hover { transform: none; }
body.a11y-reduce-motion #note-studio .ns2-card:hover .ns2-cover-img { transform: none; }
body.a11y-high-contrast #note-studio .ns2-subject-chip,
body.a11y-high-contrast #note-studio .ns2-cur-tag { background: var(--surface); color: var(--ink); border: 1px solid var(--ink); }
body.a11y-high-contrast #note-studio .ns2-card { border: 2px solid var(--ink); }
@media (forced-colors: active) {
  #note-studio .ns2-card { border: 2px solid CanvasText; }
  #note-studio .ns2-card::before { background: CanvasText; }
  #note-studio .ns2-subject-chip, #note-studio .ns2-cur-tag, #note-studio .ns2-status, #note-studio .ns2-chip, #note-studio .ns2-rail-item { border: 1px solid CanvasText; forced-color-adjust: auto; }
  #note-studio .ns2-notebook :focus-visible, #note-studio .ns2-dialog :focus-visible { outline-color: Highlight; }
  #note-studio .ns2-cover::after, #note-studio .ns2-profile::after { display: none; }
}


/* ════════════ The six features (§7) ════════════ */
#note-studio .ns2-btn--sm { min-height: 40px; padding: 0.4rem 0.8rem; font-size: var(--ah-fs-2); border-radius: 10px; }
#note-studio .ns2-btn--ghost { background: transparent; }
#note-studio .ns2-kbd { font: 700 0.7rem/1 var(--ah-font-ui); padding: 0.15rem 0.35rem; border-radius: 6px; border: 1px solid currentColor; opacity: 0.75; }

/* Header: streak, goal rings, badge strip (feature 6) */
#note-studio .ns2-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-top: 0.75rem; }
#note-studio .ns2-stats[hidden] { display: none; }
#note-studio .ns2-stat {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.3rem 0.8rem 0.3rem 0.4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid var(--line); color: var(--ink);
  font: 700 var(--ah-fs-2)/1.2 var(--ah-font-ui); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#note-studio .ns2-stat-art { width: 32px; height: 32px; object-fit: contain; flex: none; filter: grayscale(1) brightness(0.7); opacity: 0.6; }
#note-studio .ns2-stat--streak.is-on .ns2-stat-art { filter: none; opacity: 1; }
#note-studio .ns2-ring-wrap { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; }
#note-studio .ns2-ring { width: 34px; height: 34px; transform: rotate(-90deg); }
#note-studio .ns2-ring-bg { fill: none; stroke: var(--line-strong); stroke-width: 4; }
#note-studio .ns2-ring-fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 400ms ease; }
#note-studio .ns2-ring-fg.is-done { stroke: var(--c-geo); }
#note-studio .ns2-stat--reviews .ns2-ring-fg { stroke: var(--c-precalc); }
#note-studio .ns2-ring-num { position: absolute; font: 800 0.72rem/1 var(--ah-font-ui); color: var(--ink); }
#note-studio .ns2-badges { display: flex; gap: 0.15rem; margin: 0; padding: 0.2rem 0.45rem; list-style: none; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); }
#note-studio .ns2-badge { width: 38px; height: 38px; display: grid; place-items: center; }
#note-studio .ns2-badge-img { width: 36px; height: 36px; object-fit: contain; filter: grayscale(1) brightness(0.55); opacity: 0.5; }
#note-studio .ns2-badge.is-earned .ns2-badge-img { filter: none; opacity: 1; }
#note-studio .ns2-progress-btn { min-height: 44px; border-radius: 999px; }

/* Today rail (§3.2) */
#note-studio .ns2-today { margin: 1rem 0 0; }
#note-studio .ns2-today[hidden] { display: none; }
#note-studio .ns2-today-title { margin: 0 0 0.55rem; font: 700 0.78rem/1 var(--ah-font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
#note-studio .ns2-today-list {
  list-style: none; margin: 0; padding: 0 0 0.35rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(86vw, 300px), 1fr);
  gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
#note-studio .ns2-today-item { scroll-snap-align: start; min-width: 0; display: flex; }
#note-studio .ns2-today-card {
  position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0.35rem 0.8rem;
  padding: 0.85rem 0.95rem 0.85rem 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  box-shadow: 0 1px 0 var(--line);
}
#note-studio .ns2-today-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--ns2-band, var(--accent)); }
#note-studio .ns2-today-artwrap { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; grid-row: 1; align-self: start; background: var(--paper); }
#note-studio .ns2-today-art { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
#note-studio .ns2-today-badge { width: 60px; height: 60px; object-fit: contain; grid-row: 1; align-self: start; }
#note-studio .ns2-today-card:not(:has(.ns2-today-artwrap, .ns2-today-badge)) .ns2-today-text { grid-column: 1 / -1; }
#note-studio .ns2-today-text { min-width: 0; }
#note-studio .ns2-today-kicker { margin: 0; font: 700 0.7rem/1.3 var(--ah-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#note-studio .ns2-today-head { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: var(--ah-fs-4); font-weight: 700; color: var(--ink); line-height: 1.2; overflow-wrap: anywhere; }
#note-studio .ns2-today-when { margin: 0.2rem 0 0; font-weight: 700; color: var(--ns2-band, var(--accent)); font-size: var(--ah-fs-2); }
#note-studio .ns2-today-sub { margin: 0.15rem 0 0; font-size: var(--ah-fs-2); color: var(--ink-2); overflow-wrap: anywhere; }
#note-studio .ns2-today-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Card chips: teacher feedback (5), mastery (3), due (2) */
#note-studio .ns2-feedback-chip { cursor: pointer; min-height: 32px; font-family: var(--ah-font-ui); }
#note-studio .ns2-feedback-chip:hover { border-color: var(--accent); }
#note-studio .ns2-mastery {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem; border-radius: 999px; min-height: 28px;
  font: 700 0.72rem/1.25 var(--ah-font-ui); border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface);
}
#note-studio .ns2-mastery-shape { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
#note-studio .ns2-mastery--strong { border-color: color-mix(in srgb, var(--c-geo) 55%, transparent); background: var(--c-geo-tint); }
#note-studio .ns2-mastery--strong .ns2-mastery-shape { border: 0; border-radius: 0; background: var(--c-geo); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 70%); }
#note-studio .ns2-mastery--building { border-color: color-mix(in srgb, var(--c-alg1) 50%, transparent); background: var(--c-alg1-tint); }
#note-studio .ns2-mastery--building .ns2-mastery-shape { border-color: var(--c-alg1); background: linear-gradient(90deg, var(--c-alg1) 50%, transparent 50%); }
#note-studio .ns2-mastery--more { border-color: color-mix(in srgb, var(--c-sci) 55%, transparent); background: var(--c-sci-tint); }
#note-studio .ns2-mastery--more .ns2-mastery-shape { border: 0; border-radius: 0; background: var(--c-sci); clip-path: polygon(50% 0, 100% 55%, 68% 55%, 68% 100%, 32% 100%, 32% 55%, 0 55%); }
#note-studio .ns2-due-chip::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--c-precalc); }
#note-studio .ns2-menu { max-height: calc(100vh - 24px); overflow-y: auto; }
#note-studio a.ns2-menu-item { color: var(--ink); text-decoration: none; }

/* Editor: teacher feedback banner (5), practice and quiz row (2, 3) */
#note-studio .ns2-revise {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: center;
  margin: 0 0 0.9rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-sci) 55%, transparent);
  background: var(--c-sci-tint); color: var(--ink);
}
#note-studio .ns2-revise[hidden] { display: none; }
#note-studio .ns2-revise.is-resubmitted { border-color: var(--line-strong); background: var(--ah-surface-1); }
#note-studio .ns2-revise:focus { outline: var(--ns2-focus); outline-offset: 3px; }
#note-studio .ns2-revise-kicker { margin: 0; font: 800 0.74rem/1.2 var(--ah-font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
#note-studio .ns2-revise-quote { margin: 0.4rem 0 0; padding: 0.15rem 0 0.15rem 0.8rem; border-left: 3px solid var(--c-sci); font-family: var(--font-display); font-size: var(--ah-fs-4); font-style: italic; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
#note-studio .ns2-revise-help { margin: 0.4rem 0 0; font-size: var(--ah-fs-2); color: var(--ink-2); }
#note-studio .ns2-revise-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#note-studio .ns2-org-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding-top: 0.2rem; border-top: 1px dashed var(--line); }
#note-studio .ns2-org-link { gap: 0.35rem; }
#note-studio .ns2-org-quiz { margin-left: auto; }
#note-studio .ns2-org-mastery:empty { display: none; }

/* Self-quiz dialog (feature 2) */
#note-studio .ns2-quiz { padding: 1.25rem 1.35rem; }
#note-studio .ns2-quiz .ns2-dialog-head { position: static; margin: 0; padding: 0; }
#note-studio .ns2-quiz-progress { margin: 0.6rem 0 0.4rem; font-weight: 700; color: var(--muted); font-size: var(--ah-fs-2); overflow-wrap: anywhere; }
#note-studio .ns2-quiz-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
#note-studio .ns2-quiz-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 240ms ease; }
#note-studio .ns2-quiz-stage { margin: 1rem 0; }
#note-studio .ns2-quiz-card {
  min-height: 15rem; display: grid; align-content: center; gap: 0.9rem; padding: clamp(1rem, 3vw, 2rem); border-radius: 18px;
  border: 1px solid var(--line-strong); background: var(--paper); text-align: center;
}
#note-studio .ns2-quiz-kind { margin: 0; font: 800 0.72rem/1 var(--ah-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
#note-studio .ns2-quiz-prompt { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-weight: 700; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
#note-studio .ns2-quiz-answer { padding-top: 0.9rem; border-top: 1px dashed var(--line-strong); font-size: var(--ah-fs-4); line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; max-width: 60ch; justify-self: center; }
#note-studio .ns2-quiz-answer .katex-display, #note-studio .ns2-quiz-prompt .katex-display { overflow-x: auto; overflow-y: hidden; }
#note-studio .ns2-quiz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; }
#note-studio .ns2-quiz-hint { flex-basis: 100%; text-align: center; font-size: var(--ah-fs-2); color: var(--muted); }
#note-studio .ns2-quiz-grade { min-width: 8.5rem; }
#note-studio .ns2-quiz-grade--again { border-color: color-mix(in srgb, var(--c-calc) 60%, transparent); }
#note-studio .ns2-quiz-grade--hard { border-color: color-mix(in srgb, var(--c-sci) 60%, transparent); }
#note-studio .ns2-quiz-summary { text-align: center; padding: 1.5rem 0.5rem; display: grid; gap: 0.5rem; }
#note-studio .ns2-quiz-big { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 700; color: var(--ink); }
#note-studio .ns2-quiz-sub, #note-studio .ns2-quiz-save { margin: 0; color: var(--ink-2); }

/* Study Pack and Export dialogs (feature 4) */
#note-studio .ns2-pack-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
#note-studio .ns2-opt--inline { min-height: 44px; flex: 0 1 auto; }
#note-studio .ns2-opt--inline input { position: static; opacity: 1; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
#note-studio .ns2-pack-select { flex: 1 1 14rem; max-width: 100%; min-height: 44px; }
#note-studio .ns2-check { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; color: var(--ink); font-weight: 600; }
#note-studio .ns2-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); flex: none; }
#note-studio .ns2-pack-summary { margin: 0; font-weight: 700; color: var(--ink); }
#note-studio .ns2-pack-msg { margin: 0; color: var(--ink-2); }
#note-studio .ns2-pack-progress .ns2-quiz-bar { margin-top: 0.25rem; }
#note-studio .ns2-pack-dialog.is-printing { visibility: hidden; }
#note-studio .ns2-export-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#note-studio .ns2-export-links:empty { display: none; }

/* Feedback timeline (feature 5) */
#note-studio .ns2-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
#note-studio .ns2-timeline-item { position: relative; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; padding: 0 0 1rem; }
#note-studio .ns2-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 0.62rem; top: 1.1rem; bottom: 0; width: 2px; background: var(--line-strong); }
#note-studio .ns2-timeline-item.is-empty { display: block; color: var(--muted); }
#note-studio .ns2-timeline-dot { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); }
#note-studio .ns2-timeline-item--approved .ns2-timeline-dot, #note-studio .ns2-timeline-item--snapshot .ns2-timeline-dot { border-color: var(--c-geo); background: var(--c-geo); }
#note-studio .ns2-timeline-item--declined .ns2-timeline-dot { border-color: var(--c-sci); }
#note-studio .ns2-timeline-item--revoked .ns2-timeline-dot { border-color: var(--muted); }
#note-studio .ns2-timeline-text { display: grid; gap: 0.2rem; color: var(--ink); min-width: 0; }
#note-studio .ns2-timeline-date { font-size: var(--ah-fs-2); color: var(--muted); }
#note-studio .ns2-timeline-quote { margin: 0.25rem 0 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--c-sci); background: var(--c-sci-tint); border-radius: 0 10px 10px 0; font-family: var(--font-display); font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; }
#note-studio .ns2-timeline-next { margin: 0; font-weight: 700; color: var(--ink); }

/* Progress dialog: heatmap and badges (feature 6) */
#note-studio .ns2-progress-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 0.6rem; }
#note-studio .ns2-progress-kpi { display: grid; gap: 0.2rem; padding: 0.7rem 0.85rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
#note-studio .ns2-progress-val { font-family: var(--font-display); font-size: var(--ah-fs-5); font-weight: 700; color: var(--ink); }
#note-studio .ns2-progress-lbl { font-size: 0.75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
#note-studio .ns2-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, minmax(0, 1fr)); grid-auto-columns: minmax(0, 1fr); gap: 3px; max-width: 34rem; }
#note-studio .ns2-heat { display: inline-block; aspect-ratio: 1; min-width: 10px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
#note-studio .ns2-heat--1 { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
#note-studio .ns2-heat--2 { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); }
#note-studio .ns2-heat--3 { background: color-mix(in srgb, var(--accent) 74%, var(--surface)); }
#note-studio .ns2-heat--4 { background: var(--accent); }
#note-studio .ns2-heat.is-future { opacity: 0.3; }
#note-studio .ns2-heat-legend { display: flex; align-items: center; gap: 4px; margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted); }
#note-studio .ns2-heat-legend .ns2-heat { width: 12px; min-width: 12px; }
#note-studio .ns2-heat-table summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 32px; }
#note-studio .ns2-heat-table table { width: 100%; border-collapse: collapse; font-size: var(--ah-fs-2); }
#note-studio .ns2-heat-table th, #note-studio .ns2-heat-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); color: var(--ink); }
#note-studio .ns2-badge-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0.6rem; }
#note-studio .ns2-badge-row { display: flex; gap: 0.7rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
#note-studio .ns2-badge-big { width: 56px; height: 56px; object-fit: contain; flex: none; filter: grayscale(1) brightness(0.6); opacity: 0.55; }
#note-studio .ns2-badge-row.is-earned .ns2-badge-big { filter: none; opacity: 1; }
#note-studio .ns2-badge-text { display: grid; gap: 0.1rem; font-size: var(--ah-fs-2); color: var(--ink-2); min-width: 0; }
#note-studio .ns2-badge-text strong { color: var(--ink); font-size: var(--ah-fs-3); }
#note-studio .ns2-badge-prog { font-weight: 700; color: var(--accent); }
#note-studio .ns2-badge-row.is-earned .ns2-badge-prog { color: var(--c-geo); }

#note-studio .ns2-stat-mini, #note-studio .ns2-stat--badgecount { display: none; }
@media (max-width: 599px) {
  /* One stats row: streak · weekly goal · badge count (opens Progress). */
  #note-studio .ns2-stats:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0.4rem; width: 100%; }
  #note-studio .ns2-stats .ns2-stat--reviews, #note-studio .ns2-stats .ns2-badges, #note-studio .ns2-stats .ns2-progress-btn { display: none; }
  #note-studio .ns2-stats .ns2-stat { min-width: 0; min-height: 48px; gap: 0.35rem; padding: 0.3rem 0.45rem 0.3rem 0.35rem; border-radius: 14px; }
  #note-studio .ns2-stats .ns2-stat--badgecount { display: inline-flex; cursor: pointer; font: inherit; text-align: left; }
  #note-studio .ns2-stats .ns2-stat--badgecount:not(.is-on) .ns2-stat-art { filter: grayscale(1) brightness(0.7); opacity: 0.6; }
  #note-studio .ns2-stats .ns2-stat--badgecount:focus-visible { outline: var(--ns2-focus); outline-offset: 2px; }
  #note-studio .ns2-stats .ns2-stat-art { width: 26px; height: 26px; }
  #note-studio .ns2-stats .ns2-ring-wrap, #note-studio .ns2-stats .ns2-ring { width: 28px; height: 28px; }
  #note-studio .ns2-stats .ns2-ring-num { font-size: 0.66rem; }
  #note-studio .ns2-stats .ns2-stat-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  #note-studio .ns2-stats .ns2-stat-mini { display: grid; min-width: 0; line-height: 1.15; }
  #note-studio .ns2-stat-mini strong { font: 800 0.82rem/1.15 var(--ah-font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #note-studio .ns2-stat-mini span { font: 600 0.64rem/1.2 var(--ah-font-ui); color: var(--muted); }
  #note-studio .ns2-today-artwrap { width: 56px; height: 56px; }
  #note-studio .ns2-revise { grid-template-columns: 1fr; }
  #note-studio .ns2-org-quiz { margin-left: 0; }
  #note-studio .ns2-quiz { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  #note-studio .ns2-quiz-grade { min-width: 0; flex: 1 1 30%; }
}
@media (prefers-reduced-motion: reduce) {
  #note-studio .ns2-ring-fg, #note-studio .ns2-quiz-fill { transition: none; }
}
body.a11y-reduce-motion #note-studio .ns2-ring-fg, body.a11y-reduce-motion #note-studio .ns2-quiz-fill { transition: none; }
@media (forced-colors: active) {
  #note-studio .ns2-mastery, #note-studio .ns2-stat, #note-studio .ns2-today-card, #note-studio .ns2-revise { border: 1px solid CanvasText; forced-color-adjust: auto; }
  #note-studio .ns2-heat { forced-color-adjust: none; }
}

/* ════════════ Study Pack print layout (§10.2) ════════════ */
#ns-print-overlay.po-pack { page: pack; }
@page pack {
  size: letter; margin: 0.5in 0.5in 0.6in;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 600 8pt Arial, sans-serif; color: #5C6473; }
  @bottom-left { content: "Note Studio Study Pack"; font: 600 8pt Arial, sans-serif; color: #5C6473; }
}
@media print {
  #ns-print-overlay.po-pack .po-pack-cover {
    break-after: page; min-height: 9.4in; display: flex; flex-direction: column; justify-content: flex-end; position: relative;
    border: 2px solid var(--po-ink, #1C4E80); border-radius: 14px; overflow: hidden; padding: 0;
  }
  #ns-print-overlay.po-pack .po-pack-art { position: absolute; inset: 0; width: 100%; height: 62%; object-fit: cover; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #ns-print-overlay.po-pack .po-pack-rule { position: absolute; left: 0.6in; right: 0.6in; top: 1.1in; height: 6px; border-radius: 3px; background: var(--po-ink, #1C4E80) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #ns-print-overlay.po-pack .po-pack-titles { position: relative; background: #fff; padding: 0.45in 0.55in 0.5in; }
  #ns-print-overlay.po-pack .po-pack-kicker { margin: 0; font: 700 9pt Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--po-ink, #1C4E80) !important; }
  #ns-print-overlay.po-pack .po-pack-title { margin: 0.12in 0 0.06in; font: 800 30pt/1.05 'Outfit', Arial, sans-serif; color: #1B2A4A !important; overflow-wrap: anywhere; }
  #ns-print-overlay.po-pack .po-pack-who { margin: 0; font: 600 13pt Arial, sans-serif; color: #44506B !important; }
  #ns-print-overlay.po-pack .po-pack-facts { display: flex; gap: 0.3in; margin: 0.28in 0 0; padding-top: 0.16in; border-top: 1px solid #DAD6CC; }
  #ns-print-overlay.po-pack .po-pack-facts div { flex: 1; }
  #ns-print-overlay.po-pack .po-pack-facts dt { font: 700 7.5pt Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; color: var(--po-ink, #1C4E80) !important; }
  #ns-print-overlay.po-pack .po-pack-facts dd { margin: 0.04in 0 0; font: 600 11pt Arial, sans-serif; color: #1B2A4A !important; }
  #ns-print-overlay.po-pack .po-pack-made { margin: 0.2in 0 0; font: 600 8pt Arial, sans-serif; color: #5C6473 !important; }
  #ns-print-overlay.po-pack .po-pack-toc { break-after: page; }
  #ns-print-overlay.po-pack .po-pack-h2 { margin: 0 0 0.18in; font: 800 18pt 'Outfit', Arial, sans-serif; color: #1C4E80 !important; border-bottom: 3px solid #1C4E80; padding-bottom: 0.08in; }
  #ns-print-overlay.po-pack .po-toc-list { margin: 0; padding-left: 0.35in; }
  #ns-print-overlay.po-pack .po-toc-item { margin: 0 0 0.07in; break-inside: avoid; font: 600 10.5pt Arial, sans-serif; color: #1B2A4A !important; }
  #ns-print-overlay.po-pack .po-toc-item a { color: #1B2A4A !important; text-decoration: none; display: flex; flex-wrap: wrap; gap: 0 0.12in; justify-content: space-between; }
  #ns-print-overlay.po-pack .po-toc-title { overflow-wrap: anywhere; min-width: 0; }
  #ns-print-overlay.po-pack .po-toc-meta { color: #5C6473 !important; font-weight: 500; font-size: 9pt; }
  #ns-print-overlay.po-pack .po-note { break-before: page; }
  #ns-print-overlay.po-pack .po-pack-cover + .po-note, #ns-print-overlay.po-pack .po-pack-toc + .po-chunk > .po-note:first-child { break-before: auto; }
  #ns-print-overlay.po-pack .po-chunk:first-child > .po-note:first-child { break-before: auto; }
  #ns-print-overlay.po-pack .po-note-band {
    display: flex; justify-content: space-between; gap: 0.2in; margin: 0 0 0.12in; padding: 0.06in 0.14in; border-radius: 6px;
    border-left: 6px solid var(--po-ink, #1C4E80); background: #F4F2EC !important; font: 700 8.5pt Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--po-ink, #1C4E80) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #ns-print-overlay.po-pack .po-ftr { display: none; }
  #ns-print-overlay.po-pack .po-figure { break-inside: avoid; max-height: 6.2in; object-fit: contain; }
  #ns-print-overlay.po-pack .po-app-note { break-inside: avoid; margin-bottom: 0.15in; }
  #ns-print-overlay.po-pack .po-app-title { margin: 0 0 0.05in; font: 700 11pt Arial, sans-serif; color: #1B2A4A !important; }
  #ns-print-overlay.po-pack .po-app-list { margin: 0; padding-left: 0.3in; font: 10pt/1.5 Georgia, serif; color: #1B2A4A !important; }
  #ns-print-overlay.po-pack .katex-display { overflow: visible; }
}

/* Base for the editor's template pill, which shares the card title class. */
#note-studio .ns-note-title { font-family: var(--font-display); font-weight: 800; color: var(--ah-text-1); }

@media print { #note-studio .ns2-notebook, #note-studio .ns2-dialog, #note-studio .ns2-menu { display: none !important; } }