/* Stav — editorial edition. Jedna boja mastila, jedan papir, jedan akcenat (cinober).
   Slojevi kaskade umesto !important: kasniji sloj uvek pobeđuje raniji, nezavisno od specifičnosti. */
@layer tokens, reset, base, layout, components, views, responsive, experience, utilities;

/* ============================================================ tokens */
@layer tokens {
  :root {
    --paper: #F5F1E8; --paper-2: #EDE7DA; --sheet: #FBF9F4; --ink: #1A1916; --ink-2: #3B3833; --muted: #625D53;
    --rule: #D6CEBD; --rule-2: #E6DFD1; --accent: #A8321C; --on-accent: #FFFFFF;
    --accent-wash: rgba(168, 50, 28, .08); --accent-line: rgba(168, 50, 28, .55); --ghost: #9C9384; --ghost-ink: #6E675B;
    --band-1: rgba(168, 50, 28, .10); --band-2: rgba(168, 50, 28, .18); --band-3: rgba(168, 50, 28, .28); --band-4: rgba(168, 50, 28, .40);
    --shadow-1: 0 1px 0 rgba(26, 25, 22, .04), 0 8px 24px -12px rgba(26, 25, 22, .18);
    --shadow-2: 0 1px 0 rgba(26, 25, 22, .05), 0 24px 60px -20px rgba(26, 25, 22, .35);
    --scrim: rgba(26, 25, 22, .42);
    --focus: var(--accent);

    --f-display: "Playfair Display", "Source Serif 4", Georgia, serif;
    --f-text: "Source Serif 4", Georgia, "Times New Roman", serif;
    --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --t-xs: 11.5px; --t-sm: 13.5px; --t-ui: 15px; --t-body: 19px; --t-lede: 21px;
    --t-h3: 26px; --t-h2: clamp(40px, 5.2vw, 72px);
    --lh-text: 1.62; --measure: 64ch;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
    --r-1: 3px; --r-2: 8px; --r-3: 14px; --r-pill: 999px;
    --gutter: 40px; --maxw: 1240px;
    --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
    --d-1: 140ms; --d-2: 260ms; --d-3: 520ms; --d-draw: 1100ms;
    --dock-h: 0px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #12110F; --paper-2: #1A1916; --sheet: #1B1A17; --ink: #EDE7DA; --ink-2: #CFC8B9; --muted: #A39C8E;
      --rule: #36322B; --rule-2: #2A2722; --accent: #F0876A; --on-accent: #12110F;
      --accent-wash: rgba(240, 135, 106, .10); --accent-line: rgba(240, 135, 106, .6); --ghost: #7C7568; --ghost-ink: #B3AB9C;
      --band-1: rgba(240, 135, 106, .12); --band-2: rgba(240, 135, 106, .20); --band-3: rgba(240, 135, 106, .30); --band-4: rgba(240, 135, 106, .42);
      --shadow-1: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
      --shadow-2: 0 1px 0 rgba(0, 0, 0, .4), 0 24px 60px -20px rgba(0, 0, 0, .8);
      --scrim: rgba(0, 0, 0, .62);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #12110F; --paper-2: #1A1916; --sheet: #1B1A17; --ink: #EDE7DA; --ink-2: #CFC8B9; --muted: #A39C8E;
    --rule: #36322B; --rule-2: #2A2722; --accent: #F0876A; --on-accent: #12110F;
    --accent-wash: rgba(240, 135, 106, .10); --accent-line: rgba(240, 135, 106, .6); --ghost: #7C7568; --ghost-ink: #B3AB9C;
    --band-1: rgba(240, 135, 106, .12); --band-2: rgba(240, 135, 106, .20); --band-3: rgba(240, 135, 106, .30); --band-4: rgba(240, 135, 106, .42);
    --shadow-1: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-2: 0 1px 0 rgba(0, 0, 0, .4), 0 24px 60px -20px rgba(0, 0, 0, .8);
    --scrim: rgba(0, 0, 0, .62);
    color-scheme: dark;
  }
}

/* ============================================================ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  button, input, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  h1, h2, h3, h4, p, ol, ul, blockquote, figure, dl, dd { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  a { color: inherit; }
  svg { flex: none; }
}

/* ============================================================ base */
@layer base {
  body {
    background: var(--paper); color: var(--ink);
    font: 400 var(--t-ui)/1.5 var(--f-ui);
    font-variant-numeric: lining-nums;
    font-feature-settings: "kern", "liga", "lnum";
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: hidden; min-height: 100dvh;
  }
  /* sve brojke: poravnate, iste širine (nikad Playfair „starinske“ cifre za kazne, citate i brojeve) */
  .tnum, .cite-num, .r, .r-lab, .r-tl, .src, .tab-n, .fact b, .alt-num, .tl-n, .stav-n, .ix-n, .ix-c, kbd, time, .pr-pager, .chip-p, .was, .pen-was, .diff-line {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
  }
  .sc { font: 600 var(--t-xs)/1.25 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .sc.acc { color: var(--accent); }
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
  ::selection { background: var(--accent-wash); color: var(--ink); }
  kbd { display: inline-block; font: 500 11px/1 var(--f-ui); padding: 4px 6px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: var(--sheet); }
  q { quotes: "„" "“"; }
  .muted { color: var(--muted); }
  .small { font-size: 13px; }
  .nowrap { white-space: nowrap; }
  .link { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font: inherit; }
  .link:hover { text-decoration-thickness: 2px; }
  .link-plain { font: inherit; color: inherit; text-decoration: none; }
  .link-plain:hover { color: var(--accent); }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
  .skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 200; border-radius: var(--r-2); }
  .skip:focus { left: 8px; }
  .spin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; vertical-align: -1px; margin-right: 8px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sheet { from { transform: translateY(40%); opacity: .4; } }
  @keyframes blink { 50% { opacity: 0; } }
}

/* ============================================================ layout: masthead, cover, search, views, footer */
@layer layout {
  .mast { position: relative; z-index: 30; background: var(--paper); }
  .mast-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s5); height: 68px; }
  .brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; justify-self: start; min-height: 44px; align-items: center; }
  .brand-mark { font: 500 22px/1 var(--f-display); color: var(--accent); transform: translateY(1px); }
  .brand-word { font: 600 italic 30px/1 var(--f-display); letter-spacing: -.01em; }
  .edition { font: 400 italic 14px/1.3 var(--f-text); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .edition .tnum { font-style: normal; font-family: var(--f-ui); font-size: 12.5px; letter-spacing: .02em; }
  .mast-nav { display: flex; align-items: center; gap: 6px; justify-self: end; }
  .rule-double { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; opacity: .9; }

  .cover { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
  .cover-text, .cover-aside { display: none; }
  .search { display: flex; align-items: center; gap: var(--s4); height: 56px; position: relative; }
  .search-lab { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .search-field { flex: 1; display: flex; align-items: center; gap: var(--s3); min-width: 0; height: 100%; border-bottom: 1.5px solid var(--ink); transition: border-color var(--d-2) var(--ease); }
  .search-field:focus-within { border-color: var(--accent); }
  .search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: 400 italic 22px/1.2 var(--f-text); outline: none; padding: 0; }
  .search input::placeholder { color: var(--muted); opacity: 1; }
  .search input::-webkit-search-cancel-button { display: none; }
  .search input:focus-visible { outline: none; }
  .clear { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
  .clear:hover { background: var(--paper-2); color: var(--ink); }
  .clear svg { width: 16px; height: 16px; }
  .go { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14.5px; white-space: nowrap; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); transition: transform var(--d-1) var(--ease), filter var(--d-1); }
  .go:hover { filter: brightness(1.06); }
  .go:active { transform: scale(.97); }
  .go svg { width: 16px; height: 16px; }

  body[data-view="home"] .cover { padding: var(--s8) 0 var(--s7); border-bottom: 0; }
  body[data-view="home"] .cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s8); align-items: end; }
  body[data-view="home"] .cover-text, body[data-view="home"] .cover-aside { display: block; }
  body[data-view="home"] .search { height: 76px; margin-top: var(--s6); }
  body[data-view="home"] .search-lab { display: none; }
  body[data-view="home"] .search input { font-size: 30px; }
  body[data-view="home"] .search-field { border-bottom-width: 2px; }
  body[data-view="home"] .go { height: 52px; padding: 0 22px 0 24px; font-size: 15.5px; }

  .kicker { display: flex; align-items: center; gap: 10px; }
  .kicker::before { content: ""; width: 28px; height: 1.5px; background: var(--accent); flex: none; }
  .cover h1 { font: 500 clamp(44px, 5.3vw, 78px)/1.02 var(--f-display); letter-spacing: -.022em; margin-top: var(--s5); text-wrap: balance; }
  .cover h1 .l { display: block; }
  .cover h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
  .deck { font: 400 21px/1.5 var(--f-text); color: var(--ink-2); margin-top: var(--s5); max-width: 36em; text-wrap: pretty; }
  .examples { display: flex; align-items: baseline; gap: 6px 10px; margin-top: var(--s4); }
  .examples > .sc { flex: none; padding-top: 2px; }
  .ex-row { display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; }
  .ex { font: 400 italic 16px/1.3 var(--f-text); color: var(--ink-2); padding: 8px 6px; min-height: 44px; border-radius: var(--r-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; transition: color var(--d-1), background var(--d-1); white-space: nowrap; }
  .ex:hover { color: var(--accent); background: var(--accent-wash); text-decoration-color: var(--accent-line); }
  .cover-aside { border-left: 1px solid var(--rule); padding-left: var(--s5); padding-bottom: 6px; }
  .facts { display: grid; gap: var(--s4); margin-top: var(--s4); }
  .fact { display: grid; grid-template-columns: 76px 1fr; gap: var(--s3); align-items: baseline; padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-2); }
  .fact:last-child { border-bottom: 0; padding-bottom: 0; }
  .fact b { font: 500 36px/1 var(--f-display); letter-spacing: -.02em; }
  .fact span { font: 400 15px/1.4 var(--f-text); color: var(--ink-2); }

  main { padding-bottom: var(--s9); outline: none; }
  .view { display: none; }
  body[data-view="home"] .v-home,
  body[data-view="rezultati"] .v-rezultati,
  body[data-view="prica"] .v-prica,
  body[data-view="uporedi"] .v-uporedi,
  body[data-view="clan"] .v-clan { display: block; animation: enter var(--d-3) var(--ease-out) both; }

  .foot { border-top: 1px solid var(--rule); padding: var(--s5) 0 var(--s7); font: 400 13.5px/1.5 var(--f-ui); color: var(--muted); }
  .foot .wrap { display: flex; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; }
  .foot b { font-weight: 500; color: var(--ink-2); }
  .wi-rail, .dock-fade, .scrim, .sheet-grab { display: none; }
}

