/* Pattern Notebook components for its-me-jessica.com
   ------------------------------------------------------------------
   The versions picked in the Pattern Notebook, rebuilt with an n- prefix so they
   can sit next to each app's own styles without clashing. Computers get the
   "Whole site" picks; phones (760px and narrower, where the site menu turns
   into a top bar) get the "Whole site on phones" picks.

     Foundations   Georgia + Geist · lifted depth · accent from the site's colour scheme
     Computer      comfortable text · rounded corners · cozy spacing · ink backdrop · rise & fade
     Phone         compact text · pill corners · compact spacing · accent-tint backdrop · drop in

   Each page sets --n-accent (the trip planner uses its Trips colour, the home page
   its button colour); everything else is derived. */

:root {
  --n-accent: #58735c;
  --n-accent-deep: color-mix(in srgb, var(--n-accent) 80%, black);
  --n-accent-soft: color-mix(in srgb, var(--n-accent) 11%, white);
  --n-accent-line: color-mix(in srgb, var(--n-accent) 30%, white);
  --n-accent-ink: #ffffff;
  --n-ink: #292722; --n-head: color-mix(in srgb, var(--n-accent) 18%, #1f2520); --n-body: #4b514a;
  --n-muted: #8c867d; --n-faint: #aba69e; --n-line: #ebe8e1; --n-line-2: #e1ded5;
  --n-dim: #6f6a62;   /* muted words that still have to be read: 5:1 on white (--n-muted is 3.6:1, for eyebrows, labels and decoration) */
  --n-cream: #fbfaf7; --n-paper: #fffefa; --n-white: #ffffff; --n-well: #f5f3ee;
  --n-rose: #b75a50; --n-rose-soft: #f8ebe7; --n-rose-line: #ebcdc6;
  --n-ochre: #9d7631; --n-ochre-soft: #f6efdf; --n-ochre-line: #e7d7b3;
  --n-sky: #4c6a86; --n-sky-soft: #e8eff5; --n-sky-line: #c9d8e5;
  --n-display: var(--ijs-display, Georgia, "Times New Roman", serif);  /* a custom style's heading font, when one is applied */
  --n-sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --n-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --n-ph1: linear-gradient(160deg, #c9b99a 0%, #8a7a5c 45%, #3c3a2e 100%);
  --n-ph2: linear-gradient(170deg, #b8cbb5 0%, #6f8b6f 50%, #2f3f33 100%);
  --n-ph3: linear-gradient(165deg, #e2c3b3 0%, #b3796a 50%, #5a3a33 100%);
  --n-ph4: linear-gradient(175deg, #c3d2df 0%, #7390a8 50%, #2d3f50 100%);
  /* computer foundations */
  --n-fs: 14px; --n-r: 11px; --n-r-lg: 18px; --n-rb: 999px; --n-sp: 1;
  --n-shadow-card: 0 1px 2px rgba(27,35,27,.06), 0 8px 24px rgba(27,35,27,.08);
  --n-shadow-pop: 0 30px 90px rgba(27,35,27,.28), 0 4px 12px rgba(27,35,27,.08);
  --n-shadow-menu: 0 16px 40px rgba(27,35,27,.18);
  --n-veil: rgba(32,38,32,.45); --n-veil-blur: 0px;
  --n-pop-in: n-rise .3s cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 760px) {
  :root {
    --n-fs: 13px; --n-r: 999px; --n-r-lg: 22px; --n-rb: 999px; --n-sp: .78;
    --n-veil: color-mix(in srgb, var(--n-accent) 38%, rgba(20,24,20,.25)); --n-veil-blur: 2px;
    --n-pop-in: n-drop .34s cubic-bezier(.2,.8,.2,1);
  }
}

.n-ui, .n-ui * { box-sizing: border-box; }
.n-ui { font-family: var(--n-sans); font-size: var(--n-fs); color: var(--n-ink); line-height: 1.5; }
.n-ui button, .n-ui input, .n-ui select, .n-ui textarea { font: inherit; color: inherit; }
.n-ui button { cursor: pointer; }
.n-ui :focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; }
/* Fields draw their own focus ring (or their box does), so skip the outline there. */
.n-ui .n-inp:focus-visible, .n-ui .n-tagin input:focus-visible, .n-ui .n-ig input:focus-visible, .n-ui .n-compose textarea:focus-visible { outline: none; }
.n-ui h1, .n-ui h2, .n-ui h3, .n-ui h4 { font-family: var(--n-display); font-weight: 400; color: var(--n-head); letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; margin: 0; }
.n-ui h1 em, .n-ui h2 em, .n-ui h3 em, .n-ui h4 em, .n-em { color: var(--n-accent); font-style: italic; }
svg.n-i { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
/* A name with no spaces (a journal's, say) breaks where it must rather than running past its box. */
.n-eyebrow { display: block; font-size: .7rem; font-weight: 680; letter-spacing: .14em; text-transform: uppercase; color: var(--n-muted); overflow-wrap: anywhere; }
.n-muted { color: var(--n-muted); }
.n-hint { font-size: .8em; color: var(--n-dim); }
.n-ser { font-family: var(--n-display); letter-spacing: -.03em; color: var(--n-head); }
.n-stack { display: flex; flex-direction: column; gap: .6em; width: 100%; }
.n-row { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.n-grow { flex: 1; min-width: 0; }
.n-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.n-lbl { display: block; font-size: .7em; font-weight: 680; letter-spacing: .1em; text-transform: uppercase; color: var(--n-muted); margin-bottom: .45em; }

/* ---------- buttons: Pill (computer and phone); press-down on phones ---------- */
.n-b { display: inline-flex; align-items: center; justify-content: center; gap: .45em; height: calc(2.6em * var(--n-sp) + .3em); padding: 0 1.25em; border-radius: var(--n-rb); font-size: .9em; font-weight: 550; border: 1px solid var(--n-line-2); background: var(--n-white); color: var(--n-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s, width .25s; font-family: var(--n-sans); line-height: 1; }
.n-b:hover { border-color: var(--n-accent-line); color: var(--n-head); }
.n-b.solid { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-accent-ink); }
.n-b.solid:hover { background: var(--n-accent-deep); border-color: var(--n-accent-deep); color: var(--n-accent-ink); }
.n-b.soft { background: var(--n-accent-soft); border-color: var(--n-accent-line); color: var(--n-accent-deep); }
.n-b.danger { background: var(--n-rose); border-color: var(--n-rose); color: #fff; }
.n-b.ghost { border-color: transparent; background: transparent; color: var(--n-accent); }
.n-b.ghost:hover { background: var(--n-accent-soft); }
.n-b.ghost.bad { color: var(--n-rose); }
.n-b.link { border: 0; background: none; padding: 0; height: auto; color: var(--n-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--n-accent-line); }
.n-b.ic { width: calc(2.6em * var(--n-sp) + .3em); padding: 0; border-radius: 50%; }
.n-b.sm { height: 2.15em; font-size: .8em; padding: 0 .95em; }
.n-b.xs { height: 1.9em; font-size: .74em; padding: 0 .7em; }
.n-b.sm.ic, .n-b.xs.ic { padding: 0; width: 2.15em; }
.n-b.xs.ic { width: 1.9em; }
.n-b.lg { height: 3.1em; font-size: 1em; padding: 0 1.6em; }
.n-b.block { width: 100%; }
.n-b[disabled] { opacity: .5; cursor: not-allowed; }
/* success morph (computer): the button becomes a tick when it's done */
.n-b.is-busy { pointer-events: none; }
.n-b.is-done { pointer-events: none; background: var(--n-accent); border-color: var(--n-accent); color: var(--n-accent-ink); }
.n-b.is-done > * { display: none; }
.n-b.is-done::before { content: ""; width: .95em; height: .5em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px,-2px); }
@media (max-width: 760px) {
  .n-b { box-shadow: 0 2px 0 var(--n-line-2); }
  .n-b.solid { box-shadow: 0 2px 0 var(--n-accent-deep); }
  .n-b.danger { box-shadow: 0 2px 0 color-mix(in srgb, var(--n-rose) 75%, black); }
  .n-b.ghost, .n-b.link { box-shadow: none; }
  .n-b:active { transform: translateY(2px); box-shadow: none; }
}
.n-splitbtn { display: inline-flex; }
.n-splitbtn .n-b:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.n-splitbtn .n-b:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: rgba(255,255,255,.35); padding: 0 .75em; }

/* ---------- alerts: Tinted note ---------- */
.n-al { display: flex; gap: .7em; align-items: flex-start; padding: .8em .95em; border-radius: min(var(--n-r), 14px); font-size: .9em; line-height: 1.45; color: var(--n-body); width: 100%; }
.n-al b { color: var(--n-head); font-weight: 600; }
.n-al > svg { margin-top: .1em; }
.n-al.t-ok { background: var(--n-accent-soft); border: 1px solid var(--n-accent-line); } .n-al.t-ok > svg { color: var(--n-accent); }
.n-al.t-warn { background: var(--n-ochre-soft); border: 1px solid var(--n-ochre-line); } .n-al.t-warn > svg { color: var(--n-ochre); }
.n-al.t-bad { background: var(--n-rose-soft); border: 1px solid var(--n-rose-line); } .n-al.t-bad > svg { color: var(--n-rose); }
.n-al.t-info { background: var(--n-sky-soft); border: 1px solid var(--n-sky-line); } .n-al.t-info > svg { color: var(--n-sky); }
.n-al .end { margin-left: auto; display: flex; gap: .4em; align-items: center; }

/* ---------- badges: Soft chip; colour means state only ---------- */
.n-bd { display: inline-flex; align-items: center; gap: .35em; height: 1.85em; padding: 0 .7em; border-radius: 20px; font-size: .78em; font-weight: 500; white-space: nowrap; background: var(--n-accent-soft); color: var(--n-accent-deep); border: 1px solid var(--n-accent-line); }
.n-bd.r { background: var(--n-rose-soft); color: var(--n-rose); border-color: var(--n-rose-line); }
.n-bd.o { background: var(--n-ochre-soft); color: var(--n-ochre); border-color: var(--n-ochre-line); }
.n-bd.s { background: var(--n-sky-soft); color: var(--n-sky); border-color: var(--n-sky-line); }
.n-bd.q { background: var(--n-well); color: var(--n-muted); border-color: var(--n-line-2); }
.n-cnt { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 20px; background: var(--n-accent); color: var(--n-accent-ink); font-size: .7em; font-weight: 650; }

/* ---------- breadcrumbs: Chevron + home ---------- */
.n-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; font-size: .84em; color: var(--n-muted); }
.n-crumbs a, .n-crumbs button { color: var(--n-muted); text-decoration: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; }
.n-crumbs a:hover, .n-crumbs button:hover { color: var(--n-accent); }
.n-crumbs [aria-current] { color: var(--n-head); font-weight: 550; }
.n-crumbs .sep { color: var(--n-faint); }

/* ---------- page header: Apex style ---------- */
.n-phd { width: 100%; display: flex; flex-direction: column; gap: .4em; margin-bottom: 1.1em; }
.n-phd .ttl { font-family: var(--n-sans); font-weight: 750; font-size: 1.9em; letter-spacing: -.04em; color: var(--n-head); line-height: 1.1; margin: 0; }
.n-phd .ds { font-size: .92em; color: var(--n-muted); max-width: 70ch; margin: 0; }
.n-phd .rw { display: flex; align-items: flex-end; justify-content: space-between; gap: .8em; flex-wrap: wrap; }
.n-phd .acts { display: flex; gap: .5em; flex-wrap: wrap; }

/* ---------- cards: Tinted (computer), Stat card (phone) ---------- */
.n-cd { background: var(--n-white); border: 1px solid var(--n-line); border-radius: var(--n-r-lg); overflow: hidden; box-shadow: var(--n-shadow-card); width: 100%; }
.n-cd .cbd { padding: calc(1.1em * var(--n-sp)); }
.n-cd .ct { font-family: var(--n-display); font-size: 1.3em; letter-spacing: -.03em; color: var(--n-head); margin: .1em 0 .25em; }
.n-cd .cx { font-size: .86em; color: var(--n-muted); }
.n-cd .cf { display: flex; gap: .8em; align-items: center; padding: .7em 1.1em; border-top: 1px solid var(--n-line); font-size: .8em; color: var(--n-muted); }
.n-cd.tint { background: var(--n-accent-soft); border-color: var(--n-accent-line); box-shadow: none; }
.n-stat .v { font-family: var(--n-display); font-size: 2.2em; letter-spacing: -.04em; color: var(--n-head); line-height: 1; }
.n-stat .d { font-size: .8em; color: var(--n-accent); display: flex; gap: .3em; align-items: center; margin-top: .4em; }
.n-ph { background: var(--n-ph1); min-height: 6em; position: relative; }
.n-ph.p2 { background: var(--n-ph2); } .n-ph.p3 { background: var(--n-ph3); } .n-ph.p4 { background: var(--n-ph4); }

/* ---------- avatars: Photos, rounded square ---------- */
.n-av { width: 2.4em; height: 2.4em; border-radius: calc(min(var(--n-r), 12px)); display: inline-grid; place-items: center; flex: none; font-size: .82em; font-weight: 650; color: #fff; background: var(--n-ph2); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.n-av.p1 { background: var(--n-ph1); } .n-av.p3 { background: var(--n-ph3); } .n-av.p4 { background: var(--n-ph4); }
.n-avs { display: flex; } .n-avs .n-av { box-shadow: 0 0 0 2px var(--n-cream); } .n-avs .n-av + .n-av { margin-left: -.5em; }

/* ---------- meta line ---------- */
.n-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35em 1em; font-size: .84em; color: var(--n-muted); }
.n-meta > span { display: inline-flex; align-items: center; gap: .35em; }

/* ---------- accordion: Boxed with icons ---------- */
.n-acc { width: 100%; border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 18px); background: var(--n-white); padding: 0 1em; box-shadow: var(--n-shadow-card); }
.n-acc > details { border-bottom: 1px solid var(--n-line); }
.n-acc > details:last-child { border-bottom: 0; }
.n-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7em; padding: .95em .1em; font-size: .98em; font-weight: 600; color: var(--n-head); }
.n-acc summary::-webkit-details-marker { display: none; }
.n-acc summary .ic { width: 2.1em; height: 2.1em; border-radius: min(var(--n-r), 10px); background: var(--n-accent-soft); color: var(--n-accent); display: grid; place-items: center; flex: none; }
.n-acc summary .sub { font-weight: 400; color: var(--n-muted); font-size: .86em; }
.n-acc summary .chev { margin-left: auto; color: var(--n-muted); transition: transform .2s; }
.n-acc details[open] > summary .chev { transform: rotate(180deg); }
.n-acc .body { padding: 0 .1em 1.1em; }

/* ---------- switch reveals (phones) ---------- */
.n-reveal > [hidden] { display: none !important; }

/* ---------- carousel: Arrows (computer) / Card row (phone) ---------- */
.n-car { position: relative; width: 100%; }
.n-cardrow { display: flex; gap: .8em; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding: 2px 2px 6px; }
.n-cardrow::-webkit-scrollbar { display: none; }
.n-cardrow > * { flex: 0 0 min(300px, 42%); scroll-snap-align: start; }
.n-car-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--n-paper); border: 1px solid var(--n-line); display: grid; place-items: center; color: var(--n-head); z-index: 2; box-shadow: var(--n-shadow-menu); cursor: pointer; }
.n-car-arr.l { left: -.6em; } .n-car-arr.r { right: -.6em; }
@media (max-width: 760px) { .n-cardrow > * { flex-basis: 72%; } .n-car-arr { display: none; } }

