/* Nezabudnite — component styles of the design manual. Plain CSS on top of tokens.css; every class starts with nz-.
   Load tokens.css first. Nothing here styles the page globally. Every component sets its own font,
   colour and box sizing, so it works anywhere; class="nz-app" on <body> (or on a screen's wrapper)
   adds the page base: background, text colour and font for plain elements, reduced motion.
   Theme follows [data-theme="light" | "dark"], or the phone's setting when none is set. */

/* Base (opt-in with .nz-app) */
.nz-app, .nz-app *, .nz-app *::before, .nz-app *::after { box-sizing: border-box; }
.nz-app { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
.nz-app :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nz-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nz-nowrap { white-space: nowrap; }
.nz-icon { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.nz-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.nz-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.nz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Self-contained components: own font, colour and box sizing, even outside .nz-app (zero specificity) */
:where(.nz-appbar, .nz-testbanner, .nz-sheet, .nz-toast-region, .nz-screen, .nz-main, .nz-card, .nz-stack, .nz-note, .nz-legal, .nz-lockup, .nz-btn, .nz-iconbtn, .nz-link, .nz-textlink,
  .nz-field, .nz-check, .nz-notice, .nz-status, .nz-toast, .nz-section, .nz-chips, .nz-chip, .nz-cat, .nz-task, .nz-panel, .nz-empty, .nz-skeleton, .nz-doc),
:where(.nz-appbar, .nz-testbanner, .nz-sheet, .nz-screen, .nz-main, .nz-card, .nz-stack, .nz-field, .nz-check, .nz-notice, .nz-status, .nz-toast, .nz-section,
  .nz-task, .nz-panel, .nz-empty, .nz-skeleton, .nz-doc) *,
:where(.nz-btn, .nz-iconbtn, .nz-check__input)::before { box-sizing: border-box; }
:where(.nz-appbar, .nz-testbanner, .nz-sheet, .nz-screen, .nz-main, .nz-card, .nz-stack, .nz-note, .nz-legal, .nz-lockup, .nz-btn, .nz-iconbtn, .nz-link, .nz-textlink,
  .nz-field, .nz-check, .nz-notice, .nz-status, .nz-toast, .nz-section, .nz-chips, .nz-chip, .nz-cat, .nz-task, .nz-panel, .nz-empty, .nz-skeleton, .nz-doc) {
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:where(.nz-appbar, .nz-testbanner, .nz-sheet, .nz-screen, .nz-main, .nz-card, .nz-field, .nz-check, .nz-notice, .nz-section, .nz-task, .nz-panel, .nz-empty, .nz-doc) {
  color: var(--text); font-size: 16px; line-height: 24px; }
:where(.nz-btn, .nz-iconbtn, .nz-link, .nz-textlink, .nz-check__input, .nz-panel__summary, .nz-toast__action, .nz-table-wrap, .nz-lockup, .nz-section__toggle, .nz-open):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@keyframes nz-spin { to { transform: rotate(360deg); } }
@keyframes nz-pulse { 50% { opacity: .55; } }
@keyframes nz-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .nz-app *, .nz-app *::before, .nz-app *::after, [class*="nz-"], [class*="nz-"]::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* hidden must win over the components' own display */
[class*="nz-"][hidden] { display: none !important; }

/* Preview helpers (only for this manual's previews, not for the app) */
.nz-stage { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-width: var(--content-max); }
.nz-stage--flush { padding: 0; gap: var(--space-4); }
.nz-stage--flush .nz-caption { padding: 0 var(--space-4); }
.nz-phone .nz-scrim, .nz-phone .nz-sheet, .nz-phone .nz-toast-region { position: absolute; }
.nz-phone--tall { min-height: 940px; }
.nz-frame { width: 390px; max-width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text); overflow: hidden; }
.nz-frame--narrow { width: 320px; }
.nz-frame .nz-sheet { position: static; max-width: none; max-height: none; min-height: 0; margin: 0; overflow: visible; border-radius: 0; box-shadow: none; animation: none; }
.nz-frame .nz-sheet__body { overflow: visible; }
.nz-phone--sheet { height: 880px; }
.nz-phone .nz-sheet--details { max-height: 90%; min-height: 56%; }
.nz-stage .nz-toast-region { position: static; margin: 0; }
.nz-stage--tight { gap: 0; }
.nz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.nz-caption { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-muted); font-family: var(--font-mono); }
.nz-screens { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8); padding: var(--space-4); }
/* A computer's window in a preview */
.nz-desktop { position: relative; width: 1100px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); }
.nz-phone { position: relative; width: 390px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 32px; background: var(--bg); color: var(--text); }