/* ============================================================ components */
@layer components {
  /* dugmad */
  .nbtn { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background var(--d-1) var(--ease), color var(--d-1); position: relative; }
  .nbtn:hover { background: var(--paper-2); color: var(--ink); }
  .nbtn svg { width: 18px; height: 18px; }
  .ibtn { width: 40px; padding: 0; justify-content: center; }
  .seg { display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: var(--r-pill); height: 40px; align-items: center; gap: 2px; }
  .seg button { height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background var(--d-1), color var(--d-1); }
  .seg button:hover { color: var(--ink); }
  .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .seg-sm { height: 36px; }
  .seg-sm button { height: 28px; padding: 0 10px; font-size: 12.5px; }
  .btn-pro { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; border: 1px solid var(--ink); transition: background var(--d-1), color var(--d-1); }
  .btn-pro b { font: 600 italic 15px/1 var(--f-display); letter-spacing: .01em; }
  .btn-pro span { opacity: .8; font-size: 13px; }
  .btn-pro:hover { background: var(--ink-2); }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--rule); font: 500 14.5px/1 var(--f-ui); text-decoration: none; color: var(--ink); background: transparent; transition: background var(--d-1), border-color var(--d-1), transform var(--d-1); white-space: nowrap; }
  .btn:hover { border-color: var(--ink); }
  .btn:active { transform: scale(.98); }
  .btn:disabled { opacity: .5; cursor: default; transform: none; }
  .btn svg { width: 16px; height: 16px; }
  .btn kbd { margin-left: 2px; }
  .btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn-ink:hover { background: var(--ink-2); border-color: var(--ink-2); }
  .btn-ink kbd { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 45%, transparent); }
  .btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
  .btn.wide { width: 100%; margin-top: var(--s4); }
  .btn[aria-busy="true"] { gap: 0; }
  .lnk { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1 var(--f-ui); color: var(--accent); text-decoration: none; }
  .lnk:hover { text-decoration: underline; text-underline-offset: 4px; }
  .ico-moon { display: none; }
  :root[data-theme="dark"] .ico-sun { display: none; }
  :root[data-theme="dark"] .ico-moon { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ico-sun { display: none; }
    :root:not([data-theme="light"]) .ico-moon { display: block; }
  }
  /* Pro u tamnoj temi: obrisan, da ne nadjača glavno dugme pretrage */
  :root[data-theme="dark"] .btn-pro { background: transparent; color: var(--ink); border-color: var(--rule); }
  :root[data-theme="dark"] .btn-pro b { color: var(--accent); }
  :root[data-theme="dark"] .btn-pro:hover { background: var(--paper-2); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-pro { background: transparent; color: var(--ink); border-color: var(--rule); }
    :root:not([data-theme="light"]) .btn-pro b { color: var(--accent); }
    :root:not([data-theme="light"]) .btn-pro:hover { background: var(--paper-2); }
  }
  .dot-pro { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

  /* nalog */
  .acct { position: relative; }
  .acct-btn { padding: 0 10px 0 4px; gap: 8px; max-width: 280px; border: 1px solid var(--rule); }
  .avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); font-weight: 600; font-size: 13px; }
  .acct-email { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
  .pro-badge { display: inline-flex; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--accent-line); color: var(--accent); font: 600 italic 12px/1.2 var(--f-display); }
  .acct-chev { width: 14px; height: 14px; color: var(--muted); transition: transform var(--d-2) var(--ease); }
  .acct-btn[aria-expanded="true"] .acct-chev { transform: rotate(180deg); }
  .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 260px; padding: 6px; border-radius: var(--r-3); background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow-2); animation: enter var(--d-2) var(--ease-out) both; }
  .menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--rule-2); margin-bottom: 6px; }
  .menu-email { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-plan { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .menu-plan.is-pro { color: var(--accent); font-weight: 600; }
  .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--r-2); text-align: left; font-size: 14.5px; color: var(--ink); }
  .menu-item:hover, .menu-item:focus-visible { background: var(--paper-2); outline-offset: -2px; }
  .menu-item svg { width: 18px; height: 18px; color: var(--muted); }

  /* lenjir kazne (√ skala) */
  .r { container-type: inline-size; margin-top: var(--s5); }
  .r-lane { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; min-height: 30px; }
  .r-fine { justify-self: start; display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 4px; border: 1.5px solid var(--rule); font: 600 10.5px/1 var(--f-ui); letter-spacing: .06em; color: var(--muted); }
  .r-fine.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .r-lane.ghost .r-fine.on { background: transparent; border-color: var(--ghost); color: var(--ghost-ink); border-style: dashed; }
  .r-lane.ghost .r-fine:not(.on) { opacity: .5; }
  .r-track { position: relative; height: 30px; background: linear-gradient(var(--rule-2), var(--rule-2)) 0 50% / 100% 1px no-repeat; }
  .r-bar { position: absolute; top: 50%; left: var(--a); width: calc(var(--b) - var(--a)); min-width: 6px; height: 10px; transform: translateY(-50%); }
  .r-bar::before { content: ""; position: absolute; inset: 0; background: var(--accent); border-radius: 2px; }
  .answer.animate .r-lane.now .r-bar::before { animation: grow var(--d-3) var(--ease-out) both; }
  .r-bar.life::after { content: "D"; position: absolute; right: -2px; top: 50%; transform: translate(100%, -50%); font: 600 10px/1 var(--f-ui); color: var(--accent); padding-left: 3px; }
  .r-lane.ghost .r-bar { height: 8px; }
  .r-lane.ghost .r-bar::before { background: repeating-linear-gradient(135deg, var(--ghost) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--ghost); }
  .r-lane.b .r-bar::before { background: var(--ink); }
  .r-lane.c .r-bar::before { background: var(--muted); opacity: .75; }
  .r-lane.band-1.now .r-track { background: linear-gradient(var(--rule-2), var(--rule-2)) 0 50% / 100% 1px no-repeat; }
  .r-lab { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font: 500 12px/1 var(--f-ui); white-space: nowrap; color: var(--ink-2); background: var(--lab-bg, var(--paper)); padding: 3px 5px; border-radius: 3px; }
  .r-lane.now .r-lab { color: var(--ink); font-weight: 600; }
  .r-lane.ghost .r-lab { color: var(--ghost-ink); }
  .r-bar.lab-in .r-lab { left: auto; right: calc(100% + 6px); }
  .r-bar.lab-over .r-lab { left: 0; top: -13px; transform: none; padding: 1px 4px 1px 0; }
  .r-lane:has(.lab-over) { min-height: 40px; align-items: end; padding-bottom: 4px; }
  .r { overflow-x: clip; }
  .r-axis { display: grid; grid-template-columns: 52px minmax(0, 1fr); margin-top: 6px; }
  .r-axis-cap { font: 500 10.5px/1 var(--f-ui); color: var(--muted); letter-spacing: .04em; padding-top: 10px; }
  .r-ticks { position: relative; height: 26px; border-top: 1px solid var(--ink); }
  .r-tick { position: absolute; left: var(--x); top: 0; width: 1px; height: 6px; background: var(--ink); }
  .r-tl { position: absolute; top: 9px; left: 0; transform: translateX(-50%); font: 500 11.5px/1 var(--f-ui); color: var(--muted); background: var(--lab-bg, var(--paper)); padding: 0 2px; }
  .r-tick:first-child .r-tl { transform: none; left: 0; }
  .r-tick:last-child { transform: translateX(-1px); }
  .r-tick:last-child .r-tl { transform: translateX(-100%); left: 1px; }
  .r-cap { font: 400 italic 13px/1.3 var(--f-text); color: var(--muted); margin-top: 6px; text-align: right; }
  .r-fine-key { height: 16px; min-width: 18px; font-size: 9.5px; vertical-align: 1px; margin-right: 4px; }
  @container (max-width: 440px) { .r-tick.minor .r-tl { display: none; } .r-lab { font-size: 11px; } }

  /* pouzdanost: tri tačke */
  .conf { display: inline-flex; gap: 3px; align-items: center; }
  .conf i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); }
  .conf.c3 i, .conf.c2 i:nth-child(-n+2), .conf.c1 i:first-child { background: var(--accent); }

  .tag { display: inline-flex; align-items: center; font: 500 11.5px/1 var(--f-ui); color: var(--muted); padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r-pill); white-space: nowrap; }
  .src { font: 500 12px/1 var(--f-ui); color: var(--accent); white-space: nowrap; }
  .pro { font: 600 italic 12px/1 var(--f-display); color: var(--accent); border: 1px solid var(--accent-line); padding: 3px 6px 4px; border-radius: var(--r-pill); }
  .hl-btn { font: inherit; color: inherit; text-align: left; letter-spacing: inherit; border-radius: 4px; }
  .hl-btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; text-decoration-color: var(--accent-line); }

  /* čipovi okolnosti sa pregledom odredišta */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
  .chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 48px; padding: 6px 14px 7px 30px; border-radius: var(--r-3); border: 1px solid var(--rule); text-align: left; background: var(--sheet); color: var(--ink-2); position: relative; transition: border-color var(--d-1) var(--ease), background var(--d-1), color var(--d-1); }
  .chip::before { content: "+"; position: absolute; left: 12px; top: 8px; font: 500 16px/1 var(--f-ui); color: var(--accent); }
  .chip:hover { border-color: var(--ink); }
  .chip-l { font: 500 14px/1.2 var(--f-ui); color: var(--ink); }
  .chip-p { font: 500 12px/1.2 var(--f-ui); color: var(--muted); white-space: nowrap; }
  .chip[data-kind="go"] .chip-p { color: var(--accent); }
  .chip[data-kind="none"] .chip-p { font-style: italic; }
  .chip[data-kind="wait"] .chip-p { opacity: .55; }
  .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .chip[aria-pressed="true"]::before { content: "✓"; color: var(--on-accent); font-size: 13px; top: 10px; }
  .chip[aria-pressed="true"] .chip-l, .chip[aria-pressed="true"] .chip-p { color: var(--on-accent); }

  /* Korektura */
  .ins { color: var(--accent); font-style: italic; white-space: nowrap; margin-left: .2em; }
  .ins .caret { font-style: normal; font-weight: 600; display: inline-block; transform: translateY(.42em); margin-right: 1px; font-family: var(--f-ui); font-size: .8em; }
  .correction { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: var(--s4); font: 500 26px/1.15 var(--f-display); color: var(--ghost-ink); }
  .correction s { text-decoration-line: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
  .correction .was { font: 400 13px/1 var(--f-ui); color: var(--muted); }
  .diff-line { margin-top: var(--s3); font: 500 14px/1.4 var(--f-ui); color: var(--ink-2); padding: 8px 12px; background: var(--accent-wash); border-left: 2px solid var(--accent); border-radius: 0 var(--r-2) var(--r-2) 0; display: inline-block; }
  .cap-x { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill); border: 1.5px dashed var(--ghost); color: var(--ghost-ink); font: 600 11px/1 var(--f-ui); text-decoration-line: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; letter-spacing: .02em; vertical-align: 2px; }
  .nofine { font: 500 13px/1 var(--f-ui); color: var(--muted); white-space: nowrap; }
  .answer.animate .headline, .answer.animate .correction, .answer.animate .diff-line { animation: enter var(--d-3) var(--ease-out) both; }

  /* pojmovi i olovka */
  .pencil { background: linear-gradient(var(--accent-line), var(--accent-line)) no-repeat 0 94% / 0% 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--d-draw) var(--ease) 260ms; padding-bottom: 3px; }
  .drawn .pencil { background-size: 100% 2px; }
  .term { font: inherit; color: inherit; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 5px; text-decoration-thickness: 1.5px; border-radius: 2px; text-align: inherit; letter-spacing: inherit; display: inline; padding: 0; }
  .term:hover, .term:focus-visible, .term.lit { background: var(--accent-wash); text-decoration-color: var(--accent); }
  .fnref { font: 600 10.5px/0 var(--f-ui); color: var(--accent); margin-left: 1px; vertical-align: super; }
  .xref { font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1.5px; text-underline-offset: 4px; padding: 0; text-align: inherit; display: inline; letter-spacing: inherit; }
  .xref:hover { color: var(--accent); text-decoration-color: var(--accent); }
  .defpop { position: fixed; z-index: 90; width: min(360px, calc(100vw - 32px)); padding: var(--s4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-3); box-shadow: var(--shadow-2); font: 400 15px/1.5 var(--f-text); color: var(--ink-2); opacity: 0; transform: translateY(4px); transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease); }
  .defpop.on { opacity: 1; transform: none; }
  .defpop b { display: block; font: 600 10.5px/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
  .defpop sup { font-size: 10px; }
  .defpop .from { display: block; margin-top: 8px; font: 500 12px/1.2 var(--f-ui); color: var(--muted); }

  .ghostlines { margin-top: var(--s4); display: grid; gap: 10px; }
  .ghostlines i { display: block; height: 10px; border-radius: 3px; background: var(--paper-2); }

  .soon { padding: var(--s6) var(--s5); border-radius: var(--r-3); border: 1px dashed var(--rule); text-align: center; color: var(--ink-2); max-width: calc(var(--measure) + 44px); }
  .soon h4 { font: 500 22px/1.2 var(--f-display); margin-bottom: 6px; color: var(--ink); }
  .soon p { font: 400 15.5px/1.5 var(--f-text); }

  /* modali i listovi */
  dialog { color: var(--ink); }
  .modal { border: 0; padding: 0; background: transparent; max-width: min(92vw, 480px); width: 100%; }
  .modal::backdrop, .sheet-dlg::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
  .modal[open]::backdrop, .sheet-dlg[open]::backdrop { animation: fade var(--d-2) var(--ease) both; }
  .modal-inner { position: relative; padding: var(--s6) var(--s6) var(--s5); border-radius: 20px; background: var(--sheet); box-shadow: var(--shadow-2); border: 1px solid var(--rule); }
  .modal[open] .modal-inner { animation: enter var(--d-3) var(--ease-out) both; }
  .modal-inner h2 { font: 500 30px/1.12 var(--f-display); margin: var(--s3) 0 var(--s4); letter-spacing: -.01em; }
  .modal-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); }
  .modal-x:hover { background: var(--paper-2); color: var(--ink); }
  .plan-list { margin: 0 0 var(--s4); padding-left: 18px; list-style: disc; font: 400 16px/1.5 var(--f-text); color: var(--ink-2); }
  .plan-list li { margin: 6px 0; }
  .plan-list strong { color: var(--ink); font-weight: 600; }
  .form-foot { text-align: center; margin-top: var(--s4); }
  .form-foot:empty { display: none; }
  .form { margin-top: var(--s4); }
  .auth-tabs { display: flex; width: 100%; height: 44px; }
  .auth-tabs button { flex: 1; height: 36px; }
  .field { margin-bottom: var(--s4); }
  .field-label { display: block; font: 600 13px/1.3 var(--f-ui); margin-bottom: 6px; color: var(--ink-2); }
  .input { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-2); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: 16px; outline: none; transition: border-color var(--d-1), box-shadow var(--d-1); }
  .input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); outline: none; }
  .input[aria-invalid="true"] { border-color: var(--accent); }
  .input-wrap { position: relative; }
  .input-wrap .input { padding-right: 52px; }
  .pw-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--r-2); color: var(--muted); display: grid; place-items: center; }
  .pw-toggle svg { width: 18px; height: 18px; }
  .pw-toggle:hover { color: var(--ink); }
  .pw-toggle .ico-off { display: none; }
  .pw-toggle[aria-pressed="true"] .ico-on { display: none; }
  .pw-toggle[aria-pressed="true"] .ico-off { display: block; }
  .field-hint { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
  .field-err { margin-top: 6px; font-size: 12.5px; color: var(--accent); font-weight: 500; }
  .form-error { margin-bottom: 4px; padding: 10px 12px; border-radius: var(--r-2); background: var(--accent-wash); color: var(--accent); font-size: 13.5px; font-weight: 500; line-height: 1.45; }

  .sheet-dlg { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
  .share-box { position: relative; display: grid; grid-template-columns: minmax(0, 400px) 300px; gap: var(--s6); padding: var(--s6); background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-2); max-height: calc(100dvh - 48px); overflow: auto; border: 1px solid var(--rule); }
  .share-dlg[open] .share-box { animation: enter var(--d-3) var(--ease-out) both; }
  .share-prev canvas { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rule); box-shadow: var(--shadow-1); background: #F5F1E8; max-height: calc(100dvh - 120px); object-fit: contain; }
  .share-side { padding-top: var(--s5); }
  .share-side h2 { font: 500 30px/1.1 var(--f-display); }
  .share-side > p { font: 400 15.5px/1.5 var(--f-text); color: var(--ink-2); margin-top: var(--s3); }
  .opts { margin-top: var(--s4); }
  .opt { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 56px; border-bottom: 1px solid var(--rule-2); font: 500 14.5px/1.3 var(--f-ui); }
  .switch { width: 48px; height: 28px; border-radius: 14px; background: var(--rule); position: relative; flex: none; }
  .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); transition: transform var(--d-2) var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
  .switch[aria-checked="true"] { background: var(--accent); }
  .switch[aria-checked="true"]::after { transform: translateX(20px); }
  .share-actions { margin-top: var(--s5); display: grid; gap: var(--s2); }
  .share-actions .btn { width: 100%; }
  .x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; }

  .m-menu { margin: 0; inset: auto 0 0 0; width: 100%; }
  .m-menu-inner { background: var(--sheet); border-radius: 22px 22px 0 0; padding: var(--s3) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); box-shadow: var(--shadow-2); }
  .m-menu[open] .m-menu-inner { animation: sheet var(--d-3) var(--ease-out) both; }
  .m-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--s2) var(--s2); border-bottom: 1px solid var(--rule-2); margin-bottom: var(--s2); }
  .m-acct { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule-2); margin-bottom: var(--s2); }
  .m-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 var(--s2); border-radius: var(--r-2); font: 500 16px/1.2 var(--f-ui); color: var(--ink); text-align: left; }
  .m-item svg { width: 20px; height: 20px; color: var(--muted); }
  .m-item:hover, .m-item:focus-visible { background: var(--paper-2); }

  .toast { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; padding: 11px 16px; border-radius: var(--r-2); background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: var(--shadow-2); animation: enter var(--d-2) var(--ease-out) both; max-width: calc(100vw - 32px); }
}