/* ---------- menus: Checkbox menu (computer) / Split button (phone) ---------- */
.n-dd { position: relative; display: inline-block; }
.n-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 14em; max-width: calc(100vw - 16px); background: var(--n-paper); border: 1px solid var(--n-line); border-radius: min(var(--n-r), 14px); box-shadow: var(--n-shadow-menu); padding: .35em; animation: n-rise .18s ease; font-size: .9em; }
.n-menu.right { left: auto; right: 0; }
.n-menu.up { top: auto; bottom: calc(100% + 6px); }
.n-menu button, .n-menu a, .n-menu label { display: flex; align-items: center; gap: .6em; width: 100%; padding: .55em .65em; border: 0; background: none; border-radius: 8px; text-align: left; color: var(--n-body); text-decoration: none; font-size: 1em; cursor: pointer; }
.n-menu button:hover, .n-menu a:hover, .n-menu label:hover { background: var(--n-accent-soft); color: var(--n-accent-deep); }
.n-menu .sec { font-size: .7em; letter-spacing: .12em; text-transform: uppercase; font-weight: 680; color: var(--n-faint); padding: .6em .65em .25em; }
.n-menu hr { border: 0; border-top: 1px solid var(--n-line); margin: .3em 0; }
.n-menu .danger { color: var(--n-rose); }
.n-menu .on { color: var(--n-accent-deep); font-weight: 600; }
.n-menu input[type=checkbox] { accent-color: var(--n-accent); width: 1.05em; height: 1.05em; }

/* ---------- pagination: Numbered ---------- */
.n-pg { display: flex; gap: .3em; align-items: center; flex-wrap: wrap; font-size: .88em; justify-content: center; margin-top: 1em; }
.n-pg button { min-width: 2.4em; height: 2.4em; border-radius: min(var(--n-r), 12px); border: 1px solid var(--n-line-2); background: var(--n-white); color: var(--n-body); cursor: pointer; }
.n-pg button.on { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-accent-ink); }
.n-pg button[disabled] { opacity: .4; cursor: default; }
.n-pg .gap { color: var(--n-faint); padding: 0 .2em; }

/* ---------- progress: Stepper ---------- */
.n-bar { height: .35em; border-radius: 20px; background: var(--n-line); overflow: hidden; width: 100%; }
.n-bar i { display: block; height: 100%; background: var(--n-accent); border-radius: inherit; transition: width .4s; }
.n-stepper { display: flex; align-items: center; gap: .5em; font-size: .86em; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .2em 0; }
.n-stepper .stp { display: inline-flex; align-items: center; gap: .45em; border: 0; background: none; padding: 0; color: var(--n-muted); white-space: nowrap; cursor: pointer; }
.n-stepper .num { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; border-radius: 6px; font-size: .78em; font-weight: 700; letter-spacing: .06em; background: var(--n-line); color: var(--n-muted); }
.n-stepper .stp.done .num, .n-stepper .stp.on .num { background: var(--n-accent); color: var(--n-accent-ink); }
.n-stepper .stp.on { color: var(--n-head); font-weight: 600; }
.n-stepper .stp[disabled] { cursor: not-allowed; opacity: .6; }
.n-stepper .ln { flex: 1 0 1.2em; height: 1px; background: var(--n-line-2); }
.n-stepper .ln.done { background: var(--n-accent); }

/* ---------- list group: Timeline ---------- */
.n-tl { list-style: none; margin: 0; padding: 0; width: 100%; }
.n-tl > li { display: grid; grid-template-columns: 4.8em 1em minmax(0,1fr); gap: .7em; align-items: start; padding-bottom: 1em; position: relative; }
.n-tl .tm { font-size: .82em; color: var(--n-muted); padding-top: .15em; font-variant-numeric: tabular-nums; text-align: right; }
.n-tl .dt { width: .75em; height: .75em; border-radius: 50%; border: 2px solid var(--n-accent); background: var(--n-cream); margin-top: .35em; position: relative; z-index: 1; }
.n-tl > li:not(:last-child)::after { content: ""; position: absolute; left: calc(4.8em + .7em + .36em); top: 1.2em; bottom: 0; width: 1px; background: var(--n-line-2); }
.n-tl .what { min-width: 0; }
.n-tl .what b, .n-tl .what .t { color: var(--n-head); font-weight: 600; }
.n-tl .what .s { display: block; color: var(--n-muted); font-size: .88em; }
.n-tl .go { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.n-tl .go:hover b { color: var(--n-accent); }
.n-lgp { width: 100%; border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 18px); background: var(--n-white); overflow: hidden; }
.n-lgp > * { display: flex; align-items: center; gap: .7em; padding: .75em .9em; border-bottom: 1px solid var(--n-line); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; color: var(--n-body); }
.n-lgp > *:last-child { border-bottom: 0; }
.n-lgp .t { color: var(--n-head); font-weight: 550; }
.n-lgp .s { font-size: .86em; color: var(--n-muted); }
.n-lgp .end { margin-left: auto; display: flex; gap: .35em; align-items: center; }

/* ---------- spinners: Three dots; skeletons ---------- */
.n-dots3 { display: inline-flex; gap: .3em; vertical-align: middle; }
.n-dots3 i { width: .5em; height: .5em; border-radius: 50%; background: var(--n-accent); animation: n-bob 1s infinite ease-in-out; }
.n-dots3 i:nth-child(2) { animation-delay: .15s; } .n-dots3 i:nth-child(3) { animation-delay: .3s; }
@keyframes n-bob { 0%,80%,100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.n-loading { display: flex; align-items: center; justify-content: center; gap: .6em; padding: 1.4em; color: var(--n-muted); font-size: .9em; }
.n-sk { background: var(--n-line); border-radius: 6px; }
.n-sk.pl { animation: n-pulse 1.4s ease-in-out infinite; }
@keyframes n-pulse { 50% { opacity: .45; } }
@media (max-width: 760px) { .n-sk.pl { animation: none; } }

/* ---------- tabs: Boxed days; segmented ---------- */
.n-tabs-b { display: flex; border: 1px solid var(--n-line); border-radius: min(var(--n-r), 14px); background: var(--n-paper); overflow-x: auto; scrollbar-width: none; width: 100%; }
.n-tabs-b::-webkit-scrollbar { display: none; }
.n-tabs-b button { flex: 1 0 6.2em; border: 0; border-right: 1px solid var(--n-line); background: none; padding: .6em .4em; display: flex; flex-direction: column; align-items: center; gap: .1em; color: var(--n-head); cursor: pointer; }
.n-tabs-b button:last-child { border-right: 0; }
.n-tabs-b .t { font-size: .64em; letter-spacing: .12em; font-weight: 680; color: var(--n-muted); }
.n-tabs-b .n { font-size: .88em; font-weight: 600; }
.n-tabs-b .c { font-size: .7em; color: var(--n-faint); }
.n-tabs-b button.on { background: var(--n-accent-soft); } .n-tabs-b button.on .t { color: var(--n-accent); }
.n-tabs-s { display: inline-flex; padding: .25em; border-radius: calc(min(var(--n-r), 14px) + 3px); background: var(--n-well); border: 1px solid var(--n-line); font-size: .86em; flex-wrap: wrap; }
.n-tabs-s button { border: 0; background: none; padding: .45em .95em; border-radius: min(var(--n-r), 12px); color: var(--n-muted); cursor: pointer; }
.n-tabs-s button.on { background: var(--n-white); color: var(--n-head); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 550; }

/* ---------- week strip (phone date picker) ---------- */
.n-week { display: flex; gap: .35em; width: 100%; overflow-x: auto; scrollbar-width: none; }
.n-week::-webkit-scrollbar { display: none; }
.n-week button { flex: 1 0 3.4em; border: 1px solid var(--n-line); background: var(--n-white); border-radius: min(var(--n-r), 16px); padding: .5em 0; display: flex; flex-direction: column; align-items: center; font-size: .8em; color: var(--n-muted); cursor: pointer; }
.n-week button b { font-family: var(--n-display); font-weight: 400; font-size: 1.45em; color: var(--n-head); }
.n-week button small { font-size: .78em; color: var(--n-faint); }
.n-week button.on { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-accent-ink); }
.n-week button.on b, .n-week button.on small { color: var(--n-accent-ink); }