/* Layout */
.nz-main--toast { padding-bottom: calc(var(--toast-clearance) + env(safe-area-inset-bottom, 0px)) !important; }
.nz-main { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-2) var(--space-4) var(--space-8); }
.nz-screen { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; max-width: 480px; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.nz-screen__brand { display: flex; justify-content: center; }
/* The sign-in page: the sign-in at the top, what the app does under it */
.nz-landing { container: nz-landing / inline-size; width: 100%; max-width: 1040px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.nz-landing__grid { display: flex; flex-direction: column; gap: var(--space-10); max-width: 480px; margin: 0 auto; }
.nz-landing__hero { display: flex; flex-direction: column; gap: var(--space-4); }
.nz-landing__hero .nz-card { gap: var(--space-4); padding: var(--space-5); box-shadow: var(--shadow-card); }
.nz-landing__section--how { margin-top: var(--space-6); }
.nz-landing__info { display: flex; flex-direction: column; gap: var(--space-10); }
.nz-landing__lead { margin: 0; text-align: center; font-size: 16px; line-height: 24px; font-weight: 400; text-wrap: balance; }
.nz-landing__lead strong { font-weight: 700; color: var(--primary); }
.nz-landing__section { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.nz-landing__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.nz-landing__text { margin: 0; font-size: 16px; line-height: 24px; }
.nz-howto { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: nz-howto; }
.nz-howto li { display: flex; gap: var(--space-3); font-size: 16px; line-height: 24px; counter-increment: nz-howto; }
.nz-howto li::before { content: counter(nz-howto); display: grid; flex: 0 0 32px; place-items: center; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; }
/* One screenshot, centred in a soft panel; the caption keeps the image's width, so both share their edges */
.nz-shot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-muted); }
.nz-shot img { display: block; width: 280px; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.nz-shot figcaption { width: 280px; max-width: 100%; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-faq { display: flex; flex-direction: column; gap: var(--space-2); }
.nz-faq__q { flex: 1; }
.nz-landing__legal { margin-top: calc(-1 * var(--space-4)); padding-top: var(--space-1); border-top: 1px solid var(--border); }
/* A computer: two columns that run down the whole page, the same widths in both rows, so every edge lines up;
   the card's top meets the logo's, the screenshot's panel is the card's width, the legal links span both */
@container nz-landing (min-width: 928px) {
  .nz-landing__grid { gap: calc(2 * var(--space-8)); max-width: none; }
  .nz-landing__hero, .nz-landing__info { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--space-12); align-items: start; }
  .nz-landing__hero { grid-template-rows: auto auto 1fr; grid-template-areas: "brand card" "lead card" "how card"; row-gap: 0; }
  .nz-landing__hero > .nz-screen__brand { grid-area: brand; justify-content: flex-start; }
  .nz-landing__hero > .nz-landing__lead { grid-area: lead; margin-top: var(--space-4); text-align: left; font-size: 20px; line-height: 28px; }
  .nz-landing__hero > .nz-card { grid-area: card; }
  .nz-landing__section--how { grid-area: how; margin-top: var(--space-10); }
  .nz-landing__info { grid-template-rows: auto 1fr; grid-template-areas: "privacy look" "faq look"; row-gap: var(--space-10); }
  .nz-landing__section--look { grid-area: look; }
  .nz-landing__section--privacy { grid-area: privacy; }
  .nz-landing__section--faq { grid-area: faq; }
  .nz-landing__legal { margin-top: calc(-1 * var(--space-8)); }
}
.nz-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.nz-card__title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
.nz-card__text { margin: 0; font-size: 16px; line-height: 24px; }
.nz-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.nz-stack__label { font-size: 14px; line-height: 20px; font-weight: 600; }
.nz-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-5); }
.nz-legal--start { justify-content: flex-start; }

/* Test-version banner (remove at launch) */
.nz-testbanner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); padding-inline: max(var(--space-4), calc((100% - 1008px) / 2)); background: var(--warning-soft); border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; line-height: 20px; }
.nz-testbanner .nz-icon { color: var(--warning); }
.nz-testbanner strong { font-weight: 700; }
.nz-testbanner--trial { background: var(--primary-soft); }
.nz-testbanner--trial .nz-icon { color: var(--primary-strong); }