/* ============================================================ views */
@layer views {
  /* ---------- početna */
  .specimen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
  .spec { padding: var(--s5) var(--s5) var(--s6); border-right: 1px solid var(--rule); }
  .spec:first-child { padding-left: 0; }
  .spec:last-child { border-right: 0; padding-right: 0; }
  .spec h3 { font: 500 var(--t-h3)/1.15 var(--f-display); margin: var(--s3) 0 var(--s2); letter-spacing: -.01em; }
  .spec > p:not(.sc) { font: 400 16px/1.55 var(--f-text); color: var(--ink-2); }
  .mini { display: block; width: 100%; text-align: left; margin-top: var(--s4); padding: var(--s4); background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r-2); --lab-bg: var(--sheet); }
  button.mini:hover { border-color: var(--rule); }
  .mini .r { margin-top: 0; }
  .mini-cite { font: 600 13px/1 var(--f-ui); color: var(--accent); display: block; }
  .mini-title { font: 500 22px/1.15 var(--f-display); margin-top: 6px; display: block; }
  .mini-q { font: italic 17px/1.5 var(--f-text); }
  .mini-q .hit sup { font: 600 10px/0 var(--f-ui); color: var(--accent); font-style: normal; }
  .index { margin-top: var(--s8); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s7); }
  .index h2 { font: 500 40px/1.05 var(--f-display); letter-spacing: -.015em; margin-top: var(--s3); }
  .index-lede { font: 400 16px/1.55 var(--f-text); color: var(--ink-2); margin-top: var(--s4); }
  .index-story { margin-top: var(--s3); }
  .index-cols { columns: 2; column-gap: var(--s7); }
  .index-part { break-inside: avoid-column; margin-bottom: var(--s5); }
  .index-part > .sc { display: block; padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); margin-bottom: 2px; }
  .ix { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s3); align-items: baseline; width: 100%; text-align: left; min-height: 40px; padding: 9px 0; border-bottom: 1px solid var(--rule-2); font: 400 15.5px/1.35 var(--f-text); break-inside: avoid; }
  .ix:hover .ix-t { color: var(--accent); }
  .ix-n, .ix-c { font: 500 12.5px/1 var(--f-ui); color: var(--muted); }

  /* ---------- odjek priče + interlinearni sjaj */
  .echo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: end; padding: var(--s6) 0 var(--s5); border-bottom: 1px solid var(--rule); }
  .echo-q { font: 400 italic 26px/1.3 var(--f-text); margin-top: var(--s2); color: var(--ink); text-wrap: pretty; }
  .qm { color: var(--muted); }
  .gw { display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: baseline; min-height: 44px; text-decoration: none; color: inherit; border-radius: 4px; padding: 0 1px; }
  .gw:hover .hit { text-decoration-color: var(--accent); }
  .gw:focus-visible { outline-offset: 2px; }
  .hit { text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
  .hit sup { font: 600 10.5px/0 var(--f-ui); color: var(--accent); font-style: normal; margin-left: 1px; }
  .gl { font: 600 9.5px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-top: 7px; white-space: nowrap; max-width: 20em; overflow: hidden; text-overflow: ellipsis; }
  .echo-meta { font: 400 13.5px/1.4 var(--f-ui); color: var(--muted); text-align: right; display: grid; gap: var(--s2); justify-items: end; }
  .echo-links { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
  .echo-links .link { color: var(--ink-2); min-height: 32px; }

  .res-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s8); padding-top: var(--s6); }
  .answer { position: relative; min-width: 0; }
  .kicker-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .headline { font: 500 var(--t-h2)/1.02 var(--f-display); letter-spacing: -.022em; margin-top: var(--s3); text-wrap: balance; }
  .headline.long { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; }
  .cite { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: var(--s4); }
  .cite-num { font: 600 17px/1 var(--f-ui); color: var(--accent); letter-spacing: .005em; white-space: nowrap; }
  .cite-name { font: 400 italic 17px/1.3 var(--f-text); color: var(--muted); }

  /* tri činjenice odmah ispod citata */
  .facts3 { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 0; margin-top: var(--s5); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
  .facts3 > div { padding: var(--s3) var(--s4) var(--s4); border-left: 1px solid var(--rule-2); min-width: 0; }
  .facts3 > div:first-child { border-left: 0; padding-left: 0; }
  .facts3 dt { font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .facts3 dd { font: 400 15.5px/1.45 var(--f-text); color: var(--ink); }
  .facts3 .src { margin-left: 4px; }
  .band-t { display: inline-block; margin-top: 6px; font: 600 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 4px 7px; border-radius: var(--r-pill); }
  .f-kazna.band-1 .band-t { background: var(--band-1); }
  .f-kazna.band-2 .band-t { background: var(--band-2); }
  .f-kazna.band-3 .band-t { background: var(--band-3); }
  .f-kazna.band-4 .band-t { background: var(--band-4); color: var(--ink); }

  .lede { margin-top: var(--s5); padding-left: var(--s5); border-left: 2px solid var(--ink); font: 400 var(--t-lede)/1.5 var(--f-text); color: var(--ink); max-width: 38em; text-wrap: pretty; hyphens: auto; }
  .lede .q { color: var(--muted); font: 500 13px/1 var(--f-ui); display: block; margin-top: var(--s2); }
  .reset-row { margin-top: var(--s4); }

  .penalty { margin-top: var(--s6); padding: var(--s5) var(--s5) var(--s4); background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r-3); --lab-bg: var(--sheet); }
  .pen-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
  .pen-val { font: 500 24px/1.25 var(--f-display); letter-spacing: -.005em; text-wrap: balance; margin-top: 4px; }
  .pen-was { font: 400 13.5px/1.3 var(--f-ui); color: var(--muted); }
  .pen-was s { text-decoration-color: var(--accent); text-decoration-thickness: 2px; color: var(--ghost-ink); }
  .r-note { font: 400 italic 13.5px/1.4 var(--f-text); color: var(--muted); margin-top: var(--s2); }
  .r-lane.now.band-2 .r-bar::before, .r-lane.now.band-1 .r-bar::before { background: var(--accent); }

  .why { margin-top: var(--s6); }
  .why-list { margin-top: var(--s3); }
  .why-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: 10px 6px 10px 0; border-bottom: 1px solid var(--rule-2); font: 400 16px/1.45 var(--f-text); color: var(--ink-2); scroll-margin: 120px; transition: background var(--d-2); border-radius: 4px; }
  .why-list li.lit { background: var(--accent-wash); }
  .why-list .n { font: 600 12px/1 var(--f-ui); color: var(--accent); }
  .why-list q { font-style: italic; color: var(--ink); }
  .why-list li.added { background: linear-gradient(90deg, var(--accent-wash), transparent 70%); }

  .ai-box { margin-top: var(--s6); padding: var(--s5); border: 1px solid var(--rule-2); border-radius: var(--r-3); background: linear-gradient(135deg, var(--accent-wash), transparent 55%), var(--sheet); }
  .ai-box[hidden] { display: none; }
  .ai-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--s3); }
  .ai-out { font: 400 17px/1.6 var(--f-text); color: var(--ink); max-width: var(--measure); }
  .ai-out p + p, .ai-out ul { margin-top: var(--s3); }
  .ai-out ul { list-style: disc; padding-left: 20px; }
  .ai-note { margin-top: var(--s3); font: 400 12.5px/1.4 var(--f-ui); color: var(--muted); }
  .ai-gate { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font: 400 16px/1.5 var(--f-text); color: var(--ink-2); }
  .ai-gate p { flex: 1 1 260px; }
  .caret-blink { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
  .ai-empty { font: 400 16px/1.5 var(--f-text); color: var(--muted); }

  .actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }

  /* desna kolona */
  .rail { display: grid; gap: var(--s7); align-content: start; min-width: 0; }
  .rail h3 { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
  .rail h3 .t { font: 500 italic 24px/1 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
  .rail .hint { font: 400 15px/1.5 var(--f-text); color: var(--muted); margin-top: var(--s3); }
  .wi-note { margin-top: var(--s4); font: 400 15px/1.5 var(--f-text); color: var(--ink-2); padding: var(--s3) var(--s4); border-left: 2px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--r-2) var(--r-2) 0; }
  .wi-reset { margin-top: var(--s3); }
  .alts li + li { border-top: 1px solid var(--rule-2); }
  .alt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); width: 100%; text-align: left; padding: var(--s4) var(--s2) var(--s4) 0; border-radius: var(--r-2); transition: background var(--d-1); }
  .alt:hover, .alt:focus-visible { background: var(--paper-2); outline-offset: 0; }
  .alt-num { font: 500 28px/1 var(--f-display); color: var(--ink-2); padding-left: var(--s2); }
  .alt-b { min-width: 0; display: block; }
  .alt-title { font: 500 19px/1.2 var(--f-display); display: block; color: var(--ink); }
  .alt-when { font: 400 italic 14.5px/1.4 var(--f-text); color: var(--ink-2); display: block; margin-top: 4px; }
  .alt-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 12px/1 var(--f-ui); color: var(--muted); flex-wrap: wrap; }
  .alt-meta .conf i { width: 6px; height: 6px; border-width: 1.25px; }
  .rail-foot { font: 400 12.5px/2 var(--f-ui); color: var(--muted); }
  .rail-foot kbd { margin: 0 2px; }

  .more { margin-top: var(--s8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
  .more > * { padding: var(--s5) var(--s5) 0; border-right: 1px solid var(--rule); }
  .more > *:first-child { padding-left: 0; }
  .more > *:last-child { border-right: 0; padding-right: 0; }
  .more h3 { font: 500 24px/1.15 var(--f-display); margin: var(--s3) 0 var(--s2); }
  .more p:not(.sc) { font: 400 16px/1.55 var(--f-text); color: var(--ink-2); }

  .empty { padding: var(--s7) 0; max-width: 40em; }
  .empty-title { font: 500 34px/1.1 var(--f-display); margin-top: var(--s5); }
  .empty-sub { font: 400 18px/1.5 var(--f-text); color: var(--ink-2); margin-top: var(--s3); }

  /* ---------- čitač člana */
  .reader { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s8); padding-top: var(--s6); }
  .rtoc { position: sticky; top: var(--s5); align-self: start; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
  .rtoc .sc { display: block; }
  .toc-glava { font: 500 italic 18px/1.25 var(--f-display); margin: var(--s2) 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
  .rtoc-list a { display: grid; grid-template-columns: 40px 1fr; gap: 6px; padding: 6px 8px 6px 0; text-decoration: none; font: 400 14.5px/1.3 var(--f-text); color: var(--ink-2); border-radius: 6px; }
  .rtoc-list a:hover { color: var(--accent); }
  .rtoc-list a .n { font: 500 12px/1.6 var(--f-ui); color: var(--muted); padding-left: 6px; }
  .rtoc-list a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--accent-wash); }
  .rtoc-list a[aria-current="page"] .n { color: var(--accent); }
  .rtoc-list a.del { text-decoration: line-through; color: var(--muted); }
  .art { min-width: 0; }
  .art-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
  .crumbs { font: 400 13.5px/1.4 var(--f-ui); color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .crumbs button { min-height: 32px; }
  .art-tools { display: flex; gap: 4px; flex: none; }
  .x-close { border: 1px solid var(--rule); }
  .art-num { font: 600 13px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: var(--s4); }
  .art-title { font: 500 clamp(34px, 4vw, 56px)/1.04 var(--f-display); letter-spacing: -.02em; margin-top: var(--s3); text-wrap: balance; outline: none; }
  .art-meta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .art-meta div { display: grid; gap: 5px; align-content: start; }
  .art-meta dd { font: 400 16px/1.35 var(--f-text); }
  .art-meta dt { font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .tabs { display: flex; gap: var(--s5); margin-top: var(--s5); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 500 15px/1 var(--f-ui); color: var(--muted); white-space: nowrap; scroll-snap-align: start; flex: none; }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"] { color: var(--ink); }
  .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
  .tab-n { color: var(--muted); font-size: 12px; font-weight: 500; }
  .tab-n:empty { display: none; }
  .panel { padding-top: var(--s6); outline: none; }
  .law { max-width: calc(44px + var(--s5) + var(--measure) + var(--s5) + 260px); }
  .stav { display: grid; grid-template-columns: 44px minmax(0, var(--measure)) minmax(180px, 1fr); column-gap: var(--s5); position: relative; padding-bottom: var(--s5); }
  .stav-n { font: 500 italic 26px/1.2 var(--f-display); color: var(--muted); text-align: right; padding-top: 2px; }
  .stav-t { font: 400 var(--t-body)/var(--lh-text) var(--f-text); color: var(--ink); hyphens: auto; text-wrap: pretty; min-width: 0; }
  .stav.muted .stav-t { color: var(--muted); font-style: italic; }
  .stav.match .stav-n { color: var(--accent); }
  .stav.match::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: calc(var(--s5) + 6px); width: 2px; background: var(--accent); }
  .match-tag { display: block; font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
  .tacke { margin-top: var(--s2); display: grid; gap: 4px; }
  .tacke li { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 2px 6px 2px 0; border-radius: 4px; }
  .tacke li.t-match { background: var(--accent-wash); box-shadow: -6px 0 0 var(--accent-wash); }
  .t-n { font: 500 14px/1.9 var(--f-ui); color: var(--muted); }
  .t-match .t-n { color: var(--accent); }
  .stav-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
  .sidenotes { display: grid; gap: var(--s4); align-content: start; padding-top: 4px; }
  .sn { font: 400 14px/1.5 var(--f-text); color: var(--ink-2); padding-left: var(--s3); border-left: 1px solid var(--rule); transition: border-color var(--d-2), background var(--d-2); }
  .sn b { display: block; font: 600 10.5px/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .sn sup { font: 600 10.5px/0 var(--f-ui); color: var(--accent); }
  .sn .from { display: block; margin-top: 4px; font: 500 11.5px/1.2 var(--f-ui); color: var(--accent); }
  .sn.app .from { color: var(--muted); font-style: italic; }
  .sn.lit { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-wash), transparent); }
  .related { margin-top: var(--s6); margin-left: calc(44px + var(--s5)); max-width: var(--measure); padding-top: var(--s5); border-top: 1px solid var(--rule); }
  .related p.t { font: 400 17px/1.6 var(--f-text); color: var(--ink-2); margin-top: var(--s3); }
  .related h4 { font: 500 22px/1.2 var(--f-display); margin-top: var(--s2); }
  .refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
  .ref { min-height: 36px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--r-pill); font: 400 14px/1.3 var(--f-text); color: var(--ink-2); text-align: left; }
  .ref:hover { border-color: var(--accent); color: var(--accent); }
  .ref.is-current { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent); }
  .napomene { margin: var(--s5) 0 0 calc(44px + var(--s5)); font: 400 14px/1.5 var(--f-ui); color: var(--muted); max-width: var(--measure); }
  .k-panel { max-width: 760px; --lab-bg: var(--paper); }
  .k-panel .pen-val { margin-top: var(--s2); }
  .ktable { width: 100%; border-collapse: collapse; margin-top: var(--s5); font: 400 14.5px/1.45 var(--f-ui); }
  .ktable th, .ktable td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
  .ktable th { font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .ktable td:first-child { font-weight: 600; white-space: nowrap; }
  .ktable tr.is-cur td { background: var(--accent-wash); }
  .ktable .muted { font-family: var(--f-text); }
  .note { margin-top: var(--s4); font: 400 13.5px/1.5 var(--f-ui); color: var(--muted); max-width: var(--measure); }
  .amend { max-width: 640px; }
  .amend li { display: flex; gap: var(--s4); padding: 10px 0; border-bottom: 1px solid var(--rule-2); font: 400 15px/1.4 var(--f-text); }
  .amend .yr { font: 600 15px/1.4 var(--f-ui); min-width: 90px; }
  .locked { position: relative; border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s6); background: var(--sheet); max-width: calc(var(--measure) + 44px); }
  .locked h3 { font: 500 28px/1.15 var(--f-display); margin-top: var(--s3); }
  .locked > p { font: 400 17px/1.55 var(--f-text); color: var(--ink-2); margin-top: var(--s3); max-width: 32em; }
  .locked .actions { margin-top: var(--s5); }
  .ai-head { display: flex; gap: 10px; align-items: center; margin: 0 0 var(--s4); }
  .ai-tab { max-width: var(--measure); font: 400 var(--t-body)/var(--lh-text) var(--f-text); }
  .ai-tab .ai-out { font-size: var(--t-body); }

  /* sudska praksa */
  .pr-loading { display: flex; align-items: center; gap: 10px; padding: var(--s5) 0; color: var(--muted); font-size: 14px; }
  .pr-count { margin-bottom: var(--s3); font: 500 13.5px/1.4 var(--f-ui); color: var(--muted); }
  .pr-list { display: grid; gap: var(--s2); max-width: calc(var(--measure) + 120px); }
  .pr-list-locked { margin-top: var(--s5); }
  .pr-item { border: 1px solid var(--rule-2); border-radius: var(--r-3); background: var(--sheet); overflow: hidden; }
  .pr-item[open] { border-color: var(--rule); box-shadow: var(--shadow-1); }
  .pr-sum { position: relative; display: block; list-style: none; cursor: pointer; padding: 14px 48px 14px 16px; min-height: 44px; }
  .pr-sum::-webkit-details-marker { display: none; }
  .pr-sum:hover { background: var(--paper-2); }
  .pr-chev { position: absolute; right: 16px; top: 18px; color: var(--muted); transition: transform var(--d-2) var(--ease); }
  .pr-item[open] .pr-chev { transform: rotate(180deg); }
  .pr-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font: 400 12.5px/1.4 var(--f-ui); color: var(--muted); }
  .pr-sud { color: var(--ink-2); font-weight: 600; }
  .pr-title { display: block; margin-top: 4px; font: 500 19px/1.25 var(--f-display); color: var(--ink); }
  .pr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
  .pr-chips:empty { display: none; }
  .pr-chips .ref { min-height: 30px; padding: 4px 10px; font-size: 13px; }
  .pr-body { padding: 2px 16px 16px; border-top: 1px solid var(--rule-2); }
  .pr-body section { margin-top: var(--s4); }
  .pr-body .sc { margin-bottom: 6px; }
  .pr-body p { font: 400 16px/1.6 var(--f-text); color: var(--ink-2); }
  .pr-body p + p { margin-top: var(--s2); }
  .pr-sentenca { padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--r-2) var(--r-2) 0; color: var(--ink); }
  .pr-text { position: relative; }
  .pr-text.is-clamped { max-height: 200px; overflow: hidden; }
  .pr-text.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(transparent, var(--sheet)); }
  .pr-more { margin-top: var(--s2); min-height: 36px; }
  .pr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
  .pr-src { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: var(--s4); font: 400 12.5px/1.4 var(--f-ui); color: var(--muted); }
  .pr-src a { color: var(--accent); text-decoration: none; font-weight: 500; }
  .pr-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s4); font: 400 13.5px/1 var(--f-ui); color: var(--muted); max-width: calc(var(--measure) + 120px); }
  .pr-row { position: relative; padding: 14px 44px 14px 16px; border: 1px solid var(--rule-2); border-radius: var(--r-3); background: var(--sheet); }
  .pr-row .ghostlines { margin-top: var(--s3); }
  .pr-lock { position: absolute; right: 16px; top: 16px; color: var(--muted); }
  .pr-more-row { text-align: center; border-style: dashed; font: 400 13.5px/1.4 var(--f-ui); color: var(--muted); padding: 10px; }

  /* ---------- duža priča */
  .story-q { font-size: 23px; line-height: 1.5; }
  .seg-hl { background: linear-gradient(transparent 62%, var(--accent-wash) 62%); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .seg-hl sup { font: 600 10.5px/0 var(--f-ui); color: var(--accent); font-style: normal; }
  .tl { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s8); padding-top: var(--s6); }
  .tl-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
  .tl-item:first-child { padding-top: 0; }
  .tl-n { font: 500 56px/.9 var(--f-display); color: var(--accent); }
  .tl-frag { font: 400 italic 18px/1.45 var(--f-text); color: var(--muted); }
  .tl-frag q { color: var(--ink-2); }
  .tl-title { font: 500 34px/1.08 var(--f-display); letter-spacing: -.015em; margin-top: var(--s2); text-wrap: balance; }
  .tl-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: var(--s3); }
  .tl-pen { font: 400 16px/1.4 var(--f-text); color: var(--ink-2); }
  .summary { position: sticky; top: var(--s5); align-self: start; padding: var(--s5); background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r-3); --lab-bg: var(--sheet); }
  .summary h3 { font: 500 italic 24px/1.1 var(--f-display); }
  .summary > p { font: 400 15px/1.55 var(--f-text); color: var(--ink-2); margin-top: var(--s4); }

  /* ---------- uporedi */
  .cmp-bar { padding-top: var(--s5); }
  .cmp-head { display: grid; grid-template-columns: 180px repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); padding-top: var(--s5); align-items: end; }
  .cmp-head > .sc { padding-bottom: 8px; outline: none; }
  .cmp-col h2 { font: 500 clamp(28px, 3.4vw, 46px)/1.04 var(--f-display); letter-spacing: -.018em; margin-top: var(--s2); text-wrap: balance; }
  .cite-num.b { color: var(--ink); }
  .cmp-pick select { margin-top: var(--s3); width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--sheet); font: 400 14px/1 var(--f-ui); color: var(--ink-2); }
  .cmp-gauge { padding: var(--s5) 0 var(--s4); border-bottom: 1px solid var(--rule); }
  .legend { display: flex; gap: var(--s5); font: 500 13px/1 var(--f-ui); color: var(--ink-2); margin-top: var(--s3); flex-wrap: wrap; }
  .legend span::before { content: ""; display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 7px; background: var(--accent); vertical-align: 1px; }
  .legend span.b::before { background: var(--ink); }
  .cmp-table { margin-top: 0; }
  .cmp-row { display: grid; grid-template-columns: 180px repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--rule-2); font: 400 16.5px/1.55 var(--f-text); color: var(--ink-2); }
  .cmp-row > .sc { padding-top: 5px; }
  .cmp-row .diff { color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(transparent 58%, var(--accent-wash) 58%); }
  .cmp-ol { list-style: decimal; padding-left: 1.2em; display: grid; gap: 4px; }
  .cmp-ul { display: grid; gap: 4px; }

  /* ---------- sadržaj (prekrivač) */
  .toc { position: fixed; inset: 0; z-index: 85; overflow: auto; overscroll-behavior: contain; background: var(--paper); padding: var(--s6) var(--gutter) var(--s8); animation: enter var(--d-2) var(--ease-out) both; outline: none; }
  .toc[hidden] { display: none; }
  .toc-inner { max-width: 920px; margin: 0 auto; }
  .toc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 3px double var(--ink); }
  .toc h2 { font: 500 44px/1.05 var(--f-display); margin-top: var(--s3); letter-spacing: -.015em; }
  .toc-top .muted { font: 400 14px/1.5 var(--f-ui); margin-top: var(--s2); }
  .toc-part { margin: var(--s6) 0 var(--s2); }
  .toc details { border-top: 1px solid var(--rule-2); }
  .toc summary { cursor: pointer; display: grid; grid-template-columns: 90px 1fr auto; gap: var(--s3); align-items: baseline; padding: 12px 4px; min-height: 48px; list-style: none; font: 500 18px/1.3 var(--f-display); }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary:hover .gt { color: var(--accent); }
  .toc summary .g { font: 500 12.5px/1 var(--f-ui); color: var(--muted); letter-spacing: .04em; }
  .toc summary .n { font: 500 12.5px/1 var(--f-ui); color: var(--muted); }
  .toc-list { margin: 0 0 var(--s4); padding: 0 0 0 102px; columns: 2; column-gap: var(--s5); }
  .toc-list li { break-inside: avoid; }
  .toc-a { display: grid; grid-template-columns: 48px 1fr; gap: 6px; min-height: 40px; padding: 8px 6px; border-radius: var(--r-2); text-decoration: none; font: 400 15px/1.35 var(--f-text); align-items: baseline; }
  .toc-a:hover { background: var(--paper-2); color: var(--accent); }
  .toc-a .num { font: 500 12.5px/1 var(--f-ui); color: var(--muted); }
  .toc-a.del { color: var(--muted); text-decoration: line-through; }
}