/* ---------- calendar: Inline calendar, Range calendar ---------- */
.n-cal { width: 100%; max-width: 20em; background: var(--n-white); border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 18px); padding: .8em; box-shadow: var(--n-shadow-card); }
.n-cal-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5em; }
.n-cal-h b { font-family: var(--n-display); font-weight: 400; font-size: 1.2em; color: var(--n-head); letter-spacing: -.02em; }
.n-cal-h button { border: 0; background: none; color: var(--n-muted); width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.n-cal-h button:hover { background: var(--n-accent-soft); }
.n-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.n-cal-g .dw { font-size: .74em; color: var(--n-faint); padding: .3em 0; font-weight: 600; }
.n-cal-g button { border: 0; background: none; aspect-ratio: 1; border-radius: 8px; color: var(--n-body); font-variant-numeric: tabular-nums; font-size: .92em; cursor: pointer; position: relative; }
.n-cal-g button:hover { background: var(--n-accent-soft); }
.n-cal-g button.mute { color: var(--n-faint); }
.n-cal-g button.today { box-shadow: inset 0 0 0 1px var(--n-accent-line); }
.n-cal-g button.sel { background: var(--n-accent); color: var(--n-accent-ink); }
.n-cal-g button.inr { background: var(--n-accent-soft); color: var(--n-accent-deep); border-radius: 0; }
.n-cal-g button.ev::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--n-accent); }
.n-cal-g button.sel.ev::after { background: var(--n-accent-ink); }
.n-cal-g button[disabled] { opacity: .35; cursor: default; }
.n-cal-foot { margin-top: .5em; font-size: .82em; color: var(--n-muted); text-align: center; }
.n-datebox { position: relative; display: block; }
.n-datebox > input { width: 100%; cursor: pointer; }
.n-datebox:has(.n-date-clear:not([hidden])) > input { padding-right: 2.2em; }
.n-date-clear { position: absolute; right: .35em; top: 50%; transform: translateY(-50%); width: 1.7em; height: 1.7em; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--n-muted); cursor: pointer; }
.n-date-clear:hover { background: var(--n-well); color: var(--n-body); }
.n-date-clear svg { width: .95em; height: .95em; }
.n-date-clear[hidden], .n-datebox > input:disabled ~ .n-date-clear { display: none; }
.n-calpop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; animation: n-rise .18s; }
.n-calpop .n-cal { box-shadow: var(--n-shadow-menu); }

/* ---------- tooltip: Accent pill ---------- */
[data-n-tip] { position: relative; }
[data-n-tip]::after { content: attr(data-n-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); white-space: nowrap; font-size: .74rem; padding: .4em .75em; border-radius: 20px; opacity: 0; pointer-events: none; transition: .15s; z-index: 30; font-weight: 500; background: var(--n-accent); color: var(--n-accent-ink); font-family: var(--n-sans); letter-spacing: 0; text-transform: none; }
[data-n-tip]:hover::after, [data-n-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* Invisible hover hints still enlarge the scrollable page. Touch screens use
   the controls' labels instead of tooltips that can extend past either edge. */
@media (hover: none), (max-width: 760px) {
  [data-n-tip]::after { display: none; }
}

/* ---------- toasts: Top centre, accent; notifications: Stacked cards ---------- */
#n-toasts { position: fixed; z-index: 2147483100; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
#n-toasts > * { pointer-events: auto; animation: n-drop .3s cubic-bezier(.2,.8,.2,1); }
#n-toasts > .out { opacity: 0; transform: translateY(-8px); transition: .25s; }
.n-toast { display: flex; align-items: center; gap: .6em; font-family: var(--n-sans); font-size: .9rem; max-width: min(92vw, 420px); background: var(--n-accent); color: var(--n-accent-ink); padding: .65em 1.2em; border-radius: 999px; box-shadow: var(--n-shadow-menu); }
.n-toast.bad { background: var(--n-rose); }
#n-notes { position: fixed; z-index: 2147483090; right: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.n-note { pointer-events: auto; display: flex; gap: .7em; align-items: flex-start; background: var(--n-paper); border: 1px solid var(--n-line); box-shadow: var(--n-shadow-menu); padding: .85em .95em; border-radius: min(var(--n-r-lg), 16px); color: var(--n-body); font-family: var(--n-sans); font-size: .88rem; animation: n-rise .3s cubic-bezier(.2,.8,.2,1); }
.n-note .ti { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--n-accent-soft); color: var(--n-accent); display: grid; place-items: center; flex: none; }
.n-note b { display: block; color: var(--n-head); }
.n-note.out { opacity: 0; transform: translateX(12px); transition: .25s; }
@media (max-width: 760px) { #n-notes { left: 12px; right: 12px; width: auto; } }

/* ---------- empty state: Drawn + action ---------- */
.n-empty { text-align: center; width: 100%; padding: 1.8em 1em; }
.n-empty .art { width: 5.5em; height: 5.5em; margin: 0 auto .7em; display: block; }
.n-empty h4 { font-family: var(--n-display); font-weight: 400; font-size: 1.5em; color: var(--n-head); margin: 0 0 .3em; }
.n-empty p { font-size: .9em; color: var(--n-muted); max-width: 34ch; margin: 0 auto .9em; }

/* ---------- forms: Underline + floating underline (computer); sentence labels + inside-the-box (phone) ---------- */
.n-fld { display: flex; flex-direction: column; width: 100%; min-width: 0; position: relative; }
.n-fld > label, .n-fld > .n-lbl { display: block; font-size: .72em; font-weight: 680; letter-spacing: .1em; text-transform: uppercase; color: var(--n-muted); margin-bottom: .45em; }
.n-fld .n-hint { margin-top: .35em; }
.n-inp { width: 100%; height: calc(2.8em * var(--n-sp) + .4em); border: 1px solid var(--n-line-2); border-radius: min(var(--n-r), 12px); background: var(--n-white); padding: 0 .85em; font-size: .95em; color: var(--n-ink); transition: border-color .15s, box-shadow .15s; font-family: var(--n-sans); }
textarea.n-inp { height: auto; min-height: 5.5em; padding: .7em .85em; resize: vertical; line-height: 1.5; }
.n-inp::placeholder { color: var(--n-faint); }
.n-inp:focus { outline: none; border-color: var(--n-accent); box-shadow: 0 0 0 3px var(--n-accent-soft); }
.n-inp.bad { border-color: var(--n-rose); }
select.n-inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--n-muted) 50%), linear-gradient(135deg, var(--n-muted) 50%, transparent 50%); background-position: calc(100% - 1.15em) 55%, calc(100% - .85em) 55%; background-size: .32em .32em; background-repeat: no-repeat; padding-right: 2.2em; }
/* computer: underline fields */
@media (min-width: 761px) {
  .n-form .n-inp:not(textarea):not(select), .n-inp.ul { border: 0; border-bottom: 1px solid var(--n-line-2); border-radius: 0; background: transparent; padding: 0 .1em; }
  .n-form .n-inp:not(textarea):not(select):focus, .n-inp.ul:focus { box-shadow: 0 1px 0 var(--n-accent); }
  .n-form .n-inp.bad { border-bottom-color: var(--n-rose); }
}
/* phone: sentence-case labels with hint text */
@media (max-width: 760px) {
  .n-fld > label, .n-fld > .n-lbl { font-size: .95em; font-weight: 550; color: var(--n-head); text-transform: none; letter-spacing: 0; margin-bottom: .35em; }
  .n-inp { padding: 0 1.1em; }
  textarea.n-inp { border-radius: 18px; }
}
/* floating labels */
.n-float { position: relative; width: 100%; }
.n-float .n-inp { height: 3.4em; padding-top: 1.1em; }
.n-float > label { position: absolute; left: 1.05em; top: 50%; transform: translateY(-50%); font-size: .92em; color: var(--n-faint); transition: .15s; pointer-events: none; }
.n-float .n-inp:focus + label, .n-float .n-inp:not(:placeholder-shown) + label { top: .95em; font-size: .64em; letter-spacing: .08em; text-transform: uppercase; color: var(--n-accent); font-weight: 650; }
@media (min-width: 761px) {
  .n-float .n-inp { border: 0; border-bottom: 1px solid var(--n-line-2); border-radius: 0; background: transparent; padding-left: 0; }
  .n-float .n-inp:focus { box-shadow: 0 1px 0 var(--n-accent); }
  .n-float > label { left: 0; }
}
/* input group: Leading icon */
.n-ig { display: flex; width: 100%; border: 1px solid var(--n-line-2); border-radius: min(var(--n-r), 14px); background: var(--n-white); overflow: hidden; align-items: stretch; transition: border-color .15s, box-shadow .15s; }
.n-ig:focus-within { border-color: var(--n-accent); box-shadow: 0 0 0 3px var(--n-accent-soft); }
.n-ig input, .n-ig select { flex: 1; min-width: 0; border: 0; background: none; padding: 0 .85em; height: calc(2.8em * var(--n-sp) + .4em); outline: none; font-size: .95em; }
.n-ig .ico { display: flex; align-items: center; padding-left: .9em; color: var(--n-muted); }
/* chips (checkboxes and radios on both devices) */
/* A chip's words and a settings row's hint are read (a status, a category, what a switch does), so
   they take --n-dim (5:1), not --n-muted (review 3.10's use-6). */
.n-chip { display: inline-flex; align-items: center; gap: .4em; height: 2.3em; padding: 0 .95em; border-radius: 20px; border: 1px solid var(--n-line-2); background: var(--n-white); color: var(--n-dim); font-size: .86em; cursor: pointer; user-select: none; }
.n-chip:hover { border-color: var(--n-accent-line); }
.n-chip.is-on, .n-chip[aria-pressed="true"], .n-chip:has(input:checked) { background: var(--n-accent-soft); border-color: var(--n-accent-line); color: var(--n-accent-deep); }
.n-chip input { position: absolute; opacity: 0; pointer-events: none; }
.n-chip:has(input:focus-visible) { outline: 2px solid var(--n-accent); outline-offset: 2px; }
.n-chips { display: flex; flex-wrap: wrap; gap: .4em; }
/* radio cards (computer) */
.n-ccard { display: flex; gap: .75em; align-items: flex-start; border: 1px solid var(--n-line-2); border-radius: min(var(--n-r-lg), 16px); background: var(--n-white); padding: .8em .9em; cursor: pointer; transition: .15s; width: 100%; }
.n-ccard:has(input:checked) { border-color: var(--n-accent); background: var(--n-accent-soft); box-shadow: 0 0 0 1px var(--n-accent); }
.n-ccard .t { color: var(--n-head); font-weight: 600; display: block; }
.n-ccard .s { font-size: .86em; color: var(--n-muted); }
.n-ccard input { margin-top: .2em; accent-color: var(--n-accent); }
/* switches: Small (computer), Square (phone); settings rows */
.n-sw { display: inline-flex; align-items: center; gap: .6em; font-size: .92em; color: var(--n-body); cursor: pointer; }
.n-sw input { appearance: none; -webkit-appearance: none; width: 2.3em; height: 1.35em; border-radius: 20px; background: var(--n-line-2); position: relative; margin: 0; transition: .2s; flex: none; cursor: pointer; }
.n-sw input::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--n-white); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: .2s; }
.n-sw input:checked { background: var(--n-accent); }
.n-sw input:checked::after { left: calc(100% - 1.2em); }
@media (max-width: 760px) { .n-sw input { border-radius: 4px; width: 2.6em; height: 1.5em; } .n-sw input::after { border-radius: 3px; width: 1.2em; height: 1.2em; } .n-sw input:checked::after { left: calc(100% - 1.35em); } }
/* On a touch screen, what a pop-up asks to be tapped is at least 44 px (the house rule;
   review 3.10's t-client-b-5 measured the booking editor's chips at 26, its small buttons
   at 22 and its switches at 31 x 18): its chips, its buttons (the Close ×, the small and
   tiny ones and the round icon ones too) and a switch, whose box keeps its look while a
   see-through ::before takes the taps around it (its ::after is the knob). Only inside
   pop-ups (.n-lyr), so the map's filter chips, toolbars and tab rows elsewhere stay as
   they are; and only for a coarse pointer, so computers are unchanged. */