/* App bar and lockup */
.nz-appbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-1); min-height: calc(var(--appbar-height) + env(safe-area-inset-top, 0px)); padding: calc(var(--space-1) + env(safe-area-inset-top, 0px)) var(--space-2) var(--space-1) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); container: nz-appbar / inline-size; }
/* The brand: the icon, then the name with the StatusLine under it; a refresh's progress along the bar's bottom edge */
.nz-appbar__brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.nz-appbar__brand > .nz-lockup__icon { flex-shrink: 0; }
/* On a screen under 360 px the icon gives its room to the StatusLine, which then fits whole; the query measures the bar's
   content box, 24 px narrower than the screen */
@container nz-appbar (max-width: 335.98px) { .nz-appbar__brand > .nz-lockup__icon { display: none; } }
.nz-appbar__text { display: flex; flex-direction: column; min-width: 0; }
.nz-appbar__name { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.nz-appbar .nz-status { min-height: 0; gap: 0; }
.nz-appbar .nz-status__line { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nz-appbar__progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 0; }
.nz-appbar > .nz-iconbtn { flex-shrink: 0; }
.nz-appbar > .nz-iconbtn:first-of-type { margin-left: auto; }
.nz-lockup { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.nz-lockup__icon { display: block; width: 32px; height: 32px; border-radius: 7px; }
.nz-lockup--large { font-size: 32px; line-height: 40px; gap: var(--space-3); }
.nz-lockup--large .nz-lockup__icon { width: 48px; height: 48px; border-radius: 11px; }

/* Buttons and links */
.nz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-5); border: 1.5px solid transparent; border-radius: var(--radius-md); background: none; color: inherit; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nz-btn--primary { background: var(--primary); color: var(--on-primary); }
.nz-btn--soft { background: var(--primary-soft); color: var(--primary-strong); }
.nz-btn--outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.nz-btn--ghost { padding: 0 var(--space-3); color: var(--primary); }
.nz-btn--block { width: 100%; }
.nz-btn--start { align-self: flex-start; }
.nz-btn:disabled, .nz-btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.nz-btn__count { font-family: var(--font-mono); font-size: 14px; font-weight: 700; white-space: nowrap; }
.nz-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nz-iconbtn:hover { background: var(--surface-muted); }
.nz-iconbtn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; background: none; }
.nz-iconbtn[aria-busy="true"] { color: var(--primary); }
.nz-iconbtn[aria-busy="true"] .nz-icon { animation: nz-spin 1s linear infinite; }
/* Inline links inside text. Short interface text: 600. Long reading text (.nz-doc): surrounding weight. */
.nz-textlink, .nz-card__text a, .nz-check__label a, .nz-notice a, .nz-testbanner a, .nz-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:where(.nz-textlink, .nz-card__text a, .nz-check__label a, .nz-notice a, .nz-testbanner a, .nz-note a, .nz-doc a)[href^="mailto:"] { white-space: nowrap; }
.nz-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; color: var(--primary); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Fields and checkbox */
.nz-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nz-field__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.nz-field__input { width: 100%; min-height: var(--touch-target); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.nz-field__input::placeholder { color: var(--text-muted); }
.nz-field__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.nz-field__input:disabled { opacity: var(--opacity-disabled); }
/* Read-only (the name in the sign-in sheet): still read by password managers and screen readers, so not disabled */
.nz-field__input[readonly] { background: var(--surface-muted); }
.nz-field__input--code { min-height: 56px; font-family: var(--font-mono); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0.3em; text-align: center; }
.nz-field__hint { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-field__error { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--error); }
.nz-field--invalid .nz-field__input { border: 2px solid var(--error); }
.nz-countdown { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.nz-check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; }
.nz-check__input { flex-shrink: 0; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--border-strong); border-radius: 6px; background: var(--surface); cursor: pointer; appearance: none; -webkit-appearance: none; }
.nz-check__input::before { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--on-primary); border-bottom: 3px solid var(--on-primary); opacity: 0; transform: translateY(-2px) rotate(-45deg); }
.nz-check__input:checked { border-color: var(--primary); background: var(--primary); }
.nz-check__input:checked::before { opacity: 1; }
.nz-check__label { font-size: 16px; line-height: 24px; cursor: pointer; }
.nz-check--invalid .nz-check__input { border-color: var(--error); }