/* ============================================================ responsive */
@layer responsive {
  @media (max-width: 1100px) {
    :root { --gutter: 28px; }
    .edition { display: none; }
    .mast-row { grid-template-columns: auto 1fr; }
    .res-grid, .tl { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
    .reader { grid-template-columns: minmax(0, 1fr); }
    .rtoc { display: none; }
    .stav { grid-template-columns: 44px minmax(0, 1fr); }
    .sidenotes { grid-column: 2; margin-top: var(--s3); }
    .sidenotes:empty { display: none; }
    .summary { position: static; }
  }
  @media (min-width: 761px) {
    .show-m { display: none; }
  }

  /* ---------------- telefon */
  @media (max-width: 760px) {
    :root { --gutter: 16px; --t-body: 18px; --t-lede: 19px; }
    .hide-m { display: none; }
    .mast-row { height: 60px; gap: var(--s2); }
    .brand-word { font-size: 27px; }
    .mast-nav { gap: 2px; }
    .nbtn, .ibtn { height: 44px; min-width: 44px; }
    .seg { height: 40px; }
    .seg button { height: 32px; padding: 0 11px; }
    .rule-double { height: 3px; }

    /* pretraga u doku za palac */
    body { --dock: 58px; --dock-h: calc(var(--dock) + 12px); }
    body:has(#wi-rail:not([hidden])) { --dock-h: calc(var(--dock) + 12px + 76px); }
    .cover { padding: 0; border: 0; }
    .search { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: var(--dock); margin: 0; padding: 0 6px 0 18px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-pill); box-shadow: var(--shadow-2); gap: var(--s2); }
    body[data-view="home"] .search { height: var(--dock); margin: 0; }
    .search-lab { display: none; }
    .search-field { border: 0; }
    body[data-view="home"] .search-field { border: 0; }
    .search input, body[data-view="home"] .search input { font-size: 18px; }
    .go, body[data-view="home"] .go { height: 46px; width: 46px; padding: 0; justify-content: center; border-radius: 50%; }
    .go .go-txt { display: none; }
    main { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 16px); }
    .foot { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 24px); }
    .dock-fade { display: block; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; height: calc(var(--dock-h) + 40px + env(safe-area-inset-bottom)); pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 46%); }
    body[data-view="clan"] .dock-fade, body[data-view="clan"] .search { display: none; }

    /* traka „Šta ako…“ tik iznad doka: vodoravno klizanje sa zaustavljanjem */
    .mast { z-index: 61; }
    body[data-view="clan"] .mast { z-index: 45; }
    .wi-rail { display: block; position: fixed; z-index: 58; left: 0; right: 0; bottom: calc(12px + var(--dock) + 4px + env(safe-area-inset-bottom)); padding-top: 10px; background: linear-gradient(to bottom, transparent, var(--paper) 14px); }
    .wi-rail[hidden] { display: none; }
    .wi-rail-h { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 4px; font: 500 italic 14px/1 var(--f-display); color: var(--ink-2); }
    .wi-rail-h .link { font: 500 13px/1 var(--f-ui); min-height: 28px; display: inline-flex; align-items: center; }
    .rail-scroll { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .rail-scroll::-webkit-scrollbar { display: none; }
    .chip-rail { scroll-snap-align: start; flex: none; min-height: 48px; box-shadow: var(--shadow-1); }
    .rail .wi .chips { display: none; }
    .rail .wi .hint::after { content: " ↓"; }

    body[data-view="home"] .cover { padding: var(--s6) 0 var(--s5); }
    body[data-view="home"] .cover-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
    .cover h1 { font-size: 46px; line-height: 1.02; margin-top: var(--s4); }
    .deck { font-size: 18px; margin-top: var(--s4); }
    .examples { display: block; margin: var(--s5) calc(-1 * var(--gutter)) 0; }
    .examples > .sc { display: block; padding: 0 var(--gutter); margin-bottom: var(--s2); }
    .ex-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); gap: 8px; padding: 2px var(--gutter) 6px; scrollbar-width: none; }
    .ex-row::-webkit-scrollbar { display: none; }
    .ex { font-size: 16px; padding: 0 14px; display: inline-flex; align-items: center; background: var(--sheet); border: 1px solid var(--rule-2); text-decoration: none; scroll-snap-align: start; flex: none; }
    .cover-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink); padding-top: var(--s4); }
    .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
    .fact { grid-template-columns: 1fr; border-bottom: 0; padding: 0; gap: 4px; }
    .fact b { font-size: 30px; }
    .fact span { font-size: 13.5px; }
    .specimen { grid-template-columns: 1fr; }
    .spec, .spec:first-child, .spec:last-child { padding: var(--s5) 0; border-right: 0; border-bottom: 1px solid var(--rule); }
    .index { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }
    .index-cols { columns: 1; }

    .echo { grid-template-columns: 1fr; padding: var(--s5) 0 var(--s4); gap: var(--s3); }
    .echo-q { font-size: 21px; }
    .story-q { font-size: 19px; }
    .echo-meta { text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
    .echo-meta .seg-sm { order: 3; }
    .echo-links { justify-content: flex-start; }
    .answer { display: flex; flex-direction: column; }
    .answer > .penalty { order: 1; margin-top: var(--s5); }
    .answer > .lede { order: 2; }
    .answer > .reset-row { order: 3; }
    .answer > .why { order: 4; }
    .answer > .ai-box { order: 5; }
    .answer > .actions { order: 6; }
    .res-grid { padding-top: var(--s5); }
    .headline { font-size: 44px; }
    .headline.long { font-size: 32px; }
    .correction { font-size: 20px; }
    .facts3 { grid-template-columns: 1fr; }
    .facts3 > div, .facts3 > div:first-child { border-left: 0; padding: var(--s3) 0; border-top: 1px solid var(--rule-2); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3); }
    .facts3 > div:first-child { border-top: 0; }
    .facts3 dt { margin: 3px 0 0; }
    .lede { padding-left: var(--s4); }
    .penalty { padding: var(--s4) var(--s4) var(--s3); margin-left: -4px; margin-right: -4px; }
    .pen-val { font-size: 21px; }
    .r-lane, .r-axis { grid-template-columns: 40px minmax(0, 1fr); }
    .r-fine { padding: 0 4px; font-size: 9.5px; min-width: 20px; }
    .why-list li { grid-template-columns: 18px minmax(0, 1fr); }
    .why-list .tag { grid-column: 2; justify-self: start; }
    .actions .btn { flex: 1 1 auto; }
    .actions .btn-ink { flex-basis: 100%; }
    .more { grid-template-columns: 1fr; }
    .more > *, .more > *:first-child, .more > *:last-child { padding: var(--s5) 0; border-right: 0; border-bottom: 1px solid var(--rule); }
    .alt { grid-template-columns: 52px minmax(0, 1fr); }
    .alt-num { font-size: 24px; }

    /* čitač kao donji list preko odgovora, sa pravim zastorom */
    body[data-view="clan"][data-under="rezultati"] .v-rezultati,
    body[data-view="clan"][data-under="prica"] .v-prica,
    body[data-view="clan"][data-under="uporedi"] .v-uporedi,
    body[data-view="clan"][data-under="home"] .v-home { display: block; animation: none; }
    body[data-view="clan"] .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 40; animation: fade var(--d-2) both; }
    html.sheet-open, html.sheet-open body { overflow: hidden; }
    body[data-view="clan"] .v-clan { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: 56px; overflow: auto; overscroll-behavior: contain; background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-2); animation: sheet var(--d-3) var(--ease-out) both; border-top: 1px solid var(--rule); padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); }
    body[data-view="clan"] .mast { z-index: 45; }
    .sheet-grab { display: flex; justify-content: center; align-items: center; position: sticky; top: 0; z-index: 3; height: 24px; background: var(--paper); }
    .sheet-grab i { width: 40px; height: 5px; border-radius: 3px; background: var(--rule); }
    .reader { padding-top: 0; gap: 0; }
    .art-bar { position: sticky; top: 24px; z-index: 2; background: var(--paper); padding: 2px 0 6px; }
    .crumbs { font-size: 12.5px; }
    .crumbs > span:nth-child(3), .crumbs > span:nth-child(2), .crumbs > span:nth-child(4) { display: none; }
    .art-num { margin-top: var(--s2); }
    .art-title { font-size: 34px; }
    .art-meta { gap: var(--s3) var(--s5); }
    .tabs { gap: var(--s4); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
    .tab { font-size: 14.5px; }
    .stav { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s3); }
    .stav-n { font-size: 22px; }
    .stav.match::before { left: -10px; }
    .sidenotes { display: none; }
    .related, .napomene { margin-left: calc(28px + var(--s3)); }
    .tacke li { grid-template-columns: 24px minmax(0, 1fr); }
    .ktable td:last-child, .ktable th:last-child { display: none; }
    .defpop.as-card { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; border-radius: 18px; padding: var(--s5) var(--s5) var(--s5); z-index: 95; font-size: 16px; box-shadow: var(--shadow-2); }
    .defpop.as-card::before { content: "Pojam"; display: block; font: 600 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
    :root[data-script="cyr"] .defpop.as-card::before { content: "Појам"; }

    .tl-item { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); }
    .tl-n { font-size: 40px; }
    .tl-title { font-size: 27px; }
    .cmp-head { grid-template-columns: 1fr 1fr; gap: var(--s4); }
    .cmp-head > .sc { grid-column: 1 / -1; }
    .cmp-col h2 { font-size: 24px; }
    .cmp-row { grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); font-size: 15px; }
    .cmp-row > .sc { grid-column: 1 / -1; }

    .modal { max-width: none; width: 100%; max-height: 92dvh; margin: auto 0 0; }
    .modal-inner { border-radius: 22px 22px 0 0; border-bottom: 0; padding: var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); max-height: 92dvh; overflow: auto; }
    .modal-inner::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--rule); margin: 0 auto var(--s4); }
    .modal[open] .modal-inner { animation: sheet var(--d-3) var(--ease-out) both; }
    .share-dlg { margin: auto 0 0; width: 100%; }
    .share-box { grid-template-columns: 1fr; border-radius: 22px 22px 0 0; padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); gap: var(--s4); max-height: 92dvh; }
    .share-dlg[open] .share-box { animation: sheet var(--d-3) var(--ease-out) both; }
    .share-prev { justify-self: center; width: min(100%, 300px); }
    .share-prev canvas { max-height: 46dvh; }
    .share-side { padding-top: 0; }
    .toc { padding-top: var(--s4); }
    .toc h2 { font-size: 34px; }
    .toc summary { grid-template-columns: 64px 1fr auto; font-size: 16.5px; }
    .toc-list { padding-left: 0; columns: 1; }
  }
  @media (max-width: 380px) {
    .seg button { padding: 0 8px; }
    .brand-word { font-size: 24px; }
  }
  @media print {
    .mast, .search, .foot, .rtoc, .art-tools, .tabs, .wi-rail, .dock-fade, .rail, .more, .actions { display: none; }
    body[data-view="clan"] .v-clan { position: static; }
    .stav { break-inside: avoid; }
  }
}