@media (pointer: coarse) {
  .n-lyr .n-chip { min-height: 44px; }
  .n-lyr .n-b:not(.link) { min-height: 44px; }
  .n-lyr .n-b.ic { min-width: 44px; }
  .n-lyr .n-x { width: 44px; height: 44px; top: 11px; right: 11px; }
  .n-lyr .n-sw input::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
}
.n-setrow { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .7em 0; border-bottom: 1px solid var(--n-line); width: 100%; }
.n-setrow:last-child { border-bottom: 0; }
.n-setrow b { display: block; color: var(--n-head); font-weight: 550; }
.n-setrow small { color: var(--n-dim); font-size: .86em; }
/* mega options: Plan tiles (computer) / Multi-select tiles (phone) */
.n-mega { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: .6em; width: 100%; }
.n-mega label { border: 1px solid var(--n-line-2); border-radius: min(var(--n-r-lg), 18px); background: var(--n-white); padding: .9em; cursor: pointer; display: flex; flex-direction: column; gap: .3em; font-size: .92em; transition: .15s; position: relative; }
.n-mega input { position: absolute; opacity: 0; }
.n-mega label:has(input:checked) { border-color: var(--n-accent); box-shadow: 0 0 0 1px var(--n-accent); background: var(--n-accent-soft); }
.n-mega label:has(input:focus-visible) { outline: 2px solid var(--n-accent); outline-offset: 2px; }
.n-mega .mi { width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--n-accent-soft); color: var(--n-accent); display: grid; place-items: center; }
.n-mega label:has(input:checked) .mi { background: var(--n-accent); color: var(--n-accent-ink); }
.n-mega b { color: var(--n-head); font-weight: 600; }
.n-mega .price { font-family: var(--n-display); font-size: 1.65em; color: var(--n-head); letter-spacing: -.03em; line-height: 1.1; }
.n-mega .muted { color: var(--n-muted); font-size: .9em; }
@media (max-width: 760px) { .n-mega { grid-template-columns: 1fr 1fr; } }
/* tags (searchable select) */
.n-tagin { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; min-height: calc(2.8em * var(--n-sp) + .4em); border: 1px solid var(--n-line-2); border-radius: min(var(--n-r), 16px); background: var(--n-white); padding: .35em .55em; width: 100%; position: relative; }
.n-tagin:focus-within { border-color: var(--n-accent); box-shadow: 0 0 0 3px var(--n-accent-soft); }
.n-tagin .tg { display: inline-flex; align-items: center; gap: .3em; background: var(--n-accent-soft); border: 1px solid var(--n-accent-line); color: var(--n-accent-deep); border-radius: 20px; padding: .12em .3em .12em .7em; font-size: .9em; }
.n-tagin .tg button { border: 0; background: none; color: inherit; padding: 0 .25em; opacity: .7; cursor: pointer; }
.n-tagin input { border: 0; outline: none; background: none; flex: 1; min-width: 7em; height: 2em; font-size: .95em; }
/* typeahead: Dropdown list */
/* A card clips what spills out of it, which cut a search box's list short below the box. */
.n-cd:has(.n-opts) { overflow: visible; }
.n-opts { position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 4px); background: var(--n-paper); border: 1px solid var(--n-line); border-radius: min(var(--n-r), 14px); box-shadow: var(--n-shadow-menu); padding: .3em; font-size: .92em; max-height: 15em; overflow: auto; animation: n-rise .15s; }
.n-opts button { display: flex; gap: .5em; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: .5em .6em; border-radius: 8px; color: var(--n-body); cursor: pointer; }
.n-opts button:hover, .n-opts button.act { background: var(--n-accent-soft); color: var(--n-accent-deep); }
.n-opts mark { background: none; color: var(--n-accent); font-weight: 650; }
.n-opts small { margin-left: auto; color: var(--n-faint); }
/* time slots, words, presets */
.n-timeslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6em, 1fr)); gap: .35em; width: 100%; }
.n-timeslots button { height: 2.4em; border: 1px solid var(--n-line-2); border-radius: min(var(--n-r), 12px); background: var(--n-white); font-size: .84em; color: var(--n-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.n-timeslots button.on { background: var(--n-accent); color: var(--n-accent-ink); border-color: var(--n-accent); }
/* dual-handle slider: Stepped; range: Thin track */
.n-rng { -webkit-appearance: none; appearance: none; width: 100%; height: 1.4em; background: transparent; margin: 0; }
.n-rng::-webkit-slider-runnable-track { height: .3em; border-radius: 20px; background: linear-gradient(90deg, var(--n-accent) var(--v, 50%), var(--n-line-2) var(--v, 50%)); }
.n-rng::-moz-range-track { height: .3em; border-radius: 20px; background: var(--n-line-2); }
.n-rng::-moz-range-progress { height: .3em; border-radius: 20px; background: var(--n-accent); }
.n-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--n-white); border: 2px solid var(--n-accent); margin-top: -.45em; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.n-rng::-moz-range-thumb { width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--n-white); border: 2px solid var(--n-accent); }
.n-dual { position: relative; height: 1.4em; width: 100%; }
.n-dual input { position: absolute; inset: 0; pointer-events: none; }
.n-dual input::-webkit-slider-thumb { pointer-events: auto; }
.n-dual input::-moz-range-thumb { pointer-events: auto; }
.n-dual input::-webkit-slider-runnable-track { background: transparent; }
.n-dual input::-moz-range-track { background: transparent; }
.n-dual input::-moz-range-progress { background: transparent; }
.n-dual .trk { position: absolute; left: 0; right: 0; top: 50%; height: .3em; transform: translateY(-50%); border-radius: 20px; background: var(--n-line-2); }
.n-dual .fill { position: absolute; top: 50%; height: .3em; transform: translateY(-50%); background: var(--n-accent); border-radius: 20px; }
.n-ticks { display: flex; justify-content: space-between; font-size: .7em; color: var(--n-faint); margin-top: .2em; padding: 0 .3em; }
/* editors: Quill Snow */
.n-ed { width: 100%; border: 1px solid var(--n-line-2); border-radius: min(var(--n-r), 14px); background: var(--n-white); overflow: hidden; }
.n-ed .tb { display: flex; flex-wrap: wrap; gap: .1em; padding: .35em; border-bottom: 1px solid var(--n-line); background: var(--n-well); align-items: center; }
.n-ed .tb button { border: 0; background: none; width: 2.1em; height: 2.1em; border-radius: 6px; color: var(--n-body); display: grid; place-items: center; cursor: pointer; }
.n-ed .tb button:hover, .n-ed .tb button.on { background: var(--n-accent-soft); color: var(--n-accent-deep); }
.n-ed .tb .sp { width: 1px; align-self: stretch; background: var(--n-line-2); margin: .3em .2em; }
.n-ed .tb select { border: 0; background: none; font-size: .9em; color: var(--n-body); padding: 0 .3em; height: 2.1em; }
.n-ed .area { padding: .9em 1em; min-height: 11em; outline: none; line-height: 1.6; color: var(--n-ink); font-size: .95em; }
.n-ed .area h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.35em; margin: 0 0 .3em; color: var(--n-head); }
.n-ed .area p { margin: 0 0 .7em; }
.n-ed .area ul, .n-ed .area ol { margin: 0 0 .7em; padding-left: 1.3em; }
.n-ed .area blockquote { border-left: 2px solid var(--n-accent-line); margin: .4em 0 .7em; padding-left: .8em; color: var(--n-dim); }
.n-ed .area a { color: var(--n-accent); }
.n-ed.rich { position: relative; overflow: visible; }
.n-ed.rich .tb { border-radius: min(var(--n-r), 14px) min(var(--n-r), 14px) 0 0; }
.n-ed.rich .tb button { font: 600 15px/1 Georgia, serif; }
.n-ed.rich .tb button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.n-ed.rich .tb button:disabled, .n-ed.rich .tb select:disabled { opacity: .45; cursor: default; }
.n-ed.rich .area { min-height: 8em; position: relative; }
.n-ed.rich.compact .area { min-height: 4.5em; }
/* The text-message editor: wording the site always adds sits greyed out above and
   below what's typed, inside the same box, because it can't be changed. */
.n-ed.simple .area { min-height: 4.5em; padding-top: .45em; padding-bottom: .45em; }
.n-ed.simple .area p { margin: 0 0 .35em; }
.n-ed .fx { padding: .55em 1em 0; color: var(--n-faint); font-size: .9em; line-height: 1.5; white-space: pre-wrap; user-select: none; cursor: not-allowed; }
.n-ed .fx-after { padding: 0 1em .6em; }
.n-ed .tb .tool { width: auto; padding: 0 .6em; gap: .35em; display: inline-flex; align-items: center; font: 600 .82em/1 var(--n-sans) !important; }
.n-ed .tb .tool svg { width: 15px; height: 15px; }
.n-ed.rich .area:focus { box-shadow: inset 0 0 0 2px var(--n-accent-soft); }
.n-ed.rich.empty .area::before { content: attr(data-placeholder); color: var(--n-faint); pointer-events: none; position: absolute; }
.n-ed.rich .area h2 { font-family: var(--n-display); font-weight: 400; font-size: 1.45em; margin: 0 0 .35em; color: var(--n-head); }
.n-ed.rich.over { border-color: var(--n-rose-line); }
.n-ed.rich.ro { border-style: dashed; }
.n-ed.rich.ro .area { background: var(--n-well); }
.n-ed .ed-link { position: absolute; z-index: 5; display: flex; gap: 6px; align-items: center; background: var(--n-white); border: 1px solid var(--n-line); border-radius: 10px; box-shadow: var(--n-shadow-menu); padding: 6px 8px; font-size: 13px; color: var(--n-muted); }
.n-ed .ed-link input { border: 1px solid var(--n-line); border-radius: 7px; padding: 5px 8px; min-width: 200px; font-size: 14px; }
.n-ed .ed-link button { border: 0; background: none; color: var(--n-accent); font-weight: 650; cursor: pointer; padding: 4px 6px; }
.n-ed .ed-link button.rm { color: var(--n-rose); }
@media (max-width: 700px) { .n-ed .ed-link { left: 8px !important; right: 8px; } .n-ed .ed-link input { min-width: 0; flex: 1; } }
.n-ed .area .ph { display: inline-block; padding: 0 .35em; border-radius: 5px; background: var(--n-accent-soft); color: var(--n-accent-deep); font-family: var(--n-mono); font-size: .88em; }
/* Hidden means hidden inside an editor, whatever its own display says (.ed-link and .tb
   are flex): pages without a global [hidden] rule, like the app-kit ones, rely on this. */
.n-ed [hidden] { display: none !important; }
/* validate's message for a problem field: read through aria-describedby, never shown. */
.n-vmsg[hidden] { display: none !important; }

/* The quiet toolbar (editor's `quiet`). On computers: one slim row that stays at the top of
   the screen (below the site's menu when that sits at the top) and scrolls sideways rather
   than wrapping. Phones show their own buttons (.ph) and computers theirs (.pc). */
.n-ed.quiet .tb { position: sticky; top: var(--n-ed-top, 0px); z-index: 4; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: .2em .3em; gap: .05em; }
html.ijs-dock-top .n-ed.quiet .tb { --n-ed-top: calc(var(--ijs-dock-height, 32px) + 18px); }
.n-ed.quiet .tb > * { flex: none; }
.n-ed.quiet .tb button { width: 2em; height: 2em; }
.n-ed.quiet .tb .ph { display: none; }
/* Phones: no bar until words are chosen, then big buttons docked above the keyboard
   (--n-kb, from visualViewport) or, with no keyboard, above the bottom edge of the screen. */
@media (max-width: 760px) {
  .n-ed.quiet .tb { display: none; }
  .n-ed.quiet.has-sel .tb {
    display: flex; position: fixed; z-index: 2150; left: 0; right: 0; top: auto; bottom: var(--n-kb, 0px);
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 2px; border: 0; border-top: 1px solid var(--n-line); border-radius: 0;
    padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: var(--n-white); box-shadow: 0 -6px 18px rgba(27, 35, 27, .1);
  }
  .n-ed.quiet.has-sel.kb .tb { padding-bottom: 4px; }
  /* Centred while the buttons fit, and scrolled sideways from the first when they don't
     (centring them would cut the first off the left-hand edge, out of reach). */
  .n-ed.quiet.has-sel .tb::before, .n-ed.quiet.has-sel .tb::after { content: ""; margin: auto; }
  .n-ed.quiet.has-sel .tb::-webkit-scrollbar { display: none; }
  /* More buttons past an edge: the bar fades out there (more-l, more-r, set as it scrolls).
     The fade hides the bar's shadow, so its top line is drawn a little darker instead. */
  .n-ed.quiet.has-sel .tb.more-l, .n-ed.quiet.has-sel .tb.more-r { border-top-color: var(--n-line-2); }
  .n-ed.quiet.has-sel .tb.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .n-ed.quiet.has-sel .tb.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
  .n-ed.quiet.has-sel .tb.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .n-ed.quiet .tb .pc { display: none; }
  .n-ed.quiet .tb .ph { display: grid; }
  .n-ed.quiet .tb button { width: 44px; height: 44px; border-radius: 10px; }
}

/* Checklists (editor's `checklists`, and read-only .n-rich text): an item is
   <li data-check=""> in a <ul>, ticked with data-done="". The box is drawn in the item's
   left padding, which is also where a tap ticks it; screen readers hear "Not done" or
   "Done" in place of the box. */