/* Notices and status */
.nz-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--text); font-size: 14px; line-height: 20px; }
.nz-notice__title { display: block; font-weight: 600; }
.nz-notice__body { flex: 1; min-width: 0; }
.nz-notice__actions { display: flex; margin: var(--space-1) 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-3)); }
.nz-notice__actions .nz-btn { min-height: 44px; }
/* A solid or outline button lines up with the text: no pull to the left as for a ghost one */
.nz-notice__actions--primary { flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
/* Steps the parent follows in another app (Safari's share sheet): numbered, with that app's icons inline */
.nz-steps { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.nz-steps li + li { margin-top: var(--space-1); }
.nz-steps .nz-icon { vertical-align: -3px; }
.nz-notice--info { background: var(--primary-soft); }
.nz-notice--info .nz-icon { color: var(--primary-strong); }
.nz-notice--warning { background: var(--warning-soft); }
.nz-notice--warning .nz-icon { color: var(--warning); }
.nz-notice--error { background: var(--error-soft); }
.nz-notice--error .nz-icon { color: var(--error); }
.nz-status { display: flex; flex-direction: column; gap: var(--space-2); min-height: 32px; justify-content: center; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-status__line { display: flex; align-items: center; gap: var(--space-2); }
.nz-progress { display: block; width: 100%; height: 4px; overflow: hidden; border: none; border-radius: var(--radius-pill); background: var(--border); color: var(--primary); appearance: none; -webkit-appearance: none; }
.nz-progress::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--border); }
.nz-progress::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--primary); }
.nz-progress::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--primary); }
.nz-toast-region { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 20; max-width: var(--content-max); margin: 0 auto; pointer-events: none; }
.nz-toast-region > * { pointer-events: auto; }
.nz-toast { position: relative; min-height: 60px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); overflow: hidden; border-radius: var(--radius-lg); background: var(--toast); color: var(--on-toast); box-shadow: var(--shadow-raised); }
.nz-toast__text { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; }
.nz-toast__text strong, .nz-toast__line { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nz-toast__text strong { font-weight: 600; }
.nz-toast__line--wrap { white-space: normal; }
.nz-toast__action { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3); border: none; border-radius: var(--radius-md); background: transparent; color: var(--toast-action); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; cursor: pointer; }
.nz-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--toast-action); transform-origin: left; animation: nz-timer 10s linear forwards; }

/* Sections and chips */
.nz-section { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.nz-main > .nz-section:first-child { margin-top: 0; }
.nz-section__head { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.nz-section__toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: 0; border: 0; background: none; box-sizing: border-box; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nz-section__head .nz-chip { text-transform: none; letter-spacing: normal; }
.nz-section__dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.nz-section__count { margin-left: auto; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.nz-section__chev { color: var(--text-muted); transition: transform .2s ease; }
.nz-section__toggle[aria-expanded="true"] .nz-section__chev { transform: rotate(180deg); }
.nz-section__body { display: flex; flex-direction: column; gap: var(--space-3); }
.nz-section--new .nz-section__count { color: var(--primary-strong); }
.nz-section--overdue .nz-section__head { color: var(--due-overdue); }
.nz-section--overdue .nz-section__dot { background: var(--due-overdue); }
.nz-section--today .nz-section__dot { background: var(--due-today); }
.nz-section--week .nz-section__dot { background: var(--due-week); }
.nz-section--later .nz-section__dot { background: var(--due-later-mark); }
.nz-section--undated .nz-section__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--border-strong); }
.nz-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.nz-chip--due { font-family: var(--font-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nz-chip--overdue { background: var(--due-overdue); color: var(--on-due-overdue); }
.nz-chip--today { background: var(--due-today); color: var(--on-due-today); }
.nz-chip--week { background: var(--due-week); color: var(--on-due-week); }
.nz-chip--later { background: var(--due-later); color: var(--on-due-later); }
.nz-chip--undated { padding-top: 0; padding-bottom: 0; background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
.nz-chip--undated::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--border-strong); }
.nz-chip--done { background: var(--done); color: var(--on-done); }
.nz-chip--who { background: var(--surface-muted); color: var(--text); }
.nz-chip__note { font-weight: 500; }
.nz-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text-muted); }