/* ============================================================ utilities (poslednji sloj: uvek pobeđuje) */
@layer utilities {
  [hidden] { display: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms; animation-delay: 0ms; transition-duration: 1ms; transition-delay: 0ms; scroll-behavior: auto; }
    .caret-blink { animation: none; }
  }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-2); }

/* ============================================================ ocena odgovora i privatnost (feedback.js, prefiks fb-)
   Namerno minimalno i neutralno: vizuelni sloj se redizajnira odvojeno. */
@layer components {
  .fb { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule-2); font: 400 var(--t-sm)/1.45 var(--f-ui); }
  .fb-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
  .fb-q, .fb-thanks { margin: 0; color: var(--ink-2); }
  .fb-thanks:focus, .fb-ph:focus { outline: none; }
  .fb-btns { display: inline-flex; gap: var(--s2); }
  .fb-btns .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .fb-change { margin-top: var(--s2); font-size: var(--t-sm); }
  .fb-panel { margin-top: var(--s4); display: grid; gap: var(--s2); max-width: 560px; }
  .fb-ph { margin: 0; font: 600 var(--t-ui)/1.3 var(--f-ui); }
  .fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .fb-list:empty { display: none; }
  .fb-choice { width: 100%; min-height: 44px; text-align: left; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r-2); background: transparent; color: var(--ink); font: inherit; }
  .fb-choice:hover { border-color: var(--ink-2); }
  .fb-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }
  .fb-cite { font-weight: 600; color: var(--accent); white-space: nowrap; }
  .fb-empty { color: var(--muted); padding: 4px 2px; }
  .fb-lab { margin-top: var(--s2); color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
  .fb-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--sheet); color: var(--ink); font: inherit; resize: vertical; }
  .fb-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
  .fb-hint, .fb-picked { margin: 0; color: var(--muted); font-size: var(--t-xs); }
  .fb-actions { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s2); }
  .fb-privacy { color: var(--muted); font-size: var(--t-xs); }
  .fb-privacy .link { font-size: inherit; }
  .fb-dlg-list { margin: 0 0 var(--s4); padding-left: 1.1em; display: grid; gap: var(--s2); font: 400 var(--t-sm)/1.5 var(--f-ui); }
  .fb-dlg p { font: 400 var(--t-sm)/1.5 var(--f-ui); }
}