.n-ed .area li[data-check], .n-rich li[data-check] { list-style: none; position: relative; margin-left: -1.3em; padding-left: 1.85em; }
.n-ed .area li[data-check]::before, .n-rich li[data-check]::before {
  content: "☐" / "Not done, "; position: absolute; left: .25em; top: .28em; width: 1.05em; height: 1.05em; box-sizing: border-box;
  border: 1.5px solid var(--n-line-2); border-radius: 4px; background: var(--n-white); color: transparent; overflow: hidden; font-size: 1em; line-height: 1;
}
.n-ed .area li[data-check]::before { cursor: pointer; }
.n-ed .area li[data-check][data-done]::before, .n-rich li[data-check][data-done]::before { content: "☑" / "Done, "; background: var(--n-accent); border-color: var(--n-accent); }
.n-ed .area li[data-check][data-done]::after, .n-rich li[data-check][data-done]::after {
  content: ""; position: absolute; left: calc(.25em + .37em); top: calc(.28em + .18em); width: .28em; height: .52em;
  border: solid var(--n-accent-ink, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none;
}
.n-ed .area li[data-check][data-done], .n-rich li[data-check][data-done] { color: var(--n-dim); text-decoration: line-through; text-decoration-color: var(--n-line-2); }
/* Words taken out of a ticked item (Backspace at its start, the Checklist button, Enter on
   an empty one) come with Chrome's copy of its look: a span with a style, or font and
   strike. None of that is saved, so they look as they'll be saved: plain. Inside a ticked
   item the item's own line and colour still show. */
.n-ed.checks .area [style]:not(img):not(code):not(pre), .n-ed.checks .area font, .n-ed.checks .area strike {
  color: inherit !important; font-family: inherit !important; font-size: inherit !important; text-decoration-line: none !important; background-color: transparent !important;
}
/* On a touch screen the box's hit area (the padding) is at least 32 x 32. */
@media (pointer: coarse) {
  .n-ed .area li[data-check] { padding-left: 34px; min-height: 32px; }
  .n-ed .area li[data-check]::before { left: 7px; top: calc(.8em - 10px); width: 20px; height: 20px; }
  .n-ed .area li[data-check][data-done]::after { left: 14px; top: calc(.8em - 7px); width: 6px; height: 11px; }
}

/* The Journal's extras (editor's `extras`, and read-only .n-rich text;
   docs/journal-phase-a-extras-spec.md E1.9). A code block keeps its lines and indents and
   wraps a long line rather than widening the page; screen readers hear "Code" before it and
   "Note" before a callout. In the editor Chrome copies the look around it onto what it puts
   in (a style on the <code> the backtick shortcut makes, and on the words typed next), so
   the editor's code and code blocks win over any style written on them: they look as
   they'll be saved. */
.n-ed .area pre, .n-rich pre {
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; font-family: var(--n-mono); font-size: .9em; line-height: 1.55;
  background: var(--n-well); color: var(--n-ink); border: 1px solid var(--n-line); border-radius: 8px; padding: .6em .8em; margin: 0 0 .7em;
}
.n-ed .area pre::before, .n-rich pre::before { content: "" / "Code: "; }
.n-ed .area code, .n-rich code { font-family: var(--n-mono); font-size: .88em; background: var(--n-well); color: var(--n-ink); border-radius: 5px; padding: .05em .35em; }
.n-ed .area pre, .n-ed .area code { font-family: var(--n-mono) !important; background-color: var(--n-well) !important; color: var(--n-ink) !important; }
.n-ed .area pre { font-size: .9em !important; }
.n-ed .area code { font-size: .88em !important; }
.n-ed .area pre * { font: inherit !important; color: inherit !important; text-decoration: none !important; background: none !important; }
.n-ed .area blockquote[data-callout], .n-rich blockquote[data-callout] {
  border-left: 3px solid var(--n-accent); background: var(--n-accent-soft); color: var(--n-ink); padding: .5em .8em; border-radius: 0 8px 8px 0; margin: 0 0 .7em;
}
.n-ed .area blockquote[data-callout]::before, .n-rich blockquote[data-callout]::before { content: "" / "Note: "; }
.n-ed .area blockquote[data-callout] > :last-child, .n-rich blockquote[data-callout] > :last-child { margin-bottom: 0; }
/* A collapsible section: a box with its title in bold and an arrow that points down when it's open.
   Shown read-only it opens and closes; in the editor it stays open, and its title is written
   in like any line. */
.n-ed .area details, .n-rich details { border: 1px solid var(--n-line); border-radius: 8px; padding: .4em .8em; margin: 0 0 .7em; }
.n-ed .area summary, .n-rich summary { list-style: none; font-weight: 600; color: var(--n-head); cursor: pointer; }
.n-ed .area summary::-webkit-details-marker, .n-rich summary::-webkit-details-marker { display: none; }
.n-ed .area summary::before, .n-rich summary::before { content: "▸" / ""; display: inline-block; width: 1.1em; color: var(--n-muted); }
.n-ed .area details[open] > summary::before, .n-rich details[open] > summary::before { content: "▾" / ""; }
.n-ed .area details[open] > summary, .n-rich details[open] > summary { margin-bottom: .35em; }
.n-ed .area details > :last-child, .n-rich details > :last-child { margin-bottom: 0; }
.n-ed .area summary { cursor: text; }
/* An empty title asks for one: a section without one isn't kept when it's saved. (Placed
   over the title's line, beside the arrow: after the title's <br> it would sit on a line below.)
   Which titles are empty is the editor's own style sheet (hintTitles), which gives the words;
   this is only how they look. */
.n-ed .area summary::after { position: absolute; left: 1.1em; top: 0; color: var(--n-faint); font-weight: 400; pointer-events: none; }
.n-rich summary:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 2px; border-radius: 4px; }
/* Shown read-only, a title is the control that opens its section: big enough to tap. */
.n-rich summary { min-height: 24px; padding: 2px 0; box-sizing: border-box; }
@media (max-width: 760px) { .n-rich summary { min-height: 44px; padding: 11px 0; } }
@media (max-width: 760px) {
  .n-rich pre { font-size: .85em; }
  .n-ed .area pre { font-size: .85em !important; }
}

/* Rich text shown read-only (others' Journal entries, On this day). */
.n-rich { line-height: 1.6; overflow-wrap: anywhere; }
.n-rich > :first-child { margin-top: 0; }
.n-rich > :last-child { margin-bottom: 0; }
.n-rich p { margin: 0 0 .7em; }
.n-rich h2 { font-family: var(--n-display); font-weight: 400; font-size: 1.4em; line-height: 1.25; margin: .5em 0 .3em; color: var(--n-head); }
.n-rich h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.2em; line-height: 1.3; margin: .5em 0 .3em; color: var(--n-head); }
.n-rich ul, .n-rich ol { margin: 0 0 .7em; padding-left: 1.3em; }
.n-rich blockquote { border-left: 2px solid var(--n-accent-line); margin: .4em 0 .7em; padding-left: .8em; color: var(--n-muted); }
.n-rich a { color: var(--n-accent); }
/* markdown side by side */
.n-md { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--n-line-2); border-radius: min(var(--n-r), 14px); overflow: hidden; width: 100%; background: var(--n-white); }
.n-md textarea { border: 0; border-right: 1px solid var(--n-line); resize: vertical; padding: .8em; font-family: var(--n-mono); font-size: .88em; min-height: 12em; outline: none; background: var(--n-well); color: var(--n-ink); }
.n-md .out { padding: .8em .9em; line-height: 1.55; overflow: auto; font-size: .95em; }
.n-md .out h2, .n-md .out h3, .n-mdout h2, .n-mdout h3 { font-family: var(--n-display); font-weight: 400; font-size: 1.3em; margin: 0 0 .35em; color: var(--n-head); }
.n-md .out p, .n-mdout p { margin: 0 0 .55em; }
.n-md .out ul, .n-md .out ol, .n-mdout ul, .n-mdout ol { margin: 0 0 .55em; padding-left: 1.3em; }
@media (max-width: 760px) { .n-md { grid-template-columns: 1fr; } .n-md textarea { border-right: 0; border-bottom: 1px solid var(--n-line); } }
/* layouts: Grid + Two columns (computer), View then edit (phone); Split action bar; Floating pill */
.n-fgrid { display: grid; gap: 1em 1.2em; width: 100%; grid-template-columns: 1fr 1fr; }
.n-fgrid .span { grid-column: 1 / -1; }
@media (max-width: 760px) { .n-fgrid { grid-template-columns: 1fr; } }
.n-abar { display: flex; gap: .5em; align-items: center; width: 100%; padding-top: .9em; border-top: 1px solid var(--n-line); margin-top: .9em; flex-wrap: wrap; }
.n-abar.split { justify-content: space-between; }
.n-abar.r { justify-content: flex-end; }
.n-abar .n-row { margin-left: auto; }
.n-float-bar { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin: 1em auto 0; width: max-content; max-width: 100%; display: flex; gap: .45em; align-items: center; padding: .4em .4em .4em 1em; border-radius: 999px; background: var(--n-head); color: var(--n-cream); font-size: .86em; box-shadow: var(--n-shadow-pop); z-index: 20; }
.n-float-bar .n-b { height: 2.3em; }
.n-float-bar .n-b:not(.solid) { background: transparent; color: var(--n-cream); border-color: rgba(255,255,255,.25); box-shadow: none; }
.n-view > * { display: flex; align-items: center; gap: .7em; }
.n-view .k { width: 6.5em; flex: none; font-size: .86em; color: var(--n-muted); }
/* uploads: Dashed area (computer) / Dashboard panel (phone) */
.n-drop { display: flex; flex-direction: column; align-items: center; gap: .4em; width: 100%; border: 1.5px dashed var(--n-line-2); border-radius: min(var(--n-r-lg), 18px); padding: 1.4em 1em; text-align: center; background: var(--n-white); cursor: pointer; transition: .15s; font-size: .9em; color: var(--n-muted); }
.n-drop .ui { width: 2.7em; height: 2.7em; border-radius: 50%; background: var(--n-accent-soft); color: var(--n-accent); display: grid; place-items: center; }
.n-drop b { color: var(--n-head); font-weight: 550; }
.n-drop.over { border-color: var(--n-accent); background: var(--n-accent-soft); }
.n-drop input { display: none; }
.n-upanel { width: 100%; border: 1px solid var(--n-line); border-radius: var(--n-r-lg); background: var(--n-paper); box-shadow: var(--n-shadow-card); overflow: hidden; }
.n-upanel header { display: flex; justify-content: space-between; align-items: center; padding: .7em .9em; border-bottom: 1px solid var(--n-line); }
.n-upanel header b { font-family: var(--n-display); font-weight: 400; font-size: 1.15em; color: var(--n-head); }
.n-upanel .src { display: flex; gap: .4em; padding: .9em; flex-wrap: wrap; }
.n-upanel .src label, .n-upanel .src button { display: flex; flex-direction: column; align-items: center; gap: .25em; border: 1px solid var(--n-line); border-radius: 14px; background: var(--n-white); padding: .6em .7em; font-size: .86em; color: var(--n-body); cursor: pointer; flex: 1; }
.n-upanel .src input { display: none; }
.n-upanel .src svg { color: var(--n-accent); }
.n-upanel footer { display: flex; justify-content: space-between; align-items: center; padding: .6em .9em; border-top: 1px solid var(--n-line); font-size: .86em; color: var(--n-muted); }