/* Task card */
.nz-task { transition: opacity .25s ease-out, transform .25s ease-out; }
.nz-task--leaving { opacity: 0; transform: translateX(24px); pointer-events: none; }
.nz-task { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.nz-task--overdue { border: 1.5px solid var(--due-overdue); }
.nz-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nz-task__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.nz-task__desc { margin: 0; font-size: 16px; line-height: 24px; }
.nz-task__details { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.nz-task__details li { display: inline-flex; align-items: center; gap: 6px; }
.nz-task__details .nz-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-muted); }
.nz-task__amount { font-family: var(--font-mono); font-size: 16px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nz-task__actions { container: nz-actions / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.nz-task__actions .nz-btn { min-height: 44px; padding: 0 var(--space-4); }
.nz-task__actions--solo { margin-left: calc(-1 * var(--space-4)); }
/* Under a 289 px row (a phone under 353 px) the buttons keep only their words, so both stay on one row */
@container nz-actions (max-width: 288.98px) { .nz-task__actions .nz-btn > .nz-icon { display: none; } }
/* The origin line above the buttons: the posted date, then "Podrobnosti"; the control takes a second line rather than lose its word */
.nz-task__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.nz-task__foot .nz-task__posted { flex: 1 1 auto; }
.nz-task__posted { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
/* Details control: "Podrobnosti" with its word on a card's origin line, the icon alone at the end of a closed row's chips line; a 44 px target */
.nz-open { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; min-height: 44px; margin: -12px; padding: 12px; border: 0; border-radius: var(--radius-md); background: none; color: var(--primary); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nz-open:hover { background: var(--primary-soft); }
.nz-open--icon { min-width: 44px; justify-content: center; }
.nz-open--start { align-self: flex-start; }
.nz-open--icon .nz-open__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Card extras: marker and tag chips, the heading label, the basis of a date */
.nz-chip--marker, .nz-chip--tag { padding-top: 0; padding-bottom: 0; background: transparent; }
.nz-chip--marker { border: 1px solid var(--primary); color: var(--primary-strong); }
.nz-chip--marker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nz-chip--tag { border: 1px solid var(--border-strong); color: var(--text); }

/* Disclosure panels: family and handled */
.nz-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.nz-panel--handled { margin-top: var(--space-2); }
.nz-panel--handled + .nz-panel--handled { margin-top: 0; }
.nz-panel__summary { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); list-style: none; cursor: pointer; font-weight: 600; }
.nz-panel__summary::-webkit-details-marker { display: none; }
.nz-panel__meta { margin-left: auto; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-muted); }
.nz-panel__chev { color: var(--text-muted); transition: transform .2s ease; }
.nz-panel[open] .nz-panel__chev { transform: rotate(180deg); }
.nz-panel__body { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); }
.nz-panel__body--list { gap: 0; }
.nz-school { display: flex; flex-direction: column; gap: var(--space-1); }
.nz-school__name { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.nz-school__people { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.nz-school__people li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.nz-school__role { color: var(--text-muted); text-align: right; }
.nz-handled { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.nz-handled__text { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.nz-handled__title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-muted); }
.nz-handled__reason { font-size: 13px; line-height: 20px; color: var(--text-muted); }
/* A task inside a panel (rules): flat, divided like the rows */
.nz-panel .nz-task { padding: var(--space-3) 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.nz-handled .nz-btn { min-height: 44px; padding: 0 var(--space-3); }
.nz-handled .nz-open { margin-left: auto; }
/* Tasks from schools no longer processed: read-only rows */
.nz-panel__note { margin: 0 0 var(--space-2); font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* Waiting messages (WaitingPanel): a disclosure panel with a lead, one row per message and a quiet line */
/* The waiting panel shows only what could not be processed, so its icon is always the warning one */
.nz-waiting .nz-panel__summary > .nz-icon:first-child { color: var(--warning); }
.nz-waiting__lead { margin: 0; font-size: 14px; line-height: 20px; }
/* One block per school: its address, its messages whole (the details sheet's blocks), its own link last */
.nz-waiting__school { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.nz-waiting__school + .nz-waiting__school { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.nz-waiting__school > .nz-school__name { margin: 0; }
.nz-waiting__school > .nz-msgs { align-self: stretch; }

/* A standalone link set straight in a screen's column, and the plain date line of a closed task (details sheet) */
.nz-main > .nz-link { align-self: flex-start; }
.nz-hist__date { flex: 1 1 auto; font-size: 13px; line-height: 20px; color: var(--text-muted); }

/* Family sheet */
.nz-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; background: var(--scrim); }
@keyframes nz-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.nz-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--content-max); max-height: 85vh; max-height: 85dvh; margin: 0 auto; padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface); box-shadow: var(--shadow-raised); animation: nz-sheet-in .25s ease-out; }
.nz-sheet__handle { flex-shrink: 0; align-self: center; width: 36px; height: 4px; margin: var(--space-1) 0; border-radius: var(--radius-pill); background: var(--border-strong); }
.nz-sheet__head { display: flex; align-items: center; gap: var(--space-2); }
.nz-sheet__heading { display: flex; flex: 1; flex-direction: column; }
.nz-sheet__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.nz-sheet__meta { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-sheet__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-muted); }
.nz-sheet__divider { margin: 0; border: 0; border-top: 1px solid var(--border); }
.nz-sheet__group { margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.nz-school__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-school--skipped .nz-school__name { color: var(--text-muted); }

/* Task details sheet: the family sheet's frame, but the head stays and the body scrolls */
.nz-sheet--details { gap: var(--space-2); min-height: 50vh; min-height: 50dvh; padding-bottom: 0; overflow: hidden; }
/* Sign-in sheet: the same frame, as tall as its form */
.nz-sheet--signin { gap: var(--space-2); padding-bottom: 0; overflow: hidden; }
.nz-sheet--details .nz-sheet__head, .nz-sheet--signin .nz-sheet__head { flex-shrink: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.nz-sheet__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-5); min-height: 0; padding: var(--space-2) 0 calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.nz-sheet__body > * { flex-shrink: 0; }
.nz-facts { display: flex; flex-direction: column; gap: var(--space-2); }
.nz-details__part { display: flex; flex-direction: column; gap: var(--space-3); }
.nz-details__part > .nz-sheet__group { margin: 0; }
.nz-msgs { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.nz-msg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-muted); }
.nz-msg--source { background: var(--primary-soft); }
.nz-msg__who { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.nz-msg__meta { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-muted); overflow-wrap: anywhere; }
.nz-msg__text { align-self: stretch; margin: var(--space-2) 0 0; font-size: 16px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.nz-msg__text a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.nz-msg__label { margin: var(--space-2) 0 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-muted); }
.nz-msg__files { align-self: stretch; display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.nz-msg__files li { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; user-select: text; }
.nz-msg__files .nz-icon { margin-top: 2px; color: var(--text-muted); }
.nz-dl { display: flex; flex-direction: column; margin: 0; }
.nz-dl__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.nz-dl__row:first-child { border-top: 0; padding-top: 0; }
.nz-dl dt { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-dl dd { margin: 0; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; user-select: text; }
.nz-dl dd.nz-mono { font-weight: 600; }

/* Empty and loading */
.nz-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); text-align: center; }
.nz-empty__mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--space-2); border-radius: 50%; background: var(--done); color: var(--on-done); }
.nz-empty__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; text-wrap: balance; }
.nz-empty__mark--neutral { background: var(--surface-muted); color: var(--text-muted); }
.nz-empty__text { max-width: 32ch; margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-skeleton { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.nz-skeleton__bar { width: 100%; height: 12px; border-radius: var(--radius-sm); background: var(--surface-muted); animation: nz-pulse 1.6s ease-in-out infinite; }
.nz-skeleton__bar--short { width: 40%; }
.nz-skeleton__bar--mid { width: 60%; }
.nz-skeleton__bar--title { width: 85%; height: 16px; }

/* Document page (terms, privacy policy) */
.nz-doc { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-12); font-size: 16px; line-height: 24px; }
.nz-doc h1 { margin: var(--space-4) 0 var(--space-1); font-size: 24px; line-height: 32px; font-weight: 700; }
.nz-doc__meta { margin: 0 0 var(--space-6); font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nz-doc h2 { margin: var(--space-8) 0 var(--space-2); font-size: 20px; line-height: 28px; font-weight: 600; }
.nz-doc h3 { margin: var(--space-6) 0 var(--space-2); font-size: 16px; line-height: 24px; font-weight: 600; }
.nz-doc p { margin: 0 0 var(--space-4); }
.nz-doc ul, .nz-doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.nz-doc li + li { margin-top: var(--space-1); }
.nz-doc a { color: var(--primary); font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nz-table-wrap { margin: 0 0 var(--space-4); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md);
  /* scroll shadows: appear at an edge only while more table hides behind it */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--border-strong), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--border-strong), transparent) right center / 12px 100% no-repeat scroll,
    var(--surface); }
.nz-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.nz-table caption { padding: var(--space-3) var(--space-4); caption-side: top; text-align: left; font-weight: 600; }
.nz-table th, .nz-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.nz-table thead th { background: var(--surface-muted); font-weight: 600; }
.nz-table tbody th { position: sticky; left: 0; background: var(--surface); font-weight: 600; box-shadow: 1px 0 0 var(--border); }