/* ---------- wizard: Numbered steps + Accordion (computer); Apex numbered circles in a pop-up (phone) ---------- */
.n-wz-steps { display: flex; align-items: center; gap: .45em; margin-bottom: 1em; font-size: .86em; }
.n-wz-steps .st { display: flex; align-items: center; gap: .45em; color: var(--n-faint); white-space: nowrap; }
.n-wz-steps .num { width: 1.9em; height: 1.9em; border-radius: 50%; border: 1.5px solid var(--n-line-2); display: grid; place-items: center; font-weight: 600; background: var(--n-white); flex: none; }
.n-wz-steps .st.on { color: var(--n-head); } .n-wz-steps .st.on .num { border-color: var(--n-accent); color: var(--n-accent); }
.n-wz-steps .st.done .num { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-accent-ink); }
.n-wz-steps .ln { flex: 1; height: 1px; background: var(--n-line-2); min-width: .8em; }
.n-wz-steps .ln.done { background: var(--n-accent); }
.n-wz-steps.below { align-items: flex-start; font-size: .78em; }
.n-wz-steps.below .st { flex-direction: column; gap: .3em; text-align: center; }
.n-wz-steps.below .ln { margin-top: .95em; }
.n-wz-steps.below .st.on .num { background: var(--n-accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--n-accent-soft) 60%, transparent); }
.n-wz-card { border: 1px solid var(--n-line); border-radius: var(--n-r-lg); background: var(--n-white); padding: 1em; box-shadow: var(--n-shadow-card); }
.n-wz-pane { display: none; flex-direction: column; gap: 1em; }
.n-wz-pane.on { display: flex; animation: n-rise .25s; }
.n-wzacc > details { border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 16px); background: var(--n-white); margin-bottom: .55em; box-shadow: var(--n-shadow-card); }
.n-wzacc > details[open] { border-color: var(--n-accent-line); }
.n-wzacc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7em; padding: .85em 1em; font-size: 1em; color: var(--n-head); font-weight: 600; }
.n-wzacc summary::-webkit-details-marker { display: none; }
.n-wzacc summary .sum { margin-left: auto; font-weight: 400; font-size: .86em; color: var(--n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.n-wzacc .num { width: 1.8em; height: 1.8em; border-radius: 50%; border: 1.5px solid var(--n-line-2); display: grid; place-items: center; font-size: .82em; flex: none; }
.n-wzacc details[open] .num { border-color: var(--n-accent); color: var(--n-accent); }
.n-wzacc details.done .num { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-accent-ink); }
.n-wzacc .bd2 { padding: .2em 1em 1em; display: flex; flex-direction: column; gap: 1em; }
.n-coachbar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; align-items: center; gap: .8em; background: var(--n-paper); color: var(--n-body); border: 1px solid var(--n-line); box-shadow: var(--n-shadow-menu); border-radius: 999px; padding: .5em .5em .5em 1.1em; font-size: .9em; margin-top: .8em; }
.n-coachbar .n-bar { width: 7em; flex: none; }
.n-coachbar .acts { margin-left: auto; display: flex; gap: .4em; }
.n-vsum { display: flex; gap: .6em; align-items: flex-start; background: var(--n-rose-soft); border: 1px solid var(--n-rose-line); color: var(--n-body); padding: .7em .85em; border-radius: min(var(--n-r), 14px); font-size: .88em; margin-bottom: .6em; }
.n-vsum ul { margin: .2em 0 0; padding-left: 1.1em; }
.n-vsum svg { color: var(--n-rose); }
.n-shake { animation: n-shake .4s; }
@keyframes n-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- header bar: DashboardPack style ---------- */
.n-hb { display: flex; align-items: center; gap: .4em; padding: .5em .7em; background: var(--n-paper); border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 18px); width: 100%; min-width: 0; box-shadow: var(--n-shadow-card); }
.n-hb .gr { flex: 1; min-width: 0; }
.n-hb .ib { width: 2.5em; height: 2.5em; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--n-body); position: relative; flex: none; cursor: pointer; }
.n-hb .ib:hover, .n-hb .ib[aria-expanded="true"] { background: var(--n-well); }
.n-hb .who0 { width: 2.3em; height: 2.3em; border-radius: 50%; border: 0; background: var(--n-accent-soft); color: var(--n-accent-deep); font-weight: 650; font-size: .82em; cursor: pointer; }
.n-cntb { position: absolute; top: .05em; right: .05em; min-width: 1.4em; height: 1.4em; padding: 0 .3em; border-radius: 20px; background: var(--n-accent); color: var(--n-accent-ink); font-size: .62em; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--n-paper); }
.n-npanel { width: min(22em, 90vw); padding: 0; overflow: hidden; }
.n-npanel header { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .7em .85em; border-bottom: 1px solid var(--n-line); }
.n-npanel header b { color: var(--n-head); font-weight: 600; }
.n-npanel .it { display: flex; gap: .6em; padding: .65em .85em; border-bottom: 1px solid var(--n-line); position: relative; align-items: flex-start; width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; color: var(--n-body); border-radius: 0; }
.n-npanel .it.un { background: color-mix(in srgb, var(--n-accent-soft) 60%, transparent); }
.n-npanel .it .tl0 { width: 2.1em; height: 2.1em; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--n-accent-soft); color: var(--n-accent); }
.n-npanel .it b { display: block; color: var(--n-head); font-weight: 600; }
.n-npanel .it .ds { display: block; color: var(--n-muted); font-size: .92em; }
.n-npanel .it .tm0 { display: block; font-size: .85em; color: var(--n-faint); margin-top: .1em; }
.n-npanel .it .acts { display: flex; gap: .35em; margin-top: .45em; }
.n-npanel footer { text-align: center; padding: .6em; }
.n-npanel .none { padding: 1.2em; text-align: center; color: var(--n-muted); }
.n-pmenu .who { display: flex; gap: .6em; align-items: center; padding: .5em .65em .7em; border-bottom: 1px solid var(--n-line); margin-bottom: .3em; }
.n-pmenu .who b { display: block; color: var(--n-head); } .n-pmenu .who small { color: var(--n-muted); }
.n-pmenu .stat0 { width: .6em; height: .6em; border-radius: 50%; background: #4f9a5c; flex: none; }
.n-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; width: 100%; min-width: 16em; }
.n-apps a { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .75em .3em; border-radius: 12px; color: var(--n-body); text-decoration: none; font-size: .9em; }
.n-apps a:hover { background: var(--n-accent-soft); }
.n-apps .ai { width: 2.6em; height: 2.6em; border-radius: 12px; display: grid; place-items: center; background: var(--n-accent-soft); color: var(--n-accent); }
.n-apps .ai.r { background: var(--n-rose-soft); color: var(--n-rose); } .n-apps .ai.o { background: var(--n-ochre-soft); color: var(--n-ochre); } .n-apps .ai.s { background: var(--n-sky-soft); color: var(--n-sky); }
/* command palette: Grouped results */
.n-cp { width: 100%; background: var(--n-paper); overflow: hidden; }
.n-cp .q { display: flex; align-items: center; gap: .6em; padding: .85em 1em; border-bottom: 1px solid var(--n-line); color: var(--n-muted); }
.n-cp .q input { border: 0; outline: none; background: none; flex: 1; min-width: 0; font-size: 1.05em; color: var(--n-ink); }
.n-cp .list { max-height: min(55vh, 420px); overflow: auto; padding: .3em 0; }
.n-cp .g0 { font-size: .68em; letter-spacing: .13em; text-transform: uppercase; font-weight: 680; color: var(--n-faint); padding: .6em 1em .2em; }
.n-cp .cpi { display: flex; align-items: center; gap: .6em; padding: .55em 1em; color: var(--n-body); cursor: pointer; width: 100%; border: 0; background: none; text-align: left; font-size: .95em; }
.n-cp .cpi:hover, .n-cp .cpi.act { background: var(--n-accent-soft); color: var(--n-accent-deep); }
.n-cp .cpi small { margin-left: auto; color: var(--n-faint); }
.n-cp .ftr { display: flex; gap: 1em; padding: .55em 1em; border-top: 1px solid var(--n-line); font-size: .8em; color: var(--n-faint); }
.n-kbd { font-family: var(--n-mono); font-size: .76em; padding: .15em .45em; border: 1px solid var(--n-line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--n-white); color: var(--n-body); }

/* ---------- data table: Row actions menu; toolbar: Filter chips ---------- */
.n-tw { width: 100%; border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 18px); background: var(--n-white); box-shadow: var(--n-shadow-card); }
.n-tw.scroll { overflow-x: auto; }
table.n-dt { width: 100%; border-collapse: collapse; font-size: .9em; }
table.n-dt th { text-align: left; font-weight: 600; color: var(--n-muted); padding: .7em .85em; border-bottom: 1px solid var(--n-line); white-space: nowrap; font-size: .86em; }
table.n-dt th[data-sort] { cursor: pointer; user-select: none; }
table.n-dt th[data-sort]::after { content: " ↕"; color: var(--n-faint); }
table.n-dt th.asc::after { content: " ↑"; color: var(--n-accent); } table.n-dt th.desc::after { content: " ↓"; color: var(--n-accent); }
table.n-dt td { padding: .7em .85em; border-bottom: 1px solid var(--n-line); color: var(--n-body); vertical-align: middle; }
table.n-dt tr:last-child td { border-bottom: 0; }
table.n-dt .num { text-align: right; font-variant-numeric: tabular-nums; }
table.n-dt tbody tr { cursor: pointer; }
table.n-dt tbody tr:hover { background: var(--n-well); }
table.n-dt tbody tr.nohover { cursor: default; } table.n-dt tbody tr.nohover:hover { background: none; }
.n-who { display: flex; align-items: center; gap: .65em; min-width: 0; }
.n-who b { display: block; color: var(--n-head); font-weight: 600; }
.n-who small { display: block; color: var(--n-muted); }
.n-pill-s { display: inline-flex; padding: .1em .55em; border-radius: 5px; font-size: .86em; font-weight: 600; background: var(--n-accent); color: var(--n-accent-ink); white-space: nowrap; }
.n-pill-s.off { background: var(--n-well); color: var(--n-muted); border: 1px solid var(--n-line-2); }
.n-pill-s.warn { background: var(--n-ochre-soft); color: var(--n-ochre); border: 1px solid var(--n-ochre-line); }
.n-pill-s.bad { background: var(--n-rose-soft); color: var(--n-rose); border: 1px solid var(--n-rose-line); }
.n-tbar { display: flex; flex-wrap: wrap; gap: .45em; align-items: center; width: 100%; margin-bottom: .9em; }
.n-tbar .grow { flex: 1; min-width: 8em; }
.n-fchip { display: inline-flex; align-items: center; gap: .35em; height: 2.3em; padding: 0 .85em; border-radius: 20px; border: 1px dashed var(--n-line-2); background: var(--n-white); color: var(--n-muted); font-size: .86em; cursor: pointer; }
.n-fchip.on { border-style: solid; border-color: var(--n-accent-line); background: var(--n-accent-soft); color: var(--n-accent-deep); }
@media (max-width: 760px) {
  /* rows become stacked cards on phones, still with the row actions menu */
  table.n-dt.stack thead { display: none; }
  table.n-dt.stack, table.n-dt.stack tbody, table.n-dt.stack tr, table.n-dt.stack td { display: block; width: 100%; }
  table.n-dt.stack tr { position: relative; padding: .75em .9em; border-bottom: 1px solid var(--n-line); }
  table.n-dt.stack tr:last-child { border-bottom: 0; }
  table.n-dt.stack td { border: 0; padding: .15em 0; }
  table.n-dt.stack td[data-label]::before { content: attr(data-label) " · "; color: var(--n-faint); font-size: .86em; }
  table.n-dt.stack td.num { text-align: left; }
  table.n-dt.stack td.act { position: absolute; top: .6em; right: .6em; width: auto; padding: 0; }
  table.n-dt.stack td.hide-sm { display: none; }
}

/* ---------- headline numbers: KPI strip (computer) / This vs last (phone) ---------- */
.n-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); width: 100%; border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 18px); background: var(--n-white); box-shadow: var(--n-shadow-card); }
.n-kpis > div { padding: .85em 1em; border-right: 1px solid var(--n-line); min-width: 0; }
.n-kpis > div:last-child { border-right: 0; }
.n-kpis .lb { font-size: .84em; color: var(--n-muted); }
.n-kpis b { display: block; font-size: 1.6em; color: var(--n-head); font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -.02em; }
.n-kpi { width: 100%; border: 1px solid var(--n-line); border-radius: var(--n-r-lg); background: var(--n-white); padding: 1em 1.1em; box-shadow: var(--n-shadow-card); }
.n-kpi .lb { font-size: .84em; color: var(--n-muted); }
.n-kpi .vv { font-family: var(--n-display); font-size: 2.2em; color: var(--n-head); letter-spacing: -.04em; line-height: 1.05; margin: .1em 0; }
.n-kpi .dl { font-size: .84em; display: inline-flex; align-items: center; gap: .25em; padding: .15em .55em; border-radius: 20px; background: var(--n-accent-soft); color: var(--n-accent-deep); }
.n-kpi .dl.dn { background: var(--n-rose-soft); color: var(--n-rose); }
.n-only-phone { display: none !important; }
@media (max-width: 760px) { .n-only-phone { display: revert !important; } .n-only-computer { display: none !important; } }

/* ---------- activity feed: Timeline with avatars ---------- */
.n-feed { list-style: none; margin: 0; padding: 0; width: 100%; }
.n-feed li { display: flex; gap: .65em; padding: .55em 0; position: relative; }
.n-feed li .n-av { width: 2.1em; height: 2.1em; font-size: .74em; }
.n-feed li b { color: var(--n-head); font-weight: 600; }
.n-feed li small { display: block; color: var(--n-faint); }
.n-feed li:not(:last-child)::before { content: ""; position: absolute; left: 1.02em; top: 2.7em; bottom: -.1em; width: 1px; background: var(--n-line-2); }

/* ---------- hero: Centred; banner: Accent top bar (computer) / Floating card (phone) ---------- */
.n-hero { width: 100%; border-radius: var(--n-r-lg); overflow: hidden; position: relative; background: radial-gradient(120% 90% at 0% 0%, var(--n-accent-soft), transparent 60%), var(--n-paper); border: 1px solid var(--n-line); box-shadow: var(--n-shadow-card); }
.n-hero .in { padding: 1.8em 1.4em 1.6em; display: flex; flex-direction: column; gap: .55em; align-items: center; text-align: center; }
.n-hero h1 { font-size: 2.6em; }
.n-hero p { font-size: .95em; color: var(--n-muted); max-width: 46ch; margin: 0 auto; }
.n-pill0 { display: inline-flex; align-items: center; gap: .45em; font-size: .78em; padding: .25em .35em .25em .8em; border-radius: 999px; border: 1px solid var(--n-line-2); background: var(--n-white); color: var(--n-body); }
.n-pill0 b { background: var(--n-accent); color: var(--n-accent-ink); border-radius: 999px; padding: .12em .6em; font-weight: 600; order: -1; margin-left: -.55em; }
.n-banner { display: flex; align-items: center; gap: .7em; padding: .65em 1em; background: var(--n-accent); color: var(--n-accent-ink); border-radius: min(var(--n-r), 14px); font-size: .92em; margin-bottom: 1em; }
.n-banner b { font-weight: 650; }
.n-banner a, .n-banner button.go { color: inherit; margin-left: auto; display: inline-flex; align-items: center; gap: .2em; text-decoration: none; border: 0; background: none; font: inherit; cursor: pointer; }
.n-banner .x0 { border: 0; background: none; color: inherit; padding: .2em; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 760px) {
  .n-banner { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 70; background: var(--n-paper); color: var(--n-body); border: 1px solid var(--n-line); border-radius: var(--n-r-lg); box-shadow: var(--n-shadow-menu); flex-wrap: wrap; margin: 0; }
  .n-banner .ico0 { width: 2.2em; height: 2.2em; border-radius: 12px; background: var(--n-accent-soft); color: var(--n-accent); display: grid; place-items: center; flex: none; }
  .n-banner a, .n-banner button.go { color: var(--n-accent); font-weight: 600; }
}
@media (min-width: 761px) { .n-banner .ico0 { display: none; } }
/* footer: Centred */
.n-foot { width: 100%; font-size: .84em; color: var(--n-muted); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .7em; padding: 2em 1em 1.2em; }
.n-foot .links { display: flex; gap: 1.1em; flex-wrap: wrap; justify-content: center; }
.n-foot a, .n-foot button { color: var(--n-muted); text-decoration: none; border: 0; background: none; font: inherit; cursor: pointer; }
.n-foot a:hover, .n-foot button:hover { color: var(--n-accent); }

/* ---------- speed dial: Flower ---------- */
.n-sd { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(46px + env(safe-area-inset-bottom, 0px)); z-index: 80; width: 3.4em; height: 3.4em; font-size: 15px; }
.n-sd .main { position: relative; z-index: 2; width: 3.4em; height: 3.4em; border-radius: 50%; border: 0; background: var(--n-accent); color: var(--n-accent-ink); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(27,35,27,.25); cursor: pointer; }
.n-sd .main svg { width: 1.4em; height: 1.4em; transition: transform .25s; }
.n-sd.open .main svg { transform: rotate(45deg); }
.n-sd .items { position: absolute; inset: 0; }
.n-sd .it { position: absolute; left: .3em; top: .3em; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s; opacity: 0; pointer-events: none; }
.n-sd .it button { width: 2.8em; height: 2.8em; border-radius: 50%; border: 1px solid var(--n-line); background: var(--n-paper); color: var(--n-body); display: grid; place-items: center; box-shadow: var(--n-shadow-menu); cursor: pointer; }
.n-sd .it button:hover { color: var(--n-accent); border-color: var(--n-accent-line); }
.n-sd.open .it { opacity: 1; pointer-events: auto; }
.n-sd.open .it:nth-child(1) { transform: translate(0, -4.6em); }
.n-sd.open .it:nth-child(2) { transform: translate(-3.25em, -3.25em); }
.n-sd.open .it:nth-child(3) { transform: translate(-4.6em, 0); }
.n-sd.open .it:nth-child(4) { transform: translate(-4.25em, -5.9em); }
.n-sd.open .it:nth-child(5) { transform: translate(-6.4em, -2.5em); }

/* ---------- timeline across: Across, below only ---------- */
.n-tlh { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; padding: .2em 0; }
.n-tlh::-webkit-scrollbar { display: none; }
.n-tlh > div { flex: 1 0 7em; display: grid; grid-template-rows: auto auto; justify-items: center; text-align: center; gap: .45em; position: relative; }
.n-tlh > div::before { content: ""; position: absolute; top: .55em; left: 0; right: 0; height: 2px; background: var(--n-line-2); z-index: 0; }
.n-tlh > div:first-child::before { left: 50%; } .n-tlh > div:last-child::before { right: 50%; }
.n-tlh > div.done::before { background: var(--n-accent); }
.n-tlh .d { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--n-white); border: 2px solid var(--n-line-2); position: relative; z-index: 1; display: grid; place-items: center; color: var(--n-accent-ink); }
.n-tlh .done .d { background: var(--n-accent); border-color: var(--n-accent); }
.n-tlh .d svg { width: .8em; height: .8em; stroke-width: 3; }
.n-tlh .lb { font-size: .86em; color: var(--n-body); }
.n-tlh .lb small { display: block; color: var(--n-muted); font-size: .9em; }

/* ---------- chat: Clean ---------- */
.n-chat { display: flex; flex-direction: column; gap: .9em; width: 100%; }
.n-msg { display: flex; gap: .6em; align-items: flex-start; max-width: 100%; }
.n-msg .n-av { width: 2.1em; height: 2.1em; font-size: .72em; }
.n-msg .col { display: flex; flex-direction: column; gap: .15em; min-width: 0; flex: 1; }
.n-msg .meta { font-size: .8em; color: var(--n-faint); display: flex; gap: .5em; align-items: center; flex-wrap: wrap; }
.n-msg .meta b { color: var(--n-head); font-weight: 600; }
.n-msg .bub { color: var(--n-body); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.n-msg .ref { display: inline-flex; align-items: center; gap: .3em; font-size: .9em; color: var(--n-accent-deep); background: var(--n-accent-soft); border-radius: 20px; padding: 0 .55em; border: 0; cursor: pointer; }
.n-msg .del { margin-left: auto; opacity: 0; transition: opacity .15s; }
.n-msg:hover .del, .n-msg:focus-within .del { opacity: 1; }
@media (hover: none) { .n-msg .del { opacity: 1; } }
.n-compose { display: flex; gap: .5em; align-items: flex-end; width: 100%; border: 1px solid var(--n-line-2); border-radius: min(var(--n-r-lg), 22px); background: var(--n-white); padding: .45em .45em .45em .9em; }
.n-compose:focus-within { border-color: var(--n-accent); box-shadow: 0 0 0 3px var(--n-accent-soft); }
.n-compose textarea { flex: 1; min-width: 0; border: 0; outline: none; background: none; resize: none; min-height: 2.3em; max-height: 9em; padding: .45em 0; font-size: .95em; line-height: 1.4; }

/* ---------- tree: Indent guides ---------- */
.n-tree { width: 100%; }
.n-tree ul { list-style: none; margin: 0; padding-left: 1.1em; }
.n-tree > ul { padding-left: 0; }
.n-tree ul ul { border-left: 1px solid var(--n-line-2); margin-left: .6em; }
.n-tree summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4em; padding: .25em .35em; border-radius: 6px; color: var(--n-head); }
.n-tree summary::-webkit-details-marker { display: none; }
.n-tree summary .chev { transition: transform .15s; color: var(--n-faint); }
.n-tree details[open] > summary .chev { transform: rotate(90deg); }
.n-tree .leaf { display: flex; align-items: center; gap: .4em; padding: .25em .35em; border-radius: 6px; color: var(--n-body); width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.n-tree summary:hover, .n-tree .leaf:hover, .n-tree .leaf.on { background: var(--n-accent-soft); }
.n-tree .leaf.on { color: var(--n-accent-deep); font-weight: 600; }

/* ---------- polls ---------- */
.n-poll { display: flex; flex-direction: column; gap: .45em; }
.n-poll .opt { position: relative; display: flex; align-items: center; gap: .6em; border: 1px solid var(--n-line-2); border-radius: min(var(--n-r), 14px); background: var(--n-white); padding: .6em .85em; overflow: hidden; cursor: pointer; text-align: left; width: 100%; font: inherit; color: var(--n-body); }
.n-poll .opt .fill { position: absolute; inset: 0 auto 0 0; background: var(--n-accent-soft); z-index: 0; transition: width .4s; }
.n-poll .opt > *:not(.fill) { position: relative; z-index: 1; }
.n-poll .opt .pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--n-muted); font-size: .9em; }
.n-poll .opt.mine { border-color: var(--n-accent); box-shadow: 0 0 0 1px var(--n-accent); }
.n-poll .opt.mine .pct { color: var(--n-accent-deep); font-weight: 600; }
.n-poll .opt[disabled] { cursor: default; }

/* ---------- pop-ups: overlay, Form modal, Split image + form, sweet alerts, drawers, sheets ---------- */
#n-layer { position: fixed; inset: 0; z-index: 2147483000; display: none; }
#n-layer.open { display: block; }
.n-lyr { position: absolute; inset: 0; }
.n-veil { position: absolute; inset: 0; background: var(--n-veil); backdrop-filter: blur(var(--n-veil-blur)); -webkit-backdrop-filter: blur(var(--n-veil-blur)); animation: n-fadein .2s ease; }
.n-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px 16px; pointer-events: none; overflow: auto; }
.n-wrap > * { pointer-events: auto; }
.n-wrap.top { align-items: flex-start; padding-top: 8vh; }
.n-panel { background: var(--n-paper); color: var(--n-ink); border: 1px solid var(--n-line); border-radius: var(--n-r-lg); box-shadow: var(--n-shadow-pop); width: min(500px, 100%); max-height: calc(100% - 20px); overflow: auto; padding: calc(24px * var(--n-sp) + 4px); position: relative; font-family: var(--n-sans); font-size: var(--n-fs); line-height: 1.5; }
.n-panel.modal { animation: var(--n-pop-in); }
.n-panel.sm { width: min(400px, 100%); }
.n-panel.lg { width: min(760px, 100%); }
.n-panel.flush { padding: 0; }
.n-panel h2 { font-family: var(--n-display); font-weight: 400; color: var(--n-head); font-size: 2rem; letter-spacing: -.035em; line-height: 1.08; margin: 6px 0 14px; }
.n-panel h2 em { color: var(--n-accent); font-style: italic; }
.n-panel .n-eyebrow { padding-right: 40px; }
.n-panel .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.n-panel .foot.split { justify-content: space-between; }
.n-panel .msg { font-size: .88em; color: var(--n-rose); margin-top: .7em; min-height: 1em; }
.n-panel .msg.ok { color: var(--n-accent-deep); }
.n-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--n-line); background: var(--n-white); display: grid; place-items: center; color: var(--n-muted); cursor: pointer; z-index: 3; }
.n-x:hover { color: var(--n-head); border-color: var(--n-line-2); }
.n-panel.drawer { position: absolute; top: 0; bottom: 0; right: 0; width: min(420px, 94%); max-height: none; border-radius: var(--n-r-lg) 0 0 var(--n-r-lg); animation: n-fromright .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.n-panel.drawer.wide { width: min(560px, 94%); }
.n-panel.sheet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(640px, 100%); max-height: 92%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; animation: n-sheetup .32s cubic-bezier(.2,.8,.2,1); padding-top: 10px; display: flex; flex-direction: column; }
.n-panel.sheet.tall { height: 86%; }
.n-panel.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--n-line-2); margin: 0 auto 14px; flex: none; }
.n-panel .scroll-body { flex: 1; min-height: 0; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.n-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); min-height: 26em; }
.n-split .art { background: var(--n-ph3); border-radius: var(--n-r-lg) 0 0 var(--n-r-lg); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 1.4em; color: #fff; }
.n-split .art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(15,18,14,.62)); }
.n-split .art > * { position: relative; }
.n-split .art b { font-family: var(--n-display); font-weight: 400; font-size: 1.9em; line-height: 1; letter-spacing: -.03em; display: block; }
.n-split .art span { font-size: .9em; opacity: .85; }
.n-split .side { padding: calc(24px * var(--n-sp) + 6px); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { .n-split { grid-template-columns: 1fr; min-height: 0; } .n-split .art { display: none; } }
/* sweet alerts: Image header (computer) / Success (phone) */
.n-sa { text-align: center; padding-top: .3em; }
.n-sa .ico { width: 4.3em; height: 4.3em; border-radius: 50%; margin: 0 auto 1em; display: grid; place-items: center; }
.n-sa .ico svg { width: 2em; height: 2em; stroke-width: 2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.n-sa .ico.ok { background: var(--n-accent-soft); color: var(--n-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--n-accent-soft) 50%, transparent); }
.n-sa .ico.bad { background: var(--n-rose-soft); color: var(--n-rose); box-shadow: 0 0 0 8px color-mix(in srgb, var(--n-rose-soft) 50%, transparent); }
.n-sa .ico.q { background: var(--n-sky-soft); color: var(--n-sky); }
.n-sa h2 { font-size: 1.85rem; margin: .1em 0 .4em; }
.n-sa p { color: var(--n-muted); font-size: .95em; margin: 0; }
.n-sa .foot { justify-content: center; }
.n-sa-img { margin: calc(-24px * var(--n-sp) - 4px) calc(-24px * var(--n-sp) - 4px) 18px; min-height: 9rem; border-radius: var(--n-r-lg) var(--n-r-lg) 0 0; background: var(--n-ph3); }
.n-draw path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: n-draw .5s .15s ease forwards; }
@keyframes n-draw { to { stroke-dashoffset: 0; } }
@keyframes n-fadein { from { opacity: 0; } }
@keyframes n-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes n-drop { from { opacity: 0; transform: translateY(-40px); } }
@keyframes n-fromright { from { transform: translateX(100%); } }
@keyframes n-sheetup { from { transform: translate(-50%, 100%); } }
@media (prefers-reduced-motion: reduce) { .n-ui *, .n-panel, .n-panel *, #n-toasts > *, .n-note { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
html.n-locked { overflow: hidden; }

/* ---------- guided tours: Spotlight + coach card (computer), coach sheet (phone); Welcome slides ---------- */
.n-tour { position: fixed; inset: 0; z-index: 2147483040; pointer-events: none; }
.n-tour-spot { position: fixed; border-radius: min(var(--n-r-lg), 16px); box-shadow: 0 0 0 9999px var(--n-veil), 0 0 0 3px var(--n-accent); transition: all .35s cubic-bezier(.2,.8,.2,1); }
.n-tour.center .n-tour-spot { box-shadow: 0 0 0 9999px var(--n-veil); }
.n-coach { position: fixed; width: min(22em, calc(100vw - 24px)); pointer-events: auto; background: var(--n-paper); border: 1px solid var(--n-line); border-radius: min(var(--n-r-lg), 18px); box-shadow: var(--n-shadow-pop); padding: 1.05em 1.1em .9em; font-family: var(--n-sans); font-size: var(--n-fs); color: var(--n-body); transition: left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1); animation: n-rise .3s cubic-bezier(.2,.8,.2,1); }
.n-coach:focus { outline: none; }
.n-tour.center .n-coach { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(26em, calc(100vw - 24px)); animation: none; }
.n-tour.busy .n-coach { opacity: .6; }
.n-coach .ci { width: 2.4em; height: 2.4em; border-radius: 12px; background: var(--n-accent-soft); color: var(--n-accent); display: grid; place-items: center; margin-bottom: .6em; }
.n-coach b { display: block; font-family: var(--n-display); font-weight: 400; font-size: 1.45em; letter-spacing: -.03em; line-height: 1.1; color: var(--n-head); margin: .25em 0 .3em; }
.n-coach b em { color: var(--n-accent); font-style: italic; }
.n-coach p { margin: 0; font-size: .92em; line-height: 1.5; color: var(--n-muted); }
.n-coach-f { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .9em; flex-wrap: wrap; }
.n-coach-dots { display: inline-flex; gap: .3em; }
.n-coach-dots i { width: .45em; height: .45em; border-radius: 20px; background: var(--n-line-2); transition: width .2s, background .2s; }
.n-coach-dots i.done { background: var(--n-accent-line); }
.n-coach-dots i.on { width: 1.3em; background: var(--n-accent); }
@media (max-width: 760px) {
  .n-tour:not(.center) .n-coach { left: 12px !important; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto !important; width: auto; animation: n-sheetin .3s cubic-bezier(.2,.8,.2,1); }
  .n-tour:not(.center) .n-coach.top { top: calc(12px + env(safe-area-inset-top, 0px)) !important; bottom: auto; }
}
@keyframes n-sheetin { from { opacity: 0; transform: translateY(20px); } }
.n-welcome { padding: 0; overflow: hidden; }
.n-welcome .wl-art { min-height: 9.5rem; display: grid; place-items: center; color: rgba(255,255,255,.9); transition: background .3s; }
.n-welcome .wl-art svg { width: 3.2em; height: 3.2em; stroke-width: 1.4; }
.n-welcome .wl-body { padding: 1.3em 1.5em 1.3em; }
.n-welcome h2 { font-size: 1.75rem; margin: .2em 0 .35em; }
.n-welcome .wl-foot { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: 1.2em; }
/* help */
.n-help .hp-q { margin: .2em 0 .9em; }
.n-help .n-acc { box-shadow: none; }
.n-help .body p, .n-help .body li { color: var(--n-body); font-size: .93em; }
.n-help .body ul { padding-left: 1.2em; margin: .2em 0 .6em; }
.n-help .hp-acts { display: flex; gap: .4em; flex-wrap: wrap; margin-top: .4em; }
.n-help .hp-tours { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-bottom: 1em; }
.n-help .hp-tours button { display: flex; flex-direction: column; align-items: flex-start; gap: .25em; text-align: left; padding: .8em .9em; border: 1px solid var(--n-accent-line); background: var(--n-accent-soft); border-radius: 14px; color: var(--n-accent-deep); cursor: pointer; font: inherit; }
.n-help .hp-tours button b { color: var(--n-head); }
.n-help .hp-tours button small { color: var(--n-muted); font-size: .82em; }
.n-help .hp-empty { color: var(--n-muted); padding: 1em 0; }

/* Pictures in rich text (emails, updates, welcome notes): uploaded from the editor,
   so they're matched by address and fit whatever column they're shown in. */
img[src^="/api/mail-images/"] { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: .4em 0; }
.n-ed.busy .area { opacity: .6; cursor: progress; }

/* pictures in the editor: shown at the width chosen for the email; click one for its bar */
.n-ed .area img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; cursor: pointer; }
.n-ed .area img.sel { outline: 3px solid var(--n-accent); outline-offset: 2px; }
.n-imgbar { position: absolute; z-index: 6; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: calc(100% - 16px); background: var(--n-white, #fff); border: 1px solid var(--n-line, #ddd); border-radius: 12px; box-shadow: var(--n-shadow-menu, 0 10px 30px rgba(20,24,40,.18)); padding: 6px; font: 600 13px/1.2 var(--n-sans, system-ui, sans-serif); color: var(--n-ink, #1E2230); }
.n-imgbar[hidden] { display: none; }
.n-imgbar button { border: 0; background: var(--n-well, #F1F2F6); color: var(--n-ink, #1E2230); border-radius: 8px; padding: 7px 10px; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.n-imgbar button:hover, .n-imgbar button.on { background: var(--n-accent, #2B3A67); color: #fff; }
.n-imgbar button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.n-imgbar .rm { color: var(--n-rose, #A3302A); background: var(--n-rose-soft, #FBEDEC); }
.n-imgbar label { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; color: var(--n-muted, #636A7D); }
.n-imgbar input { width: 4.4em; border: 1px solid var(--n-line-2, #D8DBE4); border-radius: 7px; padding: 5px 6px; font: inherit; }
/* A finger's size on a phone. */
@media (max-width: 760px) { .n-imgbar button, .n-imgbar input { min-height: 44px; box-sizing: border-box; } }

/* the crop-and-size pop-up */
.n-crop h2 { margin-bottom: 6px; }
.n-crop .cr-stage { position: relative; margin: 10px auto 12px; border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #1E2230 repeating-conic-gradient(#2a3040 0 25%, #1E2230 0 50%) 0 0 / 18px 18px; }
.n-crop .cr-stage canvas { display: block; width: 100%; height: 100%; }
.n-crop .cr-frame { position: absolute; box-shadow: 0 0 0 9999px rgba(10,14,20,.55); outline: 2px solid #fff; cursor: move; }
.n-crop .cr-frame::before, .n-crop .cr-frame::after { content: ""; position: absolute; pointer-events: none; }
.n-crop .cr-frame::before { inset: 33.33% 0; border-top: 1px solid rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.45); }
.n-crop .cr-frame::after { inset: 0 33.33%; border-left: 1px solid rgba(255,255,255,.45); border-right: 1px solid rgba(255,255,255,.45); }
.n-crop .cr-h { position: absolute; width: 22px; height: 22px; background: #fff; border: 2px solid var(--n-accent); border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; }
.n-crop .cr-h[data-h=nw] { left: 0; top: 0; cursor: nwse-resize; }
.n-crop .cr-h[data-h=ne] { left: 100%; top: 0; cursor: nesw-resize; }
.n-crop .cr-h[data-h=sw] { left: 0; top: 100%; cursor: nesw-resize; }
.n-crop .cr-h[data-h=se] { left: 100%; top: 100%; cursor: nwse-resize; }
.n-crop .cr-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.n-crop .cr-row > b { font-size: .85em; min-width: 8.5em; color: var(--n-muted); font-weight: 600; }
.n-crop .cr-pill { border: 1px solid var(--n-line-2); background: var(--n-white); color: var(--n-body); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .88em; cursor: pointer; display: inline-flex; align-items: center; gap: .35em; }
.n-crop .cr-pill.on { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-accent-ink, #fff); }
.n-crop .cr-pill svg { width: 15px; height: 15px; }
.n-crop input[type=range] { flex: 1; min-width: 140px; accent-color: var(--n-accent); }
.n-crop .cr-w { width: 5em; border: 1px solid var(--n-line-2); border-radius: 8px; padding: 6px 8px; font: inherit; }
.n-crop .cr-alt { margin-top: 4px; }
@media (max-width: 600px) { .n-crop .cr-row > b { min-width: 100%; } }

/* The live count under a text message box (NUI.smsCounter). */
.sms-count { display: block; margin-top: .35em; font-size: .8em; color: var(--n-muted); }
.sms-count b { color: var(--n-head); font-weight: 650; }
.sms-count.n-sms-many b:last-of-type { color: var(--n-accent-deep); }

/* Shared account layout controls. */
/* ⋯ Choose and order (lib/arrange.js). */
.arrange-off { display: none !important; }
.arrange-dots { flex: none; color: var(--n-muted); }
.arrange-list { list-style: none; margin: .8em 0 1em; padding: 0; display: grid; gap: .35em; }
.arrange-list li { display: flex; align-items: center; gap: .5em; padding: .45em .55em; border: 1px solid var(--n-line); border-radius: 12px; background: var(--n-paper); }
.arrange-list li.drag { opacity: .5; } .arrange-list li.over { border-color: var(--n-accent); }
.arrange-list .grip { color: var(--n-faint); cursor: grab; letter-spacing: -.2em; font-size: .9em; }
.arrange-list label { display: flex; align-items: center; gap: .6em; flex: 1; min-width: 0; cursor: pointer; }
.arrange-list label > span { display: flex; flex-direction: column; min-width: 0; }
.arrange-list label small { color: var(--n-muted); font-size: .8em; }
.arrange-list input { accent-color: var(--n-accent); width: 1.1em; height: 1.1em; flex: none; }
.arrange-list .mv { display: flex; gap: .15em; flex: none; }
.arrange-list .flip { transform: rotate(180deg); }
.arrange-pop .foot { display: flex; justify-content: space-between; gap: .5em; }

.arrange-more { order: 5; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4em; padding-left: 2.1em; }
.arrange-list li { flex-wrap: wrap; }
.arrange-place { max-width: 100%; font-size: .82em; height: 2.2em; }
.arrange-w .n-b.on { background: var(--n-accent-soft); border-color: var(--n-accent-line); color: var(--n-accent-deep); }