:root {
    --bg: #f4efe6;
    --bg-elev: #fbf7f0;
    --ink: #1a1a1a;
    --ink-soft: #5c5851;
    --ink-mute: #8c8679;
    --line: #e4dcc9;
    --line-strong: #c9bfa6;
    --accent: #c45a2a;
    --accent-ink: #7a3214;
    --accent-soft: #f3d9c4;
    --ok: #3d6b4a;
    --ok-soft: #dfeadd;
    --radius: 2px;
    --max: 1080px;
    --font-serif: 'Fraunces', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
h2 { font-size: 1.6rem; line-height: 1.15; }
h3 { font-size: 1.2rem; }
h1:focus, h2:focus { outline: none; }

a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
a:hover { border-bottom-color: currentColor; }

/* ---------- boot ---------- */
.boot { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; gap: 1rem; font-family: var(--font-serif); }
.boot-mark { font-size: 3rem; color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.boot-logo { width: 6rem; height: auto; animation: pulse 1.4s ease-in-out infinite; }
.boot-text { font-size: 1.25rem; color: var(--ink-soft); letter-spacing: 0.05em; }
@keyframes pulse { 0%,100% { opacity: .3; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-4px) } }

/* ---------- layout ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.beta-banner {
    background: var(--accent); color: #fff; text-align: center;
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    padding: .4rem 1rem;
    display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap;
}
.beta-banner-text { line-height: 1.3; }

/* "Prijavi napako / idejo" pill in the beta banner */
.beta-report-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.16); color: #fff;
    border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
    padding: .15rem .7rem; font: inherit; font-size: .78rem; font-weight: 600;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.beta-report-btn:hover { background: rgba(255,255,255,.28); border-color: #fff; }
.beta-report-btn svg { flex: 0 0 auto; }

/* ---------- feedback (report issue / idea) modal ---------- */
.fb-overlay {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
    background: rgba(20,16,12,.55); overflow-y: auto;
}
/* Hide the dialog while the screen-capture frame is grabbed so it isn't in the screenshot. */
.fb-overlay.fb-capturing { visibility: hidden; }
/* Dedicated backdrop element is the only close target, so drag-selecting text inside the card and
   releasing outside it can't bubble a click into a close (the card is a sibling, not a child). */
.fb-backdrop { position: absolute; inset: 0; z-index: 0; }
.fb-card {
    position: relative; z-index: 1; width: min(34rem, 100%);
    background: var(--bg); border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
    padding: 1.9rem 1.8rem 1.5rem; margin: auto;
    text-align: left; color: var(--ink);
}
.fb-close {
    position: absolute; top: .5rem; right: .7rem; border: 0; background: none;
    font-size: 1.6rem; line-height: 1; color: var(--ink-mute); cursor: pointer;
}
.fb-close:hover { color: var(--ink); }
.fb-title { font-size: 1.3rem; margin: 0 1.5rem .35rem 0; }
.fb-sub { margin: 0 0 1rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }

.fb-type { display: inline-flex; gap: .4rem; margin: 0 0 1rem; }
.fb-type-opt {
    border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--ink-soft);
    border-radius: 999px; padding: .35rem .9rem; font: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.fb-type-opt.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.fb-label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft);
    margin: .85rem 0 .3rem; text-transform: uppercase; letter-spacing: .04em; }
.fb-input {
    width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
    background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 8px;
    padding: .55rem .7rem;
}
.fb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fb-textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }

.fb-image-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.fb-img-btn { font-size: .85rem; cursor: pointer; }
.fb-img-btn.btn-ghost { border: 1px dashed var(--line-strong); }
.fb-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.fb-preview {
    position: relative; display: inline-block; max-width: 100%;
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-elev);
}
.fb-preview img { display: block; max-width: 100%; max-height: 220px; object-fit: contain; }
.fb-preview-remove {
    position: absolute; top: .3rem; right: .3rem; width: 1.6rem; height: 1.6rem;
    border: 0; border-radius: 50%; background: rgba(20,16,12,.7); color: #fff;
    font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.fb-error {
    margin-top: .85rem; padding: .55rem .7rem; border-radius: 8px;
    background: #f8e8e8; color: #7a2020; font-size: .85rem; border: 1px solid #d9b5b5;
}
.fb-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem; }
.fb-meta-note { margin: .8rem 0 0; font-size: .73rem; color: var(--ink-mute); line-height: 1.4; }

.fb-success { text-align: center; padding: 1rem .5rem; }
.fb-success-mark {
    width: 3rem; height: 3rem; margin: 0 auto .5rem; border-radius: 50%;
    background: var(--ok-soft); color: var(--ok); font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
}
.fb-success h3 { margin: 0 0 .4rem; }
.fb-success p { margin: 0 0 1.2rem; color: var(--ink-soft); }

/* ---------- feedback survey (Anketa) ---------- */
/* The survey is taller than the bug/idea form, so let the card scroll within the viewport. */
.fb-card.is-survey { max-height: calc(100vh - 2.5rem); overflow-y: auto; }

.fb-q { margin: 1.1rem 0 0; }
.fb-q-label { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); margin: 0 0 .5rem; line-height: 1.4; }
.fb-q-hint { font-weight: 400; color: var(--ink-mute); font-size: .8rem; }

.fb-options { display: flex; flex-direction: column; gap: .4rem; }
.fb-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.fb-opt {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .7rem; border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--bg-elev); cursor: pointer; font-size: .88rem; color: var(--ink-soft);
    transition: border-color .15s, background .15s, color .15s; line-height: 1.35;
}
.fb-opt:hover { border-color: var(--accent); }
.fb-opt.is-checked { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.fb-opt input { accent-color: var(--accent); width: 1rem; height: 1rem; flex: 0 0 auto; margin: 0; }
.fb-opt-consent { align-items: flex-start; }
.fb-opt-consent input { margin-top: .15rem; }
.fb-other-input { margin-top: .45rem; }

.fb-nps { display: flex; gap: .3rem; flex-wrap: wrap; }
.fb-nps-btn {
    width: 2rem; height: 2rem; border: 1px solid var(--line-strong); border-radius: 6px;
    background: var(--bg-elev); color: var(--ink-soft); font: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.fb-nps-btn:hover { border-color: var(--accent); }
.fb-nps-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.fb-nps-scale { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-mute); margin-top: .3rem; }

@media (max-width: 480px) { .fb-opt-grid { grid-template-columns: 1fr; } }

/* ---------- feedback floating button + second-login nudge ---------- */
/* Bottom-left, opposite the AI assistant fab (bottom-right) so they never overlap. */
.fb-fab-wrap {
    position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 60;
    display: flex; flex-direction: column; align-items: flex-start; gap: .65rem;
}
.fb-fab {
    position: relative; isolation: isolate;
    width: 3.4rem; height: 3.4rem; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent); color: #fff;
    box-shadow: 0 10px 24px rgba(40, 30, 18, .28);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.fb-fab:hover {
    background: var(--accent-ink); transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(40, 30, 18, .34);
}
/* attention glow: an expanding "ping" ring + a gentle breathing halo, both behind the button */
.fb-fab::before, .fb-fab::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    z-index: -1; pointer-events: none;
}
.fb-fab::before {
    box-shadow: 0 0 0 0 rgba(196, 90, 42, .5);
    animation: fb-fab-ping 2.4s ease-out infinite;
}
.fb-fab::after {
    box-shadow: 0 0 14px 3px rgba(196, 90, 42, .5);
    animation: fb-fab-breathe 2.4s ease-in-out infinite;
}
@keyframes fb-fab-ping {
    0%   { box-shadow: 0 0 0 0 rgba(196, 90, 42, .5); }
    70%  { box-shadow: 0 0 0 16px rgba(196, 90, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 90, 42, 0); }
}
@keyframes fb-fab-breathe {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .fb-fab::before, .fb-fab::after { animation: none; }
}

.fb-nudge {
    position: relative; width: 16.5rem; max-width: calc(100vw - 3rem);
    background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(40, 30, 18, .22);
    padding: .9rem 1rem 1rem; animation: fb-nudge-in .25s ease;
}
/* little speech-bubble tail pointing down toward the fab */
.fb-nudge::after {
    content: ""; position: absolute; left: 1.4rem; bottom: -7px; width: 12px; height: 12px;
    background: var(--bg-elev); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
    transform: rotate(45deg);
}
.fb-nudge-text { margin: 0 0 .7rem; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.fb-nudge-cta { width: 100%; justify-content: center; }
.fb-nudge-close {
    position: absolute; top: .25rem; right: .45rem; border: 0; background: none;
    font-size: 1.25rem; line-height: 1; color: var(--ink-mute); cursor: pointer;
}
.fb-nudge-close:hover { color: var(--ink); }
@keyframes fb-nudge-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- e-mail confirmation gate (projects screen) ---------- */
.email-confirm-card {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--accent-soft); border: 1px solid var(--line-strong);
    border-radius: 12px; padding: 1.1rem 1.25rem; margin: 0 0 1.75rem;
}
.email-confirm-ico {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.email-confirm-body { flex: 1; min-width: 0; }
.email-confirm-body h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
.email-confirm-body p { margin: 0 0 .85rem; color: var(--ink-soft); line-height: 1.55; }
.email-confirm-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.email-confirm-msg { margin: .8rem 0 0; font-size: .9rem; font-weight: 600; color: var(--accent-ink); }

/* ---------- onboarding (guided spotlight tour) ---------- */
/* Full-screen layer that captures clicks (blocks the page underneath). For centered steps it dims
   directly; for targeted steps the dimming comes from the spotlight hole's huge box-shadow. */
.onboard { position: fixed; inset: 0; z-index: 1200; }
.onboard.is-centered { background: rgba(20,16,12,.55); }
/* Full-viewport dim with the spotlight hole cut out via clip-path (set inline). Deliberately NOT
   a huge (9999px) box-shadow spread - Firefox/WebRender fails to rasterize such oversized shadow
   surfaces on HiDPI (4K at 150% scale), blanking the whole overlay - and NOT four abutting strips,
   which leave an undimmed hairline along the hole's fractional edges at non-integer dpr. */
.onboard-dim {
    position: fixed; inset: 0; background: rgba(20,16,12,.62); pointer-events: none;
    transition: clip-path .25s ease;
}
/* Transparent cutout over the highlighted element (accent ring only; the strips do the dimming). */
.onboard-hole {
    position: fixed; border-radius: 12px; pointer-events: none;
    outline: 2px solid var(--accent); outline-offset: 2px;
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.onboard-card {
    position: fixed; width: min(21.25rem, 92vw);
    background: var(--bg); border-radius: var(--radius-lg, 16px);
    box-shadow: 0 24px 70px rgba(0,0,0,.35); padding: 1.6rem 1.6rem 1.25rem; text-align: center;
    transition: top .25s ease, left .25s ease;
    /* Safety net: the placement math estimates the card height, so never let a misestimate push
       the actions row off-screen - cap the card to the viewport and scroll inside instead. */
    max-height: calc(100vh - 24px); overflow-y: auto;
}
.onboard-card.is-centered { top: 50%; left: 50%; width: min(30rem, 92vw); transform: translate(-50%, -50%); padding: 2rem 1.9rem 1.5rem; }
.onboard-close {
    position: absolute; top: .6rem; right: .7rem; border: 0; background: none;
    font-size: 1.5rem; line-height: 1; color: var(--ink-mute); cursor: pointer;
}
.onboard-art { font-size: 2.4rem; line-height: 1; }
.onboard-step { margin-top: .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.onboard-title { margin: .35rem 0 .5rem; font-size: 1.4rem; }
.onboard-body { margin: 0 auto; max-width: 28rem; color: var(--ink-soft); line-height: 1.6; }
.onboard-dots { display: flex; justify-content: center; gap: .4rem; margin: 1.25rem 0; }
.onboard-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .2s, width .2s; }
.onboard-dot.is-active { background: var(--accent); width: 18px; border-radius: 999px; }
.onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.onboard-actions-right { display: flex; gap: .5rem; }
.app-nav {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: saturate(1.4) blur(6px);
}
.app-nav-inner {
    max-width: var(--max); margin: 0 auto; padding: 1rem clamp(1.5rem, 4vw, 4rem);
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.brand {
    font-family: var(--font-serif); font-weight: 800; font-size: 1.15rem;
    color: var(--ink); display: inline-flex; align-items: center; gap: .5rem;
    border: none;
}
.brand-mark { color: var(--accent); font-size: 1.3rem; }
.brand-logo { height: 3.25rem; width: auto; display: block; }
.brand-glyph { width: 1em; height: 1em; vertical-align: -0.12em; }
.brand-tag {
    font-family: var(--font-sans); font-weight: 500; font-size: .8rem;
    color: var(--ink-mute); letter-spacing: .01em;
}
.brand:hover { border: none; }

.nav-links {
    display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap;
    align-items: center;
    font-size: .875rem;
}
.nav-links a {
    display: inline-flex; align-items: center;
    padding: .35rem .75rem; border-radius: var(--radius);
    color: var(--ink-soft); border: none; font-weight: 500;
    white-space: nowrap; line-height: 1.4;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-elev); }
.nav-links a.active { color: var(--ink); background: var(--bg-elev); }
.nav-links a .count { color: var(--ink-mute); font-variant-numeric: tabular-nums; font-size: .75rem; margin-left: .35rem; }

/* Prominent, glowing "Hiša v 3D" nav entry - an accent pill that pulses to draw the eye, set apart
   from the muted text links around it. Overrides the base .nav-links a colour/weight. */
.nav-links a.nav-link-3d {
    color: #fff; font-weight: 700; gap: .35rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-ink));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
                0 0 12px 1px color-mix(in srgb, var(--accent) 55%, transparent);
    animation: nav-3d-glow 2.4s ease-in-out infinite;
    transition: transform .15s, box-shadow .15s;
}
.nav-links a.nav-link-3d:hover,
.nav-links a.nav-link-3d.active {
    color: #fff; transform: translateY(-1px);
    background: linear-gradient(135deg, var(--accent-ink), var(--accent));
}
.nav-link-3d-ico { display: inline-flex; align-items: center; }
.nav-link-3d-ico svg { width: 1.05rem; height: 1.05rem; }
/* Disabled entry: a phase-flow project with no saved parcel yet (the 3D view is built from it).
   A muted, non-clickable pill - no glow - that hints (via title) to look up the parcel first. */
.nav-links .nav-link-3d.is-disabled {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border-radius: var(--radius);
    font-weight: 600; font-size: .875rem; white-space: nowrap; line-height: 1.4;
    color: var(--ink-mute); background: var(--bg-elev);
    border: 1px dashed var(--line-strong); cursor: not-allowed; animation: none;
}
.nav-links .nav-link-3d.is-disabled .nav-link-3d-ico { opacity: .7; }
@keyframes nav-3d-glow {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
                           0 0 8px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
    50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
                           0 0 18px 3px color-mix(in srgb, var(--accent) 70%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-links a.nav-link-3d { animation: none; }
}

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    appearance: none; border: none; background: transparent;
    padding: .35rem .75rem; border-radius: var(--radius);
    font-family: var(--font-sans); font-size: .875rem; font-weight: 500;
    color: var(--ink-soft); cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem;
    transition: background .15s, color .15s;
}
.nav-dropdown-toggle:hover { color: var(--ink); background: var(--bg-elev); }
.nav-dropdown.open .nav-dropdown-toggle { color: var(--ink); background: var(--bg-elev); }
.nav-dropdown-chevron {
    font-size: .7rem; color: var(--ink-mute); transition: transform .15s;
}
.nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); color: var(--ink-soft); }
.nav-dropdown-backdrop {
    position: fixed; inset: 0; z-index: 18; background: transparent; cursor: default;
}
.nav-dropdown-menu {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 20;
    min-width: 16rem; background: var(--bg-elev);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(40, 30, 18, .12);
    padding: .35rem; display: flex; flex-direction: column; gap: 0;
}
.nav-dropdown-menu .nav-dropdown-item {
    display: flex; align-items: baseline; gap: .75rem;
    padding: .55rem .75rem; border-radius: var(--radius);
    font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
    color: var(--ink-soft); border: none;
    white-space: nowrap;
}
.nav-dropdown-menu .nav-dropdown-item:hover { background: var(--bg); color: var(--ink); }
.nav-dropdown-menu .nav-dropdown-item.active { background: var(--bg); color: var(--ink); }
.nav-dropdown-menu .nav-dropdown-item .nav-dropdown-dot {
    flex: none; width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--phase-color, var(--accent)); align-self: center;
}
.nav-dropdown-menu .nav-dropdown-item.active .nav-dropdown-dot {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--phase-color, var(--accent)) 30%, transparent);
}
.nav-dropdown-menu .nav-dropdown-item > span:nth-child(2) { flex: 1; }
/* user-menu rows: icon + label, vertically centred with a tight gap. The base .nav-dropdown-item uses
   baseline alignment (for the phase dropdown's text+count layout), which left odd gaps with the icons. */
.nav-user-menu .nav-dropdown-item { align-items: center; gap: .6rem; }
.nav-dropdown-menu .nav-dropdown-item .nav-dropdown-ico {
    flex: none; width: 1.15rem; height: 1.15rem;
    display: flex; align-items: center; justify-content: center; align-self: center;
}
.nav-dropdown-menu .nav-dropdown-item .nav-dropdown-ico svg { width: 17px; height: 17px; display: block; }
.nav-dropdown-menu .nav-dropdown-item .count {
    color: var(--ink-mute); font-variant-numeric: tabular-nums;
    font-size: .78rem; margin-left: 0;
}
/* Phase marked "ni relevantno": dim the row and strike its title (matches the phase header). */
.nav-dropdown-menu .nav-dropdown-item.is-irrelevant { opacity: .6; }
.nav-dropdown-menu .nav-dropdown-item.is-irrelevant .nav-phase-title {
    text-decoration: line-through; text-decoration-color: var(--ink-mute);
}

/* Reusable circular phase badge: phase color + phase number. */
.phase-badge {
    flex: none; align-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: var(--phase-color, var(--accent)); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--phase-color, var(--accent)) 22%, transparent);
}
.phase-cell { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- hamburger (collapses the nav links on phones) ---------- */
.nav-hamburger {
    display: none; /* desktop: links are shown inline, no hamburger */
    appearance: none; flex: none; cursor: pointer;
    width: 2.6rem; height: 2.6rem; padding: 0;
    align-items: center; justify-content: center;
    background: var(--bg-elev); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    transition: border-color .15s, background .15s;
}
.nav-hamburger:hover { border-color: var(--ink); }

@media (max-width: 760px) {
    /* Keep the bar to a single row: brand on the left, avatar + hamburger on the right. */
    .app-nav-inner { flex-wrap: nowrap; gap: .6rem; padding-top: .7rem; padding-bottom: .7rem; }
    .app-nav .brand-logo { height: 2.6rem; }
    .nav-user { margin-left: auto; }
    .nav-hamburger { display: inline-flex; }

    /* The links drop into a full-width panel under the bar, toggled by .nav-open. */
    .nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: .1rem;
        margin: 0; padding: .5rem clamp(1.25rem, 4vw, 2rem) .85rem;
        background: var(--bg-elev); border-bottom: 1px solid var(--line-strong);
        box-shadow: 0 16px 28px rgba(40, 30, 18, .14);
    }
    .app-nav.nav-open .nav-links { display: flex; }
    /* Scope everything to .nav-links so the account (UserMenu) dropdown keeps its floating layout. */
    .nav-links > * { width: 100%; }
    .nav-links a,
    .nav-links .nav-link-3d.is-disabled,
    .nav-links .nav-dropdown-toggle { width: 100%; padding: .7rem .75rem; font-size: 1rem; }
    /* The "Faze" submenu expands inline within the panel instead of as a floating dropdown. */
    .nav-links .nav-dropdown-menu {
        position: static; min-width: 0; border: none; box-shadow: none;
        padding: .15rem 0 .35rem .5rem;
    }
}

.app-main {
    max-width: var(--max); margin: 0 auto; padding: 3rem clamp(1.5rem, 4vw, 4rem) 6rem;
    width: 100%;
}
/* Wide layout for data-dense pages (Terminski Plan) - uses the available width, capped on huge screens. */
.app-main-wide { max-width: min(1800px, 100%); }

.app-footer {
    border-top: 1px solid var(--line);
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: .85rem;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.app-footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.app-footer-link {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    color: var(--ink-soft); border-bottom: 1px solid transparent; transition: border-color .15s;
}
.app-footer-link:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ---------- admin: invite codes ---------- */
.invite-create {
    display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap;
    margin: 1.25rem 0 1.75rem;
}
.invite-create-field { display: flex; flex-direction: column; gap: .25rem; }
.invite-create-field label { font-size: .75rem; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.invite-create-field .type-input { width: 9rem; }
.invite-create-note { flex: 1; min-width: 12rem; }
.invite-create-note .type-input { width: 100%; }
.invite-table code.invite-code { font-size: .92rem; font-weight: 600; letter-spacing: .02em; }
.invite-table tr.is-revoked { opacity: .55; }
/* a sent invite is struck through so it's clear it has already been handed out */
.invite-table tr.is-sent code.invite-code {
    text-decoration: line-through; text-decoration-color: var(--ink-mute); color: var(--ink-mute);
}
.invite-status {
    display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem;
    border-radius: 999px; color: #fff; background: var(--ink-mute);
}
.invite-status-active { background: #3f7d4f; }
.invite-status-used { background: var(--ink-mute); }
.invite-status-expired { background: #c6892b; }
.invite-status-revoked { background: #b5483f; }
.invite-table th.invite-sent-col, .invite-table td.invite-sent-col { text-align: center; }
.invite-sent-check { display: inline-flex; cursor: pointer; }
.invite-sent-check input { width: 1.1rem; height: 1.1rem; cursor: pointer; accent-color: #3f7d4f; }

/* ---------- admin list controls (filter row), shared by Invites & Users ----------
   The pager below the tables reuses the iskalnik's .search-pager styles. */
.admin-list-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem;
}
.admin-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.admin-filter-input { width: min(24rem, 100%); }
.admin-status-filter { width: auto; }
.admin-pager-info { color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* leading sequence-number column */
.admin-seq-col { width: 3rem; text-align: right; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* ---------- hero ---------- */
.hero { margin-bottom: 4rem; }
.hero-back {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82rem; font-weight: 600; color: var(--ink-soft);
    border-bottom: none; margin-bottom: 1rem;
}
.hero-back:hover { color: var(--accent); }
.hero-eyebrow {
    font-family: var(--font-sans); font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--accent); margin-bottom: 1rem;
}
.hero h1 em {
    font-style: italic; font-weight: 400; color: var(--accent-ink);
}
/* Project title is the page's focal point - larger than the default h1. */
.hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; }
.hero-lead {
    font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.5;
    color: var(--ink-soft); font-weight: 400;
    max-width: 40rem; margin: 1.5rem 0 0;
}
.hero-meta {
    margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
    display: flex; gap: 2rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-mute);
}
.hero-meta strong { color: var(--ink); font-weight: 600; }

/* ---------- timeline ---------- */
.timeline-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.timeline-head h2 { font-size: 1.1rem; font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }

.phases { display: grid; gap: 0; position: relative; }
.phase-row { position: relative; }
/* Disable-phase toggle: a sibling of the card link (not nested in the <a>), floated top-right so a
   click toggles relevance instead of navigating into the phase. */
.phase-toggle {
    position: absolute; top: .9rem; right: 1.1rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
    padding: .28rem .65rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-mute);
    transition: border-color .12s, color .12s, background .12s;
}
.phase-toggle:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-elev); }
.phase-toggle.is-on { background: var(--ink-mute); border-color: var(--ink-mute); color: #fff; }
.phase-card {
    display: grid; grid-template-columns: 3rem 1fr auto; gap: 1.5rem;
    padding: 1.75rem 2rem; border-top: 1px solid var(--line);
    border-left: 4px solid var(--phase-color, transparent);
    align-items: center;
    transition: background .15s;
    text-decoration: none; border-bottom: none;
}
.phase-row:last-child .phase-card { border-bottom: 1px solid var(--line); }
.phase-card:hover { background: var(--bg-elev); }
.phase-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--phase-color, var(--accent)); color: #fff;
    font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem;
    line-height: 1; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase-color, var(--accent)) 20%, transparent);
}
.phase-body { min-width: 0; }
.phase-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.phase-intro { font-size: .9rem; color: var(--ink-soft); margin-top: .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phase-progress { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; min-width: 8rem; }
.phase-ratio { font-family: var(--font-serif); font-variant-numeric: tabular-nums; color: var(--ink); font-size: 1rem; font-weight: 600; }
.phase-ratio span { color: var(--ink-mute); font-weight: 400; }
.phase-bar { width: 8rem; height: 3px; background: var(--line); overflow: hidden; }
.phase-bar-fill { height: 100%; background: var(--phase-color, var(--accent)); transition: width .3s ease; }
.phase-bar-fill.full { background: var(--ok); }
.phase-card.is-irrelevant { opacity: .55; }
.phase-card.is-irrelevant .phase-num { background: var(--ink-mute); }
.phase-irrelevant-badge {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #fff; background: var(--ink-mute); padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}

/* ---------- phase page ---------- */
.phase-header {
    display: flex; justify-content: space-between; gap: 2rem;
    align-items: flex-end; padding-bottom: 2rem;
    border-bottom: 1px solid var(--line); margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.phase-header-text { flex: 1; min-width: 16rem; }
.phase-header .eyebrow {
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
    color: var(--phase-color, var(--accent)); margin-bottom: .75rem;
}
.phase-header .intro { color: var(--ink-soft); margin-top: 1rem; max-width: 36rem; }
/* Back link folded into the eyebrow row (breadcrumb-style) so it no longer eats a whole row. */
.phase-eyebrow-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .75rem; }
.phase-eyebrow-row .eyebrow { margin-bottom: 0; }
.phase-back {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .78rem; color: var(--ink-mute); text-decoration: none;
}
.phase-back::after { content: "·"; margin-left: .55rem; color: var(--line-strong); }
.phase-back:hover { color: var(--accent-ink); }
.phase-stat {
    text-align: right; font-family: var(--font-serif);
}
.phase-stat-num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--ink); }
.phase-stat-num span { color: var(--ink-mute); font-weight: 400; }
.phase-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-mute); margin-top: .5rem; font-family: var(--font-sans); font-weight: 500; }
.phase-stat-bar { width: 9rem; height: 3px; background: var(--line); margin-top: .75rem; margin-left: auto; }
.phase-stat-bar-fill { height: 100%; background: var(--phase-color, var(--accent)); }
.phase-stat-bar-fill.full { background: var(--ok); }
.phase-budget { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.phase-budget-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }
.phase-budget-wrap { width: 8rem; }
.phase-budget-input { width: 100%; text-align: right; }
.phase-budget-spent { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.phase-budget-spent.is-over { color: #b5483f; font-weight: 600; }

.section-block { margin-bottom: 3rem; }
.section-head {
    display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem;
    padding-bottom: .5rem; border-bottom: 1px dashed var(--line-strong);
}
.section-head h2 {
    font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600;
}
.section-head .section-count { color: var(--ink-mute); font-size: .8rem; font-variant-numeric: tabular-nums; margin-left: auto; }
.section-intro { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1.25rem; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }

.item {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    transition: border-color .15s, box-shadow .15s, background .2s;
}
.item:hover { border-color: var(--line-strong); }
.item.is-done { background: #d5e7d3; border-color: #9cc0a2; }
.item.is-wip { background: #fae8ca; border-color: #ddb377; }
.item.is-na { background: #e8e7e4; border-color: #c9c7c2; opacity: .78; }
.item.is-na .item-label { color: var(--ink-mute); text-decoration: line-through; text-decoration-color: var(--ink-mute); text-decoration-style: dotted; }

/* ---------- important tasks ---------- */
.item-important.is-important {
    color: #c4831c; border-color: #e6b25e; background: #fdf3e0;
}
.item-important.is-important svg { fill: currentColor; }
.item.is-important {
    border-color: #e0a93e;
    box-shadow: 0 0 0 1px #e0a93e, 0 0 16px rgba(224, 169, 62, .4);
}
.gantt-bar.is-important {
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #e3a93c, 0 0 10px 2px rgba(227, 169, 60, .9);
}
.item-row { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }

/* Action button-bar on the task row (flag, $, attachment, date). */
.item-actions { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; }

/* Status as a dropdown, tinted by the current state. */
.status-select {
    flex-shrink: 0; appearance: none; -webkit-appearance: none;
    height: 2rem; box-sizing: border-box;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background-color: var(--bg); color: var(--ink-soft);
    font-family: var(--font-sans); font-size: .72rem; font-weight: 700; line-height: 1;
    text-transform: uppercase; letter-spacing: .05em;
    padding: 0 1.7rem 0 .8rem; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238c8679' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat; background-position: right .55rem center; background-size: .7rem;
    transition: border-color .15s, color .15s;
}
.status-select:focus { outline: none; border-color: var(--accent); }
.status-select.is-todo { color: #b03c30; border-color: #dc988d; }
.status-select.is-wip { color: #9c6c06; border-color: #d8ba6c; }
.status-select.is-done { color: #3d6b4a; border-color: #9cc0a2; }
.status-select.is-na { color: #6e6b66; border-color: #c6c4bf; }

.item-label {
    flex: 1; min-width: 14rem; font-size: .98rem; line-height: 1.4; cursor: text;
    color: var(--ink); user-select: text; font-weight: 700;
}
.item.is-done .item-label { color: var(--ink-soft); }

/* ───────── collapsible task rows (progressive disclosure) ───────── */

/* Title is now a button that expands the row; label/preview/badges stack inside it. */
.item-label-btn {
    flex: 1; min-width: 12rem; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    background: none; border: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit;
}
.item-label-btn .item-label { flex: initial; min-width: 0; width: 100%; cursor: pointer; }
.item-label-preview {
    max-width: 100%; font-size: .82rem; font-weight: 400; color: var(--ink-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-badges { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.item-badge {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .72rem; color: var(--ink-soft); background: var(--bg);
    border: 1px solid var(--line); border-radius: 999px; padding: .1rem .4rem; line-height: 1.4;
}
.item-badge svg { width: 12px; height: 12px; }
.item-badge-n { font-variant-numeric: tabular-nums; }

/* One-click done: round checkbox on the left of every row. */
.item-check {
    flex-shrink: 0; width: 1.45rem; height: 1.45rem; padding: 0;
    border: 2px solid var(--line-strong); border-radius: 50%; background: var(--bg);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    color: transparent; transition: background .15s, border-color .15s, color .15s;
}
.item-check:hover { border-color: var(--accent); }
.item-check-mark { font-size: .85rem; line-height: 1; }
.item-check.is-checked { background: #3d6b4a; border-color: #3d6b4a; color: #fff; }

/* Expand chevron rotates down when open. */
.item-expand svg { transition: transform .15s; }
.item-expand.is-open svg { transform: rotate(90deg); }

/* Detail panel (everything below the header) is only in the DOM when expanded. */
.item-detail { margin-top: .75rem; }
.item-detail .item-actions { flex-wrap: wrap; margin-bottom: .25rem; }
.item-detail .item-remove-inline { margin-left: auto; }

/* Multi-select mode. */
.item-select { flex-shrink: 0; display: inline-flex; align-items: center; }
.item-select input { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.item.is-selectable .item-label-btn { cursor: pointer; }
.item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ───────── phase task toolbar (filters · hide-completed · select) ───────── */
.task-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.task-filters { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.task-filter, .task-toolbar-toggle {
    appearance: none; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-soft);
    border-radius: 999px; padding: .32rem .8rem; font-family: var(--font-sans); font-size: .78rem;
    font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.task-filter:hover, .task-toolbar-toggle:hover { border-color: var(--accent); }
.task-filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.task-toolbar-right { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.task-toolbar-toggle.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg-elev); }
.task-empty { color: var(--ink-mute); font-size: .92rem; text-align: center; padding: 1.25rem 0; }
.task-show-all {
    display: block; width: 100%; margin-top: .75rem; appearance: none; cursor: pointer;
    background: var(--bg); border: 1px dashed var(--line-strong); border-radius: var(--radius);
    padding: .6rem; color: var(--ink-soft); font-family: var(--font-sans); font-weight: 600; font-size: .85rem;
}
.task-show-all:hover { border-color: var(--accent); color: var(--ink); }

/* ───────── bulk-action bar (sticky while selecting) ───────── */
.bulk-bar { position: sticky; bottom: 1rem; z-index: 20; margin-top: 1.25rem; display: flex; justify-content: center; pointer-events: none; }
.bulk-bar-inner {
    pointer-events: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 999px;
    padding: .5rem .9rem; box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
.bulk-count { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.bulk-actions, .bulk-bar-end { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.bulk-bar-end { margin-left: auto; }

/* ───────── cross-phase "Naslednji koraki" dashboard list ───────── */
.next-steps { margin: 0 0 2.5rem; }
.next-steps-head {
    display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem;
    padding-bottom: .5rem; border-bottom: 1px dashed var(--line-strong);
}
.next-steps-head h2 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; }
.next-steps-sub { color: var(--ink-mute); font-size: .82rem; margin-left: auto; }
.next-steps-empty { color: var(--ink-mute); font-size: .92rem; }
.next-steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.next-step-link {
    display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; text-decoration: none; color: inherit;
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s;
}
.next-step-link:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.next-step-dot { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.next-step-main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.next-step-text { font-weight: 600; color: var(--ink); }
.next-step-phase { font-size: .78rem; color: var(--ink-mute); }
.next-step-tag {
    flex-shrink: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .2rem .55rem; border-radius: 999px; border: 1px solid;
}
.next-step-tag.is-overdue { color: #b03c30; border-color: #dc988d; background: #fbe9e6; }
.next-step-tag.is-soon { color: #9c6c06; border-color: #d8ba6c; background: #fdf3e0; }
.next-step-tag.is-important { color: #c4831c; border-color: #e6b25e; background: #fdf3e0; }
.next-step-tag.is-wip { color: #9c6c06; border-color: #d8ba6c; background: #fbf1dd; }
.next-step-tag.is-todo { color: var(--ink-soft); border-color: var(--line-strong); background: var(--bg); }

.note-input {
    display: block; width: 100%; margin-top: .85rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: .55rem .7rem; background: var(--bg);
    font-family: var(--font-sans); font-size: .9rem;
    color: var(--ink); resize: vertical; min-height: 4.8rem; line-height: 1.45;
}
.note-input::placeholder { color: var(--ink-mute); font-style: italic; }
.note-input:focus { outline: none; border-color: var(--accent); }

/* Task description folded behind an accordion ("Opis") to keep rows compact. */
.task-desc { margin-top: .75rem; }
.task-desc-label {
    display: block; font-size: .7rem; font-weight: 600; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .08em;
}
.task-desc .note-input { margin-top: .45rem; }
/* "+ Dodaj opis" - shown instead of an empty textbox when the task has no description yet. Block on
   its own line (content-width) so it never sits next to the round action buttons above. */
.task-desc-add {
    display: block; width: fit-content; margin-top: .75rem;
    appearance: none; background: none; border: none; cursor: pointer; padding: 0;
    font-family: var(--font-sans); font-size: .8rem; font-weight: 600; color: var(--accent);
}
.task-desc-add:hover { text-decoration: underline; }

/* ---------- task type ---------- */
.type-pills {
    display: inline-flex; flex-shrink: 0; gap: 0;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--bg); overflow: hidden; padding: 2px;
}
.type-pill {
    appearance: none; border: none; background: transparent;
    padding: .25rem .65rem; font-family: var(--font-sans);
    font-size: .72rem; font-weight: 600; color: var(--ink-mute);
    cursor: pointer; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .06em;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.type-pill:hover { color: var(--ink); }
.type-pill.active { background: var(--accent); color: white; }

.type-panel {
    margin-top: .85rem; padding: .8rem 1rem;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid; gap: .65rem;
}
.type-panel-inline {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    align-items: end;
}
.type-field { display: flex; flex-direction: column; gap: .3rem; }
.type-field > label {
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-mute);
}
.type-input {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-elev); padding: .45rem .65rem;
    font-family: var(--font-sans); font-size: .92rem; color: var(--ink);
    width: 100%;
}
.type-input:focus { outline: none; border-color: var(--accent); }
.type-input::placeholder { color: var(--ink-mute); }
textarea.type-input { resize: vertical; min-height: 2.4rem; }

.price-input-wrap { position: relative; }
.price-input { padding-right: 2rem; font-variant-numeric: tabular-nums; }
.price-suffix {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-mute); pointer-events: none;
    font-weight: 600; font-size: .92rem;
}
.duration-summary {
    grid-column: 1 / -1;
    font-size: .8rem; color: var(--ink-soft);
    font-style: italic; font-variant-numeric: tabular-nums;
}

/* ---------- task meta (Rok + add inquiry) ---------- */
.task-meta {
    margin-top: .75rem; display: flex; align-items: center;
    gap: .85rem; flex-wrap: wrap;
}
.task-meta-dates {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--ink-soft);
}
.task-meta-label {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-mute); margin-right: .25rem;
}
.task-meta-input {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); padding: .25rem .5rem;
    font-family: var(--font-sans); font-size: .82rem; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.task-meta-input:focus { outline: none; border-color: var(--accent); }
/* admin-defined meta key/value pairs on a task */
.task-metafields { row-gap: .45rem; }
.task-metafield-input { min-width: 11rem; }
.task-meta-sep { color: var(--ink-mute); font-weight: 500; }
.task-meta-duration {
    margin-left: .25rem; font-size: .75rem; color: var(--ink-mute);
    font-style: italic; font-variant-numeric: tabular-nums;
}
.task-meta-recommended {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; color: var(--ink-soft);
}
.task-meta-recommended strong { font-variant-numeric: tabular-nums; }
.item-info-btn.is-active { color: var(--accent); }
.task-info {
    margin: .5rem 0 .25rem; padding: .7rem .9rem;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: var(--radius);
    font-size: .88rem; color: var(--ink-soft); line-height: 1.55; white-space: pre-line;
}
.task-inquiry-add { margin-left: auto; }

/* ---------- inquiries ---------- */
.inquiries {
    margin-top: .85rem; display: grid; gap: .55rem;
}
.inquiry-card {
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius); overflow: hidden;
}
.inquiry-summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; font-size: .85rem;
}
.inquiry-summary::-webkit-details-marker { display: none; }
.inquiry-summary:hover { background: var(--bg-elev); }
.inquiry-chevron { display: inline-flex; color: var(--ink-mute); flex-shrink: 0; transition: transform .15s; }
.inquiry-chevron svg { display: block; }
.inquiry-card[open] .inquiry-chevron { transform: rotate(90deg); }
.inquiry-summary-title {
    flex: 1; min-width: 0; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inquiry-summary-price {
    flex-shrink: 0; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.inquiry-summary-badge {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .2rem;
    font-size: .68rem; font-weight: 600; color: var(--ok);
    text-transform: uppercase; letter-spacing: .04em;
}
.inquiry-summary-badge svg { width: 12px; height: 12px; fill: currentColor; stroke: currentColor; }
.inquiry-body {
    padding: .55rem .75rem .65rem; display: flex; flex-direction: column; gap: .5rem;
    border-top: 1px solid var(--line);
}
.inquiry-head {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.inquiry-title {
    flex: 1; min-width: 12rem;
}
.inquiry-price { width: 8.5rem; flex-shrink: 0; }
.inquiry-remove {
    appearance: none; border: none; background: transparent;
    color: var(--ink-mute); cursor: pointer; font-size: 1.25rem;
    line-height: 1; padding: 0 .35rem; flex-shrink: 0;
}
.inquiry-remove:hover { color: #7a2020; }
.inquiry-company { font-size: .85rem; min-height: 2.4rem; }
.inquiries-summary {
    font-size: .82rem; color: var(--ink-soft); padding: .35rem .5rem;
    font-style: italic;
}
.inquiries-summary strong {
    color: var(--ok); font-style: normal; font-weight: 600;
}
.inquiry-attachments {
    margin-top: 0; padding-top: .5rem;
    border-top: 1px dashed var(--line);
}
.upload-btn-sm {
    align-self: flex-start; font-size: .72rem; padding: .25rem .55rem;
}

/* ---------- gallery (task attachments, pinned to the bottom of the card) ---------- */
.task-gallery { margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.task-gallery-head {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-mute);
}
.task-gallery .attachments { margin-top: .5rem; padding-top: 0; border-top: none; gap: .75rem; }
/* Bigger, multi-row thumbnails for the on-task photo gallery. */
.task-gallery .attachment-thumb { width: 9rem; height: 9rem; }
@media (max-width: 560px) {
    .task-gallery .attachments { gap: .6rem; }
    .task-gallery .attachment-thumb { width: calc(50% - .3rem); height: 8.5rem; }
}

/* ---------- attachments ---------- */
.attachments {
    margin-top: .9rem; padding-top: .75rem;
    border-top: 1px dashed var(--line);
    display: flex; flex-wrap: wrap; gap: .6rem;
}
.attachment-thumb {
    position: relative; width: 6.5rem; height: 6.5rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); padding: 0; overflow: hidden; cursor: zoom-in;
    transition: border-color .15s, transform .15s;
}
.attachment-thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachment-thumb .thumb-placeholder {
    display: grid; place-items: center; width: 100%; height: 100%;
    color: var(--ink-mute); font-size: 1.25rem;
}
.attachment-remove {
    position: absolute; top: 2px; right: 2px;
    width: 1.25rem; height: 1.25rem;
    background: rgba(0,0,0,.55); color: #fff;
    border: none; border-radius: 50%;
    font-size: .85rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
}
.attachment-remove:hover { background: var(--accent-ink); }

.attachment-file {
    position: relative; display: inline-flex; align-items: center;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); padding: .35rem .55rem;
    max-width: 100%;
}
.attachment-file .file-link {
    appearance: none; border: none; background: transparent;
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    color: var(--ink); padding: 0; font: inherit;
}
.attachment-file .file-link:hover { color: var(--accent-ink); }
.attachment-file .file-icon { font-size: 1rem; }
.attachment-file .file-name {
    font-size: .85rem; max-width: 14rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-file .file-size {
    color: var(--ink-mute); font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
.attachment-file .attachment-remove {
    position: static; margin-left: .4rem;
    width: 1.1rem; height: 1.1rem; font-size: .75rem;
    background: transparent; color: var(--ink-mute);
}
.attachment-file .attachment-remove:hover { color: #7a2020; background: transparent; }

/* ---------- item foot ---------- */
.item-foot {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: .85rem;
}
.upload-btn {
    display: inline-flex; align-items: center; cursor: pointer;
    font-size: .78rem; font-weight: 500; color: var(--ink-soft);
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
    padding: .35rem .7rem; background: transparent;
    transition: color .15s, border-color .15s, background .15s;
}
.upload-btn:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--bg); }
.upload-btn input[type="file"] {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.upload-btn-locked-hint {
    font-size: .72rem; color: var(--ink-mute);
    border: none; padding: .25rem .55rem;
    border-bottom: 1px solid transparent;
}
.upload-btn-locked-hint:hover {
    color: var(--accent-ink); border-bottom-color: var(--accent);
}
.updated {
    margin-left: auto; font-size: .72rem; color: var(--ink-mute);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* ---------- lightbox ---------- */
.lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(20, 16, 10, .88);
    display: grid; place-items: center; padding: 2rem;
    animation: lb-fade .15s ease-out;
}
@keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } }
.lightbox-figure {
    position: relative; /* stacks above the (positioned) backdrop sibling */
    max-width: min(95vw, 1500px); max-height: 92vh;
    margin: 0; display: flex; flex-direction: column; align-items: center;
    gap: .75rem;
}
.lightbox-figure img {
    max-width: 100%; max-height: 85vh; object-fit: contain;
    border-radius: var(--radius); background: #000;
    box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.lightbox-figure figcaption {
    color: var(--bg-elev); font-size: .85rem;
    display: flex; gap: 1rem; align-items: baseline;
}
.lightbox-figure .lightbox-count { color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.lightbox-close {
    position: absolute; top: 1rem; right: 1rem;
    appearance: none; border: none; background: rgba(255,255,255,.1);
    color: #fff; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    appearance: none; border: none; background: rgba(255,255,255,.08);
    color: #fff; width: 3rem; height: 3rem; border-radius: 50%;
    font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255,255,255,.18); }
.lightbox-nav.prev { left: 1.25rem; }
.lightbox-nav.next { right: 1.25rem; }
@media (max-width: 560px) {
    .lightbox { padding: 1rem; }
    .lightbox-figure { max-width: 96vw; }
    .lightbox-nav { width: 2.5rem; height: 2.5rem; font-size: 1.6rem; }
    .lightbox-nav.prev { left: .4rem; }
    .lightbox-nav.next { right: .4rem; }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.1rem; font-family: var(--font-sans);
    font-size: .88rem; font-weight: 500; cursor: pointer;
    border-radius: var(--radius); border: 1px solid var(--line-strong);
    background: transparent; color: var(--ink); text-decoration: none;
    transition: all .15s;
}
.btn:hover { background: var(--bg-elev); border-color: var(--ink); border-bottom: 1px solid var(--ink); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: white; }
.btn-ghost { border-color: transparent; color: var(--ink-soft); }
.btn-danger { color: #7a2020; border-color: #d9b5b5; }
.btn-danger:hover { background: #f8e8e8; border-color: #7a2020; }

.phase-nav {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.phase-nav .spacer { flex: 1; }

/* phase marked "not relevant" */
.phase-actions { margin-top: 1.1rem; }
.phase-header.is-irrelevant h1 { text-decoration: line-through; text-decoration-color: var(--ink-mute); }
.phase-irrelevant-banner {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-left: 3px solid var(--ink-mute); border-radius: var(--radius);
    padding: .8rem 1rem; color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.5rem;
}
.phase-sections.is-phase-irrelevant { opacity: .5; }

/* ---------- IDP phase action panel (PDF + AI) ---------- */
/* Compact horizontal card (art · copy + progress · actions), matching the 2D-house card it sits by. */
.idp-actions {
    display: flex; align-items: center; gap: 1rem;
    margin: .25rem 0 1.5rem; padding: 1.1rem 1.25rem;
    border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: var(--bg-elev);
}

/* IDP hero: the "Hiša v 3D" teaser + the "Povzetek idejnega projekta" card. Two cards sit side by side
   (equal halves); a lone card (e.g. when the 3D teaser is hidden) fills the WHOLE row; both stack on
   narrow screens. Flexbox + flex-grow guarantees the single-card full-width case. */
.idp-hero-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; margin: .5rem 0 1.5rem; }
.idp-hero-row > .idp-image,
.idp-hero-row > .idp-actions { flex: 1 1 340px; min-width: 0; margin: 0; } /* specificity beats .idp-image-top margin */
.idp-hero-row > .idp-image { display: flex; }  /* wrapper stretches so its inner card fills the column */
.idp-hero-row .idp-house-card { flex: 1; }
.idp-actions-art {
    flex: none; width: 56px; height: 56px; display: grid; place-items: center;
    color: var(--accent); opacity: .8;
}
.idp-actions-art svg { width: 38px; height: 38px; }
.idp-actions-copy { flex: 1 1 auto; min-width: 0; }
.idp-actions-copy h3 { margin: 0 0 .2rem; font-size: 1rem; }
.idp-actions-copy p { margin: 0 0 .55rem; color: var(--ink-soft); font-size: .85rem; max-width: 52ch; }
.idp-actions-btns { flex: none; display: flex; flex-direction: column; gap: .4rem; }
.idp-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.idp-action-btn:disabled { opacity: .55; cursor: not-allowed; }
.idp-action-ico { font-size: 1.05em; line-height: 1; }
.idp-actions-progress { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.idp-actions-bar { flex: 1; min-width: 7rem; max-width: 14rem; height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.idp-actions-bar-fill { height: 100%; background: var(--accent); transition: width .25s ease; }
.idp-actions-bar-fill.ok { background: var(--ok); }
.idp-actions-prog-label { font-size: .78rem; color: var(--ink-mute); }
@media (max-width: 560px) {
    .idp-actions { flex-wrap: wrap; }
    .idp-actions-btns { flex-direction: row; width: 100%; }
    .idp-actions-btns .btn { flex: 1; }
}

/* ---------- IDP AI-generated 2D house image ---------- */
.idp-image { margin: 0 0 1.5rem; }
.idp-image-top { margin-top: .5rem; }
.idp-image-status {
    display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1rem;
    border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: var(--bg-elev);
    color: var(--ink-soft); font-size: .9rem;
}
.idp-image-err { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.idp-image-fig {
    margin: 0; padding: .75rem; border: 1px solid var(--line);
    border-radius: var(--radius-lg, 14px); background: var(--bg-elev);
}
.idp-image-fig img {
    display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto;
    border-radius: var(--radius, 10px);
}
.idp-image-fig figcaption {
    margin-top: .6rem; font-size: .8rem; color: var(--ink-mute); text-align: center;
    display: flex; gap: .75rem; justify-content: center; align-items: center; flex-wrap: wrap;
}
.idp-image-acts { display: inline-flex; gap: .75rem; align-items: center; }
.idp-image-dl { font-weight: 600; }

/* Placeholder card shown before an image exists (and the "generating" state). */
.idp-house-card {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem;
    border: 1px dashed var(--line); border-radius: var(--radius-lg, 14px); background: var(--bg-elev);
}
.idp-house-card.is-busy { color: var(--ink-soft); font-size: .9rem; }
.idp-house-art {
    flex: none; width: 56px; height: 56px; display: grid; place-items: center;
    color: var(--accent); opacity: .8;
}
.idp-house-art svg { width: 40px; height: 40px; }
.idp-house-copy { flex: 1 1 auto; min-width: 0; }
.idp-house-copy h3 { margin: 0 0 .2rem; font-size: 1rem; }
.idp-house-copy p { margin: 0; color: var(--ink-soft); font-size: .85rem; max-width: 52ch; }
.idp-house-btn { flex: none; display: inline-flex; align-items: center; gap: .45rem; }
.idp-house-btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 560px) {
    .idp-house-card { flex-wrap: wrap; }
    .idp-house-btn { width: 100%; justify-content: center; }
}

/* ---------- toasts (transient notifications) ---------- */
.toast-host {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1000;
    display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 30rem);
}
.toast-item {
    display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .85rem;
    border-radius: var(--radius-lg, 12px); background: var(--bg-elev);
    border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    font-size: .88rem; color: var(--ink); animation: toast-in .18s ease-out;
}
.toast-item .toast-msg { flex: 1 1 auto; word-break: break-word; }
.toast-close {
    flex: none; border: 0; background: none; cursor: pointer; line-height: 1;
    font-size: 1.1rem; color: var(--ink-mute); padding: 0 .15rem;
}
.toast-error { border-color: var(--danger, #c0392b); border-left: 3px solid var(--danger, #c0392b); }
.toast-success { border-color: var(--ok); border-left: 3px solid var(--ok); }
.toast-info { border-left: 3px solid var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- comments ---------- */
.comments {
    margin-top: .9rem; padding-top: .75rem;
    border-top: 1px dashed var(--line);
}
.comments-list { display: grid; gap: .5rem; margin-bottom: .65rem; }
.comment {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .55rem .75rem;
}
.comment-meta {
    display: flex; align-items: baseline; gap: .55rem;
    font-size: .78rem; color: var(--ink-mute); margin-bottom: .2rem;
}
.comment-meta strong { color: var(--ink-soft); font-weight: 600; }
.comment-time { font-variant-numeric: tabular-nums; }
.comment-remove {
    margin-left: auto; appearance: none; border: none; background: transparent;
    color: var(--ink-mute); cursor: pointer; font-size: 1rem; line-height: 1;
    padding: 0 .25rem;
}
.comment-remove:hover { color: #7a2020; }
.comment-body {
    font-size: .92rem; color: var(--ink); white-space: pre-wrap; word-wrap: break-word;
}

.comment-add { display: flex; gap: .5rem; align-items: flex-start; }
.comment-input {
    flex: 1; min-height: 2.1rem; resize: vertical;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: .45rem .65rem; background: var(--bg);
    font-family: var(--font-sans); font-size: .9rem; color: var(--ink);
}
.comment-input:focus { outline: none; border-color: var(--accent); }
.comment-input::placeholder { color: var(--ink-mute); font-style: italic; }
.btn-sm { padding: .4rem .8rem; font-size: .8rem; }

/* Inline button spinner (export "loading" state) - inherits the button's text colour. */
.btn-spinner {
    display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- nav user ---------- */
.nav-user {
    display: inline-flex; align-items: center;
    padding-left: 1rem; margin-left: .25rem;
    border-left: 1px solid var(--line);
}

/* user avatar + name button that toggles the account dropdown */
.nav-user-toggle {
    appearance: none; border: 1px solid transparent; background: transparent;
    padding: .3rem .55rem .3rem .35rem; border-radius: 999px;
    font-family: var(--font-sans); font-size: .875rem; font-weight: 500;
    color: var(--ink-soft); cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: background .15s, color .15s, border-color .15s;
}
.nav-user-toggle:hover { color: var(--ink); background: var(--bg-elev); }
.nav-user-dropdown.open .nav-user-toggle {
    color: var(--ink); background: var(--bg-elev); border-color: var(--line-strong);
}
.nav-user-avatar {
    flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--accent); color: #fff; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .82rem;
}
.nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nav-user-label {
    max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* "Pomoč" tour replay - promoted from the account dropdown onto the bar, sitting just before the
   avatar. Mirrors the .nav-user-toggle pill so the account cluster reads as one unit. */
.nav-tour-btn {
    appearance: none; border: 1px solid transparent; background: transparent;
    padding: .3rem .6rem; margin-right: .15rem; border-radius: 999px;
    font-family: var(--font-sans); font-size: .875rem; font-weight: 500;
    color: var(--ink-soft); cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: background .15s, color .15s, border-color .15s;
}
.nav-tour-btn:hover { color: var(--ink); background: var(--bg-elev); border-color: var(--line-strong); }
.nav-tour-ico { display: inline-flex; }
.nav-tour-ico svg { width: 1.15rem; height: 1.15rem; }

@media (max-width: 760px) {
    /* Keep the bar to a single row on phones: show just the compass icon (the title/aria-label keep it
       accessible). */
    .nav-tour-label { display: none; }
    .nav-tour-btn { padding: .45rem; }
}

/* account dropdown opens flush to the right edge of the nav */
.nav-user-menu { left: auto; right: 0; min-width: 15rem; }

.nav-user-head {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem .65rem;
    border-bottom: 1px solid var(--line); margin-bottom: .35rem;
}
.nav-user-avatar-lg { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.nav-user-head-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nav-user-head-name { font-weight: 600; color: var(--ink); font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-head-email { font-size: .75rem; color: var(--ink-mute);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* buttons reused as menu items must shed the UA button chrome (incl. centered text + auto width,
   which left button items like Predstavitev / Moji projekti misaligned vs the <a> NavLinks) */
button.nav-dropdown-item {
    appearance: none; background: transparent; width: 100%; text-align: left;
    font-family: var(--font-sans); font-size: .9rem;
}

.nav-dropdown-sep { height: 1px; background: var(--line); margin: .35rem -.35rem; }

.nav-user-section {
    padding: .35rem .75rem .15rem;
    font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-mute);
}

.nav-user-logout { width: 100%; cursor: pointer; text-align: left; }
.nav-user-logout:hover { color: var(--danger, #b3261e); }

/* ---------- profile page ---------- */
.profile-section {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
/* The header already draws a divider, so the first section skips its own top border (no double line). */
.profile-section:first-of-type { border-top: none; margin-top: 1.25rem; padding-top: 0; }
/* Read-only fields (e.g. e-mail) read as informational, not editable. */
.profile-field input[readonly] { background: var(--bg-elev); color: var(--ink-soft); cursor: default; }
.profile-section h2 {
    font-family: var(--font-serif); font-size: 1.3rem;
    margin-bottom: .35rem;
}
.profile-help {
    color: var(--ink-soft); font-size: .9rem; margin: .35rem 0 1rem;
}
.profile-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .85rem;
}
.profile-field { display: flex; flex-direction: column; gap: .3rem; }
.profile-field > label {
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-mute);
}
.profile-field-actions { flex-direction: row; gap: .5rem; align-items: end; }
.profile-field-message {
    grid-column: 1 / -1;
    font-size: .85rem; color: var(--ok); font-style: italic;
}
.profile-actions {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.profile-saved {
    color: var(--ok); font-size: .85rem; font-style: italic;
}

/* avatar */
.profile-avatar-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.profile-avatar {
    width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none;
    display: grid; place-items: center; background: var(--bg-elev);
    border: 1px solid var(--line);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-initial { font-size: 2rem; font-weight: 700; color: var(--ink-soft); }
.profile-avatar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* the upload button is a <label> wrapping a hidden <input type=file> */
.profile-avatar-actions label.btn { cursor: pointer; }
.profile-avatar-actions label.btn.is-busy { opacity: .65; pointer-events: none; }

/* "coming soon" section + badge */
.profile-section.is-disabled { opacity: .55; }
.profile-badge-soon {
    display: inline-block; margin-left: .5rem; vertical-align: middle;
    font-family: var(--font-sans, inherit); font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute);
    background: var(--bg-elev); border: 1px solid var(--line);
    padding: .15rem .45rem; border-radius: 999px;
}

/* ---------- login screen ---------- */
.login-screen {
    min-height: 100vh; display: grid; place-items: center;
    padding: 1.5rem; background: var(--bg);
}

/* ---------- legal documents (Terms, Privacy) ---------- */
.legal-page { min-height: 100vh; background: var(--bg); padding: 2.5rem 1.5rem; }
.legal-doc {
    max-width: 46rem; margin: 0 auto;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 2.5rem 2.25rem;
    color: var(--ink); line-height: 1.6;
}
.legal-doc h1 { font-size: 1.9rem; margin: .5rem 0 .25rem; }
.legal-doc h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.legal-doc p { margin: 0 0 .85rem; color: var(--ink-soft); }
.legal-doc ul { margin: 0 0 .85rem 1.1rem; color: var(--ink-soft); }
.legal-doc li { margin-bottom: .35rem; }
.legal-meta { font-size: .85rem; color: var(--ink-mute); }
.legal-callout {
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius); padding: .85rem 1rem;
    font-size: .9rem; color: var(--ink-soft); margin: 1rem 0 1.5rem;
}
.legal-back {
    display: inline-block; margin: 0 0 1rem; font-size: .9rem;
    color: var(--accent); text-decoration: none;
}
.legal-back:last-child { margin: 1.5rem 0 0; }

/* legal doc embedded inside a modal iframe - drop the full-page chrome */
.legal-embed { min-height: 0; padding: 0; background: transparent; }
.legal-embed .legal-doc { border: 0; border-radius: 0; max-width: none; margin: 0; padding: 1.5rem 1.75rem; }

/* legal modals: CSS-only (checkbox) on the auth pages, Blazor-toggled (.is-open) in the footer */
.legal-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.legal-link:hover { color: var(--accent-ink); }
.legal-modal-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.legal-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center; padding: 1.25rem;
}
.legal-modal.is-open,
#m-terms:checked ~ .legal-modal--terms,
#m-privacy:checked ~ .legal-modal--privacy { display: flex; }
.legal-modal-backdrop { position: absolute; inset: 0; background: rgba(20,16,12,.55); border: 0; cursor: pointer; }
.legal-modal-card {
    position: relative; width: min(46rem, 100%); height: min(82vh, 100%);
    background: var(--bg); border-radius: var(--radius); overflow: hidden; display: flex;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.legal-modal-close {
    position: absolute; top: .5rem; right: .55rem; z-index: 2;
    width: 2rem; height: 2rem; border: 0; border-radius: 50%;
    background: var(--bg-elev); color: var(--ink); font-size: 1.5rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.legal-modal-close:hover { background: var(--line); }
.legal-modal-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }

/* Newsletter sign-up modal: a small content card (reuses the .legal-modal overlay shell). */
.newsletter-card-modal {
    width: min(26rem, 100%); height: auto; display: block;
    background: var(--bg-elev); border: 1px solid var(--line);
}
.newsletter-modal-body { padding: 2rem 1.85rem 1.85rem; text-align: center; }
.newsletter-modal-title { margin: 0 0 .35rem; font-size: 1.35rem; }
.newsletter-modal-context { margin: 0 0 .5rem; color: var(--ink-mute); font-size: .9rem; }
.newsletter-modal-lead { margin: 0 0 1.25rem; color: var(--ink-soft); }
.newsletter-modal-error { margin: 0 0 .85rem; color: #c0392b; font-size: .9rem; }
.newsletter-modal-submit { width: 100%; }
.newsletter-modal-email { margin: .6rem 0 0; color: var(--ink-mute); font-size: .85rem; }

/* Newsletter Sendy redirect landing pages (server-rendered Razor Pages under /newsletter/*).
   Reuse .login-screen / .login-card / .login-logo / .login-lead; these add the icon + badge. */
.nl-card { text-align: center; }
.nl-icon {
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; line-height: 1; margin: .25rem auto 1rem;
}
.nl-icon.ok { background: var(--accent); color: #fff; }
.nl-icon.cross { background: var(--bg); color: var(--ink-soft); border: 2px solid var(--line-strong); }
.nl-icon.warn { background: var(--bg); color: var(--accent); border: 2px solid var(--accent); }
.nl-badge {
    display: inline-block; margin-bottom: .75rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--accent); padding: .25rem .65rem; border-radius: 100px;
}
.nl-btn { display: inline-block; margin-top: 1.25rem; text-decoration: none; }
.nl-btn.secondary {
    background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
}
.nl-note { margin: 1rem 0 0; font-size: .85rem; color: var(--ink-mute); }
.nl-note a { color: var(--accent); }
.login-card {
    width: 100%; max-width: 26rem;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.85rem 2.1rem;
    display: flex; flex-direction: column; gap: .7rem;
    box-shadow: 0 12px 40px rgba(20, 14, 6, .07);
}
.login-mark {
    font-size: 2.5rem; color: var(--accent);
    line-height: 1; margin-bottom: .25rem;
}
.login-logo {
    height: 2.9rem; width: auto; display: block;
    align-self: center; margin-bottom: .15rem;
}
.login-eyebrow {
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .18em;
    color: var(--accent);
}
.login-card h1 { font-size: 1.6rem; line-height: 1.15; margin-bottom: .1rem; }
.login-lead {
    color: var(--ink-soft); font-size: .9rem; line-height: 1.45;
    margin: 0 0 .35rem;
}
.login-input {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg);
    padding: .75rem .9rem;
    font-family: var(--font-sans); font-size: 1rem;
    color: var(--ink);
}
.login-input:focus { outline: none; border-color: var(--accent); }
.login-submit {
    align-self: flex-start;
    padding: .7rem 1.4rem;
}
.login-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- error UI ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: #2b2318; color: #fbf7f0;
    bottom: 0; box-shadow: 0 -1px 8px rgba(0,0,0,.25);
    box-sizing: border-box; display: none;
    left: 0; padding: .8rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss, #blazor-error-ui .reload { cursor: pointer; color: var(--accent-soft); margin: 0 .5rem; }
#blazor-error-ui .dismiss { position: absolute; right: 1rem; top: .75rem; }

.blazor-error-boundary {
    background: #2b2318; color: white;
    padding: 1rem 1rem 1rem 1rem;
}
.blazor-error-boundary::after { content: "Prišlo je do napake."; }

/* ---------- schedule view switch (underline tabs) ---------- */
.schedule-tabs { display: inline-flex; gap: .35rem; border-bottom: 1px solid var(--line-strong); }
.schedule-tab {
    appearance: none; border: none; background: transparent;
    padding: .6rem 1.15rem .7rem; font-family: var(--font-sans);
    font-size: 1.05rem; font-weight: 600; color: var(--ink-soft);
    cursor: pointer; white-space: nowrap;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
    transition: color .15s, border-color .15s, background .15s;
}
.schedule-tab:hover { color: var(--ink); background: var(--bg-elev); }
.schedule-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------- schedule toolbar: the header's right column - view tabs on top, the active view's
   controls (zoom, fullscreen) on the row below them. Saves the separate toolbar row. ---------- */
.schedule-toolbar {
    display: flex; flex-direction: column; align-items: flex-end; gap: .8rem;
}
.schedule-tools {
    display: flex; align-items: center; justify-content: flex-end;
    gap: .75rem 1rem; flex-wrap: wrap;
}
.schedule-tools .gantt-controls { margin-bottom: 0; }
.schedule-fs-btn { white-space: nowrap; }

/* Fullscreen mode: break out of the centered container and fill the viewport.
   Only the Terminski Plan needs the extra horizontal room. */
.schedule-page.is-fullscreen {
    position: fixed; inset: 0; z-index: 70;
    background: var(--bg);
    overflow: auto;
    padding: 1.75rem clamp(1.5rem, 4vw, 4rem) 2.5rem;
}
.schedule-page.is-fullscreen .phase-header { margin-bottom: 1.5rem; }
.schedule-page.is-fullscreen .gantt { max-height: calc(100vh - 11rem); }

/* ---------- calendar ---------- */
.cal-controls {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.cal-month-label {
    font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600;
    min-width: 9rem; text-align: center;
}
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-elev); overflow: hidden;
}
.cal-dow {
    padding: .5rem .65rem; background: var(--bg);
    border-bottom: 1px solid var(--line);
    font-size: .7rem; font-weight: 600; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .08em;
}
.cal-dow + .cal-dow { border-left: 1px solid var(--line); }
.cal-grid-week .cal-cell { min-height: 14rem; }
.cal-grid-month .cal-cell { min-height: 5.5rem; }
.cal-cell {
    padding: .35rem .4rem;
    border-top: 1px solid var(--line); border-left: 1px solid var(--line);
    background: var(--bg-elev); display: flex; flex-direction: column; gap: .25rem;
    position: relative;
}
.cal-daynum-suffix {
    margin-left: .25rem; color: var(--ink-mute);
    font-weight: 500; text-transform: lowercase;
}
.cal-event-range {
    margin-left: .25rem; color: var(--ink-mute);
    font-variant-numeric: tabular-nums; font-size: .7rem;
}
.cal-cell:nth-child(7n+1) { border-left: none; }
.cal-cell.is-outside { background: var(--bg); color: var(--ink-mute); opacity: .55; }
.cal-cell.is-today { background: var(--accent-soft); }
.cal-daynum {
    font-size: .78rem; font-weight: 600; color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.cal-cell.is-today .cal-daynum { color: var(--accent-ink); }
.cal-event {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; padding: .12rem .35rem; border-radius: var(--radius);
    color: var(--ink); background: var(--bg);
    border: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: none;
}
.cal-event:hover { border-color: var(--accent); }
.cal-event-dot {
    width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0;
    background: var(--ink-mute);
}
.cal-event.todo .cal-event-dot { background: #e0857a; }
.cal-event.wip .cal-event-dot { background: #e3b93c; }
.cal-event.done .cal-event-dot { background: #4f7d5a; }
.cal-event.na .cal-event-dot { background: #9a9488; }
.cal-event-text { overflow: hidden; text-overflow: ellipsis; }
.cal-empty {
    margin-top: 1.5rem; color: var(--ink-mute); font-style: italic;
}

/* ---------- report ---------- */
.report-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* Match the export buttons to the height of the z DDV / brez DDV switch on /costs. */
.report-actions .billing-toggle { margin-bottom: 0; height: 2.4rem; }
.report-actions > .btn { height: 2.4rem; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.report-filters {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: 2rem;
}
.report-filters-label {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-mute); margin-right: .25rem;
}
/* Status pills (search/iskalnik task table "Stanje" column) - text + status colour + leading dot. */
.status-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .15rem .6rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.5;
    border: 1px solid transparent; white-space: nowrap;
    background: var(--bg); color: var(--ink-soft);
}
.status-pill::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--status-color, var(--ink-mute)); flex: none;
}
.status-pill.todo { --status-color: #e0857a; background: #fbe9e5; color: #8a3322; border-color: #f1c7bd; }
.status-pill.wip  { --status-color: #e3b93c; background: #fbf3da; color: #7a5e12; border-color: #ecd9a0; }
.status-pill.done { --status-color: #4f7d5a; background: #e7f0e9; color: #2f5238; border-color: #bcd6c2; }
.status-pill.na   { --status-color: #9a9488; background: #efedea; color: #5f5a51; border-color: #d6d2ca; }

.report-filters .status-pill {
    border: 1px solid var(--line-strong);
}
.report-print-head {
    display: none; align-items: baseline; justify-content: space-between;
    margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink);
}
.report-print-head h1 { font-size: 1.5rem; }
.report-print-meta { color: var(--ink-mute); font-size: .85rem; font-variant-numeric: tabular-nums; }
.report-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .5rem; margin-bottom: 2rem;
}
.report-summary-cell {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .85rem 1rem;
    text-align: center;
}
.report-summary-num {
    font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600;
    color: var(--ink); line-height: 1;
}
.report-summary-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-mute); margin-top: .25rem;
}
.report-phase { margin-bottom: 2rem; }
.report-phase-title {
    font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600;
    padding-bottom: .35rem; border-bottom: 1px solid var(--line-strong);
    margin-bottom: 1rem;
}
.report-section { margin-bottom: 1.25rem; }
.report-section-title {
    font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
    color: var(--ink-soft); margin-bottom: .5rem;
}
.report-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.report-item {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .75rem 1rem;
}
.report-item-head {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.report-item-text { font-size: .95rem; color: var(--ink); flex: 1; min-width: 12rem; }
.report-details {
    margin: .55rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .35rem .85rem;
}
.report-detail { margin: 0; display: flex; gap: .4rem; }
.report-detail dt {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-mute); margin: 0;
}
.report-detail dd { margin: 0; font-size: .82rem; color: var(--ink); }
.report-desc {
    margin: .55rem 0 0; font-size: .88rem; color: var(--ink-soft);
    white-space: pre-wrap;
}

@media print {
    @page { margin: 1.5cm; }
    body { background: white; color: black; font-size: 11pt; }
    .app-nav, .app-footer, .report-no-print { display: none !important; }
    .app-main { max-width: none; padding: 0; }
    .report-print-head { display: flex !important; }
    .report-print-only { display: block !important; }
    .report-item, .report-summary-cell { background: white; }
    a { color: black; }
    .status-pill {
        border: 1px solid #888 !important; background: white !important;
        color: black !important; padding: .1rem .45rem;
    }
}

/* ---------- phase files (per-phase document/photo dropbox, collapsible) ---------- */
.phase-files {
    margin: 1.25rem 0 1.75rem;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-left: 3px solid var(--phase-color, var(--line-strong));
    border-radius: var(--radius);
}
/* Accordion header (native <details><summary>) - collapses the whole area since it can get tall. */
.phase-files-summary {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.2rem; cursor: pointer; list-style: none; user-select: none;
}
.phase-files-summary::-webkit-details-marker { display: none; }
.phase-files-summary::marker { content: ""; }
.phase-files-summary:hover .phase-files-summary-title { color: var(--accent-ink); }
.phase-files-ico { width: 1.15rem; height: 1.15rem; flex: none; color: var(--phase-color, var(--accent)); }
.phase-files-summary-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; transition: color .15s; }
.phase-files-chevron {
    width: 1.1rem; height: 1.1rem; flex: none; color: var(--ink-mute);
    margin-left: .15rem; transition: transform .15s;
}
.phase-files[open] .phase-files-chevron { transform: rotate(180deg); }
.phase-files-content { padding: 0 1.2rem 1.25rem; }
.phase-files-sub { margin: 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.phase-files-examples { margin: .3rem 0 0; font-size: .78rem; color: var(--ink-mute); line-height: 1.5; }
.phase-files-examples strong { color: var(--ink-soft); font-weight: 600; }
.phase-files-count {
    margin-left: auto; flex-shrink: 0;
    font-size: .72rem; font-weight: 600; color: var(--ink-mute);
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 999px; padding: .2rem .6rem;
    font-variant-numeric: tabular-nums;
}

/* Drop zone: a transparent full-area file input sits on top so BOTH click and native file-drop
   work; the caption below is pointer-events:none so events reach the input underneath. */
.phase-files-drop {
    position: relative; display: block; margin-top: .85rem;
    border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
    background: var(--bg); padding: 1.1rem 1rem; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.phase-files-drop:hover { border-color: var(--accent); }
.phase-files-drop.is-dragging { border-color: var(--accent); background: var(--ok-soft); }
.phase-files-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.phase-files-drop-inner {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    text-align: center; pointer-events: none; color: var(--ink-soft);
}
.phase-files-drop-icon { font-size: 1.5rem; line-height: 1; color: var(--phase-color, var(--accent)); }
.phase-files-drop-main { font-size: .9rem; }
.phase-files-drop-hint { font-size: .72rem; color: var(--ink-mute); }

.phase-files-empty { margin: .85rem 0 0; color: var(--ink-mute); font-style: italic; font-size: .88rem; }

/* In-flight upload progress rows (drag-drop / picker), shown under the drop zone until finished. */
.phase-files-uploads { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; }
.phase-files-upload {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .5rem .65rem;
    display: flex; flex-direction: column; gap: .4rem;
}
.phase-files-upload-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
    font-size: .78rem;
}
.phase-files-upload-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-files-upload-status { flex-shrink: 0; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.phase-files-upload-bar {
    position: relative; height: 6px; border-radius: 999px;
    background: var(--line); overflow: hidden;
}
.phase-files-upload-fill {
    position: absolute; top: 0; bottom: 0; left: 0; height: 100%;
    background: var(--phase-color, var(--accent)); border-radius: inherit;
    transition: width .15s ease;
}
.phase-files-upload.is-done .phase-files-upload-fill { background: var(--ok); }
.phase-files-upload.is-done .phase-files-upload-status { color: var(--ok); font-weight: 600; }
.phase-files-upload.is-error .phase-files-upload-fill { width: 100% !important; background: var(--danger, #c0392b); }
.phase-files-upload.is-error .phase-files-upload-status { color: var(--danger, #c0392b); font-weight: 600; }

/* Indeterminate slice that slides across while we wait on the server round-trip. */
.phase-files-upload-bar.is-indeterminate .phase-files-upload-fill {
    width: 40%; transition: none;
    animation: phase-files-upload-slide 1.1s ease-in-out infinite;
}
@keyframes phase-files-upload-slide {
    0% { left: -40%; } 100% { left: 100%; }
}

.phase-files-grid {
    margin-top: 1rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: .9rem;
}
.phase-file-card {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
}
.phase-file-thumb {
    appearance: none; border: none; padding: 0; background: var(--bg-elev);
    width: 100%; aspect-ratio: 4/3; overflow: hidden; display: block;
    cursor: zoom-in; text-decoration: none;
}
.phase-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phase-file-thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-mute); }
.phase-file-doc {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; cursor: pointer; color: var(--ink-soft);
    background: linear-gradient(160deg, var(--bg-elev), var(--bg));
}
.phase-file-doc:hover { color: var(--accent-ink); }
.phase-file-doc-icon { width: 2rem; height: 2rem; }
.phase-file-doc-ext { font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-mute); }
/* PDF first-page preview fills the tile; the type badge floats in the corner. */
.phase-file-doc.has-preview { padding: 0; gap: 0; position: relative; background: #fff; align-items: stretch; }
.phase-file-doc-preview { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.phase-file-doc-ext-badge {
    position: absolute; top: .4rem; left: .4rem;
    background: rgba(20, 14, 6, .72); color: #fff; border-radius: 4px;
    padding: .08rem .32rem; font-size: .6rem; letter-spacing: .06em;
}
.phase-file-body { padding: .55rem .65rem .65rem; display: flex; flex-direction: column; gap: .4rem; }
.phase-file-name {
    font-size: .82rem; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phase-file-meta {
    display: flex; justify-content: space-between; gap: .5rem;
    font-size: .7rem; color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
.phase-file-desc { font-size: .8rem; resize: vertical; min-height: 2.1rem; }
.phase-file-actions { display: flex; gap: .4rem; align-items: center; }
.phase-file-actions a.btn { text-decoration: none; }

/* ---------- subscription page ---------- */
.sub-tiers {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem; margin-bottom: 2rem;
}
.sub-tier {
    position: relative;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
}
.sub-tier.is-featured {
    border-color: var(--accent); box-shadow: 0 12px 28px rgba(196, 90, 42, .12);
}
.sub-tier.is-active {
    border-color: var(--ok); background: var(--ok-soft);
}
.sub-tier-badge {
    position: absolute; top: -.6rem; left: 1rem;
    background: var(--accent); color: white;
    padding: .15rem .55rem; border-radius: 999px;
    font-size: .65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
}
.sub-tier-name {
    font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600;
}
.sub-tier-price {
    font-family: var(--font-serif); font-size: 2rem; font-weight: 700;
    color: var(--ink); line-height: 1;
}
.sub-tier-price span {
    font-size: .85rem; font-weight: 400; color: var(--ink-mute);
}
.sub-tier-lead { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.sub-tier-features {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: .35rem; font-size: .88rem;
    flex: 1;
}
.sub-tier-features li.has { color: var(--ink); }
.sub-tier-features li.no { color: var(--ink-mute); }
.sub-tier-features li.soon {
    color: var(--ink-mute);
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.sub-tier-features li.soon .soon-badge {
    font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 999px; padding: .05rem .45rem; line-height: 1.4;
}
.sub-tier-cta { margin-top: auto; align-self: stretch; justify-content: center; }
.sub-saved { color: var(--ok); font-style: italic; }

/* ---------- locked feature screen ---------- */
.locked-feature {
    max-width: 32rem; margin: 4rem auto; text-align: center;
    padding: 2.5rem 2rem;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.locked-feature-mark {
    font-size: 2.5rem; color: var(--accent); margin-bottom: .5rem;
}
.locked-feature h2 {
    font-family: var(--font-serif); font-size: 1.75rem; margin-bottom: .5rem;
}
.locked-feature-lead {
    color: var(--ink-soft); font-size: 1rem; margin: 0 0 1rem;
}
.locked-feature-need {
    color: var(--ink-mute); font-size: .9rem; margin: 0 0 1.5rem;
}

/* ---------- nav link variants ---------- */
.nav-link-pricing { color: var(--accent-ink) !important; font-weight: 600; }

/* ---------- AI chat ---------- */
.ai-fab {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--bg-elev); color: var(--accent);
    font-family: var(--font-serif); font-weight: 700;
    box-shadow: 0 10px 24px rgba(40, 30, 18, .25);
    display: grid; place-items: center;
    transition: transform .2s, background .15s, box-shadow .15s, opacity .15s;
    border: 1px solid var(--line-strong);
}
.ai-fab:hover {
    background: var(--bg); transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(40, 30, 18, .3);
}
.ai-fab.open {
    opacity: 0; pointer-events: none; transform: scale(.85);
}
.ai-fab-mark {
    line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.ai-fab-mark img { width: 2.4rem; height: 2.4rem; display: block; object-fit: contain; }

.ai-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
    width: var(--ai-width, min(28rem, 100vw));
    min-width: 20rem; max-width: 100vw;
    background: var(--bg-elev);
    border-left: 1px solid var(--line-strong);
    box-shadow: -16px 0 30px rgba(40, 30, 18, .12);
    display: flex; flex-direction: column;
    animation: ai-slide-in .25s ease-out;
}
@keyframes ai-slide-in {
    from { transform: translateX(100%); opacity: .4; }
    to { transform: translateX(0); opacity: 1; }
}
.ai-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.ai-head-title {
    font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem;
    color: var(--ink); flex: 1;
}
.ai-head-mark { margin-right: .35rem; }
.ai-head-mark img { width: 1.4rem; height: 1.4rem; vertical-align: -.32em; object-fit: contain; }

/* ---------- backend-unreachable overlay (in-app, when the API dies mid-session) ---------- */
.conn-down {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center; padding: 1.5rem;
    background: rgba(244, 239, 230, .86); backdrop-filter: blur(4px);
}
.conn-down-card {
    text-align: center; background: var(--bg-elev);
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: var(--radius); padding: 2.5rem 2.25rem; max-width: 30rem; width: 100%;
    box-shadow: 0 16px 48px rgba(40, 30, 18, .18);
}
.conn-down-logo { height: 34px; margin-bottom: 1.5rem; }
.conn-down-icon {
    width: 3.25rem; height: 3.25rem; margin: 0 auto 1.1rem; display: grid; place-items: center;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
}
.conn-down-icon svg { width: 1.7rem; height: 1.7rem; }
.conn-down-title { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; margin-bottom: .5rem; }
.conn-down-msg { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 1.75rem; }
.conn-down-btn { width: 100%; justify-content: center; }
.conn-down-status {
    margin-top: 1.25rem; font-size: .76rem; color: var(--ink-mute);
    display: inline-flex; align-items: center; gap: .45rem;
}
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: #b5483f; flex: none; }

/* ---------- daily-usage pill (metered AI / lookup features) ---------- */
.usage-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 600; color: var(--ink-mute);
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 999px; padding: .12rem .5rem;
    font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5;
}
.usage-pill-label { text-transform: uppercase; letter-spacing: .05em; }
.usage-pill-count { color: var(--ink-soft); }
.usage-pill-unit { color: var(--ink-mute); font-weight: 400; }
.usage-pill.is-exhausted { background: #fbeae7; border-color: #e2b3a9; color: #8a2f27; }
.usage-pill.is-exhausted .usage-pill-count { color: #8a2f27; }

/* "you hit today's limit" notices (parcel lookup + AI chat) - same soft tone as the exhausted pill,
   so it reads as a friendly quota notice rather than an alarming error. */
.parcel-limit, .ai-limit {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .8rem .95rem; border-radius: var(--radius);
    border: 1px solid #e2b3a9; background: #fbeae7; color: #8a2f27;
    font-size: .9rem; line-height: 1.45;
}
.parcel-limit { margin-top: 1.1rem; }
.ai-limit { margin: 0 1rem .65rem; }
.parcel-limit strong, .ai-limit strong { display: block; font-weight: 700; }
.parcel-limit-mark, .ai-limit-mark { font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.ai-head-close {
    appearance: none; border: none; background: transparent;
    color: var(--ink-mute); cursor: pointer;
    width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.ai-head-close svg { width: 1.15rem; height: 1.15rem; display: block; }
.ai-head-close:hover { background: var(--bg-elev); color: var(--ink); }

.ai-messages {
    flex: 1; overflow-y: auto; padding: 1rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.ai-empty {
    color: var(--ink-soft); font-size: .9rem;
}
.ai-empty ul { padding-left: 1.1rem; margin: .5rem 0 0; }
.ai-empty li { margin-bottom: .25rem; }

.ai-msg {
    display: flex; flex-direction: column; gap: .2rem;
    max-width: 88%;
}
.ai-msg.from-user { align-self: flex-end; align-items: flex-end; }
.ai-msg.from-ai { align-self: flex-start; align-items: flex-start; }
.ai-msg-meta {
    font-size: .7rem; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.ai-msg-body {
    padding: .55rem .75rem; border-radius: var(--radius);
    font-size: .9rem; line-height: 1.4;
    white-space: pre-wrap; word-wrap: break-word;
}
.ai-msg.from-user .ai-msg-body {
    background: var(--ink); color: var(--bg);
}
.ai-msg.from-ai .ai-msg-body {
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--line-strong);
}
.ai-thinking { font-style: italic; color: var(--ink-mute); }

.ai-input-row {
    display: flex; gap: .5rem; align-items: flex-end;
    padding: .75rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--bg);
}
.ai-input {
    flex: 1; min-height: 2.75rem; max-height: 16rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 14px);
    padding: .6rem .8rem; font-family: var(--font-sans);
    font-size: .9rem; line-height: 1.5; color: var(--ink); background: var(--bg-elev);
    resize: vertical;                                   /* drag the bottom edge to grow it taller */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-input::placeholder { color: var(--ink-mute); }
.ai-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ai-send { flex-shrink: 0; }
/* Round action buttons in the chat input row (random / send / stop). */
.ai-round-btn {
    flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; font-size: 1.05rem; line-height: 1; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--ink-soft);
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.ai-round-btn svg { width: 1.15rem; height: 1.15rem; display: block; }
.ai-round-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); background: var(--bg); }
.ai-round-btn:active:not(:disabled) { transform: scale(.92); }
.ai-round-btn:disabled { opacity: .45; cursor: default; }
.ai-send-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.ai-send-btn:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.ai-stop-btn { background: #7a2020; border-color: #7a2020; color: #fff; }
.ai-stop-btn:hover:not(:disabled) { background: #8f2626; border-color: #8f2626; }

.ai-foot {
    padding: .5rem 1rem .75rem;
    font-size: .7rem; color: var(--ink-mute); font-style: italic;
    background: var(--bg); text-align: center;
}
/* Live "thinking" timer shown in the foot while the assistant works. */
.ai-timer {
    display: inline-flex; align-items: center; gap: .4rem;
    font-style: normal; color: var(--ink-soft); font-weight: 600;
}
.ai-timer-dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--accent); animation: ai-timer-pulse 1s ease-in-out infinite;
}
.ai-timer-secs { font-variant-numeric: tabular-nums; color: var(--accent-ink); }
@keyframes ai-timer-pulse { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

.ai-locked {
    padding: 2.5rem 1.5rem; text-align: center;
    display: flex; flex-direction: column; gap: .65rem; align-items: center;
}
.ai-locked-mark { font-size: 2rem; color: var(--accent); line-height: 1; }
.ai-locked h3 { font-family: var(--font-serif); font-size: 1.25rem; margin: 0; }
.ai-locked p { color: var(--ink-soft); margin: 0; font-size: .92rem; }
.ai-locked strong { color: var(--accent-ink); font-weight: 600; }

/* ---------- AI chat: header tools, suggestions, fullscreen, pin, markdown ---------- */
.ai-head-actions { display: flex; align-items: center; gap: .15rem; }
.ai-head-btn {
    appearance: none; border: none; background: transparent;
    color: var(--ink-mute); cursor: pointer;
    width: 1.9rem; height: 1.9rem; border-radius: var(--radius);
    font-size: 1rem; line-height: 1; display: grid; place-items: center;
    transition: background .12s, color .12s, opacity .12s;
}
.ai-head-btn svg { width: 1.05rem; height: 1.05rem; display: block; }
.ai-head-btn:hover:not(:disabled) { background: var(--bg-elev); color: var(--ink); }
.ai-head-btn:disabled { opacity: .35; cursor: default; }
.ai-head-btn.is-active { color: var(--accent); background: var(--accent-soft); }

.ai-suggestions { display: flex; flex-direction: column; gap: .4rem; margin-top: .75rem; }
.ai-suggestion {
    appearance: none; text-align: left; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); color: var(--ink-soft);
    padding: .5rem .65rem; font-family: var(--font-sans); font-size: .85rem; line-height: 1.3;
    transition: border-color .12s, color .12s, background .12s;
}
.ai-suggestion:hover { border-color: var(--accent); color: var(--ink); background: var(--bg-elev); }

.ai-stop { background: #7a2020; color: #fff; border: none; }
.ai-stop:hover { background: #8f2626; }

/* Full-screen takes the whole viewport width. */
.ai-sidebar.is-fullscreen { width: 100vw; }
/* Pinned: docked beside content, no drop shadow (the layout reserves space for it). */
.ai-sidebar.is-pinned { box-shadow: none; }

/* Drag-to-resize handle on the panel's left edge. */
.ai-resize-handle {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 3;
    cursor: ew-resize; background: transparent; transition: background .12s;
}
.ai-resize-handle:hover, .ai-resize-handle:active { background: var(--accent-soft); }
.ai-sidebar.is-fullscreen .ai-resize-handle { display: none; }

/* "Orodja" details switch in the header. */
.ai-switch-wrap { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; user-select: none; margin-right: .15rem; }
.ai-switch-label { font-size: .68rem; font-weight: 600; color: var(--ink-mute); white-space: nowrap; }
.ai-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-switch {
    position: relative; width: 1.85rem; height: 1.05rem; border-radius: 1rem; flex-shrink: 0;
    background: var(--line-strong); transition: background .15s;
}
.ai-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: calc(1.05rem - 4px); height: calc(1.05rem - 4px); border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(40, 30, 18, .3); transition: transform .15s;
}
.ai-switch-input:checked + .ai-switch { background: var(--accent); }
.ai-switch-input:checked + .ai-switch::after { transform: translateX(.8rem); }
.ai-switch-input:focus-visible + .ai-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-switch-wrap:hover .ai-switch-label { color: var(--ink); }

/* Reserve room on the right so a pinned panel sits beside content instead of over it
   (only on wide enough viewports; on narrow screens the panel overlays). The reservation is on
   the SHELL, not the content box: the centered (max-width) content re-centers within the reduced
   width, shifting into the empty side margins - so the whitespace shrinks first and the content
   keeps its size until the margins are used up. */
@media (min-width: 860px) {
    .app-shell.ai-pinned { padding-right: var(--ai-width, min(28rem, 100vw)); transition: padding-right .15s ease; }
}

/* Rendered markdown inside assistant bubbles. The shared .ai-msg-body uses pre-wrap (to keep the
   user's line breaks); markdown is already block-formatted, so reset it - otherwise the blank lines
   in the markdown source render as literal gaps on top of the paragraph margins. */
.ai-md { white-space: normal; }
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0 0 .4rem; }
.ai-md h1, .ai-md h2, .ai-md h3 { font-family: var(--font-serif); margin: .6rem 0 .35rem; line-height: 1.2; }
.ai-md h1 { font-size: 1.05rem; }
.ai-md h2 { font-size: 1rem; }
.ai-md h3 { font-size: .95rem; }
.ai-md ul, .ai-md ol { margin: .25rem 0 .6rem; padding-left: 1.2rem; }
.ai-md li { margin-bottom: .15rem; }
.ai-md a { color: var(--accent-ink); text-decoration: underline; }
.ai-md code {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .05rem .3rem; font-size: .82em;
}
.ai-md pre {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .6rem .7rem; overflow-x: auto; margin: .4rem 0 .6rem;
}
.ai-md pre code { background: none; border: none; padding: 0; }

/* Per-task AI advice: the round accent button on the row + its result modal. */
.item-ai {
    color: #fff; border-color: transparent; font-size: .95rem; line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-ink));
}
.item-ai:hover { color: #fff; filter: brightness(1.07); }
.item-ai:disabled { opacity: .6; cursor: default; }
.ai-advice-card { max-width: 660px; width: 100%; display: flex; flex-direction: column; }
.ai-advice-body { padding: 1rem 1.25rem; max-height: min(62vh, 640px); overflow-y: auto; }
.ai-advice-loading {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    color: var(--ink-soft); padding: 1.75rem 0;
}
.ai-advice-error { color: #b03c30; margin: .5rem 0; }
.ai-advice-foot {
    display: flex; gap: .5rem; flex-wrap: wrap; padding: .85rem 1.25rem; border-top: 1px solid var(--line);
}
.ai-md table { border-collapse: collapse; width: 100%; margin: .4rem 0 .6rem; font-size: .82rem; }
.ai-md th, .ai-md td { border: 1px solid var(--line-strong); padding: .3rem .45rem; text-align: left; }
.ai-md th { background: var(--bg); font-weight: 600; }
.ai-md blockquote {
    margin: .4rem 0; padding-left: .7rem; border-left: 3px solid var(--line-strong);
    color: var(--ink-soft);
}

/* Tool-call details (toggled by the "Orodja" switch). */
.ai-tools { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .35rem; max-width: 100%; }
.ai-tool {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); font-size: .78rem; overflow: hidden;
}
.ai-tool-sum {
    cursor: pointer; padding: .3rem .5rem; display: flex; align-items: center; gap: .4rem;
    list-style: none; user-select: none;
}
.ai-tool-sum::-webkit-details-marker { display: none; }
.ai-tool-sum::before { content: "▸"; color: var(--ink-mute); font-size: .7rem; }
.ai-tool[open] .ai-tool-sum::before { content: "▾"; }
.ai-tool-badge {
    font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--accent-ink); background: var(--accent-soft);
    padding: .05rem .3rem; border-radius: var(--radius);
}
.ai-tool-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.ai-tool-io-label {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
    color: var(--ink-mute); padding: .25rem .5rem 0;
}
.ai-tool-io {
    margin: .1rem .5rem .4rem; padding: .35rem .45rem;
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem;
    white-space: pre-wrap; word-break: break-word; max-height: 16rem; overflow: auto;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
    .app-main { padding: 2rem 1.25rem 4rem; }
    .phase-card { grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.25rem 1.25rem; }
    .phase-progress { grid-column: 2; align-items: flex-start; margin-top: .5rem; }
    .phase-bar { width: 100%; }
    .hero-meta { gap: 1rem; }
    .phase-header { flex-direction: column; align-items: flex-start; }
    /* header stacks → the schedule toolbar drops under the intro, left-aligned */
    .schedule-toolbar { align-items: flex-start; }
    .schedule-tools { justify-content: flex-start; }
    .phase-stat { text-align: left; width: 100%; }
    .phase-stat-bar { margin-left: 0; width: 100%; }
    .phase-budget { align-items: stretch; width: 100%; }
    .phase-budget-wrap { width: 100%; }
    .phase-budget-input { text-align: left; }
    .phase-budget-open { align-self: flex-start; }
    /* section tabs scroll sideways instead of stacking into many rows on a phone */
    .phase-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
    .phase-tab { flex: none; }
}

/* ---------- custom (user-added) tasks ---------- */
.item-remove {
    appearance: none; border: none; background: transparent;
    color: var(--ink-mute); cursor: pointer; font-size: 1.4rem;
    line-height: 1; padding: 0 .35rem; flex-shrink: 0; align-self: flex-start;
}
.item-remove:hover { color: #7a2020; }
.custom-add {
    display: flex; gap: .5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap;
}
.custom-add-input {
    flex: 1; min-width: 12rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: .55rem .7rem; font-family: var(--font-sans); font-size: .95rem;
    color: var(--ink); background: var(--bg-elev);
}
.custom-add-input:focus { outline: none; border-color: var(--accent); }
.custom-add-input::placeholder { color: var(--ink-mute); font-style: italic; }

/* ---------- compact icon action buttons ---------- */
.icon-btn {
    appearance: none; cursor: pointer; flex-shrink: 0;
    width: 2rem; height: 2rem; padding: 0; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--bg);
    color: var(--ink-soft);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--accent); background: var(--bg-elev); }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.icon-btn svg { display: block; }
.icon-btn input[type="file"] {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ---------- selected offer (star toggle) ---------- */
.inquiry-select.is-selected {
    color: var(--ok); border-color: var(--ok); background: var(--ok-soft);
}
.inquiry-select.is-selected svg { fill: currentColor; }
.inquiry-card.is-selected { border-color: var(--ok); box-shadow: inset 3px 0 0 var(--ok); }

/* ---------- billing toggle ---------- */
.billing-toggle {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 999px; padding: .25rem; margin-bottom: 1.75rem;
}
.billing-opt {
    appearance: none; border: none; background: none; cursor: pointer;
    font: inherit; font-size: .85rem; color: var(--ink-soft);
    padding: .35rem .95rem; border-radius: 999px; transition: background .15s, color .15s;
}
.billing-opt.active { background: var(--accent); color: #fff; font-weight: 600; }
.billing-save { margin: 0 .35rem 0 .5rem; color: var(--ok); font-size: .78rem; font-weight: 600; }
.sub-tier-annual-note { color: var(--ok); font-size: .78rem; font-weight: 600; margin-top: -.35rem; }

/* ---------- gantt chart ---------- */
.gantt-controls {
    display: flex; align-items: center; justify-content: flex-start;
    gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.gantt-zoom-label {
    font-size: .8rem; font-weight: 600; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .04em;
}
/* Joined −/＋ button pair, sized to match the .btn-sm "Celoten zaslon / Skrči" button next to it. */
.gantt-zoom { display: inline-flex; }
.gantt-zoom-btn {
    appearance: none; cursor: pointer;
    border: 1px solid var(--line-strong); background: transparent;
    font: inherit; font-size: .95rem; line-height: 1; color: var(--ink);
    width: 2.1rem; height: 2.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.gantt-zoom-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.gantt-zoom-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.gantt-zoom-btn:hover:not(:disabled) { background: var(--bg-elev); border-color: var(--ink); }
.gantt-zoom-btn:disabled { opacity: .35; cursor: default; }
.gantt-nav { display: inline-flex; align-items: center; gap: .5rem; }
.gantt-range-label {
    font-variant-numeric: tabular-nums; font-size: .9rem;
    color: var(--ink-soft); min-width: 11rem; text-align: center;
}
.gantt {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-elev);
    overflow: auto; max-height: 70vh; position: relative;
    width: max-content; max-width: 100%;
    --gantt-label-w: 13rem;
}
.gantt-head {
    display: flex; width: max-content;
    position: sticky; top: 0; z-index: 3;
    border-bottom: 1px solid var(--line-strong); background: var(--bg);
}
.gantt-corner {
    width: var(--gantt-label-w); flex-shrink: 0;
    position: sticky; left: 0; z-index: 4; background: var(--bg);
    border-right: 1px solid var(--line-strong);
    padding: .35rem .6rem; font-size: .7rem; font-weight: 600;
    color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em;
    display: flex; align-items: center;
}
.gantt-head-track { display: flex; flex-direction: column; flex-shrink: 0; }
.gantt-years { display: flex; }
.gantt-year {
    flex-shrink: 0; border-left: 1px solid var(--line-strong);
    font-size: .72rem; font-weight: 700; color: var(--ink);
    padding: .3rem .3rem; text-align: center;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gantt-year:first-child { border-left: none; }
.gantt-months { display: flex; border-top: 1px solid var(--line); }
.gantt-month {
    flex-shrink: 0; border-left: 1px solid var(--line);
    font-size: .68rem; font-weight: 600; color: var(--ink-soft);
    padding: .35rem .3rem; text-align: center;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gantt-month:first-child { border-left: none; }
.gantt-month.is-today { color: var(--accent-ink); background: var(--accent-soft); }
.gantt-days { display: flex; border-top: 1px solid var(--line); }
.gantt-day {
    flex-shrink: 0; text-align: center; white-space: nowrap;
    font-size: .58rem; color: var(--ink-mute); padding: .1rem 0;
    font-variant-numeric: tabular-nums;
}
.gantt-day.month-start { border-left: 1px solid var(--line-strong); }
.gantt-day.is-today { color: var(--accent-ink); font-weight: 700; }
.gantt-row {
    display: flex; width: max-content; align-items: stretch; min-height: 2.6rem;
    border-top: 1px solid var(--line);
    cursor: pointer; background: var(--bg-elev);
}
.gantt-row:hover { background: var(--accent-soft); }
.gantt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gantt-row-label {
    width: var(--gantt-label-w); flex-shrink: 0;
    position: sticky; left: 0; z-index: 2; background: inherit;
    border-right: 1px solid var(--line-strong);
    padding: .4rem .6rem; display: flex; flex-direction: column;
    justify-content: center; gap: .1rem;
}
.gantt-row-title { font-size: .82rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.gantt-row-phase { font-size: .68rem; color: var(--ink-mute); }
.gantt-row-track { position: relative; flex-shrink: 0; }
.gantt-today-line {
    position: absolute; top: 0; bottom: 0; width: 0;
    border-left: 2px solid var(--accent); z-index: 1;
}
/* Vertical highlight of a task's day span across every row (on pill hover). */
.gantt-col-hi {
    position: absolute; top: 0; bottom: 0; z-index: 0;
    background: var(--accent-soft); opacity: .55; pointer-events: none;
}
/* Light gray dotted vertical day delimiters (only when zoomed in enough). */
.gantt.has-daygrid .gantt-row-track::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(to right,
        rgba(70, 60, 48, .22) 0, rgba(70, 60, 48, .22) 1px, transparent 1px, transparent var(--day-w));
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0, #000 2px, transparent 2px, transparent 5px);
            mask-image: repeating-linear-gradient(to bottom, #000 0, #000 2px, transparent 2px, transparent 5px);
}
.gantt-bar {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 1.6rem; border-radius: 999px;
    width: max-content; min-width: var(--bar-w); max-width: var(--bar-w);
    background: var(--status-color, var(--ink-soft));
    display: flex; align-items: center; gap: .35rem; padding: 0 .55rem 0 .2rem; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); z-index: 1;
    transition: max-width .28s ease, box-shadow .15s ease;
    cursor: grab; touch-action: none;
}
.gantt-bar:active { cursor: grabbing; }
/* The pill background follows the task STATUS. */
.gantt-bar.todo { --status-color: #e0857a; } /* light red - še načrtovano */
.gantt-bar.wip  { --status-color: #e3b93c; } /* yellow - v teku */
.gantt-bar.done { --status-color: #4f7d5a; } /* green - končano */
.gantt-bar.na   { --status-color: #9a9488; } /* grey - ni relevantno */
/* On hover the pill elevates (no width growth, so its edges keep mapping to start/end -
   the task title is already shown in the frozen left label column). */
.gantt-row:hover .gantt-bar {
    z-index: 6;
    box-shadow: 0 4px 14px rgba(20, 14, 6, .3);
}
/* Edge resize affordance: an ew-resize cursor over the last ~8px of each end. */
.gantt-bar::before, .gantt-bar::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 8px; z-index: 3;
    cursor: ew-resize;
}
.gantt-bar::before { left: 0; }
.gantt-bar::after { right: 0; }
/* While dragging, kill transitions so a resize tracks the pointer instantly. */
.gantt.is-dragging .gantt-bar { transition: none; }
/* Circular badge: phase color + phase number (replaces the old status icon). */
.gantt-bar-phasebadge {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; border-radius: 50%;
    background: var(--phase-color, #5c5851); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.gantt-bar-label {
    font-size: .68rem; white-space: nowrap; color: #fff;
    overflow: hidden; text-overflow: ellipsis;
}
.gantt-bar-range { opacity: .8; font-weight: 400; }
.gantt-bar.na { opacity: .6; }
.gantt-bar.na .gantt-bar-label { text-decoration: line-through; }

/* ---------- kanban phase filter ---------- */
.kanban-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-bottom: 1rem;
}
.kanban-filter-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-mute); margin-right: .2rem;
}
.kanban-filter-chip {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
    padding: .25rem .6rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-mute);
    transition: opacity .12s, border-color .12s, color .12s;
}
.kanban-filter-chip:hover { border-color: var(--ink-mute); color: var(--ink); }
.kanban-filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; border-radius: 999px; flex: none;
    background: var(--phase-color, var(--ink-mute)); color: #fff;
    font-size: .62rem; font-weight: 700;
}
.kanban-filter-chip.active { color: var(--ink); border-color: var(--phase-color, var(--ink)); }
/* Dimmed = hidden phase. */
.kanban-filter-chip:not(.active) { opacity: .45; }
.kanban-filter-chip:not(.active) .kanban-filter-badge { background: var(--ink-mute); }
.kanban-filter-chip.is-all { font-weight: 700; }
.kanban-filter-chip.is-all.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* ---------- kanban board ---------- */
.kanban-board {
    display: flex; gap: .9rem; align-items: flex-start;
    overflow-x: auto; padding-bottom: .5rem;
}
.kanban-col {
    flex: 1 1 0; min-width: 14rem;
    display: flex; flex-direction: column;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-top: 3px solid var(--status-color, var(--line-strong));
    border-radius: var(--radius); overflow: hidden;
}
.kanban-col.status-todo { --status-color: #e0857a; }
.kanban-col.status-wip  { --status-color: #e3b93c; }
.kanban-col.status-done { --status-color: #4f7d5a; }
.kanban-col.status-na   { --status-color: #9a9488; }
.kanban-col-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem .8rem; border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.kanban-col-dot {
    width: .6rem; height: .6rem; border-radius: 999px;
    background: var(--status-color, var(--ink-mute)); flex: none;
}
.kanban-col-title {
    font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.kanban-col-count {
    margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--ink-mute);
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 999px; padding: .05rem .5rem; min-width: 1.5rem; text-align: center;
}
.kanban-cards {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .6rem; min-height: 4rem;
    max-height: calc(100vh - 22rem); overflow-y: auto;
}
.schedule-page.is-fullscreen .kanban-cards { max-height: calc(100vh - 12rem); }
.kanban-card {
    background: var(--bg); border: 1px solid var(--line-strong);
    border-left: 3px solid var(--phase-color, var(--line-strong));
    border-radius: var(--radius); overflow: hidden;
    display: flex; align-items: stretch;
    flex: none; /* keep natural height so a tall column scrolls instead of squishing cards */
    transition: box-shadow .15s, transform .05s;
}
.kanban-card:hover { box-shadow: 0 3px 10px rgba(20, 14, 6, .12); }
/* Drag only via the grip - keeps the rest of the card clickable (touch + mouse). */
.kanban-card-grip {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 1.5rem; color: var(--ink-mute);
    background: var(--bg-elev); border-right: 1px solid var(--line);
    cursor: grab; touch-action: none; user-select: none;
}
.kanban-card-grip:hover { color: var(--ink); background: var(--line); }
.kanban-card-grip:active { cursor: grabbing; }
.kanban-card-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: .25rem;
    padding: .5rem .6rem; cursor: pointer;
}
.kanban-card-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kanban-card-phase {
    display: flex; align-items: center; gap: .35rem;
    font-size: .68rem; font-weight: 600; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .04em;
}
.kanban-card-phasebadge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; border-radius: 999px; flex: none;
    background: var(--phase-color, var(--ink-mute)); color: #fff;
    font-size: .62rem; font-weight: 700;
}
.kanban-card-title {
    font-family: var(--font-sans); font-size: .85rem; font-weight: 600;
    color: var(--ink); line-height: 1.25;
}
.kanban-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.kanban-chip {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .68rem; font-weight: 600; color: var(--ink-mute);
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 999px; padding: .08rem .42rem; white-space: nowrap;
}
.kanban-chip .icon { opacity: .85; }
.kanban-card.is-important { border-left-width: 5px; }
.kanban-card.is-important .kanban-card-title::after { content: " ★"; color: #e3b93c; }
.kanban-card-dragging {
    opacity: .9; box-shadow: 0 12px 28px rgba(20, 14, 6, .28); transform: scale(1.02);
}
.kanban-board.is-dragging { cursor: grabbing; }
.kanban-board.is-dragging .kanban-cards { background: rgba(0, 0, 0, .02); }
.kanban-empty {
    margin: 0; padding: 1rem .5rem; text-align: center;
    font-size: .75rem; color: var(--ink-mute);
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
}

/* ---------- task modal (from gantt) ---------- */
.task-modal {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(26, 20, 12, .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 4vh 1rem; overflow-y: auto;
}
/* Dedicated backdrop element is the modal's only click-to-close target. Never put the close
   handler on the wrapper: drag-selecting text in the card and releasing over the dim area fires
   the click on the wrapper (the common ancestor of mousedown/mouseup), closing the modal mid-edit.
   Same pattern as .fb-backdrop / .legal-modal-backdrop. */
.task-modal-backdrop, .lightbox-backdrop { position: fixed; inset: 0; }
.task-modal-card {
    position: relative; /* stacks above the (positioned) backdrop sibling */
    background: var(--bg); border: 1px solid var(--line-strong);
    border-radius: var(--radius); box-shadow: 0 24px 60px rgba(20, 14, 6, .35);
    width: min(46rem, 100%); margin: auto;
}
.task-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line);
}
.task-modal-titles h2 { font-family: var(--font-serif); font-size: 1.5rem; margin: .15rem 0 0; }
.task-modal-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.task-modal-close {
    appearance: none; border: none; background: transparent;
    color: var(--ink-mute); cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 0 .25rem;
}
.task-modal-close:hover { color: var(--ink); }
.task-modal-body { padding: 1.25rem 1.5rem; margin: 0; }

/* Delete-task confirmation dialog (reuses .task-modal shell, narrower). */
.task-confirm-card { width: min(28rem, 100%); }
.task-confirm-body { padding: 1.25rem 1.5rem 1.5rem; }
.task-confirm-body p { color: var(--ink-soft); margin: 0 0 1.25rem; }
.task-confirm-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Quoted comment text inside the delete-comment confirmation. */
.task-confirm-quote {
    margin: 0 0 1rem; padding: .55rem .75rem; max-height: 9rem; overflow: auto;
    background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
    border-radius: var(--radius); color: var(--ink-soft); font-size: .9rem;
    white-space: pre-wrap; word-wrap: break-word;
}

/* ---------- report cost collector ---------- */
.report-costs { margin: 1.5rem 0 2rem; }
.report-costs-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .75rem; }
.report-costs-table th, .report-costs-table td {
    text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.report-costs-table thead th {
    background: var(--bg-elev); color: var(--ink-soft);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
}
.report-costs-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-costs-item { font-weight: 500; color: var(--ink); }
.report-costs-sub { font-size: .78rem; color: var(--ink-mute); margin-top: .1rem; }
.report-costs-table tfoot td {
    border-top: 2px solid var(--line-strong); border-bottom: none;
    font-weight: 700; color: var(--accent-ink); font-size: 1rem; padding-top: .7rem;
}

/* ---------- cost collector page ---------- */
.report-filters-sep {
    width: 1px; align-self: stretch; min-height: 1.5rem;
    background: var(--line-strong); margin: 0 .35rem;
}
.cost-source {
    display: inline-block; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    padding: .1rem .45rem; border-radius: 999px;
    border: 1px solid var(--line-strong); color: var(--ink-mute);
}
.cost-source.offer { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }
.cost-source.manual { color: var(--ok); border-color: var(--ok-soft); background: var(--ok-soft); }

/* inline cost controls (status + DDV) */
.cost-inline { width: auto; min-width: 6rem; padding: .25rem .4rem; font-size: .82rem; }
.cost-incl { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.cost-status-done { color: #2f7d4f; font-weight: 600; }
.cost-status-wip { color: var(--accent); font-weight: 600; }
.report-print-only { display: none; }

.budget-card {
    display: grid; gap: 1rem 1.25rem; align-items: end;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.budget-field { display: flex; flex-direction: column; gap: .35rem; }
.budget-field > label {
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-mute);
}
.budget-stat { text-align: left; }
.budget-stat-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-mute); margin-bottom: .15rem;
}
.budget-stat-num {
    font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600;
    color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.budget-stat-num.is-over { color: #b5483f; }
.budget-stat-num.is-ok { color: var(--ok); }
.budget-bar-wrap { grid-column: 1 / -1; }
.budget-bar {
    height: 8px; border-radius: 999px; background: var(--line);
    overflow: hidden;
}
.budget-bar-fill {
    height: 100%; background: var(--accent); border-radius: 999px;
    transition: width .3s ease;
}
.budget-bar-fill.is-over { background: #b5483f; }
.budget-bar-meta {
    margin-top: .4rem; font-size: .78rem; color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

.cost-add {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
}
.cost-add-title {
    font-size: .8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-mute); margin: 0 0 .75rem;
}
.cost-add-grid {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}
.cost-add-grid .type-input { width: 100%; }
.cost-add-grid .cost-f-title { flex: 2 1 9rem; }
.cost-add-grid .cost-f-cat { flex: 1.4 1 8rem; }
.cost-add-grid .cost-f-note { flex: 1.6 1 8rem; }
.cost-add-grid .price-input-wrap { flex: 0 0 7.5rem; }
.cost-add-grid .cost-inline { flex: 0 0 auto; }
.cost-add-grid .cost-incl { flex: 0 0 auto; }
.cost-add-grid > .btn { flex: 0 0 auto; }

/* cost charts + over-budget banner */
.cost-charts {
    display: grid; gap: 1rem; margin-bottom: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cost-chart {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .85rem 1rem 1rem; min-width: 0;
}
.cost-chart-title {
    font-size: .76rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-mute); margin-bottom: .35rem;
}
.cost-chart-svg { width: 100%; min-height: 230px; overflow: hidden; }
.cost-overbudget {
    display: flex; align-items: center; gap: .55rem;
    background: #fbeae7; border: 1px solid #e2b3a9; border-left: 4px solid #b5483f;
    border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1.25rem;
    color: #8a2f27; font-size: .9rem; font-weight: 500;
}
.budget-headroom { font-weight: 700; font-size: .95rem; }
.budget-headroom.is-ok { color: var(--ok); }
.budget-headroom.is-over { color: #b5483f; }
.budget-bar-sub { color: var(--ink-mute); }

/* financing & contingency panel */
.finance-card {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.5rem; margin-bottom: 1.5rem;
}
.finance-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.finance-gap {
    margin-top: 1rem; padding: .65rem .9rem; border-radius: var(--radius); font-size: .95rem;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem;
}
.finance-gap.is-short { background: #fbeae7; color: #8a2f27; }
.finance-gap.is-ok { background: #e9f3ec; color: #2f6b43; }
.finance-gap-sub { font-size: .8rem; opacity: .85; font-weight: 400; }
.finance-edit { margin-top: 1rem; }
.finance-edit > summary { cursor: pointer; font-size: .85rem; color: var(--accent); font-weight: 600; }
.finance-edit-grid { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-top: .75rem; }
.finance-f { display: flex; flex-direction: column; gap: .25rem; }
.finance-f > span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.finance-f .type-input { width: 9rem; }
.finance-proracun { display: flex; flex-direction: column; gap: .15rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); align-self: stretch; justify-content: flex-end; }
.finance-proracun strong { font-family: var(--font-serif); font-size: 1.35rem; color: var(--ink); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.finance-note { margin-top: .85rem; font-size: .82rem; color: var(--ink-mute); }
.rollup-budget { width: 7rem; font-size: .82rem; }
.rollup-budget-cell { display: inline-flex; align-items: center; gap: .45rem; }
.rollup-budget-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); white-space: nowrap; }

/* cost-line attachments (invoice / receipt) */
.cost-atts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .4rem; }
.cost-att { display: inline-flex; align-items: center; gap: .15rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .08rem .15rem .08rem .45rem; font-size: .78rem; }
.cost-att .file-link { background: none; border: 0; cursor: pointer; color: var(--accent-ink); padding: 0; font: inherit; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-att-add { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--accent); cursor: pointer; }
.cost-att-add input { display: none; }

.cost-table-title { margin: 0 0 .75rem; }

/* group on/off switches */
.cost-group-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    padding: .3rem .8rem .3rem .55rem; background: var(--bg); cursor: pointer;
    font: inherit; font-size: .82rem; color: var(--ink-soft); transition: background .15s, border-color .15s, color .15s;
}
.cost-group-dot { width: 1.7rem; height: .95rem; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background .15s; }
.cost-group-dot::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(.95rem - 2px); height: calc(.95rem - 2px); border-radius: 50%; background: #fff; transition: transform .15s; }
.cost-group-toggle.on { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.cost-group-toggle.on .cost-group-dot { background: var(--accent); }
.cost-group-toggle.on .cost-group-dot::after { transform: translateX(.75rem); }
.cost-group-toggle.off { opacity: .9; }

/* per-phase roll-up */
.phase-rollup {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.5rem; margin-bottom: 1.5rem;
}
.rollup-row { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr minmax(9rem, auto) auto; gap: .85rem; align-items: center; padding: .3rem 0; }
.rollup-label { font-size: .9rem; color: var(--ink); }
.rollup-bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.rollup-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.rollup-bar-fill.is-over { background: #b5483f; }
.rollup-val { font-size: .85rem; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
/* Over-budget phase/category rows: tinted band + warning icon so they stand out at a glance. */
.rollup-row.is-over {
    background: #fbeae7; border-radius: var(--radius);
    padding: .4rem .6rem; margin: 0 -.6rem;
}
.rollup-row.is-over .rollup-label { color: #8a2f27; font-weight: 600; }
.rollup-alert { color: #b5483f; margin-right: .3rem; }
.rollup-over { display: block; margin-top: .1rem; color: #b5483f; font-weight: 600; font-size: .78rem; }

@media (max-width: 720px) {
    .finance-stats { grid-template-columns: 1fr 1fr; }
    .rollup-row { grid-template-columns: 1fr auto; }
    .rollup-bar { display: none; }
}

@media (max-width: 720px) {
    .budget-card { grid-template-columns: 1fr 1fr; }
    .budget-field { grid-column: 1 / -1; }
    .cost-add-grid { grid-template-columns: 1fr 1fr; }
    .cost-add-grid > button { grid-column: 1 / -1; }
    /* keep the 7-column cost table readable: let it scroll instead of crushing columns */
    .table-scroll .report-costs-table { min-width: 44rem; }
}

@media (max-width: 560px) {
    /* financing form: stack into a single full-width column on phones */
    .finance-edit-grid { flex-direction: column; align-items: stretch; gap: .7rem; }
    .finance-f { width: 100%; }
    .finance-f .type-input { width: 100%; }
    .finance-edit-grid > .btn { width: 100%; }
    .finance-proracun { align-items: flex-start; }
}

/* ---------- iskalnik (search) ---------- */
.search-box { margin-bottom: 1rem; }
.search-box input { width: 100%; }

.search-table { table-layout: auto; }
.search-table thead th { padding: 0; vertical-align: middle; }
.search-table .th-sort {
    width: 100%; display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: none; cursor: pointer; font: inherit;
    padding: .55rem .65rem; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; font-weight: 600;
}
.search-table .th-sort:hover { color: var(--ink); }
.search-table .th-sort.active { color: var(--accent-ink); }
.search-table .th-sort .sort-arrow { font-size: .7rem; }
.search-table th.num .th-sort { justify-content: flex-end; }
.search-table th.search-flag-col .th-sort { justify-content: center; }
.search-table td { vertical-align: middle; }
.search-phase { color: var(--accent-ink); border-bottom: none; white-space: nowrap; }
.search-flag-col { width: 2.5rem; text-align: center; }
.search-flag { color: var(--accent); font-size: 1rem; }
.search-table tr.is-important td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.search-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .85rem; color: var(--ink-mute); margin-bottom: .6rem;
    font-variant-numeric: tabular-nums;
}

/* table column show/hide picker */
.col-picker { position: relative; }
.col-picker > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--bg); color: var(--ink-soft); font-size: .8rem; font-weight: 600;
    white-space: nowrap; user-select: none; transition: border-color .15s, color .15s;
}
.col-picker > summary::-webkit-details-marker { display: none; }
.col-picker > summary:hover,
.col-picker[open] > summary { border-color: var(--accent); color: var(--ink); }
.col-picker-menu {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40;
    min-width: 11rem; padding: .5rem; display: flex; flex-direction: column; gap: .1rem;
    background: var(--bg-elev); border: 1px solid var(--line-strong);
    border-radius: var(--radius); box-shadow: 0 12px 30px rgba(20, 14, 6, .18);
}
.col-picker-title {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-mute); padding: .15rem .4rem .35rem;
}
.col-picker-opt {
    display: flex; align-items: center; gap: .55rem; cursor: pointer;
    padding: .3rem .45rem; border-radius: var(--radius);
    font-size: .88rem; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400;
}
.col-picker-opt:hover { background: var(--bg); }
.col-picker-opt input { flex: none; margin: 0; }
.col-picker-opt.is-locked { color: var(--ink-mute); cursor: default; }
.col-picker-opt.is-locked:hover { background: transparent; }

/* horizontal scroll for wide tables on small screens (cost + search tables) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media print { .table-scroll { overflow: visible; } }
.search-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 1.25rem; flex-wrap: wrap;
}
.search-pager-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.search-pager .btn[disabled] { opacity: .4; cursor: not-allowed; }
.search-pager-info {
    font-size: .85rem; color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
.search-pager-size {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: var(--ink-mute);
}

/* filter controls */
/* On the search page the split line sits BELOW the filters: drop the header's divider and add
   one under the controls, so all filters are above the line and the stat counters/results below. */
.search-header { border-bottom: none; padding-bottom: 0; margin-bottom: 1.5rem; }
.search-controls {
    margin-bottom: 1.75rem; padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.search-filter-row {
    display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
    margin-top: .85rem;
}
/* "Samo pomembne" as a clean rounded toggle that matches the filter row (not a status badge). */
.report-flag-toggle {
    appearance: none; cursor: pointer; align-self: flex-end;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--bg);
    color: var(--ink-soft); font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
    line-height: 1.2; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.report-flag-toggle:hover { border-color: var(--accent); color: var(--ink); }
.report-flag-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.report-clear-btn { align-self: flex-end; }
.search-filter { display: flex; flex-direction: column; gap: .3rem; }
.search-filter > span {
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-mute);
}
.search-select, .search-date {
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); color: var(--ink);
    padding: .45rem .6rem; font-family: var(--font-sans); font-size: .9rem;
}
.search-select { min-width: 9rem; }
.search-select:focus, .search-date:focus { outline: none; border-color: var(--accent); }

/* clickable rows */
.search-row { cursor: pointer; }
.search-row:hover td { background: var(--bg-elev); }
.search-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 640px) {
    .gantt { --gantt-label-w: 8rem; }
    .gantt-controls { align-items: flex-start; }
}

/* ---------- generic eyebrow ---------- */
.eyebrow {
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .18em;
    color: var(--accent);
}

/* ---------- login: Google sign-in ---------- */
.login-switch {
    display: flex; gap: .4rem; align-items: center;
    font-size: .9rem; color: var(--ink-soft); margin-top: .25rem;
}
.login-link {
    appearance: none; background: none; border: none; cursor: pointer;
    color: var(--accent-ink); font: inherit; font-weight: 600; padding: 0;
    border-bottom: 1px solid transparent;
}
.login-link:hover { border-bottom-color: currentColor; }
.login-forgot { margin: -.15rem 0 .1rem; font-size: .9rem; }

.btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
    width: 100%; padding: .8rem 1rem;
    background: #fff; color: #3c4043;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    font-family: var(--font-sans); font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.btn-google:hover { box-shadow: 0 1px 6px rgba(60, 64, 67, .18); border-color: var(--ink-mute); }
.btn-google-icon { display: inline-flex; }

/* mock Google account chooser */
.gchooser-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(26, 20, 12, .55);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.gchooser {
    width: min(26rem, 100%); background: #fff; color: #202124;
    border-radius: 8px; box-shadow: 0 24px 60px rgba(20, 14, 6, .4);
    overflow: hidden; font-family: var(--font-sans);
}
.gchooser-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e8eaed;
}
.gchooser-logo { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; color: #5f6368; }
.gchooser-close {
    appearance: none; border: none; background: transparent; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: #5f6368; padding: 0 .25rem;
}
.gchooser-close:hover { color: #202124; }
.gchooser-body { padding: 1.25rem 1.5rem 1rem; }
.gchooser-title { font-size: 1.35rem; font-weight: 400; }
.gchooser-sub { color: #5f6368; font-size: .9rem; margin-top: .15rem; margin-bottom: 1rem; }
.gaccount-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gaccount {
    display: flex; align-items: center; gap: .9rem; width: 100%;
    padding: .65rem .25rem; background: transparent; border: none; cursor: pointer;
    text-align: left; border-radius: 6px; font: inherit; color: #202124;
}
.gaccount:hover { background: #f1f3f4; }
.gaccount-avatar {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1rem;
}
.gaccount-avatar-plus { background: #e8eaed; color: #5f6368; font-size: 1.4rem; }
.gaccount-text { display: flex; flex-direction: column; min-width: 0; }
.gaccount-name { font-size: .95rem; font-weight: 500; }
.gaccount-email { font-size: .82rem; color: #5f6368; }
.gform { display: flex; flex-direction: column; gap: .7rem; }
.gform-field { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: #5f6368; }
.gform-field input {
    border: 1px solid #c4c7c5; border-radius: 6px;
    padding: .65rem .75rem; font-family: var(--font-sans); font-size: 1rem; color: #202124;
}
.gform-field input:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 1px #1a73e8; }
.gform-submit { align-self: flex-end; }
.gform-back { align-self: flex-start; }

/* login: full-width primary action + tighter card on small screens */
.login-card .gform-submit { align-self: stretch; justify-content: center; }
@media (max-width: 480px) {
    .login-screen { padding: 1rem; }
    .login-card { padding: 1.5rem 1.35rem; }
    .login-card h1 { font-size: 1.45rem; }
}
.gform-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: #5f6368; }
.gform-check input { margin-top: .15rem; flex: none; }
.gform-check a { color: var(--accent); }
.login-terms-note { font-size: .82rem; color: var(--ink-mute); text-align: center; margin: .25rem 0 0; }
.login-terms-note a { color: var(--accent); }
.gchooser-foot {
    padding: .85rem 1.5rem; border-top: 1px solid #e8eaed;
    font-size: .78rem; color: #5f6368; background: #f8f9fa;
}

/* ---------- project switcher in nav ---------- */
.project-switch {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--bg-elev); border: 1px solid var(--line-strong);
    border-radius: var(--radius); padding: .3rem .6rem; cursor: pointer;
    font-family: var(--font-sans); color: var(--ink); max-width: 16rem;
    transition: border-color .15s, background .15s;
}
.project-switch:hover { border-color: var(--accent); }
.project-switch-avatar {
    flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .8rem;
}
.project-switch-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; text-align: left; }
.project-switch-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); }
.project-switch-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-switch-chevron { color: var(--ink-mute); font-size: .9rem; }

/* ---------- projects picker screen ---------- */
.projects-screen { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.projects-nav-user { margin-left: auto; }
.projects-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem clamp(1.5rem, 4vw, 4rem);
    border-bottom: 1px solid var(--line); background: var(--bg);
    position: sticky; top: 0; z-index: 10;
}
.projects-user { display: flex; align-items: center; gap: .75rem; }
.projects-avatar {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600;
}
.projects-user-text { display: flex; flex-direction: column; line-height: 1.15; }
.projects-user-name { font-weight: 600; font-size: .9rem; }
.projects-user-email { font-size: .78rem; color: var(--ink-mute); }

.projects-main { flex: 1; max-width: var(--max); width: 100%; margin: 0 auto; padding: 3rem clamp(1.5rem, 4vw, 4rem) 5rem; }
.projects-head {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0; margin-bottom: 2.5rem;
}
.projects-head .intro { color: var(--ink-soft); margin-top: 1rem; max-width: 42rem; }
.projects-head h1 { margin-top: .5rem; }
.projects-head-action { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.projects-limit-msg { margin: 0; font-size: .82rem; color: var(--ink-soft); text-align: center; max-width: 22rem; }

.projects-empty {
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
    padding: 3.5rem 2rem; text-align: center; background: var(--bg-elev);
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.projects-empty p { color: var(--ink-soft); max-width: 28rem; margin: 0 0 .75rem; }

.projects-grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* two bigger cards per row */
}
@media (max-width: 720px) {
    .projects-grid { grid-template-columns: 1fr; }
}
.project-card {
    position: relative;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-elev); display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .15s;
}
.project-card:hover { border-color: var(--line-strong); box-shadow: 0 8px 24px rgba(40, 30, 18, .08); }
/* Open / edit / delete as icon buttons in the top-right corner. */
.project-card-tools {
    position: absolute; top: .85rem; right: .85rem; z-index: 2;
    display: flex; gap: .3rem;
}
.project-card-tools .icon-btn { width: 1.9rem; height: 1.9rem; font-size: .95rem; line-height: 1; }
.project-card-tools .icon-btn-danger:hover:not(:disabled) {
    color: #b3261e; border-color: #b3261e;
}
/* Clickable card body - a vertical stack so the description/meta span the FULL card width.
   Only the avatar+name row reserves space for the top-right tools, so text isn't squashed. */
.project-card-open {
    display: flex; flex-direction: column; gap: .9rem; align-items: stretch; text-align: left;
    padding: 1.25rem; background: transparent; border: none; cursor: pointer;
    font: inherit; color: var(--ink); width: 100%; flex: 1 1 auto;
}
.project-card-head {
    display: flex; gap: .85rem; align-items: center; min-width: 0;
    padding-right: 3.75rem; /* clear the two top-right tool buttons (edit / delete) */
}
.project-card-avatar {
    flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem;
}
.project-card-titles { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.project-card-name {
    font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-card-address {
    font-size: .82rem; color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-card-info { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.project-card-desc {
    font-size: .85rem; color: var(--ink-soft); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-card-meta { font-size: .75rem; color: var(--ink-mute); }
.project-card-loc::before { content: "📍 "; }
/* Parcel-state badge: house = "Imam parcelo", search = "Iščem parcelo" (accent-tinted to flag the
   still-searching projects). Sized to its content, left-aligned in the card's info stack. */
.project-card-parcel {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; line-height: 1.4;
    border: 1px solid var(--line-strong);
}
.project-card-parcel-ico { width: .95rem; height: .95rem; flex: none; }
.project-card-parcel.has-parcel { color: var(--ink-soft); background: var(--bg); }
.project-card-parcel.no-parcel { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.project-card-actions {
    display: flex; gap: .4rem;
    padding: .85rem 1.25rem 1.1rem; border-top: 1px solid var(--line); margin-top: auto;
}
.project-card-cta { width: 100%; justify-content: center; }

/* First-run onboarding: two big "Imam / Nimam parcele" choice cards that open the create modal. */
.projects-onboard {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 1.5rem; padding: 1rem 0 2.5rem;
}
.projects-onboard-head { max-width: 40rem; }
.projects-onboard-head h2 {
    font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05;
    color: var(--ink); margin: 0 0 .5rem;
}
.projects-onboard-head p { color: var(--ink-soft); margin: 0; }
.projects-onboard-choices {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
    width: 100%; max-width: 52rem;
}
.onboard-choice {
    appearance: none; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 14px);
    background: var(--bg-elev); color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.onboard-choice:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(40, 30, 18, .1); transform: translateY(-2px); }
.onboard-choice-ico {
    width: 3rem; height: 3rem; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent);
}
.onboard-choice-ico svg { width: 1.6rem; height: 1.6rem; }
.onboard-choice-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; }
.onboard-choice-desc { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.onboard-choice-cta { margin-top: .25rem; font-size: .85rem; font-weight: 600; color: var(--accent-ink); }
@media (max-width: 640px) {
    .projects-onboard-choices { grid-template-columns: 1fr; }
}

/* "Imam parcelo" / "Nimam parcele" choice at the top of the create form - radio cards */
.project-parcel-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-bottom: 1.4rem; }
.parcel-choice-card {
    position: relative; appearance: none; cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: .85rem;
    padding: 1rem 1.05rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}
.parcel-choice-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.parcel-choice-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.parcel-choice-ico {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--ink-soft);
    transition: background .14s, color .14s, border-color .14s;
}
.parcel-choice-ico svg { width: 1.35rem; height: 1.35rem; }
.parcel-choice-card.is-selected .parcel-choice-ico { background: var(--accent); border-color: var(--accent); color: #fff; }
.parcel-choice-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.parcel-choice-title { font-weight: 700; color: var(--ink); }
.parcel-choice-desc { font-size: .82rem; color: var(--ink-soft); }
.parcel-choice-check {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    border: 1.5px solid var(--line-strong); color: #fff; background: transparent;
    transition: background .14s, border-color .14s;
}
.parcel-choice-check svg { width: .85rem; height: .85rem; opacity: 0; transition: opacity .14s; }
.parcel-choice-card.is-selected .parcel-choice-check { background: var(--accent); border-color: var(--accent); }
.parcel-choice-card.is-selected .parcel-choice-check svg { opacity: 1; }
.project-form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.project-field { display: flex; flex-direction: column; gap: .35rem; }
.project-field > span { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.project-field-wide { grid-column: 1 / -1; }
.project-field-error { font-size: .8rem; font-weight: 600; color: var(--danger, #c0392b); }
.project-create-hint { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }
.project-more-toggle {
    justify-self: start; padding: .15rem 0; border: 0; background: none; cursor: pointer;
    font-size: .85rem; font-weight: 600; color: var(--accent-ink); letter-spacing: .01em;
}
.project-more-toggle:hover { text-decoration: underline; }
.type-input.is-invalid { border-color: var(--danger, #c0392b); }
.project-form-actions { display: flex; gap: .6rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.project-modal { width: min(34rem, 100%); }
.project-modal-body { padding: 1.25rem 1.5rem 1.5rem; }
.project-modal-body p { color: var(--ink-soft); margin: 0 0 1rem; }
.project-modal-body .project-form-actions { margin-top: 0; }
.project-delete-confirm-hint { font-size: .9rem; margin: 0 0 .4rem; }
.project-delete-confirm-input { width: 100%; margin-bottom: 1.25rem; }

@media (max-width: 560px) {
    .project-form-grid { grid-template-columns: 1fr; }
    .project-field-wide { grid-column: auto; }
    .project-parcel-choice { grid-template-columns: 1fr; }
}

/* ── first-time UX: "Nimam parcele" search-and-buy page (ParcelSearch.razor) ── */
.parcel-search-hero .parcel-search-actions {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.4rem;
}
.parcel-search-hint { font-size: .82rem; color: var(--ink-mute); }

.partner-parcels-note { font-size: .88rem; color: var(--ink-soft); margin: -.4rem 0 1rem; }
.partner-parcels-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.partner-parcel-card {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--bg-elev); display: flex; flex-direction: column;
}
.partner-parcel-thumb {
    position: relative; height: 9rem; overflow: hidden;
    background: linear-gradient(135deg, #6b8f3d, #3f6f8f);   /* fallback while the photo loads / if it fails */
}
.partner-parcel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
/* bottom scrim so the white price stays readable over any photo */
.partner-parcel-thumb::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.5), transparent); z-index: 1; pointer-events: none;
}
.partner-parcel-badge {
    position: absolute; top: .55rem; left: .55rem; z-index: 2;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: rgba(0,0,0,.5); color: #fff; padding: .2rem .45rem; border-radius: 99px;
}
.partner-parcel-price {
    position: absolute; bottom: .55rem; right: .6rem; z-index: 2;
    font-weight: 800; color: #fff; font-size: 1rem; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.partner-parcel-body { padding: .75rem .85rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.partner-parcel-title { font-weight: 700; color: var(--ink); }
.partner-parcel-meta { font-size: .8rem; color: var(--ink-soft); }

.partner-parcels-cta {
    margin-top: 1.4rem; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: 1.1rem 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg);
}
.partner-parcels-cta-text { display: flex; flex-direction: column; gap: .15rem; }
.partner-parcels-cta-text strong { color: var(--ink); }
.partner-parcels-cta-text span { font-size: .86rem; color: var(--ink-soft); }

/* ---------- profile email ---------- */
.profile-user-email { font-size: .82rem; color: var(--ink-mute); }

/* ---------- drag-to-reorder handle (phase page) ---------- */
.item-drag-handle {
    flex: none; align-self: center; cursor: grab; touch-action: none;
    color: var(--ink-mute); font-size: 1rem; line-height: 1; padding: 0 .15rem;
    user-select: none; transition: color .15s;
}
.item-drag-handle:hover, .item-drag-handle:active { color: var(--ink); cursor: grabbing; }
.item.reorder-dragging {
    opacity: .85; box-shadow: 0 8px 22px rgba(20, 14, 6, .22);
    outline: 2px dashed var(--accent); outline-offset: -2px;
}

/* ---------- task reminder ---------- */
.task-reminder .task-meta-label { display: inline-flex; align-items: center; gap: .3rem; }
.task-reminder .task-meta-label svg { width: 14px; height: 14px; }
.reminder-gcal { text-decoration: none; }

/* ---------- project-wide progress (Home hero) ---------- */
.project-progress {
    display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem;
}
.project-progress-item { flex: 1 1 14rem; min-width: 12rem; }
.project-progress-head {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem;
}
.project-progress-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.project-progress-pct {
    font-family: var(--font-serif); font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--ink);
}
.project-progress-bar {
    height: 6px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.project-progress-fill {
    height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease;
}
.project-progress-fill.delivery { background: #3f6f8f; }
.project-progress-fill.full { background: var(--ok); }
.project-progress-sub { margin-top: .35rem; font-size: .75rem; color: var(--ink-mute); }

/* ---------- 10-day weather forecast (ARSO) ---------- */
.weather-widget { margin-top: 1.5rem; }
.weather-head {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem;
}
.weather-title { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.weather-src { font-size: .68rem; color: var(--ink-mute); }
.weather-days { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.weather-day {
    flex: 1 0 4.4rem; min-width: 4.4rem; display: flex; flex-direction: column; align-items: center;
    gap: .12rem; padding: .55rem .25rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-elev);
}
.weather-dow { font-size: .74rem; font-weight: 600; color: var(--ink); }
.weather-date { font-size: .66rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.weather-icon { font-size: 1.4rem; line-height: 1.5; }
.weather-temp { font-size: .74rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.weather-temp strong { font-weight: 700; }
.weather-temp-min { color: var(--ink-mute); }
.weather-precip { font-size: .64rem; color: #3f6f8f; font-variant-numeric: tabular-nums; }
.weather-precip.dry { color: var(--ink-mute); opacity: .55; }

/* ---------- nearby institutions ("V bližini" parcel tab) ---------- */
.nearby-panel { display: flex; flex-direction: column; gap: .6rem; }
.nearby-map-wrap { position: relative; }
.nearby-map {
    height: 320px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; z-index: 0;   /* keep Leaflet panes under the app's sticky/overlay chrome */
}
/* expand-to-modal button overlaid on the inline map */
.nearby-map-expand {
    position: absolute; top: .5rem; right: .5rem; z-index: 500;
    width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer;
    background: var(--bg-elev); color: var(--ink); font-size: 1rem; line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.nearby-map-expand:hover { background: var(--bg); }
/* "🏠 na parcelo" home button - a Leaflet bar control under the zoom buttons (top-left) */
.nearby-home-btn { font-size: 15px; text-align: center; text-decoration: none; cursor: pointer; }

/* full-screen map modal (reuses the generic .task-modal* chrome). Raised above the sticky nav (z 10)
   and the embedded Leaflet controls/panes (z up to ~1000) so it reliably covers the menu - on small
   screens the nav otherwise bled over the modal. */
.nearby-modal { z-index: 1100; }
.nearby-modal-card { width: min(1000px, 94vw); max-width: 94vw; }
/* recenter ("Na parcelo") control: center the monochrome house glyph in the Leaflet bar button */
.nearby-home-btn { display: flex !important; align-items: center; justify-content: center; }
.nearby-home-btn svg { width: 16px; height: 16px; }
.nearby-modal-body { padding: 0; }
.nearby-modal-map { width: 100%; height: min(74vh, 680px); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
/* map pins (Leaflet divIcon): a single uniform-color circular badge holding a white monochrome glyph */
.nearby-pin { background: none; border: none; }
.nearby-pin-ico {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--accent); color: #fff; border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.nearby-pin-ico svg { width: 60%; height: 60%; }
.nearby-pin-parcel .nearby-pin-ico { background: var(--ink); }   /* the parcel stands out from amenities */
/* clicking a list row pulses its pin so the eye lands on it immediately */
@keyframes nearbyFlash {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(196,90,42,.6); }
    50%  { transform: scale(1.55); box-shadow: 0 0 0 9px rgba(196,90,42,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(196,90,42,0); }
}
.nearby-pin-ico.is-flash { animation: nearbyFlash .7s ease-out 3; z-index: 1200; }
.nearby-attr { font-size: .68rem; color: var(--ink-mute); text-align: right; }

/* name search ("najdi Spar / OŠ Velike Lašče …") */
.nearby-search {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: .3rem .3rem .3rem .6rem; background: var(--bg-elev);
}
.nearby-search:focus-within { border-color: var(--accent); }
.nearby-search-ico { display: inline-flex; align-items: center; flex: none; color: var(--ink-mute); }
.nearby-search-ico svg { width: 1rem; height: 1rem; }
.nearby-search-input {
    flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none;
    font: inherit; font-size: .85rem; color: var(--ink);
}
.nearby-search-clear {
    appearance: none; border: none; background: none; cursor: pointer; flex: none;
    font-size: 1.1rem; line-height: 1; color: var(--ink-mute); padding: 0 .2rem;
}
.nearby-search-clear:hover { color: var(--ink); }

/* search results: flat, nearest-first across all categories */
.nearby-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nearby-results li {
    display: flex; align-items: center; gap: .55rem; padding: .4rem .1rem;
    border-bottom: 1px solid var(--line);
}
.nearby-results li:last-child { border-bottom: none; }
.nearby-res-cat { font-size: .7rem; color: var(--ink-mute); flex: none; }
.nearby-results .nearby-name { font-weight: 600; }
.nearby-results .nearby-icon { flex: none; }

/* category blocks: each lists ALL its matches (so e.g. every nearby supermarket shows) */
.nearby-list {
    display: grid; gap: .55rem; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.nearby-cat {
    padding: .55rem .7rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--bg-elev);
}
.nearby-cat-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.nearby-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--accent); }
.nearby-icon svg { width: 1.1rem; height: 1.1rem; }
/* list rows are clickable → FlashAsync pulses the matching pin on the map */
.nearby-item { cursor: pointer; border-radius: 6px; transition: background .12s; }
.nearby-item:hover { background: var(--accent-soft); }
.nearby-items .nearby-item { padding: .14rem .3rem; margin: 0 -.3rem; }
.nearby-cat-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--ink-soft);
}
.nearby-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .22rem; }
.nearby-items li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
/* name + address stacked on the left; the distance stays on the right */
.nearby-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nearby-addr {
    font-size: .72rem; color: var(--ink-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nearby-name {
    font-size: .82rem; color: var(--ink); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nearby-dist {
    font-size: .78rem; font-weight: 700; color: #3f6f8f; flex: none;
    font-variant-numeric: tabular-nums;
}

/* ---------- delivery bar on project cards ---------- */
.project-card-delivery { display: flex; flex-direction: column; gap: .25rem; margin-top: .15rem; }
.delivery-bar { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.delivery-bar-fill { display: block; height: 100%; background: #3f6f8f; border-radius: 999px; transition: width .3s ease; }
.delivery-bar-fill.full { background: var(--ok); }
.delivery-meta { font-size: .72rem; color: var(--ink-mute); }

/* ---------- admin catalog editor ---------- */
.catalog-type-group {
    margin-bottom: 2.5rem; padding-top: 1rem; border-top: 2px solid var(--line-strong);
}
.catalog-add-type { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.catalog-add-type .type-input { flex: 1; min-width: 14rem; }
.catalog-type-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.catalog-type-head .catalog-actions { margin-left: auto; }
.catalog-type-title {
    font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--ink);
}
.catalog-add-phase { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.catalog-add-phase .type-input { flex: 1; min-width: 14rem; }
/* Color picker → compact rounded swatch instead of a stretched bordered input box. */
.catalog-color {
    flex: none; width: 2.4rem; height: 2.4rem; min-width: 2.4rem;
    padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-elev); cursor: pointer; overflow: hidden;
    -webkit-appearance: none; appearance: none;
}
.catalog-color:hover { border-color: var(--accent); }
.catalog-color::-webkit-color-swatch-wrapper { padding: 0; }
.catalog-color::-webkit-color-swatch { border: none; border-radius: calc(var(--radius) - 2px); }
.catalog-color::-moz-color-swatch { border: none; border-radius: calc(var(--radius) - 2px); }
.catalog-number { width: 3.5rem; min-width: 3.5rem; flex: none; text-align: center; }
.catalog-phase {
    border: 1px solid var(--line); border-left: 4px solid var(--phase-color, var(--accent));
    border-radius: var(--radius); background: var(--bg-elev);
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.catalog-phase-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.catalog-phase-head .type-input { flex: 1; min-width: 8rem; }
.catalog-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--phase-color, var(--accent)); flex: none; }
.catalog-phase-title { font-family: var(--font-serif); font-size: 1.15rem; }
.catalog-muted { color: var(--ink-mute); font-size: .78rem; }
.catalog-actions { display: flex; gap: .3rem; align-items: center; margin-left: auto; }
.catalog-intro { flex-basis: 100%; }
.catalog-section {
    margin: .9rem 0 .9rem 1rem; padding: .6rem .8rem;
    border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg);
}
.catalog-section-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.catalog-section-head .type-input { flex: 1; min-width: 8rem; }
.catalog-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.catalog-task {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev);
}
.catalog-task .type-input { flex: 1; min-width: 10rem; }
.catalog-task-text { flex: 1; min-width: 8rem; }
.catalog-kind { flex: none; width: auto; min-width: 8rem; }
.catalog-kind-badge {
    flex: none; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: .12rem .4rem; border-radius: 999px; color: #fff; background: var(--ink-mute);
}
.catalog-kind-badge.kind-1 { background: #c6892b; }
.catalog-kind-badge.kind-2 { background: #b5483f; }
.catalog-days {
    flex: none; width: auto; max-width: 6rem; min-width: 4rem; font-variant-numeric: tabular-nums;
}
.catalog-info { flex-basis: 100%; width: 100%; resize: vertical; }
.catalog-days-badge {
    flex: none; font-size: .68rem; font-weight: 600; color: var(--ink-soft);
    padding: .12rem .45rem; border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--bg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.catalog-add-task, .catalog-add-section { display: flex; gap: .5rem; margin-top: .6rem; }
.catalog-add-task .type-input, .catalog-add-section .type-input { flex: 1; }
.catalog-add-section { margin-top: .8rem; }

/* Improved (labelled) task editor */
.catalog-task-edit {
    flex-basis: 100%; width: 100%;
    display: flex; flex-direction: column; gap: .7rem;
    padding: .3rem .15rem;
}
.catalog-edit-title {
    font-family: var(--font-serif); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.catalog-field { display: flex; flex-direction: column; gap: .25rem; }
.catalog-field-label {
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mute);
}
.catalog-field .type-input { flex: none; width: 100%; min-width: 0; }
.catalog-field-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.catalog-field-row .catalog-field { flex: 1; min-width: 11rem; }
.catalog-field-narrow { flex: 0 0 12rem; }
.catalog-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink-soft); }
.catalog-check input { accent-color: var(--accent); }
.catalog-edit-actions { display: flex; gap: .5rem; margin-top: .2rem; }

/* ---------- admin dashboard + users ---------- */
.admin-back { display: inline-flex; align-items: center; gap: .25rem; margin-bottom: 1rem; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.admin-card {
    display: flex; align-items: center; gap: .9rem; text-decoration: none;
    padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-elev); color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.admin-card:hover { border-color: var(--line-strong); box-shadow: 0 8px 24px rgba(40,30,18,.08); }
.admin-card-ico {
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: var(--radius);
    background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.admin-card-body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.admin-card-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; }
.admin-card-desc { font-size: .85rem; color: var(--ink-soft); }
.admin-card-arrow { flex: none; color: var(--ink-mute); font-size: 1.1rem; }

.admin-users-table td, .admin-users-table th { vertical-align: middle; }
.admin-users-action { text-align: right; white-space: nowrap; }
.admin-users-action .btn + .btn { margin-left: .4rem; }
.admin-users-table .is-disabled-row td { opacity: .6; }
.admin-delete-warn {
    color: #7a2020; background: #f8e8e8; border: 1px solid #d9b5b5;
    border-radius: var(--radius); padding: .6rem .75rem;
}
.project-modal-confirm .login-input { width: 100%; margin: .25rem 0 .25rem; }

/* ── admin analytics ── */
.analytics-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.analytics-search { max-width: 22rem; flex: 1 1 16rem; }
.analytics-meta { color: var(--ink-mute); font-size: .85rem; white-space: nowrap; }
.admin-analytics-table th.analytics-th { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-analytics-table th.analytics-th:hover { color: var(--ink); }
.admin-analytics-table th.analytics-th.is-sorted { color: var(--accent); }
.admin-analytics-table td, .admin-analytics-table th { vertical-align: middle; }
.admin-analytics-table .is-disabled-row td { opacity: .55; }
.analytics-email { display: block; font-weight: 500; color: var(--ink); }
.analytics-name { display: block; font-size: .78rem; color: var(--ink-mute); margin-top: .1rem; }
.user-status {
    display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .55rem; border-radius: 999px;
}
.user-status.is-active { background: var(--ok-soft); color: var(--ok); }
.user-status.is-disabled { background: #f3d9d4; color: #9a3a2c; }

/* ── admin analytics: tabs ── */
.analytics-tabs { display: flex; gap: .35rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.analytics-tab {
    appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
    padding: .55rem .9rem; margin-bottom: -1px; cursor: pointer;
    font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink-soft);
}
.analytics-tab:hover { color: var(--ink); }
.analytics-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.analytics-tab-count {
    display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 700;
}

/* ── admin analytics: KPI cards ── */
.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .9rem; margin-bottom: 1.25rem;
}
.kpi-card {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev);
}
.kpi-value { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.kpi-sub { font-size: .78rem; color: var(--ink-mute); }

/* "Trenutno na strani" - live count with a pulsing dot. */
.kpi-card-live { border-color: rgba(93,121,80,.5); }
.live-dot {
    display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; vertical-align: middle;
    border-radius: 50%; background: rgb(93,121,80);
    animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(93,121,80,.5); }
    70%  { box-shadow: 0 0 0 .5rem rgba(93,121,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(93,121,80,0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ── admin analytics: simple CSS bar charts ── */
.chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .9rem; margin-bottom: .9rem; }
.chart-card { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.chart-card h3 { margin: 0 0 .75rem; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 7rem; }
.chart-bars.is-wide { gap: 6px; }
.chart-col {
    flex: 1 1 0; min-width: 0; height: 100%;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
}
.chart-fill { background: var(--accent); border-radius: 2px 2px 0 0; min-height: 0; }
.chart-fill.is-alt { background: #7c9a6d; }
.chart-fill.is-ok { background: var(--ok, #3a7d44); }
.chart-fill.is-bad { background: #b65c4a; }
/* stacked feedback trend segments (bottom→top: napake / ideje / anketa) */
.chart-fill.is-issue { background: #b65c4a; border-radius: 0; }
.chart-fill.is-idea { background: #c9a227; border-radius: 0; }
.chart-fill.is-survey { background: var(--accent); border-radius: 2px 2px 0 0; }
.chart-x { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .72rem; color: var(--ink-mute); }
.chart-note { margin: .6rem 0 0; font-size: .76rem; color: var(--ink-mute); }
.chart-legend { display: flex; gap: .9rem; margin-top: .45rem; font-size: .76rem; color: var(--ink-soft); }
.chart-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.legend-dot { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; }
.legend-dot.is-issue { background: #b65c4a; }
.legend-dot.is-idea { background: #c9a227; }
.legend-dot.is-survey { background: var(--accent); }
/* grouped day bars: Obiski (visits) + Obiskovalci (visitors) side by side, Obiski chart */
.chart-col-grouped { flex-direction: row; align-items: flex-end; gap: 1px; }
.chart-col-grouped .chart-fill { flex: 1 1 0; }
/* let the Obiski chart's bars grow to fill the card's full height (it shares a grid row with the
   taller top-pages list, which would otherwise leave the bars in a short strip up top) */
.chart-card-tall { display: flex; flex-direction: column; }
.chart-card-tall .chart-bars { flex: 1 1 auto; height: auto; min-height: 7rem; }
.legend-dot.is-visit { background: var(--accent); }
.legend-dot.is-visitor { background: #7c9a6d; }

/* funnel rows need a wider right column ("N · 100 %") */
.dist-row.funnel-row { grid-template-columns: minmax(7rem, 11rem) 1fr 5.5rem; }

/* retention cohort heat table */
.cohort-card { grid-column: 1 / -1; }
.cohort-table { border-collapse: collapse; font-size: .82rem; min-width: 36rem; }
.cohort-table th, .cohort-table td { padding: .3rem .55rem; border: 1px solid var(--line); }
.cohort-table th { font-weight: 600; color: var(--ink-soft); background: var(--accent-soft); }
.cohort-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cohort-table .cohort-cell { min-width: 3.2rem; }

/* ── admin analytics: pages / visits ("Obisk") ── */
.visits-table { min-width: 44rem; }
.visits-table td { vertical-align: top; }

/* user-flow sequences (top paths + per-visit drill-down): pill-chained page routes */
.flow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.flow-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.flow-step {
    font-size: .76rem; font-variant-numeric: tabular-nums;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
    padding: .05rem .45rem; color: var(--ink-soft); white-space: nowrap;
}
.flow-arrow { color: var(--ink-mute); font-size: .7rem; }
.flow-count { font-size: .8rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* horizontal distribution rows (WTP / razlogi / vloge / uporabnost) */
.dist-list { display: flex; flex-direction: column; gap: .45rem; }
.dist-row { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr 2rem; align-items: center; gap: .6rem; }
.dist-label { font-size: .82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-bar { height: .6rem; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.dist-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.dist-list.is-bad .dist-fill { background: #b65c4a; }
.dist-count { font-size: .8rem; font-weight: 600; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.afb-dist-empty { margin: 0; font-size: .82rem; color: var(--ink-mute); }

/* ── admin analytics: feedback (odzivi) ── */
.afb-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.afb-filter {
    appearance: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
    padding: .35rem .8rem; border: 1.5px solid var(--line-strong); border-radius: 999px;
    background: var(--bg-elev); color: var(--ink-soft);
}
.afb-filter:hover { border-color: var(--accent); color: var(--ink); }
.afb-filter.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.afb-survey-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: .9rem; margin-bottom: 1.25rem;
}
.afb-nps-card { grid-column: 1 / -1; }
.afb-nps-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; flex-wrap: wrap; }
.afb-nps-score { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.afb-nps-legend { font-size: .82rem; color: var(--ink-mute); }
.afb-nps-bars { height: 5.5rem; gap: 6px; }
.afb-nps-bars .chart-col { justify-content: flex-end; }
.afb-nps-x { font-size: .7rem; color: var(--ink-mute); text-align: center; margin-top: .2rem; }
.afb-followup { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.afb-list { display: flex; flex-direction: column; gap: .55rem; }
.afb-entry { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; }
.afb-entry.is-open { border-color: var(--line-strong); }
.afb-entry-head {
    appearance: none; border: none; background: none; cursor: pointer; font: inherit; text-align: left;
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .65rem .85rem; color: var(--ink);
}
.afb-entry-head:hover { background: var(--accent-soft); }
.afb-badge {
    flex: none; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap;
}
.afb-badge.is-issue { background: #f3d9d4; color: #9a3a2c; }
.afb-badge.is-idea { background: #f4ecd2; color: #8a6d1a; }
.afb-badge.is-survey { background: var(--accent-soft); color: var(--accent); }
.afb-entry-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afb-flag { flex: none; font-size: .8rem; }
.afb-flag-warn { color: #9a3a2c; font-weight: 700; }
.afb-entry-user { flex: none; font-size: .8rem; color: var(--ink-mute); }
.afb-entry-date { flex: none; font-size: .8rem; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.afb-entry-body { padding: .2rem .85rem .85rem; border-top: 1px solid var(--line); }
.afb-survey-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 .2rem; }
.afb-chip {
    font-size: .78rem; padding: .2rem .6rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--ink-soft);
}
.afb-chip-ok { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.afb-body-text {
    margin: .6rem 0 0; padding: 0; font: inherit; font-size: .9rem; color: var(--ink);
    white-space: pre-wrap; word-break: break-word;
}
.afb-screenshot {
    display: block; max-width: 24rem; max-height: 16rem; margin-top: .7rem;
    border: 1px solid var(--line); border-radius: var(--radius);
}
.afb-meta { margin-top: .7rem; }
.afb-meta summary { cursor: pointer; font-size: .82rem; color: var(--ink-mute); }
.afb-meta-table { margin-top: .4rem; font-size: .8rem; border-collapse: collapse; }
.afb-meta-table th { text-align: left; padding: .15rem .8rem .15rem 0; color: var(--ink-mute); font-weight: 600; vertical-align: top; white-space: nowrap; }
.afb-meta-table td { padding: .15rem 0; color: var(--ink-soft); word-break: break-word; }
.afb-more { display: flex; justify-content: center; margin-top: 1rem; }

@media (max-width: 700px) {
    .afb-entry-user { display: none; }
}

/* ── Task sequence number (#1, #2 …) - plain, larger, no chrome ── */
.item-number {
    flex: none; font-size: 1.4rem; font-weight: 800; color: var(--ink-mute);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1;
}

/* ── Task answer options (single / multi + Drugo) ── */
.task-options { display: flex; flex-wrap: wrap; gap: .5rem; margin: .65rem 0 .9rem; }
.task-option {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none;
    padding: .45rem .85rem; border: 1.5px solid var(--line-strong); border-radius: 10px;
    background: var(--bg-elev); font-size: .9rem; line-height: 1.1; color: var(--ink-soft);
    transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
}
.task-option:hover { border-color: var(--accent); color: var(--ink); background: var(--bg); }
.task-option input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); margin: 0; cursor: pointer; flex: none; }
.task-option.is-checked {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.task-option-other { flex-basis: 100%; border-style: dashed; }
.task-option-other-label { white-space: nowrap; font-weight: 600; }
.task-option-other-input {
    flex: 1; min-width: 8rem; padding: .35rem .55rem; border: 1px solid var(--line-strong);
    border-radius: 8px; background: var(--bg); font-size: .9rem; color: var(--ink);
}
.task-option-other-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Admin inline task editor (from the phase page) ── */
.item-admin-edit { color: var(--accent-ink); }
.admin-edit-card { width: min(34rem, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.admin-edit-body { display: flex; flex-direction: column; gap: .85rem; overflow-y: auto; }
.admin-edit-row { display: flex; gap: .85rem; flex-wrap: wrap; }
.admin-edit-field { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 0; }
.admin-edit-field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); }
.admin-edit-field .type-input { width: 100%; }
.admin-edit-days { flex: 0 0 9rem; }
.admin-edit-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }
.admin-edit-check input { accent-color: var(--accent); }
.admin-edit-foot { display: flex; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); }

/* ── Phase budget builder ── */
.phase-budget-sum { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.phase-budget-open { align-self: flex-end; }

.budget-modal-card { width: min(40rem, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.budget-modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; }
.budget-modal-intro { margin: 0 0 1rem; font-size: .9rem; color: var(--ink-soft); }
.budget-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); margin: 1rem 0 .5rem; }
.budget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.budget-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev);
}
.budget-row.is-on { border-color: var(--line-strong); background: var(--bg); }
.budget-row-pick { display: inline-flex; align-items: center; gap: .5rem; flex: 1; cursor: pointer; }
.budget-row-pick input { accent-color: var(--accent); }
.budget-row-name { font-size: .92rem; }
.budget-row-name-input { flex: 1; min-width: 8rem; }
.budget-row-amount { flex: 0 0 7.5rem; }
.budget-row-amount .price-input { text-align: right; width: 100%; }
.budget-row-estimate { font-size: .8rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.budget-add { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.budget-add .budget-row-name-input { flex: 1; min-width: 10rem; }
.budget-modal-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--line);
}
.budget-total { display: flex; flex-direction: column; }
.budget-total span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }
.budget-total strong { font-family: var(--font-serif); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Phase section tabs + pagination ── */
.phase-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0; }
.phase-tab {
    appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--bg-elev); color: var(--ink-soft); line-height: 1;
    font-family: var(--font-sans); font-size: .85rem; font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.phase-tab:hover { border-color: var(--phase-color, var(--accent)); color: var(--ink); }
.phase-tab-num {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--line); color: var(--ink-mute);
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.phase-tab.is-complete .phase-tab-num { background: var(--ok); color: #fff; }
.phase-tab.is-current {
    background: var(--phase-color, var(--accent)); border-color: var(--phase-color, var(--accent)); color: #fff;
}
.phase-tab.is-current .phase-tab-num { background: rgba(255, 255, 255, .25); color: #fff; }
.phase-tab-check { color: var(--ok); font-weight: 700; }
.phase-tab.is-current .phase-tab-check { color: #fff; }

.section-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; }
.section-pager-pos { font-size: .85rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* ── Admin: task option badge + phase potential costs ── */
.catalog-opt-badge {
    flex: none; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: .12rem .45rem; border-radius: 999px; color: #fff; background: var(--accent);
}
.catalog-allow-other { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-soft); }
.catalog-allow-other input { accent-color: var(--accent); }
.catalog-phase-costs { margin: .8rem 0 .4rem; padding-top: .8rem; border-top: 1px dashed var(--line-strong); }
.catalog-costs-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); margin-bottom: .5rem; }
.catalog-costs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.catalog-cost { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.catalog-cost-name { flex: 1; min-width: 8rem; }
.catalog-cost-amount { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .85rem; }
.catalog-add-cost { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.catalog-add-cost .type-input:first-child { flex: 1; min-width: 10rem; }

/* ──────────────────────────────────────────────────────────────────────────
   Parcel lookup (lokacijska informacija) - project-page map + OPN widget
   ────────────────────────────────────────────────────────────────────────── */
.parcel {
    position: relative;
    margin: 2.5rem 0;
    padding: 1.6rem 1.6rem 1.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elev);
}
/* Daily-quota pill pinned to the card's top-right corner. */
.parcel-usage { position: absolute; top: 1.1rem; right: 1.1rem; }
.parcel-eyebrow {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
    color: var(--accent); margin-bottom: .35rem;
}
.parcel-head h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.parcel-head p { margin: 0 0 1.35rem; color: var(--ink-soft); font-size: .92rem; max-width: 64ch; }

/* search row */
.parcel-search { display: flex; gap: .9rem; align-items: flex-end; flex-wrap: wrap; }
.parcel-field { display: flex; flex-direction: column; gap: .35rem; }
.parcel-field label {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute);
}
.parcel-field input {
    width: 12rem; max-width: 100%;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: .6rem .75rem; background: var(--bg);
    font-family: var(--font-sans); font-size: .95rem; color: var(--ink);
    transition: border-color .15s;
}
.parcel-field input:focus { outline: none; border-color: var(--accent); }
.parcel-field input::placeholder { color: var(--ink-mute); font-style: italic; }

/* KO searchable combobox (filter-as-you-type dropdown that replaces the plain KO field). */
.ko-combo { position: relative; display: block; width: 14rem; max-width: 100%; }
.parcel-field .ko-combo { width: 14rem; }
.parcel-adjacent-add .ko-combo { flex: 1 1 8rem; min-width: 6rem; width: auto; }
.ko-combo .ko-combo-input { width: 100%; box-sizing: border-box; padding-right: 1.8rem; }
.ko-combo-caret {
    position: absolute; right: .65rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-mute); pointer-events: none; font-size: .9rem;
}
.ko-combo-list {
    position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 40;
    margin: 0; padding: .25rem; list-style: none;
    background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14); max-height: 16rem; overflow-y: auto;
}
.ko-combo-opt {
    display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
    padding: .45rem .55rem; border-radius: calc(var(--radius) - 2px); cursor: pointer;
    font-size: .9rem; color: var(--ink);
}
.ko-combo-opt:hover, .ko-combo-opt.is-active { background: var(--accent-soft); }
.ko-combo-opt.is-selected { font-weight: 600; }
.ko-combo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-combo-id { flex: none; color: var(--ink-mute); font-variant-numeric: tabular-nums; font-size: .8rem; }
.ko-combo-empty, .ko-combo-more {
    padding: .45rem .55rem; color: var(--ink-mute); font-size: .82rem; font-style: italic;
}
.parcel-go { height: 2.65rem; }
/* Wrapper so the disabled button still shows its tooltip (browsers suppress a disabled button's own title). */
.parcel-go-wrap { display: inline-flex; align-items: flex-end; }
/* Greyed-out, non-interactive look while disabled (busy or the shown report already matches the form). */
.parcel-go:disabled, .parcel-go[disabled] { opacity: .5; cursor: not-allowed; }
.parcel-go:disabled:hover, .parcel-go[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* "Hiša v 3D" - secondary accent action beside "Prikaži parcelo" (opens the 3D view: real terrain
   once a parcel is looked up, a generic flat plot until then). */
/* Same accent-glow pill as the navbar "Hiša v 3D" entry (.nav-link-3d). */
.parcel-3d-go {
    height: 2.65rem; gap: .35rem; font-weight: 700; border: none; white-space: nowrap;
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-ink));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
                0 0 12px 1px color-mix(in srgb, var(--accent) 55%, transparent);
    animation: nav-3d-glow 2.4s ease-in-out infinite; transition: transform .15s, background .15s;
}
.parcel-3d-go:hover { color: #fff; transform: translateY(-1px); background: linear-gradient(135deg, var(--accent-ink), var(--accent)); }
.parcel-3d-go-ico { display: inline-flex; }
.parcel-3d-go-ico svg { width: 1.05rem; height: 1.05rem; }
/* Disabled: phase-flow project with no parcel yet - look it up first. A non-clickable span. */
.parcel-3d-go.is-disabled {
    color: var(--ink-mute); border: 1px dashed var(--line-strong);
    background: var(--bg-elev); cursor: not-allowed; box-shadow: none; animation: none;
}
.parcel-3d-go.is-disabled:hover { background: var(--bg-elev); border-color: var(--line-strong); color: var(--ink-mute); transform: none; }

.parcel-error {
    margin-top: 1.1rem; padding: .7rem .9rem;
    border: 1px solid #d9b5b5; border-left: 3px solid #7a2020; border-radius: var(--radius);
    background: #f8e8e8; color: #7a2020; font-size: .9rem;
}

/* result: map + info */
.parcel-result {
    margin-top: 1.6rem;
    display: grid; grid-template-columns: minmax(230px, 1fr) minmax(300px, 1.25fr);
    gap: 1.75rem; align-items: start;
}
@media (max-width: 760px) { .parcel-result { grid-template-columns: 1fr; } }

/* OPN imported from a lokacijska-informacija PDF with no geometry → single (info) column */
.parcel-result--nomap { grid-template-columns: 1fr; }

/* Uvoz lokacijske informacije (PDF) drop zone */
.parcel-li-drop {
    position: relative; display: flex; align-items: center; gap: .85rem;
    margin-top: 1.1rem; padding: .9rem 1.1rem;
    border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
    background: var(--bg); cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.parcel-li-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.parcel-li-drop.is-busy { cursor: progress; }
/* the real file input fills the label, so the whole card is clickable and a drop target */
.parcel-li-drop input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit;
}
.parcel-li-drop.is-busy input[type=file] { pointer-events: none; }
.parcel-li-ic { font-size: 1.4rem; line-height: 1; flex: none; }
.parcel-li-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.parcel-li-text strong { font-size: .92rem; color: var(--ink); }
.parcel-li-text span { font-size: .8rem; color: var(--ink-soft); }
/* privacy hint under the OPN-import drop zone */
.parcel-li-note { margin: .4rem 0 0; font-size: .74rem; line-height: 1.4; color: var(--ink-mute); }

/* Multi-plot LI import warnings (parcels that couldn't be added / weren't covered) */
.parcel-li-warnings { margin-top: .7rem; display: flex; flex-direction: column; gap: .35rem; }
.parcel-li-warning {
    font-size: .82rem; line-height: 1.4; color: #8a5300;
    background: #fff7e6; border: 1px solid #f0d28a; border-radius: var(--radius);
    padding: .5rem .7rem;
}

/* Sosednje (mejne) parcele - adjacent-plot manager under the parcel summary */
.parcel-adjacent {
    margin: 1rem 0 .25rem; padding: .85rem 1rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
}
.parcel-adjacent-head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .6rem; }
.parcel-adjacent-head strong { font-size: .92rem; color: var(--ink); }
.parcel-adjacent-hint { font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.parcel-adjacent-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.parcel-adjacent-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
    padding: .5rem .65rem; border: 1px solid var(--line); border-left: 3px solid #2f6fd0;
    border-radius: var(--radius); background: var(--surface, #fff);
}
.parcel-adjacent-id { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.parcel-adjacent-num { font-size: .85rem; font-weight: 600; color: var(--ink); }
.parcel-adjacent-sub { font-size: .77rem; color: var(--ink-soft); }
.parcel-adjacent-owner { font-size: .73rem; color: var(--ink-mute); }
.parcel-adjacent-remove {
    flex: none; width: 1.5rem; height: 1.5rem; line-height: 1; font-size: 1.1rem;
    border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg);
    color: var(--ink-soft); cursor: pointer;
}
.parcel-adjacent-remove:hover { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.parcel-adjacent-combined {
    font-size: .82rem; line-height: 1.5; color: var(--ink); margin-bottom: .6rem;
    padding: .5rem .65rem; border-radius: var(--radius); background: var(--accent-soft);
}
.parcel-adjacent-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.parcel-adjacent-in {
    flex: 1 1 8rem; min-width: 6rem; padding: .45rem .6rem; font-size: .85rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink);
}
.parcel-adjacent-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.parcel-adjacent-err { margin-top: .4rem; font-size: .8rem; color: var(--danger, #c0392b); }
.parcel-adjacent-more {
    margin-top: .2rem; padding: .4rem .2rem; font-size: .83rem; font-weight: 600;
    background: none; border: none; color: var(--accent); cursor: pointer;
}
.parcel-adjacent-more:hover { text-decoration: underline; }

/* "Povzetek Lokacijske Info" - round, icon-only button next to the KO/parcel id (left of the assessed
   value); opens the OPN-import summary modal. */
.parcel-summary-left { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.parcel-summary-btn {
    flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--line-strong);
    transition: border-color .15s, background .15s, color .15s;
}
.parcel-summary-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.parcel-summary-btn svg { width: 1.15rem; height: 1.15rem; }
.parcel-li-modal-card { width: min(92vw, 640px); }
.parcel-li-modal-body {
    padding: .25rem 1.4rem 1.4rem; font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
    white-space: pre-wrap; max-height: 70vh; overflow-y: auto;
}

.parcel-map-wrap { margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.parcel-map {
    position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: inset 0 1px 3px rgba(60, 50, 35, .12);
    /* grid shows only until the orthophoto loads (or if the WMS proxy fails) */
    background:
        linear-gradient(rgba(122,50,20,.05) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(122,50,20,.05) 1px, transparent 1px) 0 0 / 26px 26px,
        #fbf7f0;
}
.parcel-ortho { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.parcel-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.parcel-coords {
    font-size: .8rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; text-align: center;
}
.parcel-pin { color: var(--accent); }
/* "Open in OpenStreetMap" link beside the coordinates (drops a marker at the lon/lat). Kept on one line
   (nowrap) so it doesn't break mid-link; the coordinates themselves stay plain muted text. */
.parcel-coords-osm { margin-left: .3rem; color: var(--accent); font-weight: 600; white-space: nowrap; text-decoration: underline; }
.parcel-coords-osm:hover { text-decoration: none; }

/* info panel: summary header + tabbed sections */
.parcel-summary {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.parcel-summary-obcina { font-size: .9rem; color: var(--accent, #c45a2a); font-weight: 600; margin-bottom: .12rem; }
.parcel-summary-title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); line-height: 1.15; }
.parcel-summary-sub { font-size: .85rem; color: var(--ink-mute); margin-top: .2rem; font-variant-numeric: tabular-nums; }

/* Lookup loader + progress - shown while a report is assembled from the public registries (GURS/MNVP/ARSO…). */
.loka-loader { margin-top: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line, #e4ddd3);
    border-radius: 14px; background: linear-gradient(180deg, #fffdfa, #faf4ec); }
.loka-loader-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink, #2f2a25); margin-bottom: .7rem; }
.loka-progress { height: 8px; border-radius: 999px; background: var(--line, #e4ddd3); overflow: hidden; }
.loka-progress-bar { height: 100%; width: 6%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #c45a2a), #e8a06a);
    animation: loka-progress 8s cubic-bezier(.22,.8,.2,1) forwards; }
@keyframes loka-progress { 0% { width: 6%; } 55% { width: 70%; } 100% { width: 92%; } }
.loka-loader-steps { list-style: none; margin: .9rem 0 .2rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.loka-loader-steps li { position: relative; padding-left: 1.35rem; font-size: .82rem; color: var(--ink-mute, #9b948c);
    opacity: .5; animation: loka-step 8s linear forwards; }
.loka-loader-steps li::before { content: "○"; position: absolute; left: 0; }
.loka-loader-steps li:nth-child(2) { animation-delay: 2s; }
.loka-loader-steps li:nth-child(3) { animation-delay: 4s; }
.loka-loader-steps li:nth-child(4) { animation-delay: 6s; }
@keyframes loka-step { 0% { opacity: .5; } 12%, 100% { opacity: 1; color: var(--ink, #2f2a25); } }
@media (prefers-reduced-motion: reduce) {
    .loka-progress-bar { animation: none; width: 60%; }
    .loka-loader-steps li { animation: none; opacity: 1; }
}
.parcel-summary-value { flex: none; text-align: right; }
.parcel-summary-value-amount {
    font-family: var(--font-serif); font-size: 1.5rem; font-weight: 800; color: var(--ok); line-height: 1; white-space: nowrap;
}
.parcel-summary-value-k {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute);
    margin-top: .2rem; white-space: nowrap;
}

.parcel-panel > *:last-child { margin-bottom: 0; }

/* count badge - shared by the namenska-raba panel and the accordion headers below */
.parcel-tab-count {
    font-size: .68rem; font-weight: 700; line-height: 1; padding: .14rem .42rem; border-radius: 999px;
    background: var(--line); color: var(--ink-soft);
}

/* Full-width sections below the map + namenska raba, as stacked vertical accordions so each section
   (tables, the V-bližini map) gets the whole widget width instead of the cramped info column. */
.parcel-sections { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .7rem; }
.parcel-acc {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden;
}
.parcel-acc.is-open { border-color: var(--line-strong); }
.parcel-acc-head {
    appearance: none; width: 100%; display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem; background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--font-sans); font-size: .92rem; font-weight: 700; color: var(--ink);
    transition: background .12s;
}
.parcel-acc-head:hover { background: var(--bg); }
.parcel-acc.is-open .parcel-acc-head { border-bottom: 1px solid var(--line); }
.parcel-acc-title { flex: 1 1 auto; }
/* Chevron drawn from a rotated bordered square (font-size:0 hides the ⌄ glyph) so it sits perfectly
   centered in the header regardless of the font's glyph metrics; the box flips on open. */
.parcel-acc-chevron {
    flex: none; width: 1.1rem; height: 1.1rem; font-size: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-mute); transition: transform .15s ease;
}
.parcel-acc-chevron::before {
    content: ""; width: .5rem; height: .5rem; margin-top: -.18rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    border-radius: 1px; transform: rotate(45deg);
}
.parcel-acc.is-open .parcel-acc-chevron { transform: rotate(180deg); }
.parcel-acc-body { padding: 1.1rem 1rem 1.2rem; }
.parcel-acc-body > *:last-child { margin-bottom: 0; }

/* Locked section teaser (tier below the one that unlocks it) - looks like a disabled accordion
   header but navigates to the pricing page. */
.parcel-acc-locked { border-style: dashed; background: var(--bg); }
.parcel-acc-locked .parcel-acc-head { color: var(--ink-mute); font-weight: 600; }
.parcel-acc-locked .parcel-acc-head:hover { background: var(--bg-elev); color: var(--ink-soft); }
.parcel-lock-ico { flex: none; font-size: .9rem; line-height: 1; opacity: .8; }
.parcel-lock-need {
    flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    padding: .14rem .5rem; border-radius: 999px; white-space: nowrap;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

.parcel-zone {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem .95rem; margin-bottom: 1.1rem;
    background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}
.parcel-zone-code {
    flex: none; min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-size: 1.45rem; font-weight: 800; line-height: 1;
    color: #fff; background: var(--accent-ink); border-radius: var(--radius);
}
.parcel-zone-text { min-width: 0; }
.parcel-zone-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); }
.parcel-zone-meta { font-size: .82rem; color: var(--ink-mute); margin-top: .15rem; }

.parcel-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .6rem; margin-bottom: 1.2rem;
}
.parcel-stat {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .55rem .65rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.parcel-stat-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.parcel-stat-v { font-size: 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.parcel-block-title {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute);
    margin: 0 0 .4rem;
}
.parcel-note { font-size: .88rem; color: var(--ink-soft); margin: .4rem 0 0; }

/* Section header inside an accordion body (Bivanjske razmere: Pokritost / Trenutna kakovost zraka /
   Strateške karte hrupa). A titled divider with generous top spacing so the three blocks read as
   clearly separated. (Mirrors the Glog app; was missing here, which left the blocks cramped.) */
.parcel-acc-subhead {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem;
    margin: 2.25rem 0 .7rem; padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
    font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft);
}
.parcel-acc-subhead:first-child { margin-top: .15rem; }
.parcel-acc-submeta { margin-left: auto; font-size: .72rem; font-weight: 500; letter-spacing: 0; color: var(--ink-mute); }

.parcel-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.parcel-table th, .parcel-table td {
    text-align: left; padding: .42rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.parcel-table th { color: var(--ink-soft); font-weight: 600; width: 48%; }
.parcel-table td { color: var(--ink); }

.parcel-act-name { font-size: .9rem; color: var(--ink); }

/* ── ownership (Lastništvo) + eZK (hipoteke) ── */
.parcel-owners { margin-bottom: .9rem; }
.parcel-owners td { text-align: right; white-space: nowrap; }
.parcel-owner-name { display: block; color: var(--ink); font-weight: 600; }
.parcel-owner-name.parcel-owner-masked { color: var(--ink-soft); font-style: italic; font-weight: 500; }
.parcel-owner-sub { display: block; font-size: .8rem; color: var(--ink-mute); font-weight: 400; }
.parcel-owner-share { display: block; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.parcel-owner-type { display: block; font-size: .78rem; color: var(--ink-mute); }

.parcel-zk {
    margin: .4rem 0 1rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-2, rgba(0, 0, 0, .02));
}
.parcel-zk-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }
.parcel-zk-text { font-size: .88rem; color: var(--ink-soft); margin: .3rem 0 .45rem; }

/* (i) info badge - native title tooltip, matching the app's title= convention */
.parcel-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; margin-left: .25rem; vertical-align: baseline;
    border: 1px solid var(--line-strong); border-radius: 50%;
    font-family: var(--font-sans); font-size: .62rem; font-weight: 700; font-style: italic;
    color: var(--ink-mute); background: var(--bg); cursor: help; user-select: none;
}
.parcel-i:hover, .parcel-i:focus { color: #fff; background: var(--accent); border-color: var(--accent); outline: none; }

.parcel .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; }

/* Prostorski akti - list of adopted spatial-plan acts, each linking to its PIS record (documents). */
.parcel-acts { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.parcel-act-item {
    padding: .7rem .85rem;
    background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    display: flex; flex-direction: column; gap: .25rem;
}
.parcel-act-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.parcel-act-row .parcel-act-name { font-weight: 600; }
.parcel-act-badge {
    flex: none; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
    padding: .1rem .45rem; border-radius: 999px;
    color: var(--ink-mute); border: 1px solid var(--line);
}
.parcel-act-badge.is-valid { color: #1a7f37; background: rgba(26, 127, 55, .1); border-color: rgba(26, 127, 55, .3); }
.parcel-act-sub { font-size: .8rem; color: var(--ink-mute); }
.parcel-act-link {
    font-size: .85rem; font-weight: 600; color: var(--accent-ink); text-decoration: none; margin-top: .15rem;
}
/* The hover underline comes from the global a:hover border-bottom; adding text-decoration too gave a DOUBLE line. */
.parcel-act-link:hover { text-decoration: none; }

/* komunalna oprema (GJI) tab */
.parcel-utils th { width: 62%; }
.parcel-utils td { text-align: right; vertical-align: top; }
.parcel-util-name { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.parcel-util-dot { flex: none; width: .6rem; height: .6rem; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.parcel-util-sub { display: block; font-size: .78rem; color: var(--ink-mute); font-weight: 400; margin-top: .15rem; }
.parcel-util-badge {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    padding: .18rem .55rem; border-radius: 999px; font-variant-numeric: tabular-nums;
    color: var(--ink-soft); border: 1px solid var(--line);
}
.parcel-util-badge.is-on { color: #1a7f37; background: rgba(26, 127, 55, .1); border-color: rgba(26, 127, 55, .3); }
.parcel-util-badge.is-off { color: var(--ink-mute); border-style: dashed; }
.parcel-util-speed { display: block; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Dostopnost (access to a public road) ────────────────────────────────────────────────────────
   A three-state verdict, so it gets a colour rather than a badge: the reader should be able to tell
   green from red without reading a word. The three hues match .parcel-util-badge.is-on's green so the
   report keeps one palette. */
.parcel-access {
    border-left: 3px solid var(--line); border-radius: 6px;
    padding: .6rem .75rem; background: var(--bg-elev);
}
.parcel-access-summary { font-weight: 700; }
.parcel-access-detail { margin: .3rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.parcel-access.is-ok { border-left-color: #1a7f37; background: rgba(26, 127, 55, .07); }
.parcel-access.is-ok .parcel-access-summary { color: #1a7f37; }
.parcel-access.is-warn { border-left-color: #a5690a; background: rgba(165, 105, 10, .08); }
.parcel-access.is-warn .parcel-access-summary { color: #a5690a; }
.parcel-access.is-bad { border-left-color: #b02a20; background: rgba(176, 42, 32, .08); }
.parcel-access.is-bad .parcel-access-summary { color: #b02a20; }
/* the verdict repeated in the section header, so it reads from the collapsed accordion too */
.parcel-access-pill {
    margin-left: auto; display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    white-space: nowrap; padding: .18rem .55rem; border-radius: 999px;
    color: var(--ink-soft); border: 1px solid var(--line);
}
.parcel-access-pill.is-ok { color: #1a7f37; background: rgba(26, 127, 55, .1); border-color: rgba(26, 127, 55, .3); }
.parcel-access-pill.is-warn { color: #a5690a; background: rgba(165, 105, 10, .1); border-color: rgba(165, 105, 10, .3); }
.parcel-access-pill.is-bad { color: #b02a20; background: rgba(176, 42, 32, .1); border-color: rgba(176, 42, 32, .3); }

/* ── Omejitve na parceli: varovalni pasovi infrastrukture · vodno in priobalno zemljišče ─────────
   One card shape for both (ProtectedCorridorBlock / WaterProtectionBlock). It deliberately does NOT
   reuse the Dostopnost verdict slab: that block is one sentence, while these carry a verdict, three
   figures, several rows and a legal explanation, and washing all of it in one colour made a section
   that shouted before it said anything. Here the colour is a 3 px edge plus a chip, the numbers a
   reader acts on stand on their own, and the long legal text sits behind a disclosure.
   A card is only coloured when a belt actually reaches the parcel - "a regional road is 90 m away"
   is context, and painting it amber would cry wolf on most plots in the country. */
.parcel-cbox {
    margin: 0 0 .9rem; padding: .7rem .8rem .75rem;
    border: 1px solid var(--line); border-left: 3px solid var(--line);
    border-radius: 10px; background: var(--bg-elev);
}
/* Toned states carry the same tint as the Dostopnost card right above them (and as the PDF), so the
   three verdicts in one report read as one traffic light rather than three conventions. The stat tiles
   keep their own white ground on top of it, which is what stops the tint turning into a slab. */
.parcel-cbox.is-ok { border-left-color: #1a7f37; background: rgba(26, 127, 55, .07); }
.parcel-cbox.is-warn { border-left-color: #a5690a; background: rgba(165, 105, 10, .08); }
.parcel-cbox.is-bad { border-left-color: #b02a20; background: rgba(176, 42, 32, .08); }
.parcel-cbox-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.parcel-cbox-title {
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-mute);
}
.parcel-cbox-head > :last-child { margin-left: auto; }
.parcel-cbox-lead { margin: .3rem 0 0; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.parcel-cbox.is-ok .parcel-cbox-lead { color: #1a7f37; }
.parcel-cbox.is-warn .parcel-cbox-lead { color: #8a5708; }
.parcel-cbox.is-bad .parcel-cbox-lead { color: #97241b; }

/* The figures that answer "can I still build here?" - tabular, side by side, out of the prose. */
.parcel-cbox-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.parcel-cbox-stat {
    flex: 1 1 8.5rem; padding: .4rem .55rem; border: 1px solid var(--line);
    border-radius: 8px; background: var(--bg);
}
.parcel-cbox-stat b { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }
.parcel-cbox-stat span { display: block; margin-top: .1rem; font-size: .72rem; color: var(--ink-mute); }

.parcel-cbox-rows { margin-top: .65rem; }
.parcel-cbox-row {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .45rem 0; border-top: 1px solid var(--line);
}
.parcel-cbox-row:first-child { border-top: 0; padding-top: .1rem; }
.parcel-cbox-dot {
    flex: none; width: .55rem; height: .55rem; margin-top: .32rem; border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.parcel-cbox-main { flex: 1 1 auto; min-width: 0; }
.parcel-cbox-name { font-weight: 600; }
.parcel-cbox-meta { display: block; font-size: .78rem; color: var(--ink-mute); margin-top: .1rem; line-height: 1.4; }
.parcel-cbox-law { display: block; font-size: .72rem; color: var(--ink-mute); margin-top: .1rem; }
.parcel-cbox-row .parcel-util-badge { flex: none; margin-top: .1rem; }

/* The legal explanation: read once, then out of the way. */
.parcel-cbox-more { margin-top: .55rem; }
.parcel-cbox-more > summary {
    cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
    list-style: none; display: inline-flex; align-items: center; gap: .3rem;
}
.parcel-cbox-more > summary::-webkit-details-marker { display: none; }
.parcel-cbox-more > summary::before { content: "▸"; font-size: .7rem; }
.parcel-cbox-more[open] > summary::before { content: "▾"; }
.parcel-cbox-more p { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.parcel-cbox-more .parcel-cbox-src { font-size: .78rem; color: var(--ink-mute); }

/* The row badges: a hit is the point of the whole section, the edge case is honestly hedged, and a
   non-constraining belt (javna pot, NN kabel) stays quiet so it cannot be mistaken for a problem. */
.parcel-util-badge.is-hit { color: #b02a20; background: rgba(176, 42, 32, .1); border-color: rgba(176, 42, 32, .35); font-weight: 700; }
.parcel-util-badge.is-edge { color: #a5690a; background: rgba(165, 105, 10, .1); border-color: rgba(165, 105, 10, .3); }
.parcel-util-badge.is-soft { color: var(--ink-soft); border-style: dashed; }

/* pravni režimi (Režimi tab): kind badges */
.parcel-regimes td { text-align: right; vertical-align: top; }
.parcel-regime-badge {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft);
}
.parcel-regime-natura2000 { color: #1a7f37; background: rgba(26, 127, 55, .1); border-color: rgba(26, 127, 55, .3); }
.parcel-regime-epo { color: #4d7c0f; background: rgba(77, 124, 15, .08); border-color: rgba(77, 124, 15, .3); }
.parcel-regime-arheologija { color: #9a3412; background: rgba(154, 52, 18, .08); border-color: rgba(154, 52, 18, .3); }
.parcel-regime-dediscina { color: #92400e; background: rgba(146, 64, 14, .08); border-color: rgba(146, 64, 14, .3); }

/* utility-line legend under the parcel map */
.parcel-map-legend { display: flex; flex-wrap: wrap; gap: .35rem .8rem; justify-content: center; }
.parcel-legend-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--ink-mute); }
.parcel-legend-swatch { flex: none; width: .95rem; height: 3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

/* expand-to-modal button pinned to the inline map's corner */
.parcel-map-zoom {
    position: absolute; top: .55rem; right: .55rem; z-index: 2;
    width: 2.1rem; height: 2.1rem; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .45); background: rgba(31, 19, 0, .55); color: #fff;
    font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
}
.parcel-map-zoom:hover { background: rgba(31, 19, 0, .78); }

/* full-size map modal (reuses the .task-modal shell) */
.parcel-map-modal-card { width: min(56rem, 100%); }
.parcel-map-modal-body {
    padding: 1rem 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .6rem;
}
/* keep the square map within the viewport so the whole modal fits without scrolling */
.parcel-map-large { width: 100%; max-width: min(100%, 70vh); margin: 0 auto; }
.parcel-map-modal-tools { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; }
.parcel-map-zoom-btn {
    width: 2.1rem; height: 2.1rem; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
    font-size: 1.15rem; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.parcel-map-zoom-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.parcel-map-zoom-btn:disabled { opacity: .4; cursor: default; }
.parcel-map-zoom-level {
    min-width: 2.7rem; text-align: center; font-size: .85rem; font-weight: 600;
    color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

/* ---------- 3D parcel view (Parcel3d.razor; scene in js/parcel3d.js) ---------- */

.p3d-page { display: flex; flex-direction: column; gap: .5rem; }
/* Sandbox hint: shown when the scene is a generic flat plot (no parcel saved on the project yet). */
.p3d-generic-note {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .65rem .9rem; border: 1px solid var(--accent);
    border-left: 3px solid var(--accent); border-radius: var(--radius);
    background: var(--accent-soft); color: var(--ink); font-size: .9rem;
}
.p3d-generic-ico { flex: none; font-size: 1.1rem; line-height: 1; }
/* message takes the room so the "Prikaži pravo parcelo" action sits at the end (wraps when tight) */
.p3d-generic-note > span:not(.p3d-generic-ico) { flex: 1 1 16rem; }
.p3d-generic-load { flex: none; white-space: nowrap; }
/* compact header: title left, intro on the right → the map starts higher */
.p3d-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
    flex-wrap: wrap; margin: 0 0 .25rem;
}
.p3d-header h1 { margin-bottom: 0; }
.p3d-intro {
    margin: 0 0 .2rem; max-width: 36rem; font-size: .85rem; color: var(--ink-soft);
    line-height: 1.45;
}
.p3d-layout {
    --p3d-h: 950px; /* FIXED map height - opening/closing the side panel never changes it */
    display: grid; grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 1rem;
    align-items: start; /* every column owns its height; the map is fixed at --p3d-h */
}
.p3d-canvas-wrap {
    position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
    overflow: hidden; background: #dce9f5; /* matches the scene's sky color while WebGL boots */
    height: var(--p3d-h, 950px);
}
.p3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* spinner overlay while the WebGL scene boots (terrain decode, meshes, first render) */
.p3d-canvas-loading {
    position: absolute; inset: 0; z-index: 6; display: flex; align-items: center;
    justify-content: center; gap: .7rem; background: rgba(220, 233, 245, .85);
    color: var(--ink-soft); font-size: .92rem; font-weight: 600;
}
/* browser fullscreen (⛶): the map fills the WHOLE screen (the 1000 px cap doesn't apply) */
.p3d-canvas-wrap:fullscreen { border: none; border-radius: 0; max-height: none; }
.p3d-canvas-wrap:fullscreen .p3d-canvas {
    width: 100vw; height: 100vh; max-height: none; min-height: 0;
}
.p3d-fs {
    position: absolute; right: .6rem; bottom: .6rem; width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center; border: none; border-radius: 8px; cursor: pointer;
    background: rgba(31, 19, 0, .55); color: #fff; font-size: 1.05rem; line-height: 1;
    backdrop-filter: blur(3px);
}
.p3d-fs:hover { background: rgba(31, 19, 0, .78); }

/* AI sidebar (left of the map, collapsible): the editable description + the AI actions */
.p3d-ai {
    display: flex; flex-direction: column; gap: .5rem;
    width: 19rem; height: var(--p3d-h, 950px); /* same fixed height as the map */
    padding: .8rem .9rem; border-radius: var(--radius-lg, 14px); background: var(--bg-elev);
    border: 1px solid var(--line);
}
.p3d-ai.is-collapsed {
    width: auto; padding: 0; background: none; border: none;
}
.p3d-ai-expand {
    writing-mode: vertical-rl; height: 100%; min-height: 16rem; display: flex; align-items: center;
    justify-content: flex-start; gap: .5rem; padding: .8rem .35rem;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-lg, 14px);
    background: var(--bg-elev); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600;
    color: var(--ink-soft);
}
.p3d-ai-expand:hover { color: var(--ink); border-color: var(--ink-mute); }
.p3d-ai-expand-ico { writing-mode: horizontal-tb; font-size: 1rem; }
.p3d-prompt-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    font-size: .78rem; font-weight: 700; color: var(--ink);
}
.p3d-prompt-head > span { display: inline-flex; align-items: center; gap: .5rem; }
.p3d-prompt-x {
    border: none; background: none; font-size: 1.1rem; line-height: 1; color: var(--ink-mute);
    cursor: pointer; padding: 0 .15rem;
}
.p3d-prompt-x:hover { color: var(--ink); }
.p3d-ai textarea {
    flex: 1 1 auto; min-height: 0; resize: none; font: inherit; font-size: .78rem; line-height: 1.45;
    color: var(--ink); padding: .5rem .6rem; border: 1px solid var(--line-strong);
    border-radius: var(--radius); background: var(--bg);
}

/* buttons above the map: the persistence toolbar + the parcel-entry / ravna-parcela bar */
.p3d-toptools {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem .9rem;
    flex-wrap: wrap;
}
.p3d-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.p3d-asof { font-size: .72rem; color: var(--ink-mute); margin-left: .15rem; }

/* CAD / 3D export dropdown (DXF / OBJ / STL) */
.p3d-export { position: relative; display: inline-block; }
.p3d-export-pop {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    display: flex; flex-direction: column; gap: .25rem; white-space: nowrap;
    background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: .4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.p3d-export-pop .btn { justify-content: flex-start; }

/* resilience banner: upstream (GURS/ARSO) down → serving cached geometry / flat terrain */
.p3d-cachebanner {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
    margin-bottom: .7rem; padding: .55rem .8rem; border-radius: 10px;
    background: #fdf3e3; border: 1px solid #e6c98a; color: #6b4e16; font-size: .82rem;
}
.p3d-cachebanner-txt { flex: 1; min-width: 12rem; line-height: 1.4; }
.p3d-cachebanner .btn { white-space: nowrap; }

/* parcel-entry bar (above the map, "iščem parcelo" projects): k.o. + parc. št. inputs + reset */
.p3d-parcelbar {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    padding: .3rem .5rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-elev);
}
.p3d-parcelbar-lbl { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.p3d-parcelbar-in {
    width: 8rem; max-width: 38vw; font: inherit; font-size: .82rem; color: var(--ink);
    padding: .25rem .45rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg);
}
.p3d-parcelbar-err { font-size: .78rem; font-weight: 600; color: var(--danger, #c0392b); }

/* auto-tour buttons on the map, right of the osončenost card (overlay) */
.p3d-orbitbtns {
    display: flex; flex-direction: column; gap: .3rem; align-self: flex-start;
    pointer-events: auto;
}
.p3d-orbit-btn {
    padding: .3rem .55rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
    background: rgba(31, 19, 0, .58); color: #fff; font: inherit; font-size: .74rem;
    font-weight: 600; line-height: 1.1; cursor: pointer; white-space: nowrap;
    backdrop-filter: blur(3px);
}
.p3d-orbit-btn:hover:not(:disabled) { background: rgba(31, 19, 0, .78); }
.p3d-orbit-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.p3d-orbit-btn:disabled { opacity: .5; cursor: default; }

/* Notranjost (interior) mode: exterior⇄interior toggle + etaža toggles. Lives in the top-left stack
   and takes its OWN row (flex-basis 100%), so it always sits BELOW the gradbena-parcela badge + the
   sun card + the auto-rotate buttons, whatever their height. */
.p3d-interior-ctl {
    flex-basis: 100%; margin-top: .15rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
    pointer-events: none; max-width: 13rem;
}
.p3d-interior-seg {
    display: inline-flex; pointer-events: auto; border-radius: 9px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(31, 19, 0, .58); backdrop-filter: blur(3px);
}
.p3d-iseg {
    padding: .32rem .7rem; border: 0; background: transparent; color: #fff; font: inherit;
    font-size: .76rem; font-weight: 600; line-height: 1.1; cursor: pointer; white-space: nowrap;
}
.p3d-iseg + .p3d-iseg { border-left: 1px solid rgba(255, 255, 255, .25); }
.p3d-iseg:hover { background: rgba(255, 255, 255, .12); }
.p3d-iseg.is-active { background: var(--accent); color: #fff; }
/* etaža toggles: a vertical list (top floor first) so it mirrors the building; multi-select. */
.p3d-interior-storeys { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; pointer-events: auto; }
.p3d-istorey {
    padding: .28rem .65rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
    background: rgba(31, 19, 0, .58); color: #fff; font: inherit; font-size: .73rem; text-align: left;
    font-weight: 600; line-height: 1.1; cursor: pointer; white-space: nowrap; backdrop-filter: blur(3px);
}
.p3d-istorey::before { content: "○ "; opacity: .8; }
.p3d-istorey:hover { background: rgba(31, 19, 0, .78); }
.p3d-istorey.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.p3d-istorey.is-active::before { content: "● "; opacity: 1; }

/* Interior window editor card (right side, below the rotation dials). */
.p3d-winedit {
    position: absolute; top: 6.1rem; right: .65rem; width: 13rem; z-index: 4; pointer-events: auto;
    display: flex; flex-direction: column; gap: .4rem; padding: .6rem .7rem; border-radius: 12px;
    background: rgba(31, 19, 0, .72); color: #fff; backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .25);
}
.p3d-winedit-head { display: flex; align-items: center; justify-content: space-between; }
.p3d-winedit-title { font-size: .82rem; font-weight: 700; }
.p3d-winedit-x { border: 0; background: transparent; color: #fff; font-size: .9rem; cursor: pointer; opacity: .8; line-height: 1; }
.p3d-winedit-x:hover { opacity: 1; }
.p3d-winedit-sub { font-size: .68rem; opacity: .85; margin-top: -.2rem; }
.p3d-winedit-row { display: flex; flex-direction: column; gap: .15rem; font-size: .72rem; }
.p3d-winedit-row > span { display: flex; justify-content: space-between; gap: .5rem; }
.p3d-winedit-row input[type=range] { width: 100%; accent-color: var(--accent); }
.p3d-winedit-actions { display: flex; justify-content: flex-end; margin-top: .15rem; }
.p3d-winedit-reset {
    padding: .25rem .6rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 7px;
    background: transparent; color: #fff; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
}
.p3d-winedit-reset:hover { background: rgba(255, 255, 255, .12); }

/* Interior object editor - same placement as the window editor (they never show together). */
.p3d-intedit {
    position: absolute; top: 6.1rem; right: .65rem; width: 13rem; z-index: 4; pointer-events: auto;
    display: flex; flex-direction: column; gap: .4rem; padding: .6rem .7rem; border-radius: 12px;
    background: rgba(31, 19, 0, .72); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, .25);
}
.p3d-intedit-name {
    width: 100%; padding: .25rem .4rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: .76rem;
}
/* Furniture toolbar - bottom strip, horizontally scrollable, grouped by category. */
.p3d-furnbar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: auto;
    display: flex; flex-direction: column; gap: .25rem; padding: .4rem .6rem .5rem;
    background: linear-gradient(to top, rgba(20, 12, 0, .85), rgba(20, 12, 0, .55) 70%, transparent);
}
.p3d-furnbar-hint { font-size: .68rem; color: #ffe9c4; text-align: center; opacity: .92; }
.p3d-furnbar-scroll { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .15rem; }
.p3d-furngrp { display: flex; flex-direction: column; gap: .2rem; flex: 0 0 auto; }
.p3d-furngrp-h { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: #ffd9a0; opacity: .85; padding-left: .1rem; }
.p3d-furngrp-items { display: flex; gap: .25rem; }
.p3d-furnitem {
    padding: .3rem .55rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px;
    background: rgba(31, 19, 0, .6); color: #fff; font: inherit; font-size: .72rem; font-weight: 600;
    line-height: 1.1; cursor: pointer; white-space: nowrap; backdrop-filter: blur(2px);
}
.p3d-furnitem:hover { background: rgba(31, 19, 0, .85); }
.p3d-furnitem.is-active { background: var(--accent); border-color: var(--accent); }

/* Interior osončenost control (in the interior control stack, dark overlay → light text). */
.p3d-interior-sun { display: flex; flex-direction: column; gap: .25rem; pointer-events: auto; max-width: 12rem; }
.p3d-intsun-btn { text-align: center; }
.p3d-intsun-btn:disabled { opacity: .6; cursor: default; }
.p3d-intsun-res {
    display: flex; flex-direction: column; gap: .2rem; padding: .35rem .5rem; border-radius: 8px;
    background: rgba(31, 19, 0, .58); color: #fff; font-size: .68rem; backdrop-filter: blur(3px);
}
.p3d-intsun-res .p3d-sunheat-legend { margin-top: 0; color: #fff; }
.p3d-intsun-chk { display: flex; align-items: center; gap: .3rem; cursor: pointer; }

/* AI opis block at the top of the Objekt tab (the primary house-design tool): a highlighted
   card - it's the main way the house is shaped, so it earns more room + emphasis than a plain ctl. */
.p3d-ctl.p3d-ai-opis {
    gap: .5rem; padding: .7rem .75rem .8rem;
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-elev) 55%);
    border: 1px solid var(--line-strong); border-radius: 10px;
    box-shadow: 0 1px 3px rgba(122, 50, 20, .07);
}
.p3d-ctl.p3d-ai-opis > span {
    font-size: .82rem; font-weight: 700; color: var(--accent-ink);
}
/* rich-look prompt editor: a real <textarea> (transparent, bold text - rock-solid editing) over a
   styled backdrop that mirrors the text and shows each line's "Label:" prefix in the accent colour.
   Both layers share identical metrics so the caret lines up; field-sizing grows it to the content. */
.p3d-ai-editor { position: relative; }
.p3d-ai-editor > .p3d-ai-hl,
.p3d-ai-editor > textarea {
    margin: 0; font-family: inherit; font-size: .8rem; font-weight: 400; line-height: 1.55;
    letter-spacing: 0; padding: .6rem .7rem; border: 1px solid transparent; border-radius: 8px;
    box-sizing: border-box; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
.p3d-ai-editor > textarea {
    position: relative; z-index: 1; display: block; width: 100%;
    min-height: 17rem; field-sizing: content; resize: none; overflow-y: auto;
    background: transparent; border-color: var(--line-strong); /* transparent so the backdrop text shows */
    color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.p3d-ai-editor > textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.p3d-ai-editor > textarea::placeholder { color: var(--ink-mute); -webkit-text-fill-color: var(--ink-mute); }
.p3d-ai-hl {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    color: var(--ink); background: var(--bg-elev); /* opaque background lives here, behind the textarea */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}
/* only the "Label:" prefixes are bold + accent; the values after the colon stay normal weight (compact) */
.p3d-ai-hl .p3d-ai-lbl { color: var(--accent-ink); font-weight: 700; }

/* "Uredi podrobnosti": collapsible structured house editor under the AI opis (live, no quota) */
.p3d-houseform {
    border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev);
    padding: 0 .6rem .6rem;
}
.p3d-houseform > summary {
    display: flex; align-items: center; gap: .4rem; padding: .6rem .1rem; cursor: pointer;
    list-style: none; font-size: .8rem; font-weight: 700; color: var(--ink);
}
.p3d-houseform > summary::-webkit-details-marker { display: none; }
.p3d-houseform > summary::after {
    content: "▸"; margin-left: auto; color: var(--ink-mute); transition: transform .15s;
}
.p3d-houseform[open] > summary::after { transform: rotate(90deg); }
.p3d-houseform h4 {
    margin: .75rem 0 .35rem; font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-mute);
}
.p3d-houseform h4:first-of-type { margin-top: .3rem; }
.p3d-houseform .p3d-ctl { margin-bottom: .45rem; }
.p3d-houseform .p3d-check { margin-bottom: .35rem; }
/* last field's margin + the container's padding-bottom doubled up → uneven bottom gap; drop it */
.p3d-houseform > :last-child { margin-bottom: 0; }
.p3d-houseform-colors { display: flex; gap: .6rem; }
.p3d-houseform-colors .p3d-color { flex: 1; }
.p3d-color input[type="color"] {
    width: 100%; height: 1.9rem; padding: 0; border: 1px solid var(--line-strong);
    border-radius: 6px; background: var(--bg-elev); cursor: pointer;
}

/* photo montage block in the AI sidebar */
.p3d-montage {
    display: flex; flex-direction: column; gap: .45rem; padding-top: .6rem;
    border-top: 1px dashed var(--line);
}
.p3d-montage h4 {
    margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .78rem;
    font-weight: 700; color: var(--ink);
}
/* upload drop-zone: the InputFile stretches invisibly over the label (click OR drop works) */
.p3d-upload {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .9rem .6rem; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg, 10px);
    background: var(--bg); cursor: pointer; text-align: center; overflow: hidden;
}
.p3d-upload:hover { border-color: var(--accent); }
.p3d-upload input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.p3d-upload-ico { font-size: 1.3rem; }
.p3d-upload-txt { font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.p3d-upload.has-img { padding: 0; border-style: solid; }
.p3d-upload.has-img img { display: block; width: 100%; max-height: 8.5rem; object-fit: cover; }
.p3d-upload-change {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem;
    background: rgba(31, 19, 0, .6); color: #fff; font-size: .66rem; font-weight: 600;
}
.p3d-montage-btn { width: 100%; justify-content: center; display: inline-flex; gap: .4rem; }
.p3d-montage-result { position: relative; }
.p3d-montage-img { display: block; width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.p3d-montage-dl {
    position: absolute; right: .4rem; bottom: .4rem; width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center; border-radius: 8px; background: rgba(31, 19, 0, .6);
    color: #fff; font-size: 1rem; text-decoration: none; backdrop-filter: blur(3px);
}
.p3d-montage-dl:hover { background: rgba(31, 19, 0, .85); color: #fff; }

/* Orodja tab sections */
.p3d-tool-sec {
    display: flex; flex-direction: column; gap: .45rem;
    padding-bottom: .75rem; border-bottom: 1px dashed var(--line);
}
.p3d-tool-sec h4 {
    margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-mute);
}
.p3d-hint {
    position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .35rem .8rem; border-radius: 14px; max-width: 94%; pointer-events: none;
    background: rgba(31, 19, 0, .6); color: #fff; font-size: .72rem; letter-spacing: .02em;
}
.p3d-hint-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem; text-align: center; }
.p3d-hint-keys { gap: .2rem; }
.p3d-hint-sep { opacity: .5; margin: 0 .15rem; }
.p3d-hint kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25em; padding: .05em .35em; border-radius: 5px;
    background: rgba(255, 255, 255, .92); color: #1f1300;
    font-family: inherit; font-size: .82em; font-weight: 600; line-height: 1.4;
    border: 1px solid rgba(0, 0, 0, .25); box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.p3d-panel {
    position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .8rem;
    padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 18px;
    background: var(--bg-elev);
    max-height: var(--p3d-h, 950px); overflow-y: auto; /* never taller than the map */
}
.p3d-panel h3 { margin: 0; font-size: 1rem; }
.p3d-opn { margin: -.3rem 0 0; font-size: .76rem; color: var(--ink-mute); line-height: 1.45; }

/* object menu: compact icon buttons (labels in tooltips) */
.p3d-objects { display: flex; flex-wrap: wrap; gap: .25rem; }
.p3d-objects-add { margin-top: .25rem; }
.p3d-obj-ico {
    position: relative; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
    font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0;
}
.p3d-obj-ico:hover { border-color: var(--ink-mute); }
.p3d-obj-ico.is-active { border-color: var(--accent); background: var(--accent-soft); }
.p3d-obj-n {
    position: absolute; right: 2px; bottom: 1px; font-size: .55rem; font-weight: 700;
    color: var(--ink-soft);
}
.p3d-object-x {
    position: absolute; top: -5px; right: -5px; width: .95rem; height: .95rem;
    display: grid; place-items: center; border-radius: 50%; background: var(--bg-elev);
    border: 1px solid var(--line-strong); font-size: .7rem; font-weight: 700; line-height: 1;
    color: var(--ink-mute);
}
.p3d-object-x:hover { color: #fff; background: var(--danger, #b3261e); border-color: var(--danger, #b3261e); }
.p3d-obj-add { border-style: dashed; opacity: .8; }
.p3d-obj-add:hover { opacity: 1; }
.p3d-obj-plus {
    position: absolute; top: 0; left: 3px; font-size: .7rem; font-weight: 700; color: var(--ink-soft);
}

/* panel tabs: Objekt | Orodja */
.p3d-tabs {
    display: flex; gap: 1.1rem; border-bottom: 1px solid var(--line); margin: -.2rem 0 .1rem;
}
.p3d-tab {
    appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -1px; padding: .3rem .1rem .45rem; cursor: pointer; font: inherit;
    font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}
.p3d-tab:hover { color: var(--ink); }
.p3d-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* nasutje tool result */
.p3d-fill-result { margin: .2rem 0 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
.p3d-fill-result b { color: var(--ink); font-variant-numeric: tabular-nums; }
.p3d-fill-k { display: block; font-size: .7rem; color: var(--ink-mute); }

/* OPN compliance panel: FZ / FI / višina / odmik rows, green within limit, red over */
.p3d-opn-rows { display: flex; flex-direction: column; gap: .25rem; }
.p3d-opn-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
    padding: .3rem .5rem; border-radius: 6px; font-size: .8rem;
    background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-soft);
}
.p3d-opn-row.is-ok { background: #eaf5ec; border-color: #b6dcc0; color: #2e6b3e; }
.p3d-opn-row.is-bad { background: #fdeceb; border-color: #f0b6b2; color: #b3261e; }
.p3d-opn-v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* design variants A/B/C: a load button + a save (💾) button per slot */
.p3d-variants { display: flex; gap: .5rem; flex-wrap: wrap; }
.p3d-variant { display: flex; gap: .2rem; align-items: center; }

/* sun-hours heatmap legend: a blue→red gradient between the min/max hour labels */
.p3d-sunheat-legend { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .72rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.p3d-sunheat-bar {
    flex: 1; height: .55rem; border-radius: 4px; border: 1px solid var(--line);
    background: linear-gradient(90deg,
        hsl(238 72% 50%), hsl(178 72% 50%), hsl(118 72% 50%), hsl(58 72% 50%), hsl(0 72% 50%));
}

/* informative disclaimer line under an estimate (e.g. geosonda) */
.p3d-disclaimer { margin: .35rem 0 0; font-size: .7rem; font-style: italic; color: var(--ink-mute); }

/* "Pridobi ponudbo" CTA (disabled / coming soon) under the energy-object panels */
.p3d-quote-btn { width: 100%; margin-top: .6rem; }
.p3d-quote-btn:disabled { opacity: .6; cursor: not-allowed; }
.p3d-quote-soon {
    margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px;
    background: rgba(255, 255, 255, .25); font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}

/* sončna elektrarna tool */
.p3d-solar-cfg { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.p3d-solar-cfg b { color: var(--ink); }
.p3d-solar-result { display: flex; flex-direction: column; gap: .4rem; margin-top: .15rem; }
.p3d-solar-big {
    font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.p3d-solar-big span { font-size: .75rem; font-weight: 600; color: var(--ink-mute); }
.p3d-solar-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: .15rem; }
.p3d-solar-bar {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%;
}
.p3d-solar-bar-track {
    flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end;
    background: color-mix(in srgb, var(--line) 45%, transparent); border-radius: 2px;
}
.p3d-solar-bar-fill {
    width: 100%; min-height: 1px; border-radius: 2px;
    background: linear-gradient(to top, #f5a623, #ffd35c);
}
.p3d-solar-bar-lbl { font-size: .58rem; color: var(--ink-mute); line-height: 1; }

/* panel action row: save / restore / recreate */
.p3d-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.p3d-noselect { margin: 0; font-size: .8rem; color: var(--ink-mute); line-height: 1.45; }
.p3d-check {
    display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600;
    color: var(--ink-soft); cursor: pointer;
}
.p3d-check input { accent-color: var(--accent); }
.p3d-check input:disabled { opacity: .5; }
.p3d-check:has(input:disabled) { opacity: .55; cursor: default; }

/* komunalni priključki legend (Orodja tab) */
.p3d-util-legend {
    display: flex; flex-wrap: wrap; gap: .25rem .7rem;
    margin: .1rem 0 .1rem 1.6rem; font-size: .74rem; color: var(--ink-mute);
}
.p3d-util-leg { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.p3d-util-leg .p3d-util-dot {
    flex: none; width: .55rem; height: .55rem; border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* footprint shape picker (plan silhouettes) */
.p3d-shapes { display: flex; gap: .3rem; }
.p3d-shape {
    flex: 1 1 0; display: grid; place-items: center; padding: .25rem 0;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
    color: var(--ink-soft); cursor: pointer;
}
.p3d-shape:hover { color: var(--ink); }
.p3d-shape.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.p3d-shape svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.p3d-back {
    display: inline-block; margin-bottom: .35rem; font-size: .82rem; font-weight: 600;
    color: var(--ink-soft); text-decoration: none;
}
.p3d-back:hover { color: var(--ink); }

/* top-left overlay row: parcel info badge (JS prepends it) + the sun card */
.p3d-topleft {
    position: absolute; top: .65rem; left: .65rem; right: calc(.65rem + 96px); /* clear the dials */
    display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; pointer-events: none;
}
.p3d-info {
    max-width: min(60%, 24rem);
    padding: .45rem .7rem; border-radius: 10px; pointer-events: none;
    background: rgba(31, 19, 0, .58); color: #fff; backdrop-filter: blur(3px);
}
.p3d-info-title { font-size: .78rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One plot line of the gradbena parcela (k.o. + parc. št. - area); the primary is the first row. */
.p3d-info-plot { font-size: .72rem; opacity: .92; line-height: 1.4; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3d-info-plot:first-of-type { opacity: 1; }
.p3d-info-row { font-size: .72rem; opacity: .92; font-variant-numeric: tabular-nums; line-height: 1.45; }
.p3d-info-k { opacity: .75; }
.p3d-info-v { font-weight: 600; }

/* bottom-left compass: needle + S (sever) rotate with the camera azimuth */
.p3d-compass {
    position: absolute; left: .6rem; bottom: .6rem; width: 56px; height: 56px;
    border-radius: 50%; background: rgba(255, 255, 255, .85); border: 1px solid var(--line-strong);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: pointer; user-select: none;
    backdrop-filter: blur(3px);
}
.p3d-compass-rotor { position: absolute; inset: 0; pointer-events: none; }
.p3d-compass-n {
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    font-size: .6rem; font-weight: 700; color: #c0392b;
}
.p3d-compass-needle {
    position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(-50%, -100%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 17px solid #c0392b;
}
.p3d-compass-needle::after {
    content: ""; position: absolute; top: 17px; left: -5px; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 17px solid #9aa0a6;
}

/* sun card (Razor-rendered): time slider + date + solstice presets + day animation */
.p3d-suncard {
    display: flex; flex-direction: column; gap: .25rem; min-width: 13rem; max-width: 17rem;
    padding: .4rem .65rem .5rem; border-radius: 10px; pointer-events: auto;
    background: rgba(31, 19, 0, .58); color: #fff; backdrop-filter: blur(3px);
}
.p3d-suncard-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
    font-size: .78rem;
}
.p3d-suncard-head b { font-weight: 700; font-variant-numeric: tabular-nums; }
.p3d-suncard-title { font-weight: 600; }
.p3d-suncard-ico { opacity: .9; }
.p3d-sun-slider { width: 100%; margin: 0; accent-color: #ffd02e; }
.p3d-sun-row { display: flex; align-items: center; gap: .25rem; }
.p3d-sun-date {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: .72rem; color: #fff;
    padding: .15rem .3rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px;
    background: rgba(255, 255, 255, .12); color-scheme: dark;
}
.p3d-sun-btn {
    flex: none; padding: .15rem .4rem; border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px; background: rgba(255, 255, 255, .12); font: inherit; font-size: .7rem;
    font-weight: 600; color: #fff; cursor: pointer; white-space: nowrap;
}
.p3d-sun-btn:hover { background: rgba(255, 255, 255, .25); }
.p3d-sun-btn.is-active { background: var(--accent); border-color: var(--accent); }

/* rotation dial (xy zasuk) - JS-owned overlay, top-right of the canvas */
.p3d-dial {
    position: absolute; top: .65rem; right: .65rem; width: 84px; height: 84px;
    border-radius: 50%; background: rgba(255, 255, 255, .85); border: 1px solid var(--line-strong);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: grab; touch-action: none; user-select: none;
    backdrop-filter: blur(3px);
}
.p3d-dial:active { cursor: grabbing; }
.p3d-dial-n {
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    font-size: .58rem; font-weight: 700; color: var(--ink-mute); pointer-events: none;
}
.p3d-dial-rotor { position: absolute; inset: 0; pointer-events: none; }
.p3d-dial-arrow {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 8px solid var(--accent);
}
.p3d-dial-rect {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 26px; height: 20px; border: 2px solid var(--ink-soft); border-radius: 2px;
    background: rgba(0, 0, 0, .05);
}
.p3d-dial-deg {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    font-size: .64rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* z dial (vertical offset) - JS-owned overlay, under the rotation dial */
.p3d-zdial {
    position: absolute; top: calc(.65rem + 92px); right: calc(.65rem + 25px); width: 34px; height: 132px;
    border-radius: 17px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line-strong);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: grab; touch-action: none; user-select: none;
    backdrop-filter: blur(3px);
}
.p3d-zdial:active { cursor: grabbing; }
.p3d-zdial-track {
    position: absolute; top: 12px; bottom: 24px; left: 50%; width: 4px; transform: translateX(-50%);
    background: var(--line-strong); border-radius: 2px; pointer-events: none;
}
.p3d-zdial-handle {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
    display: grid; place-items: center; font-size: .72rem; line-height: 1; pointer-events: none;
}
.p3d-zdial-val {
    position: absolute; bottom: 5px; width: 100%; text-align: center;
    font-size: .58rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.p3d-ctl { display: flex; flex-direction: column; gap: .3rem; }
.p3d-ctl > span {
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
    font-size: .78rem; font-weight: 600; color: var(--ink-soft);
}
.p3d-ctl > span b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.p3d-ctl input[type="range"] { width: 100%; accent-color: var(--accent); }
.p3d-ctl select {
    font: inherit; font-size: .88rem; color: var(--ink); padding: .35rem .5rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
}
.p3d-ctl.is-disabled { opacity: .45; }
.p3d-note { margin: .2rem 0 0; font-size: .72rem; color: var(--ink-mute); line-height: 1.45; }

.p3d-loading {
    display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.25rem;
    border: 1px dashed var(--line); border-radius: var(--radius-lg, 14px); background: var(--bg-elev);
    color: var(--ink-soft); font-size: .9rem;
}
.p3d-empty {
    padding: 1.4rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius-lg, 14px);
    background: var(--bg-elev); max-width: 38rem;
}
.p3d-empty h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.p3d-empty p { margin: 0 0 1rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.p3d-error {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .9rem 1.1rem; border: 1px solid var(--danger, #b3261e); border-radius: var(--radius-lg, 14px);
    color: var(--danger, #b3261e); font-size: .9rem; max-width: 44rem;
}
@media (max-width: 860px) {
    .p3d-layout { grid-template-columns: 1fr; }
    .p3d-panel { position: static; }
    .p3d-ai { width: auto; height: auto; min-height: 14rem; }
    .p3d-ai-expand { writing-mode: horizontal-tb; height: auto; min-height: 0; width: 100%; }
    .p3d-canvas-wrap { height: clamp(280px, 52vh, 520px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Public marketing landing page (Landing.razor / LandingLayout)
   ────────────────────────────────────────────────────────────────────────── */
.lp { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
.lp > main { flex: 1 0 auto; }

/* cookie notice - fixed bottom banner (necessary-cookies disclosure, single acknowledgment) */
.cookie-consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    padding: .85rem clamp(1rem, 4vw, 2rem);
    background: var(--bg-elev); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -6px 24px rgba(26, 26, 26, .12);
}
.cookie-consent-inner {
    max-width: var(--max); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
    flex-wrap: wrap;
}
.cookie-consent-text { margin: 0; font-size: .88rem; color: var(--ink-soft); flex: 1 1 18rem; }
.cookie-consent-text strong { color: var(--ink); font-weight: 600; }
.cookie-consent-link {
    appearance: none; border: none; background: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--accent-ink); text-decoration: underline;
}
.cookie-consent-link:hover { color: var(--accent); }
.cookie-consent-btn { flex: 0 0 auto; white-space: nowrap; }

/* header */
.lp-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(244, 239, 230, .85); backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--line);
}
.lp-header-inner {
    /* Match the body container (.loka-shell: max-width 1120px, 1.25rem side padding) so the header content
       lines up with the page content instead of sitting in a narrower, more-inset box. */
    max-width: 1120px; margin: 0 auto;
    padding: .8rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem;
    /* Wrap so the token bar / "dostopna koda" form drops onto its own full-width line on narrow
       screens instead of being squeezed beside the logo. */
    flex-wrap: wrap;
}
.lp-brand { display: inline-flex; align-items: center; border: none; text-decoration: none; cursor: pointer; flex: 0 0 auto; }
.lp-brand:hover, .lp-brand:focus, .lp-brand:focus-visible { text-decoration: none; }
/* Match the main Glog app's brand logo size (.brand-logo: 3.25rem, 2.6rem on smaller screens). */
.lp-brand-logo { height: 3.25rem; width: auto; display: block; }
@media (max-width: 560px) {
    .lp-header-inner { padding: .6rem 1.25rem; }
    .lp-brand-logo { height: 2.6rem; }
}
.lp-header-actions { display: flex; align-items: center; gap: .4rem; }
.lp-link {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 0; font: inherit; font-weight: 600; font-size: .9rem;
    color: var(--ink-soft); cursor: pointer; padding: .55rem .85rem; border-radius: var(--radius);
    text-decoration: none; transition: color .15s;
}
.lp-link:hover { color: var(--ink); }
.lp-link .icon { color: var(--accent); }
.lp-header-cta { padding: .5rem 1.15rem; }

/* hero */
.lp-hero {
    max-width: var(--max); margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 880px) { .lp-hero { grid-template-columns: 1fr; } }
.lp-eyebrow {
    font-family: var(--font-sans); font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .18em; color: var(--accent); margin-bottom: 1rem;
}
.lp-hero-title {
    font-family: var(--font-serif); font-weight: 600;
    font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.03; letter-spacing: -.02em; margin: 0;
}
.lp-hero-title em { font-style: italic; font-weight: 400; color: var(--accent-ink); }
.lp-hero-lead {
    font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; line-height: 1.55;
    color: var(--ink-soft); max-width: 38rem; margin: 1.4rem 0 0;
}
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.lp-cta-lg { padding: .8rem 1.5rem; font-size: .95rem; }
.lp-hero-note { margin: 1.1rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
/* the shared .lp-inline-link is light (for the dark newsletter card); on the light hero it needs a dark accent */
.lp-hero-note .lp-inline-link { color: var(--accent-ink); font-weight: 600; }
.lp-hero-note .lp-inline-link:hover { color: var(--accent); }

/* hero "product peek" card */
.lp-hero-card {
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 24px 60px rgba(20, 14, 6, .10);
}
.lp-card-head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: 1rem; }
.lp-card-eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--accent); }
.lp-card-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.lp-card-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.lp-card-progress-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.lp-card-progress-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.lp-card-progress-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.lp-card-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.lp-card-steps li {
    display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem;
    border-radius: 8px; font-size: .9rem; color: var(--ink-soft);
}
.lp-card-steps li.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.lp-card-steps li.is-done { color: var(--ink-mute); }
.lp-card-step-num {
    flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; background: var(--bg);
    border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.lp-card-steps li.is-active .lp-card-step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-card-steps li.is-done .lp-card-step-num { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok); }
.lp-card-step-name { flex: 1; min-width: 0; }
.lp-card-step-tick { color: var(--ok); display: inline-flex; }

/* shared section heading */
.lp-section-head { max-width: 42rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.lp-section-head .lp-eyebrow { margin-bottom: .75rem; }
.lp-section-head h2 { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; }
.lp-section-head p { margin: 1rem 0 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; }

/* features */
/* 3D showcase (flagship): copy + a media placeholder until the real render is supplied */
.lp-3d {
    max-width: var(--max); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 4rem);
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.lp-3d-copy h2 { margin: .35rem 0 .7rem; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
.lp-3d-copy p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.lp-3d-points { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.lp-3d-points li { display: flex; align-items: center; gap: .55rem; color: var(--ink); font-size: .95rem; }
.lp-3d-points li svg { color: var(--accent); flex: none; }
.lp-3d-img { width: 100%; border-radius: 16px; display: block; border: 1px solid var(--line); }

/* Day/night before-after comparison slider (3D showcase). The night image sits in normal flow and
   defines the box height; the day image overlays it, clipped to the LEFT of the divider (--pos) - so
   dragging right reveals more day, left reveals night. A full-cover transparent range input drives
   --pos, so there's no JS and it stays keyboard-accessible (arrow keys move the divider). */
.img-compare {
    position: relative; width: 100%; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--line); user-select: none; touch-action: none; line-height: 0;
}
.img-compare .ic-img { width: 100%; display: block; -webkit-user-drag: none; }
.img-compare .ic-base { position: relative; height: auto; }
.img-compare .ic-top {
    position: absolute; inset: 0; height: 100%; object-fit: cover;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ic-divider {
    position: absolute; top: 0; bottom: 0; left: var(--pos);
    width: 2px; margin-left: -1px; background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); pointer-events: none;
}
.ic-handle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.ic-range {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    -webkit-appearance: none; appearance: none; background: transparent;
    cursor: ew-resize; opacity: 0;
}
.ic-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2.5rem; height: 100%; cursor: ew-resize; }
.ic-range::-moz-range-thumb { width: 2.5rem; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ic-range:focus-visible { outline: none; }
.img-compare:focus-within .ic-handle { box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 10px rgba(0, 0, 0, .35); }
.ic-badge {
    position: absolute; top: .6rem; padding: .2rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #fff;
    background: rgba(0, 0, 0, .5); pointer-events: none;
}
.ic-badge-day { left: .6rem; }
.ic-badge-night { right: .6rem; }
.lp-3d-placeholder {
    aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .8rem; border: 2px dashed var(--line-strong); border-radius: 16px; color: var(--accent-ink);
    background: linear-gradient(135deg, var(--accent-soft), var(--bg-elev));
}
.lp-3d-placeholder-text { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 800px) { .lp-3d { grid-template-columns: 1fr; } }

.lp-features { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem); }
.lp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 880px) { .lp-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-feature-grid { grid-template-columns: 1fr; } }
.lp-feature {
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem 1.4rem;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lp-feature:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20, 14, 6, .07); }
.lp-feature-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem; font-size: 1.4rem; color: var(--accent);
    background: var(--accent-soft); border-radius: 10px; margin-bottom: 1rem;
}
.lp-feature h3 { font-family: var(--font-serif); font-size: 1.2rem; margin: 0 0 .4rem; }
.lp-feature p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

/* free public parcel lookup (sits between the hero and the features) */
.lp-parcel {
    max-width: var(--max); margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem) 0;
}
.lp-parcel-card {
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px;
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.lp-parcel .parcel-search { justify-content: center; }
.lp-parcel-result { margin-top: 1.6rem; }
.lp-parcel-info { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.lp-parcel-cta {
    margin-top: .4rem; padding: 1rem 1.1rem;
    background: var(--accent-soft); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.lp-parcel-cta-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); margin-bottom: .3rem; }
.lp-parcel-cta-text { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
/* daily-quota upsell (shown instead of a red error when the free lookup is used up) */
.lp-parcel-limit {
    margin-top: 1.2rem; text-align: center; padding: 1.3rem 1.4rem;
    background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius);
}
.lp-parcel-limit-text { margin: 0 auto 1rem; max-width: 46ch; color: var(--ink); font-size: .95rem; line-height: 1.5; }

/* journey (the 8 phases) */
.lp-journey {
    background: var(--bg-elev); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem);
}
.lp-journey-list {
    max-width: var(--max); margin: 0 auto; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem;
}
@media (max-width: 720px) { .lp-journey-list { grid-template-columns: 1fr; } }
.lp-journey-step { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.lp-journey-num {
    flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-weight: 800; font-size: 1.05rem;
    color: #fff; background: var(--phase-color, var(--accent));
}
.lp-journey-body h3 { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 .25rem; }
.lp-journey-body p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }

/* newsletter band */
.lp-newsletter { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem); }

/* standalone /newsletter page - centers the shared newsletter card with a logo + back link */
.nl-page {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem; padding: 2rem 1.25rem;
}
.nl-page-brand { border-bottom: none; }
.nl-page-brand img { height: 6rem; display: block; }
.nl-page-section { width: 100%; padding-top: 0; padding-bottom: 0; }
.nl-page-back { color: var(--ink-soft); border-bottom: none; font-size: .9rem; }
/* kill the global a:hover bottom-border ("underline") on both links */
.nl-page-brand:hover, .nl-page-back:hover { color: var(--ink); border-bottom-color: transparent; }

.lp-newsletter-card {
    background: var(--ink); color: var(--bg); border-radius: 16px;
    padding: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
@media (max-width: 760px) { .lp-newsletter-card { grid-template-columns: 1fr; gap: 1.5rem; } }
.lp-newsletter-copy .lp-eyebrow { color: var(--accent-soft); }
.lp-newsletter-copy h2 { font-family: var(--font-serif); color: var(--bg); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .6rem; line-height: 1.1; }
.lp-newsletter-copy p { margin: 0; color: rgba(251, 247, 240, .75); line-height: 1.55; }
.lp-newsletter-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.lp-newsletter-input {
    flex: 1; min-width: 12rem; border: 1px solid rgba(251, 247, 240, .25);
    background: rgba(251, 247, 240, .08); color: var(--bg);
    border-radius: var(--radius); padding: .8rem .9rem; font: inherit; font-size: 1rem;
}
.lp-newsletter-input::placeholder { color: rgba(251, 247, 240, .5); }
.lp-newsletter-input:focus { outline: none; border-color: var(--accent); background: rgba(251, 247, 240, .14); }
.lp-newsletter-submit { padding: .8rem 1.5rem; background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-newsletter-submit:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.lp-newsletter-error { flex-basis: 100%; margin: 0; color: #ffb4a0; font-size: .85rem; }
.lp-newsletter-consent { flex-basis: 100%; margin: .25rem 0 0; font-size: .78rem; color: rgba(251, 247, 240, .6); }
.lp-newsletter-done { display: flex; align-items: center; gap: .85rem; }
.lp-newsletter-done p { margin: 0; color: rgba(251, 247, 240, .92); line-height: 1.5; }
.lp-newsletter-done-ico {
    flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ok); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.lp-inline-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-soft); text-decoration: underline; cursor: pointer; }
.lp-inline-link:hover { color: #fff; }

/* closing CTA */
.lp-final {
    max-width: 46rem; margin: 0 auto; text-align: center;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.lp-final h2 { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.1; }
.lp-final p { margin: 1rem auto 0; max-width: 34rem; color: var(--ink-soft); font-size: 1.05rem; }
.lp-final .lp-hero-actions { justify-content: center; margin-top: 1.75rem; }

.lp-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Contractors (Izvajalci): directory page + task-modal picker ── */

/* Directory page */
.contractor-grid {
    display: grid; gap: .9rem; margin-top: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.contractor-card {
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev);
    padding: .9rem 1rem; display: flex; flex-direction: column; gap: .55rem;
}
.contractor-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.contractor-card-title { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.contractor-card-title strong { font-size: 1rem; color: var(--ink); word-break: break-word; }
.contractor-card-sub { font-size: .82rem; color: var(--ink-soft); }
.contractor-card-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.contractor-trades { display: flex; flex-wrap: wrap; gap: .35rem; }
.contractor-trade-chip {
    font-size: .74rem; padding: .12rem .5rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap;
}
.contractor-contact { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--ink-soft); }
.contractor-contact span { word-break: break-word; }
.contractor-notes { font-size: .82rem; color: var(--ink-mute); font-style: italic; white-space: pre-wrap; }

/* Editor modal */
.contractor-edit-card { max-width: 620px; width: 100%; }
.contractor-edit-body { display: flex; flex-direction: column; gap: .85rem; }
.contractor-trade-picker { display: flex; flex-wrap: wrap; gap: .35rem; }
.contractor-trade-opt {
    font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--ink-soft);
    transition: background .12s, border-color .12s, color .12s;
}
.contractor-trade-opt:hover { border-color: var(--accent); }
.contractor-trade-opt.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.contractor-trade-opt.is-custom { background: var(--accent-ink); border-color: var(--accent-ink); }
.contractor-trade-add { display: flex; gap: .4rem; margin-top: .45rem; }
.contractor-trade-add .type-input { flex: 1; }

/* Task-modal: attached chips + picker */
.task-contractors { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .2rem; }
.contractor-chip {
    display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
    padding: .2rem .25rem .2rem .6rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--bg-elev); font-size: .8rem;
}
.contractor-chip-name { font-weight: 600; color: var(--ink); }
.contractor-chip-trade { color: var(--ink-mute); font-size: .74rem; }
.contractor-chip-remove {
    border: none; background: transparent; cursor: pointer; line-height: 1;
    font-size: 1rem; color: var(--ink-mute); padding: 0 .15rem;
}
.contractor-chip-remove:hover { color: var(--accent); }
.contractor-picker {
    margin: .5rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg); display: flex; flex-direction: column; gap: .6rem;
}
.contractor-picker-search { width: 100%; }
.contractor-picker-list { display: flex; flex-direction: column; gap: .25rem; max-height: 220px; overflow-y: auto; }
.contractor-picker-item {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    text-align: left; cursor: pointer; padding: .4rem .6rem; border-radius: 8px;
    border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink);
}
.contractor-picker-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.contractor-picker-name { font-weight: 600; }
.contractor-picker-trade { color: var(--ink-mute); font-size: .76rem; text-align: right; }
.contractor-picker-empty { margin: 0; font-size: .82rem; color: var(--ink-mute); }
/* "+ Nov izvajalec" link-button in the task picker - opens the full contractor form modal. */
.contractor-quickadd-open {
    appearance: none; border: none; background: transparent; padding: 0;
    align-self: flex-start; cursor: pointer; font-size: .82rem; color: var(--accent-ink);
}
.contractor-quickadd-open:hover { text-decoration: underline; }

/* ── Lokacijska informacija (standalone admin tool) - new classes only; reuses .parcel-* for the
      map/tables/owners so the project parcel widget is untouched. ── */
/* Mode tabs - same pill segmented control as the subscription page's .billing-toggle. */
.loka-modes {
    display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap;
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 999px; padding: .25rem; margin: 0 0 1.25rem;
}
.loka-mode {
    appearance: none; border: none; background: none; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .85rem; color: var(--ink-soft);
    padding: .42rem 1.05rem; border-radius: 999px; transition: background .15s, color .15s;
}
.loka-mode:hover { color: var(--ink); }
.loka-mode.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.loka-addr { position: relative; max-width: 560px; }
.loka-addr .ko-combo, .mappick-search .ko-combo { width: 100%; }
/* The .ko-combo-input gets its border/background from the .parcel-field context in the parcel widget;
   on this standalone page (address search + the map picker) it isn't in a .parcel-field, so style it
   directly - identical to the KO dropdown. */
.loka-addr .ko-combo-input, .mappick-search .ko-combo-input {
    width: 100%; box-sizing: border-box; padding: .6rem 1.9rem .6rem .75rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
    font-family: var(--font-sans); font-size: .95rem; color: var(--ink); transition: border-color .15s;
}
.loka-addr .ko-combo-input:focus, .mappick-search .ko-combo-input:focus { outline: none; border-color: var(--accent); box-shadow: none; }
.loka-addr .ko-combo-input::placeholder, .mappick-search .ko-combo-input::placeholder { color: var(--ink-mute); font-style: italic; }
/* Magnifier (search affordance) in place of the KO dropdown's down-caret. */
.mappick-search-mag {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; color: var(--ink-mute); pointer-events: none;
}
.mappick-search-mag svg { width: 1rem; height: 1rem; display: block; }
.loka-opt { color: #9b948c; font-weight: 400; font-size: .85em; }
/* "ali po katastrskih podatkih" divider between the address search and the k.o.+št. fields. */
.loka-or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem auto; max-width: 560px;
    color: #9b948c; font-size: .8rem; }
.loka-or::before, .loka-or::after { content: ""; flex: 1; height: 1px; background: #e4ddd3; }
.loka-or span { white-space: nowrap; }

/* Primary "find on the map / by address" CTA above the manual cadastral form (merged search). */
.loka-map-cta {
    display: flex; align-items: center; gap: .85rem; width: 100%; max-width: 560px; text-align: left; cursor: pointer;
    border: 1px solid #e3b48f; background: linear-gradient(180deg, #fff8f0, #fdeede);
    border-radius: 14px; padding: .9rem 1.05rem; color: #7a3d18; transition: border-color .15s, transform .05s;
}
.loka-map-cta:hover { border-color: #c45a2a; }
.loka-map-cta:active { transform: translateY(1px); }
.loka-map-cta-ic { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px;
    border-radius: 11px; background: #c45a2a; color: #fff; }
.loka-map-cta-ic svg { width: 23px; height: 23px; }
.loka-map-cta-txt { display: flex; flex-direction: column; flex: 1 1 auto; line-height: 1.3; }
.loka-map-cta-txt strong { font-size: 1.02rem; }
.loka-map-cta-txt span { font-size: .85rem; color: #8a6a52; }
.loka-map-cta-go { flex: 0 0 auto; font-size: 1.4rem; color: #c45a2a; }
/* Give the section sub-titles (e.g. "Lastništvo" in the del-stavbe detail) breathing room + presence. */
.loka .parcel-block-title { margin-top: 1rem; color: var(--ink-soft); }
/* Replace the ⌄ glyph caret (renders thin/misaligned) with a crisp CSS chevron on this page - for BOTH
   the KO and the address combos. Scoped to .loka so the shared KoSelect elsewhere keeps its own caret. */
.loka .ko-combo-caret { font-size: 0; right: .85rem; width: .62rem; height: .62rem; }
.loka .ko-combo-caret::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: .44rem; height: .44rem;
    border-right: 1.7px solid var(--ink-mute); border-bottom: 1.7px solid var(--ink-mute);
    transform: translate(-50%, -68%) rotate(45deg);
}
/* Tidy the dropdown list on this page: a touch more padding + a clearer hover. */
.loka .ko-combo-list { box-shadow: 0 10px 28px rgba(31, 19, 0, .14); }
.loka .ko-combo-opt { padding: .5rem .6rem; }
.loka-addr-busy { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .82rem; color: #6b6259; }

.loka-acc-static { cursor: default; width: 100%; }
.loka-aps-wrap { overflow-x: auto; }
.loka-aps thead th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    color: #9b948c; border-bottom: 1px solid #e4ddd3; padding: .35rem .5rem; }
.loka-aps td { padding: .4rem .5rem; border-bottom: 1px solid #efe9e0; font-size: .86rem; vertical-align: middle; }
.loka-aps tbody tr:hover { background: #faf6f0; }
.loka-aps tbody tr.is-selected { background: #fbeede; }
.loka-ap-btn { padding: .2rem .55rem; font-size: .76rem; }

.loka-eclass { display: inline-block; min-width: 1.7rem; padding: .1rem .35rem; border-radius: 5px;
    color: #fff; font-weight: 700; font-size: .78rem; text-align: center; }
.loka-eclass-lg { min-width: 2.6rem; padding: .35rem .5rem; font-size: 1.1rem; border-radius: 8px; }
.loka-energy { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; margin-bottom: .8rem;
    background: #faf6f0; border: 1px solid #efe9e0; border-radius: 10px; }
.loka-energy-txt { display: flex; flex-direction: column; gap: .1rem; }
.loka-energy-txt strong { font-size: .85rem; color: #2f2a25; }
.loka-energy-txt span { font-size: .8rem; color: #6b6259; }
.loka-apdetail { border-color: #d9c9b3; }

.loka-paywall { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid #e4ddd3; border-radius: 14px;
    background: linear-gradient(180deg, #fffdfa, #faf4ec); }
.loka-paywall-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.loka-paywall-head strong { font-size: 1rem; color: #2f2a25; }
.loka-paywall-sub { font-size: .82rem; color: #6b6259; margin-top: .15rem; }
.loka-credits { font-size: .85rem; color: #6b6259; white-space: nowrap; }
.loka-credits strong { color: #c45a2a; font-size: 1.05rem; }
.loka-dl { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.loka-paid { margin-left: .6rem; font-size: .8rem; color: #3f7d4f; }
.loka-buy { display: flex; gap: .7rem; flex-wrap: wrap; }
.loka-buy-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    min-width: 9rem; padding: .8rem 1rem; border: 1px solid #e0d6c8; border-radius: 12px; background: #fff;
    cursor: pointer; }
.loka-buy-opt:hover { border-color: #c45a2a; }
.loka-buy-opt.is-featured { border-color: #c45a2a; box-shadow: 0 0 0 1px #c45a2a inset; }
.loka-buy-opt:disabled { opacity: .6; cursor: default; }
.loka-buy-price { font-size: 1.25rem; font-weight: 700; color: #2f2a25; }
.loka-buy-label { font-size: .8rem; color: #6b6259; }
.loka-buy-badge { position: absolute; top: -.6rem; right: .5rem; background: #c45a2a; color: #fff;
    font-size: .65rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; }
.loka-buy-cancel { display: block; margin-top: .6rem; appearance: none; border: none; background: transparent;
    padding: 0; cursor: pointer; font-size: .8rem; color: #6b6259; }
.loka-buy-cancel:hover { text-decoration: underline; }

/* ── Lokacijska-informacija CTA / buy page (public, LandingLayout) + example report ── */
.lp-nav-link { font-weight: 600; }
.loka-shell { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
.loka-cta { padding-top: 1rem; }
/* Full-width headline, then a row: the map/search leads (wider) with the value prop beside it. The worked
   examples used to be a tall right-hand column stealing focus - they're now a compact strip under the search. */
.loka-cta-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 880px) { .loka-cta-row { grid-template-columns: 1fr; gap: 1.75rem; } }
.loka-cta-search { min-width: 0; }
.loka-cta-list { list-style: none; padding: 0; margin: 1.2rem 0; display: flex; flex-direction: column; gap: .55rem; }
.loka-cta-list li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); font-size: .92rem; }
.loka-cta-list li::before { content: "✓"; position: absolute; left: 0; color: #3f7d4f; font-weight: 700; }
.loka-cta-buy { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.5rem; }
.loka-cta-btn { min-width: 13rem; }
.loka-cta-btn-alt { border: 1px solid var(--line-strong); background: var(--bg); }
.loka-cta-fine { margin-top: 1.2rem; font-size: .76rem; color: var(--ink-mute); max-width: 34rem; }

/* Compact worked-example strip, sitting under the search (no longer a tall column). */
.loka-cta-sample { display: block; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.loka-examples-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.loka-examples-title { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.loka-examples-note { font-size: .74rem; color: var(--ink-mute); }
.loka-examples-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .loka-examples-row { grid-template-columns: 1fr; } }
/* One example = a small clickable chip: mini page-preview thumbnail + label + "Prenesi PDF". */
.loka-sample-chip { display: flex; align-items: center; gap: .7rem; padding: .5rem; border: 1px solid #e4ddd3;
    border-radius: 12px; background: #fff; text-decoration: none; box-shadow: 0 4px 14px rgba(31, 19, 0, .06);
    transition: box-shadow .16s, border-color .16s, transform .16s; }
.loka-sample-chip:hover, .loka-sample-chip:focus-visible { box-shadow: 0 12px 28px rgba(31, 19, 0, .14);
    border-color: #d9cfc1; transform: translateY(-1px); }
.loka-sample-thumb { flex: none; width: 56px; height: 78px; object-fit: cover; object-position: top center;
    border-radius: 6px; border: 1px solid #e4ddd3; background: #eef1ea; }
.loka-sample-chip-txt { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.loka-sample-chip-badge { font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: #fff; background: #c45a2a; padding: .2rem .5rem; border-radius: 6px; }
.loka-sample-chip-badge--2 { background: #3f7d4f; }
.loka-sample-chip-dl { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--accent-ink); }
.loka-sample-chip:hover .loka-sample-chip-dl { color: var(--accent); }

.loka-sample-badge { position: absolute; top: -.7rem; left: 1rem; z-index: 3; background: #c45a2a; color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 7px;
    box-shadow: 0 2px 8px rgba(31, 19, 0, .28); }
.loka-sample-card { position: relative; display: flex; flex-direction: column; border: 1px solid #e4ddd3;
    border-radius: 16px; background: #fff; padding: .5rem; box-shadow: 0 18px 44px rgba(31, 19, 0, .10); }
.loka-sample-ortho { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 10px;
    margin-bottom: .7rem; border: 1px solid #e4ddd3; background: #eef1ea; }
.loka-sample-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .5rem; }
.loka-sample-title { font-weight: 700; color: #2f2a25; }
.loka-sample-sub { font-size: .8rem; color: #6b6259; margin-top: .15rem; }
.loka-sample-value { text-align: right; white-space: nowrap; }
.loka-sample-value strong { display: block; color: #c45a2a; font-size: 1.05rem; }
.loka-sample-value span { font-size: .72rem; color: #9b948c; }
/* Report preview image (first page of the sample PDF) on each landing example card. The link GROWS to fill
   the card so the two stacked previews stretch to match the height of the buy column on the left; the image
   covers it top-aligned (so more of the page shows the taller it gets) and fades out at the cropped bottom. */
.loka-sample-preview-link {
    display: block; position: relative; flex: 1 1 auto; min-height: 260px; border: none;
    border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(31, 19, 0, .08); transition: box-shadow .18s;
}
.loka-sample-preview-link:hover, .loka-sample-preview-link:focus-visible {
    border: none; box-shadow: 0 12px 30px rgba(31, 19, 0, .18);
}
.loka-sample-preview {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
    border: 1px solid #e4ddd3; border-radius: 8px;
}
/* Fade the cropped bottom edge into the white card so the cut isn't abrupt. */
.loka-sample-preview-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
/* "Prenesi vzorčno poročilo (PDF)" download link at the bottom of each sample card */
.loka-sample-dl {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin: .6rem .3rem .1rem;
    padding: .5rem .85rem; border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--bg-elev); color: var(--accent-ink); font-size: .84rem; font-weight: 600;
    text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color .15s, color .15s, background .15s;
}
.loka-sample-dl:hover { color: var(--accent); border-color: var(--accent); background: #fff; }
.loka-dl-icon { flex: none; }
.loka-sample-aps-title { margin-top: .8rem; }

/* ── Free-first landing: restore hint, field tooltips, free search section, basic-preview + paywall ── */
.loka-cta-restore { margin-top: 1.4rem; font-size: .86rem; color: var(--ink-soft); }

/* Info tooltip on the search fields: a small "i" bubble that shows a popover on hover/focus. */
.loka-tip {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-left: .3rem; border-radius: 50%; background: var(--line-strong);
    color: #fff; font-size: .64rem; font-weight: 700; font-style: normal; cursor: help; vertical-align: middle;
    text-transform: none; letter-spacing: 0; outline-offset: 2px;
}
.loka-tip-pop {
    position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); z-index: 60;
    width: 240px; max-width: 62vw; padding: .55rem .7rem; border-radius: 9px;
    background: #2f2a25; color: #fff; font-size: .74rem; font-weight: 400; line-height: 1.45;
    text-transform: none; letter-spacing: normal; text-align: left; box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
}
.loka-tip:hover .loka-tip-pop, .loka-tip:focus .loka-tip-pop, .loka-tip:focus-visible .loka-tip-pop { opacity: 1; visibility: visible; }
.loka-tip-pop::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #2f2a25;
}

/* Lead headline above the map (minimal text: headline → map → accordion). */
.loka-cta-lead { margin: .2rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: var(--ink); }

/* Full-width hero (main title + subtitle) across the whole width, above the map/value-prop row. */
.loka-hero { margin: .2rem 0 1.6rem; }
.loka-hero-title { margin: 0 0 .6rem; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.12; font-weight: 800; color: var(--ink); }
.loka-hero-sub { margin: 0; font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 1.5; color: var(--ink-soft); }

/* The free search widget (map card + manual accordion) - the lead of the left CTA column. */
.loka-freesearch-msg { margin-top: .7rem; }

/* Manual cadastral entry, collapsed under the map by default (the map is the primary interface). */
.loka-manual-acc { margin-top: 1rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); }
.loka-manual-acc.is-open { background: #fff; }
.loka-manual-acc-toggle {
    display: flex; align-items: center; gap: .55rem; width: 100%; padding: .7rem .9rem;
    background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .88rem;
    color: var(--ink-soft); text-align: left;
}
.loka-manual-acc-toggle:hover { color: var(--ink); }
.loka-manual-acc-ic { color: var(--accent-ink); font-size: 1rem; line-height: 1; }
.loka-manual-acc-chev { margin-left: auto; font-size: .66rem; color: var(--ink-mute); }
.loka-manual-acc-body { padding: 0 .9rem 1rem; }

/* Value proposition, now a side column beside the search (no longer a section below it, so no top divider). */
.loka-cta-marketing { min-width: 0; }
.loka-cta-marketing .intro { margin-top: 0; }
.loka-cta-marketing h2 { margin: 0 0 .5rem; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }

/* Basic-preview + paywall shown after a free search. */
.loka-preview { margin-top: 1.75rem; scroll-margin-top: 5rem; }
.loka-preview-top { margin-bottom: .7rem; }
.loka-preview-back { font-weight: 600; }
.loka-preview-restored { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem;
    padding: .7rem .9rem; border: 1px solid #e9c9a0; border-radius: 10px; background: #fcf1e2;
    color: #8a4a1d; font-size: .88rem; line-height: 1.4; }
.loka-preview-restored > span:first-child { font-weight: 700; }
.loka-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
@media (max-width: 880px) { .loka-preview-grid { grid-template-columns: 1fr; gap: 1.25rem; } }
.loka-preview-card { border: 1px solid #e4ddd3; border-radius: 16px; background: #fff; padding: 1.2rem 1.3rem;
    box-shadow: 0 18px 44px rgba(31, 19, 0, .10); }
.loka-preview-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c45a2a; }
.loka-preview-title { font-size: 1.25rem; font-weight: 800; color: #2f2a25; margin-top: .2rem; }
.loka-preview-sub { font-size: .85rem; color: #6b6259; margin: .1rem 0 .8rem; }
.loka-preview-table { margin-bottom: 1rem; }
.loka-preview-locked { margin-top: .4rem; padding: .9rem 1rem; border: 1px dashed #d9cfc1; border-radius: 12px; background: #faf6f0; }
.loka-preview-locked-h { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: #2f2a25; font-size: .9rem; margin-bottom: .4rem; }
.loka-preview-locked-h .loka-lock-hic { flex: 0 0 auto; color: var(--accent); }
.loka-preview-locked ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.loka-preview-locked li { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; color: #6b6259; }
/* Custom single-colour (accent) glyph per benefit, replacing the old repeated 🔒 emoji bullet. */
.loka-preview-locked li .loka-lock-ic { flex: 0 0 auto; color: var(--accent); margin-top: .1rem; }
.loka-preview-buy { border: 1px solid #e4ddd3; border-radius: 16px; background: linear-gradient(180deg, #fffdfa, #f7f1e8);
    padding: 1.2rem 1.3rem; box-shadow: 0 18px 44px rgba(31, 19, 0, .10); }
.loka-preview-buy-h { font-size: 1.05rem; font-weight: 800; color: #2f2a25; }
.loka-preview-buy .loka-buy-body { margin-top: .9rem; }

/* ── Token paywall: buy panel (email + two product cards + restore) ── */
.loka-buy-body { margin-top: 1.4rem; }
/* Korak 1: e-naslov za račun - full column width, above the pricing, visually emphasised. */
.loka-buy-email { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.3rem; width: 100%; }
.loka-buy-email label { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: #2f2a25; }
.loka-buy-email-hint { font-size: .78rem; color: #6b6259; }
/* Korak 2 heading sitting above the package grid. */
.loka-buy-pkg-h { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; font-size: 1rem; font-weight: 700; color: #2f2a25; }
/* Step badge ("Korak 1" / "Korak 2"). */
.loka-step-no { flex: 0 0 auto; padding: .12rem .5rem; border-radius: 999px; background: var(--accent); color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
/* Only the e-mail input itself (a DIRECT child) - must not style the nested company checkboxes/inputs. */
.loka-buy-email > input { width: 100%; padding: .7rem .8rem; border: 1px solid #d9cdbb; border-radius: 10px; background: #fff;
    font-size: 1rem; color: var(--ink); }
.loka-buy-email > input:focus { outline: none; border-color: var(--accent); }
/* "Nakup na podjetje" toggle + the company form it reveals. Selectors are prefixed with .loka-buy-email so
   they out-specify the generic ".loka-buy-email label" rule (which would otherwise centre these rows).
   Everything left-aligned; full-width fields. */
.loka-buy-email .loka-company-toggle { display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: .5rem; align-self: flex-start; margin-top: .5rem; font-size: .9rem; font-weight: 600; color: #2f2a25; cursor: pointer; }
.loka-buy-email .loka-company-toggle input,
.loka-buy-email .loka-company-check input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: 0; padding: 0;
    border: 0; background: none; border-radius: 0; accent-color: var(--accent); cursor: pointer; }
.loka-company-form { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; margin-top: .6rem;
    padding: 1rem; border: 1px solid #d9cdbb; border-radius: 12px; background: #faf6f0; }
.loka-buy-email .loka-company-row { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-weight: 400; }
.loka-buy-email .loka-company-row span { font-size: .8rem; font-weight: 600; color: #6b6259; }
.loka-buy-email .loka-company-row input { width: 100%; padding: .6rem .7rem; border: 1px solid #d9cdbb; border-radius: 8px;
    background: #fff; font: inherit; font-size: .95rem; color: var(--ink); }
.loka-buy-email .loka-company-row input:focus { outline: none; border-color: var(--accent); }
.loka-buy-email .loka-company-check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: .5rem; align-self: flex-start; font-size: .88rem; font-weight: 600; color: #2f2a25; cursor: pointer; }
.loka-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .loka-products { grid-template-columns: 1fr; } }
.loka-product { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1rem;
    border: 1px solid #e0d6c8; border-radius: 14px; background: #fff; }
.loka-product--best { border-color: #c45a2a; box-shadow: 0 0 0 1px #c45a2a inset; }
.loka-product-badge { position: absolute; top: -.65rem; right: .7rem; background: #c45a2a; color: #fff;
    font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 6px; }
.loka-product-name { font-weight: 600; color: #2f2a25; }
/* "X + Y gratis" highlight inside a package card (green, to read as a bonus). */
.loka-product-gratis { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82rem; font-weight: 800; color: #1f7a43; background: #e6f6ec; border: 1px solid #bfe6cd;
    padding: .12rem .5rem; border-radius: 999px; }
.loka-product-price { font-family: var(--font-display, inherit); font-size: 1.7rem; font-weight: 800; color: #2f2a25; line-height: 1.1; }
.loka-product-desc { font-size: .8rem; color: #6b6259; min-height: 2.2em; }
/* Push the action area to the card bottom so both packages' buttons align even when one has an extra line
   (e.g. the "X € na poročilo" per-unit row only the multi-report bundle shows). */
.loka-product-btn { margin-top: auto; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
/* Discounted package: the list price stays visible (struck through) beside what the code makes it, so the
   buyer can see the size of the saving rather than being told about it. */
.loka-product-price-was { font-size: 1.05rem; font-weight: 600; color: #9b948c; text-decoration: line-through; margin-right: .35rem; }
.loka-product-off {
    display: inline-block; margin-left: .4rem; vertical-align: .28em;
    font-family: var(--font-sans, inherit); font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    color: #fff; background: var(--ok, #3f7d43); padding: .12rem .4rem; border-radius: 999px;
}

/* Koda za popust - optional, so it reads as a quiet row above the packages rather than a step of its own. */
.loka-promo { margin: .2rem 0 .7rem; }
.loka-promo-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.loka-promo-row input { flex: 1 1 12rem; min-width: 0; padding: .5rem .65rem; border: 1px solid #d9cdbb;
    border-radius: 9px; background: #fff; font-size: .85rem; color: var(--ink); }
.loka-promo-row input:focus { outline: none; border-color: var(--accent); }
.loka-promo-btn { white-space: nowrap; }
.loka-promo-on { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .85rem; color: #2f2a25;
    background: var(--ok-soft, #e7f2e4); border: 1px solid #bcd9b6; border-radius: 9px; padding: .45rem .65rem; }
.loka-promo-tick { color: var(--ok, #3f7d43); font-weight: 800; }
.loka-promo-clear { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: .78rem;
    color: #6b6259; text-decoration: underline; cursor: pointer; }
.loka-promo-msg { display: block; margin-top: .4rem; font-size: .78rem; color: #8a4a1d; }

.loka-buy-msg { margin-top: .8rem; font-size: .85rem; color: #2f2a25; background: #fbeede; border: 1px solid #e9d4b8;
    padding: .5rem .7rem; border-radius: 9px; }

/* Bank-transfer offer: UPN QR + payment details shown after "Naroči" for immediate mobile-bank payment. */
.loka-buy-offer { margin-top: .9rem; padding: .9rem; border: 1px solid #e9d4b8; border-radius: 12px; background: #fffaf3; }
.loka-buy-offer-head { font-weight: 700; color: #2f2a25; margin-bottom: .7rem; }
.loka-buy-pay { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.loka-buy-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.loka-buy-qr img { width: 170px; height: 170px; border: 1px solid #e4ddd3; border-radius: 8px; background: #fff; }
.loka-buy-qr figcaption { font-size: .72rem; color: #6b6259; text-align: center; max-width: 170px; }
.loka-buy-details { flex: 1 1 12rem; min-width: 11rem; display: grid; grid-template-columns: auto 1fr; gap: .25rem .6rem;
    margin: 0; font-size: .85rem; align-content: start; }
.loka-buy-details dt { font-weight: 600; color: #6b6259; }
.loka-buy-details dd { margin: 0; color: #2f2a25; word-break: break-word; }
.loka-buy-instant { margin: .8rem 0 .7rem; font-size: .82rem; line-height: 1.5; color: #4a443c; }
.loka-buy-offer .btn { font-size: .85rem; }

/* Restore-by-code lives in the header, top-right of the logo (paywall state only). */
.loka-headrestore { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.loka-headrestore label { font-size: .72rem; font-weight: 600; color: #6b6259; }
.loka-headrestore-row { display: flex; align-items: center; gap: .4rem; }
.loka-headrestore-row input { width: 22rem; max-width: 60vw; padding: .42rem .65rem; border: 1px solid #d9cdbb;
    border-radius: 9px; background: #fff; font-size: .82rem; color: var(--ink); }
.loka-headrestore-row input:focus { outline: none; border-color: var(--accent); }
.loka-headrestore-row .btn { white-space: nowrap; }
.loka-headrestore-msg { font-size: .74rem; color: #8a4a1d; }
@media (max-width: 720px) {
    /* Full-width form on its own line under the logo (the header now wraps). */
    .loka-headrestore { width: 100%; align-items: stretch; }
    .loka-headrestore label { text-align: left; }
    .loka-headrestore-row input { width: auto; flex: 1; min-width: 0; }
}
@media (max-width: 440px) {
    /* Very narrow phones: stack the code input above a full-width "Uporabi kodo" button. */
    .loka-headrestore-row { flex-wrap: wrap; }
    .loka-headrestore-row input { flex: 1 1 100%; }
    .loka-headrestore-row .btn { width: 100%; }
}

/* ── Worked examples: a compact two-chip strip under the search (see .loka-cta-sample above). ── */
.loka-examples { display: block; }
.loka-sample-badge--2 { background: #3f7d4f; }

.loka-link { appearance: none; border: none; background: transparent; padding: 0; cursor: pointer;
    font-size: .82rem; color: #6b6259; text-decoration: underline; }
.loka-link:hover { color: var(--accent); }
.loka-outoftokens { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid #e9c9a0; border-radius: 10px;
    background: #fcf1e2; color: #8a4a1d; font-size: .88rem; font-weight: 600; }
.loka-buymore { margin: 0 0 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid #e4ddd3; border-radius: 14px; background: #fffdfa; }
.loka-buymore .loka-buy-body { margin-top: 0; }
.loka-buy-title { font-weight: 700; color: #2f2a25; margin-bottom: .2rem; }

/* ── "One part per lookup" affordances on the deli-stavbe table ── */
.loka-aps-note { margin: 0 0 .6rem; }
.loka-aps tbody tr.is-locked { opacity: .55; }
.loka-ap-locked { display: inline-block; font-size: .95rem; color: #9b948c; }
/* The one part this report covers (chosen in the search form, not by clicking the table). */
.loka-ap-in { display: inline-block; font-size: .95rem; color: #2e7d32; }

/* ── Credit-card icon on the buy cards ── */
.loka-product-pay { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .76rem; color: #6b6259; }
.loka-card-icon { color: #c45a2a; flex: none; }

/* Package "kicker" (Paket 1 / Paket 5) above the name + per-report price under the bundle price. */
.loka-product-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #b07b45; }
.loka-product-perunit { font-size: .8rem; font-weight: 700; color: #1f7a43; margin-top: -.05rem; }

/* "Že imaš dostopno kodo?" restore - surfaced ONLY at the paywall (under the buy panel), collapsed by default. */
/* "Ali že imaš kodo?" - its own card ABOVE the price list. A returning buyer already paid; making them
   scroll past the packages and open a <details> to get back in was the wrong order, so the field is open
   and it comes first. Quiet styling on purpose: it must not compete with the buy panel for a first-time
   visitor's attention. */
.loka-restore-card {
    margin-bottom: 1rem; padding: .8rem .9rem;
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev);
}
.loka-restore-card-h {
    margin-bottom: .55rem; font-size: .86rem; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; gap: .35rem;
}
.loka-restore-card-h::before { content: "🔑"; font-size: .95rem; }
.loka-restore-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.loka-restore-row input { flex: 1 1 12rem; min-width: 0; padding: .5rem .65rem; border: 1px solid #d9cdbb;
    border-radius: 9px; background: #fff; font-size: .85rem; color: var(--ink); }
.loka-restore-row input:focus { outline: none; border-color: var(--accent); }
.loka-restore-btn { white-space: nowrap; }
.loka-restore-msg { display: block; margin-top: .4rem; font-size: .78rem; color: #8a4a1d; }

/* ── "Kdaj vam poročilo pride prav?" - use-cases grid towards the bottom of the landing ── */
.loka-usecases { margin: 2rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.loka-usecases-title { margin: 0 0 1rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 800; color: var(--ink); text-align: center; }
.loka-usecases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 860px) { .loka-usecases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .loka-usecases-grid { grid-template-columns: 1fr; } }
/* Compact horizontal card: icon in a left column spanning the heading + text rows (no markup wrapper needed). */
.loka-usecase { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; row-gap: .1rem; align-content: start;
    padding: .8rem .9rem; border: 1px solid #e4ddd3; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(31, 19, 0, .045); }
.loka-usecase-ic { grid-column: 1; grid-row: 1 / span 2; align-self: start; color: var(--accent); margin-top: .1rem; }
.loka-usecase-h { grid-column: 2; font-weight: 700; color: #2f2a25; margin-bottom: 0; font-size: .92rem; }
.loka-usecase p { grid-column: 2; margin: 0; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }

/* ── 3D-hiša upsell: vzorčni posnetek 3D umestitve hiše + okrogel »pečat«, nad namensko rabo (OPN);
      cel blok je povezava na glog.si. Samo v parcelnem poročilu. ── */
.loka-3d-upsell { position: relative; display: block; margin: 0 0 1rem; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(31,19,0,.08); text-decoration: none; }
.loka-3d-img { display: block; width: 100%; height: auto; }
.loka-3d-seal { position: absolute; top: 10px; right: 10px; width: 118px; height: 118px; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #d9691f, #b74e1f); color: #fff; box-shadow: 0 3px 9px rgba(0,0,0,.30);
    border: 2px dashed rgba(255,255,255,.7); display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 12px; transform: rotate(-9deg); }
.loka-3d-seal-3d { font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.loka-3d-seal-txt { font-size: .65rem; font-weight: 700; line-height: 1.2; margin-top: .2rem; }
.loka-3d-cta { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .85rem; font-size: .82rem;
    font-weight: 700; color: #fff; background: linear-gradient(0deg, rgba(20,12,0,.85), rgba(20,12,0,0)); }
@media (max-width: 480px) {
    .loka-3d-seal { width: 92px; height: 92px; padding: 8px; top: 8px; right: 8px; }
    .loka-3d-seal-txt { font-size: .57rem; }
}

/* ── Glog.si cross-sell banner: below the landing use-cases + under a generated (paid) report ── */
.loka-glog {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
    margin: 1.5rem 0 .75rem; padding: 1.2rem 1.4rem;
    border: 1px solid #e7d4bf; border-radius: 14px;
    background: linear-gradient(180deg, #fffaf3, #faf1e6);
    box-shadow: 0 6px 18px rgba(31, 19, 0, .06);
}
.loka-glog-visual { flex: 0 0 210px; }
.loka-glog-img {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: 10px; border: 1px solid #e7d4bf; box-shadow: 0 4px 12px rgba(31, 19, 0, .14);
}
.loka-glog-copy { flex: 1 1 20rem; min-width: 0; }
.loka-glog-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #b07b45; margin-bottom: .3rem; }
.loka-glog-title { margin: 0 0 .5rem; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 800; color: var(--ink); line-height: 1.3; }
.loka-glog-sub { font-size: .85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .4rem; }
.loka-glog-points {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .9rem;
}
.loka-glog-points li { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: #2f2a25; }
.loka-glog-ic { color: var(--accent); flex: none; }
.loka-glog-note { margin: .6rem 0 0; font-size: .8rem; color: var(--ink-soft); }

/* ── "Vaše poročilo prinese −12,90 € pri letni naročnini" ────────────────────────────────────────────
   The cross-app benefit, in the three places a buyer meets it: the cross-sell banner, the paywall (what
   the money also buys) and the delivered report (the code itself). Accent-bordered rather than another
   grey panel - it is the one thing on the page that hands the reader money back. */
.loka-glog-bonus { margin: .4rem 0 0; font-size: .8rem; color: var(--ink); }
.loka-buy-bonus {
    margin: .5rem 0 .9rem; padding: .6rem .8rem; border: 1px solid var(--accent);
    border-radius: 10px; background: var(--accent-soft, rgba(196, 90, 42, .07));
    font-size: .82rem; line-height: 1.5; color: var(--ink);
}
.loka-bonus {
    margin: 1rem 0 0; padding: .9rem 1rem; border: 1px solid var(--accent);
    border-radius: 12px; background: var(--accent-soft, rgba(196, 90, 42, .07));
}
.loka-bonus-head { font-weight: 700; font-size: .98rem; color: var(--ink); }
.loka-bonus-body { margin: .4rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.loka-bonus-coderow { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.loka-bonus-label { font-size: .78rem; color: var(--ink-mute); }
/* The code exists to be read off the screen and typed into another site: give it room, tabular figures
   and a selectable box rather than burying it in a sentence. */
.loka-bonus-code {
    padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 7px; background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; font-weight: 700;
    letter-spacing: .08em; color: var(--accent); user-select: all;
}
.loka-bonus-note { margin: .55rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.loka-glog-cta { flex: 0 0 auto; }
.loka-glog-cta .btn { white-space: nowrap; }
@media (max-width: 640px) {
    .loka-glog { flex-direction: column; align-items: stretch; }
    .loka-glog-visual { flex: 1 1 auto; }
    .loka-glog-img { aspect-ratio: 16 / 9; max-height: 170px; }
    .loka-glog-points { grid-template-columns: 1fr; }
    .loka-glog-cta .btn { width: 100%; text-align: center; }
}

/* Compact, stacked variant shown inside the preview's left card (under "V celotnem poročilu (PDF)"). */
.loka-usecases-compact { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.loka-usecases-compact-h { font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .6rem; }
.loka-usecase-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.loka-usecase-row { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }
.loka-usecase-cic { color: var(--accent); flex: none; margin-top: .05rem; }
.loka-usecase-ch { font-weight: 700; color: #2f2a25; }

/* ── AI report additions: 1-minute summary card (top), glossary + checklist (bottom) ── */
.loka-ai-summary { margin: 1.5rem 0 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid #e7d4bf; border-radius: 14px;
    background: linear-gradient(180deg, #fffaf3, #faf1e6); box-shadow: 0 6px 18px rgba(31, 19, 0, .06); }
.loka-ai-summary-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.loka-ai-summary-head h3 { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--accent); }
.loka-ai-spark { color: var(--accent); font-size: 1.05rem; line-height: 1; }
.loka-ai-badge { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #b07b45; border: 1px solid #e7d4bf; border-radius: 999px; padding: .1rem .45rem; }
.loka-ai-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; margin: 0; }
@media (max-width: 620px) { .loka-ai-summary-grid { grid-template-columns: 1fr; } }
.loka-ai-summary-item dt { font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #9c6c06; margin-bottom: .12rem; }
.loka-ai-summary-item dd { margin: 0; font-size: .9rem; line-height: 1.45; color: #2f2a25; }
.loka-ai-note { margin: .8rem 0 0; font-size: .72rem; color: var(--ink-mute); font-style: italic; }

/* Location-suitability semaphore on the summary card (red / yellow / green, score 0-100). */
.loka-score { margin: .15rem 0 .9rem; }
.loka-score-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.loka-score-dot { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.loka-score-cap { font-size: .82rem; color: var(--ink-soft); }
.loka-score-beta { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #8a6d3b; background: #f3e8d2; border: 1px solid #e4d3b0; border-radius: 999px; padding: .08rem .4rem; }
.loka-score-num { margin-left: auto; font-weight: 800; font-size: 1.05rem; color: #2f2a25; }
.loka-score-num small { font-weight: 600; font-size: .72rem; color: var(--ink-mute); }
.loka-score-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.loka-score--good .loka-score-dot { background: #3d8b4f; }
.loka-score--good .loka-score-label { color: #3d8b4f; }
.loka-score--warn .loka-score-dot { background: #d8a41f; }
.loka-score--warn .loka-score-label { color: #9c6c06; }
.loka-score--bad .loka-score-dot { background: #c0392b; }
.loka-score--bad .loka-score-label { color: #c0392b; }
.loka-score-bar { position: relative; height: 8px; border-radius: 999px; margin-top: .5rem;
    background: linear-gradient(90deg, #c65a4a 0%, #e6c887 55%, #4f9a63 100%); }
.loka-score-marker { position: absolute; top: -3px; width: 3px; height: 14px; background: #2f2a25; border-radius: 2px; transform: translateX(-50%); }

.loka-ai-glossary, .loka-ai-checklist { margin: 1.4rem 0 0; padding: 1.1rem 1.2rem; border: 1px solid var(--line);
    border-radius: 14px; background: #fff; }
.loka-ai-h { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 800; color: var(--accent); display: flex; align-items: center; gap: .4rem; }
.loka-ai-gloss-list { margin: 0; display: grid; gap: .55rem; }
.loka-ai-gloss-row { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: .3rem .9rem; align-items: baseline;
    padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.loka-ai-gloss-row:last-child { border-bottom: none; padding-bottom: 0; }
@media (max-width: 560px) { .loka-ai-gloss-row { grid-template-columns: 1fr; gap: .1rem; } }
.loka-ai-gloss-row dt { font-weight: 700; font-size: .86rem; color: #6b6259; }
.loka-ai-gloss-row dd { margin: 0; font-size: .88rem; line-height: 1.45; color: #2f2a25; }
.loka-ai-check-list { margin: 0; padding-left: 0; list-style: none; counter-reset: aicheck; display: grid; gap: .55rem; }
.loka-ai-check-list li { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; line-height: 1.5; color: #2f2a25; counter-increment: aicheck; }
/* Sequential number badge (kept) */
.loka-ai-check-list li::before { content: counter(aicheck); flex: none; margin-top: .1rem;
    width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: #fff; background: var(--accent); border-radius: 50%; }
/* Tick-box the reader can check off (on screen, or by hand once printed) */
.loka-ai-check-box { flex: none; appearance: none; -webkit-appearance: none; margin: .18rem 0 0;
    width: 1.05rem; height: 1.05rem; border: 1.6px solid var(--accent); border-radius: 4px; background: #fff;
    cursor: pointer; position: relative; }
.loka-ai-check-box:checked { background: var(--accent); }
.loka-ai-check-box:checked::after { content: ""; position: absolute; left: .28rem; top: .08rem;
    width: .3rem; height: .58rem; border: solid #fff; border-width: 0 .16rem .16rem 0; transform: rotate(45deg); }
.loka-ai-check-txt { flex: 1; }
@media print { .loka-ai-check-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ── Inline curated explanations under report figures (naravni dejavniki, kakovost zraka) ── */
.report-info-notes { margin-top: .85rem; padding: .7rem .85rem; background: #faf6f0; border: 1px solid var(--line); border-radius: 10px; }
.report-info-h { font-size: .78rem; font-weight: 700; color: #6b6259; margin-bottom: .4rem; }
.report-info-notes ul { margin: 0; padding-left: 1.05rem; display: grid; gap: .32rem; }
.report-info-notes li { font-size: .8rem; line-height: 1.45; color: var(--ink-soft); }

/* Energetski potenciali (razdelek Podnebje): dve ločeni kartici – Sonce (FV) in Zemlja (geosonda) */
.energy-potentials { margin-top: .85rem; padding: .8rem .9rem; background: linear-gradient(180deg, #fbf7f1, #f6efe6); border: 1px solid var(--line); border-radius: 10px; }
.energy-potentials > .report-info-h { margin-bottom: .55rem; }
.energy-card { background: #fffdfa; border: 1px solid var(--line); border-radius: 9px; padding: .6rem .75rem; }
.energy-card + .energy-card { margin-top: .6rem; }
.energy-card-h { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: #6b6259; margin-bottom: .4rem; }
.energy-ico { font-size: 1.1rem; line-height: 1; flex: none; }
.energy-val { font-size: 1.35rem; font-weight: 800; color: #c45a2a; line-height: 1.1; }
.energy-val small { font-size: .72rem; font-weight: 600; color: var(--ink-mute); margin-left: .15rem; }
.energy-lbl { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-top: .05rem; }
.energy-k { font-size: .72rem; color: var(--ink-mute); line-height: 1.4; margin: .2rem 0 0; }
.energy-card .gauge { margin: .1rem 0 .15rem; }
.energy-why { font-size: .72rem; color: var(--ink-mute); line-height: 1.45; margin: .35rem 0 0; }
.energy-card .climate-foot { margin-top: .3rem; }

/* Noise loudness reference scale (chips) */
.noise-scale { margin-top: .85rem; }
.noise-scale-h { font-size: .78rem; font-weight: 700; color: #6b6259; }
.noise-scale ul { margin: .4rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.noise-scale li { font-size: .77rem; color: var(--ink-soft); background: #f4efe8; border: 1px solid var(--line); border-radius: 999px; padding: .13rem .55rem; }
.noise-db { font-weight: 700; color: #2f2a25; }

/* OPN raba-code plain-language description under the zone box */
.parcel-zone-desc { margin-top: .3rem; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }

/* ── Pass chip in the header + its menu ────────────────────────────────────────────────────────
   With an active code the header used to carry the whole pass state (count pill, two lines of text,
   two buttons) as loose siblings, which wrapped into a ragged stack. Now the navbar shows one chip -
   the remaining count - and everything else (e-mail, spent/bought, buy, swap code) lives in a menu
   under it, so the header row stays a single, calm line at every width. */
.loka-pass { position: relative; display: inline-flex; }
.loka-pass-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .5rem .3rem .3rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-elev); color: var(--ink-soft); font: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: border-color .15s, color .15s;
}
.loka-pass-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.loka-pass-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.7rem; height: 1.7rem; padding: 0 .35rem; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: .85rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.loka-pass-chevron { width: 14px; height: 14px; color: var(--ink-mute); transition: transform .15s; }
.loka-pass-btn[aria-expanded="true"] { border-color: var(--line-strong); color: var(--ink); }
.loka-pass-btn[aria-expanded="true"] .loka-pass-chevron { transform: rotate(180deg); }
/* Out of lookups: the chip is the call to action, so it carries the accent instead of a quiet grey. */
.loka-pass-btn.is-empty { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.loka-pass-btn.is-empty .loka-pass-count { background: var(--accent-ink); }

/* Click-outside catcher, rendered as a sibling of the header (see the note in LokacijskaInfo.razor).
   It sits just under the sticky header's z-index so the header itself stays interactive. */
.loka-pass-backdrop { position: fixed; inset: 0; z-index: 19; background: transparent; cursor: default; }
.loka-pass-menu {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 31;
    width: min(19rem, calc(100vw - 2rem)); padding: .9rem;
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(31, 19, 0, .16);
    display: flex; flex-direction: column; gap: .7rem; text-align: left;
}
.loka-pass-menu-head { display: flex; flex-direction: column; gap: .15rem; }
.loka-pass-menu-head strong { font-size: .95rem; color: var(--ink); }
.loka-pass-mail { font-size: .78rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loka-pass-meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.loka-pass-meter-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.loka-pass-stats { display: flex; gap: 1.2rem; }
.loka-pass-stats div { display: flex; flex-direction: column; }
.loka-pass-stats strong { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.loka-pass-stats span { font-size: .74rem; color: var(--ink-mute); }
.loka-pass-buy { width: 100%; justify-content: center; }
.loka-pass-forget { align-self: center; }
@media (max-width: 560px) {
    /* Tight header: the count carries the meaning, the word doesn't. */
    .loka-pass-label { display: none; }
}

/* ── "Imam kodo" entry in the header (while there is no pass) ──────────────────────────────────
   A free access code is worth nothing if its holder can't find where to type it: the redeem box used
   to live only at the paywall, behind a search. This chip mirrors the pass chip's shape and drops the
   SAME field (see .loka-restore-row) into a menu under it, so a code goes straight to the tool. */
.loka-code { position: relative; display: inline-flex; }
.loka-code-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-elev); color: var(--ink-soft); font: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: border-color .15s, color .15s;
}
.loka-code-btn:hover,
.loka-code-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-ink); }
.loka-code-btn .icon { color: var(--accent); }
.loka-code-menu { width: min(21rem, calc(100vw - 2rem)); }
.loka-code-hint { font-size: .78rem; line-height: 1.45; color: var(--ink-mute); }
/* In a menu this narrow the button never fits beside the field - let it wrap and own the row. */
.loka-code-menu .loka-restore-btn { width: 100%; justify-content: center; }

/* The hero's line for code holders: quiet text under the subtitle, not a second call to action. */
.loka-hero-code { margin: .7rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.loka-hero-code .loka-link { font: inherit; font-weight: 700; }

@media (max-width: 560px) {
    /* Tight header: the icon carries the meaning. */
    .loka-code-label { display: none; }
    .loka-code-btn { padding: .38rem .5rem; }
    /* The chip is NOT the last item in the nav (the theme toggle is), so a menu anchored to the chip
       spills off the left edge at phone widths. Anchor it to the nav, which ends at the header's
       padding, and it lines up with the page instead. */
    .loka-topnav { position: relative; }
    .loka-code { position: static; }
}

/* ── Search heading above the Stavba/Parcela switch ── */
/* The shared .parcel card falls back to --radius (2px, square) - in Lokacija every other panel
   (referral, preview, buy, modal) is a 16px rounded card, so round the search card to match. */
.parcel.loka { border-radius: 16px; }
.loka-search-head { margin: .25rem 0 1.2rem; }
.loka-search-head h1 { margin: 0 0 .35rem; font-size: 1.6rem; }
.loka-search-head p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* ── Referral: "invited" banner on the paywall + the invite/share panel under the search tool ── */
.loka-invite-note {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 1rem; padding: .7rem .9rem;
    background: #fbf1e6; border: 1px solid #f0d8bf; border-radius: 12px;
    color: #6b4a2c; font-size: .9rem;
}
.loka-invite-gift { font-size: 1.25rem; flex: none; }

.loka-referral {
    margin: 1.6rem 0 0; padding: 1.2rem 1.3rem;
    background: #faf4ec; border: 1px solid #e4ddd3; border-radius: 16px;
}
.loka-referral-head { display: flex; align-items: flex-start; gap: .8rem; }
.loka-referral-gift { font-size: 1.7rem; line-height: 1; flex: none; }
.loka-referral-head h2 { margin: 0 0 .25rem; font-size: 1.18rem; color: #2f2a25; }
.loka-referral-head p { margin: 0; color: var(--ink-soft); font-size: .9rem; max-width: 40rem; }
.loka-referral-row { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.loka-referral-link {
    flex: 1 1 18rem; min-width: 0; padding: .6rem .75rem;
    border: 1px solid #e4ddd3; border-radius: 10px; background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: #4a443d;
}
.loka-referral-copy { flex: none; white-space: nowrap; }
.loka-referral-stats { margin-top: .7rem; font-size: .85rem; color: #6b6259; }
.loka-referral-stats strong { color: #c45a2a; }
.loka-referral-stats--empty strong { color: inherit; }
@media (max-width: 560px) {
    .loka-referral-copy { width: 100%; }
}

/* ── Shared footer (legal links) + legal pages (Pogoji uporabe / Politika zasebnosti) ── */
.loka-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    max-width: 1120px; margin: 2rem auto 0; padding: 1.1rem 1.25rem; border-top: 1px solid #e4ddd3;
    font-size: .8rem; color: #6b6259;
}
.loka-footer-links { display: flex; gap: 1.2rem; }
.loka-footer-links a { color: #6b6259; text-decoration: none; }
.loka-footer-links a:hover { color: #c45a2a; } /* underline comes from the global a:hover border-bottom */
/* The version doubles as the link to "Kaj je novega" - it reads as footer text, not as an accent link.
   inherit/var() so it follows the footer in both themes without a dark override. */
.loka-footer-version { color: inherit; text-decoration: none; }
.loka-footer-version:hover { color: var(--accent); }
.loka-footer-gurs { flex-basis: 100%; font-size: .72rem; line-height: 1.5; color: #8a827a; }
.loka-footer-gurs a { color: inherit; text-decoration: underline; }

/* cookie notice - fixed bottom banner (necessary-cookies disclosure, single acknowledgment) */
.cookie-consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    padding: .85rem clamp(1rem, 4vw, 2rem);
    padding-bottom: max(.85rem, env(safe-area-inset-bottom));
    background: var(--bg-elev); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -6px 24px rgba(26, 26, 26, .12);
}
.cookie-consent-inner {
    max-width: var(--max); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
    flex-wrap: wrap;
}
.cookie-consent-text { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); flex: 1 1 18rem; }
.cookie-consent-text strong { color: var(--ink); font-weight: 600; }
.cookie-consent-link {
    appearance: none; border: none; background: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--accent-ink); text-decoration: underline;
}
.cookie-consent-link:hover { color: var(--accent); }
.cookie-consent-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
    /* Keep the banner SHORT on phones: tighter padding + type, and the button stays BESIDE the text (one row,
       vertically centred) instead of a full-width row under it - so its height is just the text, not text+button. */
    .cookie-consent { padding: .55rem clamp(.75rem, 3.5vw, 1rem); padding-bottom: max(.55rem, env(safe-area-inset-bottom)); }
    .cookie-consent-inner { flex-wrap: nowrap; align-items: center; gap: .5rem .7rem; }
    .cookie-consent-text { font-size: .76rem; line-height: 1.35; flex: 1 1 auto; }
    .cookie-consent-btn { width: auto; padding: .45rem .85rem; font-size: .82rem; }
}

.loka-legal-page { max-width: 820px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; color: #2f2a25; }
.loka-legal-top { margin-bottom: 1rem; }
.loka-legal-back { color: #c45a2a; text-decoration: none; font-size: .9rem; font-weight: 600; }
/* underline on hover comes from the global a:hover border-bottom - no text-decoration (avoids a double line) */
.loka-legal-doc h1 { font-size: 1.7rem; margin: .2rem 0 .4rem; }
.loka-legal-doc h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; color: #2f2a25; }
.loka-legal-doc h3 { font-size: .98rem; margin: 1rem 0 .3rem; color: #2f2a25; }
.loka-legal-doc p, .loka-legal-doc li { font-size: .92rem; line-height: 1.6; color: #4a443d; }
.loka-legal-doc ul { padding-left: 1.2rem; }
.loka-legal-doc li { margin: .25rem 0; }
.loka-legal-doc a { color: #c45a2a; }
.loka-legal-meta { font-size: .8rem; color: #9b948c; }
.loka-legal-callout {
    margin: .8rem 0 1.2rem; padding: .7rem .9rem; border-radius: 10px;
    background: #faf6f0; border: 1px solid #e4ddd3; font-size: .9rem; color: #4a443d;
}

/* "O nas" team grid (reuses the .loka-legal-page / .loka-legal-doc shell; mirrors the Glog app). */
.about-team {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: .75rem 0 1.5rem;
}
@media (max-width: 560px) { .about-team { grid-template-columns: 1fr; } }
.about-member {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
.about-portrait {
    flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); border: 1px solid var(--line-strong);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-member-body { min-width: 0; }
.about-member-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); }
.about-member-role { font-size: .9rem; color: var(--ink-mute); margin-bottom: .4rem; }
.about-linkedin {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .9rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.about-linkedin:hover { text-decoration: underline; }

/* "Kaj je novega" - release notes, newest release first (reuses the .loka-legal-page / .loka-legal-doc
   shell; mirrors the Glog app). One card per version; the release the visitor is running gets the accent
   rail + badge. Scoped under .loka-legal-doc so the shell's own h2/h3/li rules don't win. */
.wn-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.2rem; }
.wn-release {
    background: var(--bg-elev); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
    border-radius: var(--radius); padding: 1.1rem 1.3rem;
}
.wn-release.is-current { border-left-color: var(--accent); }
.wn-release-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; }
.loka-legal-doc .wn-version { margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.wn-date { color: var(--ink-mute); font-size: .85rem; }
.wn-badge {
    padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.wn-section { margin-top: .9rem; }
.loka-legal-doc .wn-section-title {
    margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-mute);
}
.loka-legal-doc .wn-items {
    margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem;
}
.loka-legal-doc .wn-items li { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.wn-items strong { color: var(--ink); }

/* ── Map location picker (MapPicker.razor + map-picker.js) ──────────────────────────────────── */
/* "Na zemljevidu" target button sitting beside the k.o. + številka fields (matches .parcel-go height). */
.parcel-pick-btn {
    display: inline-flex; align-items: center; gap: .4rem; align-self: flex-end; height: 2.65rem;
    border: 1px solid #d9cfc1; background: #fff; color: #7a4a1f; border-radius: 10px;
    padding: 0 .75rem; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.parcel-pick-btn:hover { background: #fbf6ef; border-color: #c45a2a; color: #c45a2a; }
.parcel-pick-btn svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .parcel-pick-txt { display: none; } }

/* The modal. */
.mappick-overlay {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(31, 19, 0, .55); backdrop-filter: blur(2px);
}
.mappick {
    display: flex; flex-direction: column; width: min(880px, 100%); max-height: 92vh; overflow: hidden;
    background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.mappick-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem;
    border-bottom: 1px solid #ece4d8; }
.mappick-head h3 { margin: 0; font-size: 1.05rem; color: #2f2a25; }
.mappick-x { width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px;
    font-size: 1.1rem; cursor: pointer; color: #8a7d6c; }
.mappick-x:hover { background: #f3ede3; color: #2f2a25; }

/* z-index 1100 lifts the search bar + its address dropdown above all Leaflet panes/controls
   (tiles 200 … popups 700 … zoom control 1000), which otherwise hide/eat the suggestion list. */
.mappick-search { position: relative; z-index: 1100; padding: .8rem 1.1rem .2rem; }
.mappick-search-ic { position: absolute; left: 1.5rem; top: 1.25rem; width: 18px; height: 18px; color: #b09a82; pointer-events: none; }
.mappick-search-ic svg { width: 18px; height: 18px; }
.mappick-search-input { width: 100%; padding: .6rem .7rem .6rem 2.2rem; border: 1px solid #d9cfc1; border-radius: 10px; font: inherit; }
.mappick-search-input:focus { outline: none; border-color: #c45a2a; box-shadow: 0 0 0 3px rgba(196, 90, 42, .12); }
.mappick-suggest { position: absolute; left: 1.1rem; right: 1.1rem; top: 100%; z-index: 5; margin-top: -.1rem;
    list-style: none; padding: .25rem; background: #fff; border: 1px solid #e2d9cc; border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15); max-height: 240px; overflow: auto; }
.mappick-suggest-opt { padding: .5rem .6rem; border-radius: 7px; cursor: pointer; font-size: .9rem; }
.mappick-suggest-opt:hover { background: #fbf2e8; }
.mappick-suggest-empty { padding: .5rem .6rem; color: #9a8a78; font-size: .85rem; }

.mappick-map-wrap { position: relative; flex: 1 1 auto; min-height: 0; padding: .6rem 1.1rem; }
.mappick-map { width: 100%; height: 56vh; min-height: 300px; overflow: hidden; border-radius: 12px;
    border: 1px solid #e2d9cc; background: #eef1f3; cursor: crosshair; }

/* Full-screen toggle overlaid on the map's top-right corner (Leaflet's zoom control sits top-left). */
.mappick-fs-btn {
    position: absolute; top: 1.1rem; right: 1.6rem; z-index: 1000;
    width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #d9cfc1; border-radius: 8px; cursor: pointer;
    color: #5a5044; font-size: 1.05rem; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.mappick-fs-btn:hover { background: #f7f2ea; color: #2f2a25; }

/* "Zemljevid | Satelit" sheet switch - a MapLibre control at the map's bottom-left, so MapLibre's own
   .maplibregl-ctrl-group supplies the white pill + shadow and these rules only turn its two square icon
   slots into text buttons. Colours are literal, not tokens: the control pill stays white in dark mode
   (dark.css does not restyle MapLibre chrome), so dark ink on white is right in BOTH themes. The
   selector doubles up on the group class because maplibre-gl.css is injected at runtime and would
   otherwise win the tie on source order. */
.mappick-viewsw { display: flex; }
.mappick-viewsw.maplibregl-ctrl-group button {
    width: auto; height: 1.75rem; padding: 0 .6rem; border: 0; background: none; cursor: pointer;
    font: 600 .72rem/1 var(--font-sans); letter-spacing: .02em; color: #5a5044;
}
.mappick-viewsw.maplibregl-ctrl-group button + button { border-left: 1px solid #e4dcc9; }
.mappick-viewsw.maplibregl-ctrl-group button:hover { background: #f2ece2; color: #2f2a25; }
.mappick-viewsw.maplibregl-ctrl-group button.is-on { background: #c45a2a; color: #fff; }

.mappick-readout { padding: .2rem 1.1rem .4rem; min-height: 2.4rem; }
.mappick-result { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.mappick-result-item { display: flex; flex-direction: column; padding: .4rem .7rem; background: #f7f2ea; border-radius: 9px; }
.mappick-result-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #9a8a78; }
.mappick-result-v { font-weight: 700; color: #2f2a25; }
.mappick-empty, .mappick-busy { display: inline-flex; align-items: center; gap: .4rem; color: #8a7d6c; font-size: .9rem; }
.mappick-ok { color: #2e7d32; font-size: .9rem; font-weight: 600; }

.mappick-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .8rem 1.1rem 1rem; border-top: 1px solid #ece4d8; }
.mappick-cancel { border: none; background: #f2ece2; color: #5a5044; }
.mappick-cancel:hover { background: #e8dfd1; }

/* The dropped pin (Leaflet divIcon SVG); accent comes from currentColor. */
.mappick-pin { background: none; border: none; color: #c45a2a; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
/* Force a crosshair over the whole map - MapLibre otherwise sets a "grab" hand cursor (looks un-clickable).
   MapLibre's cursor is an inline style on the canvas container, so !important here wins over it. */
.mappick-map .maplibregl-canvas-container, .mappick-map .maplibregl-canvas { cursor: crosshair !important; }
/* Inline (non-modal) layout - the map is shown straight on the page above the manual form. position +
   z-index:0 give the whole widget its own stacking context, so Leaflet's panes/controls (z-index up to
   1100) stay UNDER the page's sticky header (.lp-header, z-index 20) when the page is scrolled. */
.mappick-root-inline { width: 100%; }
.mappick--inline { position: relative; z-index: 0; width: 100%; max-width: 100%; max-height: none; box-shadow: none;
    border: 1px solid #e2d9cc; border-radius: 14px; }
.mappick--inline .mappick-map { height: 420px; }

/* Full-screen pop-out of the inline picker: the same widget lifted to a fixed, full-viewport overlay
   (z-index 2000 puts it above all page chrome). The map flexes to fill the remaining height. */
.mappick--inline.mappick--fullscreen {
    position: fixed; inset: 0; z-index: 2000; width: 100%; max-width: 100%;
    height: 100vh; height: 100dvh; max-height: none; border: none; border-radius: 0; background: #fff;
}
.mappick--fullscreen .mappick-map { height: 100%; min-height: 0; border-radius: 0; }

/* Merged manual form: KO is its own required group; the Parcela/Stavba selector greys out the disabled group. */
.loka-req { color: #c0392b; font-weight: 700; }

/* Merged manual row: KO + parcelna + stavba + del + BOTH buttons ("Izdelaj poročilo" + "Prenesi PDF
   poročilo") on one line. Fields are tighter so all six items fit one row on desktop; still wraps on narrow. */
.loka-manual-row { gap: .6rem; }
.loka-manual-row .parcel-field { flex: 1 1 92px; min-width: 64px; }
.loka-manual-row .parcel-field:first-child { flex: 1 1 150px; min-width: 110px; }
.loka-manual-row .parcel-go { white-space: nowrap; padding-left: .85rem; padding-right: .85rem; }
@media (max-width: 560px) {
    /* Full-width, easily-tappable action buttons; each on its own line under the wrapped fields. */
    .loka-manual-row .parcel-go-wrap { flex: 1 1 100%; }
    .loka-manual-row .parcel-go { width: 100%; }
}

/* "Dodaj sosednjo (mejno) parcelo" card under a parcel report - one free adjacent plot, its own PDF. */
.loka-secondary {
    margin-top: 1.4rem; padding: 1.1rem 1.25rem;
    background: var(--accent-soft); border: 1px solid var(--line-strong); border-radius: 10px;
}
.loka-secondary-title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.loka-secondary .parcel-note { margin-top: .1rem; }
.loka-secondary .parcel-search { margin-top: .8rem; }

/* "Report downloaded + e-mailed" confirmation shown after a successful download resets the tool. */
.loka-sent-note { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .7rem 1rem;
    background: #e8f5e9; border: 1px solid #bfe2c2; border-radius: 12px; color: #2e5e36; font-size: .92rem; }
.loka-sent-ic { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
    border-radius: 50%; background: #2e7d32; color: #fff; font-size: .85rem; font-weight: 700; }

/* One-time "how it works" explainer modal (shown on the first map pick). */
.loka-modal-overlay { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center;
    justify-content: center; padding: 16px; background: rgba(31, 19, 0, .55); backdrop-filter: blur(2px); }
.loka-modal-card { width: min(420px, 100%); background: #fff; border-radius: 16px; padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35); text-align: center; }
.loka-modal-ic { width: 48px; height: 48px; margin: 0 auto .6rem; display: grid; place-items: center;
    border-radius: 50%; background: #e8f5e9; color: #2e7d32; font-size: 1.5rem; font-weight: 700; }
.loka-modal-ic--warn { background: #fff3e0; color: #c45a2a; }
.loka-modal-card h3 { margin: 0 0 .45rem; color: #2f2a25; font-size: 1.15rem; }
.loka-modal-card p { margin: 0 0 1.1rem; color: #5a5044; font-size: .92rem; line-height: 1.55; text-align: left; }
.loka-modal-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
/* Wider variant for the "Dokupi poizvedbe" buy panel (email + packages); scrolls if tall. */
.loka-buy-modal { position: relative; width: min(640px, 100%); max-height: 88vh; overflow-y: auto; text-align: left; padding-top: 1.3rem; }
.loka-modal-x { position: absolute; top: .55rem; right: .65rem; width: 30px; height: 30px; border: none;
    background: transparent; border-radius: 8px; font-size: 1.05rem; cursor: pointer; color: #8a7d6c; }
.loka-modal-x:hover { background: #f3ede3; color: #2f2a25; }

/* ===== Location-report panels: Podnebje / Naravni dejavniki / Cene / Demografija / Bivanjske razmere =====
   Ported from the Glog app so the standalone report reaches feature parity. */

/* Accordion-header icon */
.parcel-acc-ico { flex: none; color: var(--ink-soft); }

/* climate notes + source footer */
.climate-notes { margin: .6rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.climate-notes li { font-size: .72rem; color: var(--ink-soft); line-height: 1.35; }
.climate-foot { font-size: .64rem; color: var(--ink-mute); margin-top: .5rem; line-height: 1.3; }

/* reusable traffic-light gauge */
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.4rem; margin: .3rem 0 .55rem; }
.gauge { min-width: 0; }
.gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.gauge-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.gauge-val { font-size: .92rem; font-weight: 700; white-space: nowrap; }
.gauge-val small { font-size: .72rem; font-weight: 600; opacity: .85; margin-left: .2rem; }
.gauge-val.tone-good { color: #3d6b4a; }
.gauge-val.tone-warn { color: #9c6c06; }
.gauge-val.tone-bad { color: #b5483f; }
.gauge-track { position: relative; padding: 4px 0; }
.gauge-zones { display: flex; height: 9px; border-radius: 6px; overflow: hidden; background: var(--line); }
.gauge-zone { min-width: 2px; }
.gauge-zone.tone-good { background: rgba(61,107,74,.45); }
.gauge-zone.tone-warn { background: rgba(192,143,38,.5); }
.gauge-zone.tone-bad { background: rgba(181,72,63,.48); }
.gauge-needle { position: absolute; top: 1px; bottom: 1px; width: 2px; background: var(--ink); transform: translateX(-50%); border-radius: 2px; }
.gauge-needle::before {
    content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink);
}
.gauge-scale { display: flex; justify-content: space-between; margin-top: .25rem; font-size: .66rem; color: var(--ink-mute); }
.gauge-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .68rem; color: var(--ink-mute); margin: .15rem 0 .3rem; }
.gauge-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.gauge-legend .tone-good { background: rgba(61,107,74,.6); }
.gauge-legend .tone-warn { background: rgba(192,143,38,.65); }
.gauge-legend .tone-bad { background: rgba(181,72,63,.62); }

/* tone chips for boolean / categorical factors (erozija, plazovi, hrup) */
.hazard-chips { display: flex; flex-direction: column; gap: .45rem; margin: .2rem 0 .55rem; }
.hazard-chip-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.hazard-chip-lbl { font-size: .82rem; font-weight: 600; color: var(--ink-soft); min-width: 5.5rem; }
.hazard-chip-note { font-size: .76rem; color: var(--ink-mute); }
.tone-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .14rem .6rem; border-radius: 999px; }
.tone-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.tone-chip.tone-good { color: #3d6b4a; background: var(--ok-soft); }
.tone-chip.tone-good::before { background: #3d6b4a; }
.tone-chip.tone-warn { color: #9c6c06; background: #fdf3e0; }
.tone-chip.tone-warn::before { background: #c08f26; }
.tone-chip.tone-bad { color: #b5483f; background: #fbe9e6; }
.tone-chip.tone-bad::before { background: #b5483f; }

/* compact price panel (Cene) */
.price-panel { margin: .2rem 0 .9rem; }
.price-panel + .price-panel { border-top: 1px solid var(--line); padding-top: .8rem; }
.price-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .7rem; margin-bottom: .35rem; }
.price-head-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.price-head-val { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.price-head-val small { font-size: .72rem; font-weight: 600; color: var(--ink-mute); margin-left: .35rem; }
.price-head-meta { font-size: .76rem; color: var(--ink-mute); }
.price-trend { display: inline-flex; align-items: center; gap: .25rem; font-size: .82rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.price-trend small { font-size: .62rem; font-weight: 500; opacity: .8; }
.price-trend-arrow { font-size: .66rem; }
.price-trend.is-up { color: #3d6b4a; background: var(--ok-soft); }
.price-trend.is-down { color: #b5483f; background: #fbe9e6; }

/* ═══════════════════ Article CMS (blog) ═══════════════════ */
/* landing header link */
.loka-topnav { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.loka-topnav .lp-link:hover { color: var(--accent); }

/* ---- public server-rendered pages (/clanki, /clanki/{slug}) ---- */
.cms-topbar { border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.cms-topbar-inner { max-width: 60rem; margin: 0 auto; padding: .8rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cms-brand img { height: 30px; display: block; }
.cms-nav { display: flex; gap: 1.2rem; font-size: .9rem; font-weight: 600; }
.cms-nav a { color: var(--ink-soft); text-decoration: none; }
.cms-nav a:hover { color: var(--accent); }
.cms-main { max-width: 62rem; width: 100%; margin: 0 auto; padding: 2.4rem clamp(1.25rem, 4vw, 2rem) 3.5rem; }
.cms-footer { max-width: 60rem; margin: 0 auto; padding: 1.6rem 1.2rem 2.5rem; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: space-between; }
.cms-footer a { color: var(--ink-soft); }

.cms-list-head { margin-bottom: 1.8rem; }
.cms-list h1 { font-family: var(--font-serif); font-size: 2.2rem; margin: 0 0 .3rem; }
.cms-list-lead { color: var(--ink-soft); margin: 0; }
.cms-empty { color: var(--ink-mute); padding: 2rem 0; }
.cms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem; }
.cms-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
.cms-card:hover { border-color: var(--line-strong); box-shadow: 0 3px 14px rgba(0,0,0,.06); }
.cms-card-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.cms-card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.cms-card-body h2 { font-family: var(--font-serif); font-size: 1.15rem; margin: 0; line-height: 1.25; }
.cms-card-body p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.cms-card-body time { font-size: .76rem; color: var(--ink-mute); }

.cms-article-back { margin-bottom: 1rem; font-size: .85rem; }
.cms-article-back a { color: var(--ink-soft); text-decoration: none; }
.cms-article-head h1 { font-family: var(--font-serif); font-size: 2.3rem; line-height: 1.15; margin: 0 0 .5rem; }
.cms-article-meta { display: flex; gap: .8rem; color: var(--ink-mute); font-size: .82rem; margin-bottom: 1rem; }
.cms-article-lead { font-size: 1.1rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 1.4rem; }
.cms-article-cover { width: 100%; border-radius: var(--radius); margin-bottom: 1.6rem; }
.cms-article-body.ql-editor { padding: 0; font-size: 1.05rem; line-height: 1.7; color: var(--ink); font-family: var(--font-sans); }
.cms-article-body.ql-editor h2 { font-family: var(--font-serif); font-size: 1.5rem; margin: 1.8rem 0 .6rem; }
.cms-article-body.ql-editor h3 { font-family: var(--font-serif); font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.cms-article-body.ql-editor p { margin: 0 0 1rem; }
.cms-article-body.ql-editor img { max-width: 100%; height: auto; border-radius: var(--radius); }
.cms-article-body.ql-editor a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.cms-article-body.ql-editor a:hover { text-decoration-thickness: 2px; }
.cms-article-body.ql-editor blockquote { border-left: 3px solid var(--accent); margin: 1.2rem 0; padding: .2rem 0 .2rem 1rem; color: var(--ink-soft); }

/* ---- admin editor (/admin/clanki) ---- */
.cms-error { padding: .6rem .8rem; border-radius: var(--radius); background: #fbe9e6; color: #b5483f; font-size: .88rem; }
.cms-admin-table { width: 100%; border-collapse: collapse; }
.cms-admin-table th, .cms-admin-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cms-admin-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-mute); }
.cms-admin-slug { font-size: .78rem; color: var(--ink-mute); font-family: var(--font-mono, monospace); }
.cms-admin-actions { display: flex; gap: .4rem; justify-content: flex-end; white-space: nowrap; }
.cms-badge { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.cms-badge.is-pub { color: #1f6f54; background: color-mix(in srgb, #1f6f54 14%, transparent); }
.cms-badge.is-draft { color: var(--ink-mute); background: color-mix(in srgb, var(--ink) 8%, transparent); }

.cms-editor { display: grid; grid-template-columns: 1fr 18rem; gap: 1.5rem; align-items: stretch; }
.cms-editor-main { display: flex; flex-direction: column; min-width: 0; }
.cms-editor-side { display: flex; flex-direction: column; gap: 1.2rem; }
.cms-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.1rem; }
/* The body ("Vsebina") field and its Quill editor grow to fill the main column, so the editor matches the
   sidebar's height (align-items: stretch equalises the two grid columns). */
.cms-field-body { flex: 1; margin-bottom: 0; }
.cms-field > span { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.cms-field small { font-weight: 400; color: var(--ink-mute); }
.cms-editor .input { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-elev); font: inherit; color: var(--ink); }
.cms-editor .input:focus { outline: none; border-color: var(--accent); }
.cms-editor-toolbar-extra { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.cms-quill { flex: 1; display: flex; flex-direction: column; min-height: 22rem; background: #fff; }
.cms-quill .ql-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cms-quill .ql-editor { flex: 1; min-height: 20rem; font-size: 1rem; }
.cms-editor-footer { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }
.cms-side-block { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; background: var(--bg-elev); }
.cms-side-title { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .5rem; }
.cms-check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.cms-hint { font-size: .76rem; color: var(--ink-mute); margin: .4rem 0 0; }
.cms-cover-preview { width: 100%; border-radius: var(--radius); margin-bottom: .5rem; }
@media (max-width: 760px) { .cms-editor { grid-template-columns: 1fr; } }

/* ---- list layout + keyword filter + end-of-article CTA ---- */
.cms-article { max-width: 44rem; margin: 0 auto; }
.cms-layout { display: grid; grid-template-columns: 1fr 14rem; gap: 2.2rem; align-items: start; }
.cms-main-col { min-width: 0; }
.cms-sidebar { position: sticky; top: 5.5rem; }
.cms-sidebar-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-mute); margin-bottom: .6rem; }
.cms-tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.cms-tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--ink-soft); background: var(--bg-elev); border: 1px solid var(--line); transition: color .12s, border-color .12s; }
.cms-tag:hover { color: var(--accent); border-color: var(--line-strong); }
.cms-tag.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.cms-article-tags { margin: 0 0 1rem; }
.cms-filter-active { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.cms-filter-active a { color: var(--accent-ink); margin-left: .5rem; }
.cms-article-cta { margin: 2.4rem 0 0; padding: 1.4rem 1.5rem; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), var(--bg-elev)); text-align: center; }
.cms-article-cta p { margin: 0 0 .9rem; font-size: 1.05rem; color: var(--ink); }
.cms-article-cta .btn { text-decoration: none; }
@media (max-width: 720px) { .cms-layout { grid-template-columns: 1fr; } .cms-sidebar { position: static; } }

/* ============================================================================
   THEME SWITCH - small light/dark toggle that lives in the navbar.
   The knob position is driven by data-theme on <html> (set before first paint by
   the inline boot script in the host document), NOT by component state, so it is
   already in the right place on the very first frame. The dark palette itself
   lives in css/dark.css.
   ============================================================================ */
.theme-toggle {
    flex: none; position: relative; display: inline-flex; align-items: center;
    width: 3.1rem; height: 1.7rem; padding: 0 .2rem; margin: 0 .1rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--bg-elev); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle-ico {
    position: relative; z-index: 1; flex: none;
    width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-mute); transition: color .15s;
}
.theme-toggle-ico svg { width: 13px; height: 13px; }
.theme-toggle-ico + .theme-toggle-ico { margin-left: auto; }
.theme-toggle-knob {
    position: absolute; top: 50%; left: .2rem; transform: translateY(-50%);
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: var(--accent); box-shadow: 0 1px 3px rgba(40, 30, 18, .35);
    transition: transform .18s ease;
}
/* whichever icon the knob is parked under is the active one */
.theme-toggle-sun { color: #fff; }
[data-theme="dark"] .theme-toggle-knob { transform: translateY(-50%) translateX(calc(1.4rem - 2px)); }
[data-theme="dark"] .theme-toggle-sun { color: var(--ink-mute); }
[data-theme="dark"] .theme-toggle-moon { color: #1f1b16; }
@media (prefers-reduced-motion: reduce) { .theme-toggle-knob { transition: none; } }

/* ── "AI Analiza OPN" (lokacijsko poročilo): the five building limits + the odlok read for this
      location. Glog.Lokacija copy - keep in sync with Glog.Client/wwwroot/css/app.css. ── */
.opn-ai-params { margin-bottom: 1rem; }
.opn-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .4rem; margin: .3rem 0 .5rem; }
.opn-ai-row { display: flex; align-items: baseline; gap: .4rem; padding: .4rem .6rem; border: 1px solid var(--line, #e5e7eb);
    border-radius: 9px; background: #fff; }
.opn-ai-row.is-missing { background: #fafafa; color: var(--ink-mute, #9ca3af); border-style: dashed; }
.opn-ai-row.is-ai { border-color: #dbeafe; }
.opn-ai-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute, #9ca3af); flex: 1 1 auto; }
.opn-ai-v { font-weight: 700; font-size: .95rem; }
.opn-ai-chip { flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: .08rem .3rem; border-radius: 5px; }
.opn-ai-chip.is-gurs { background: #e6f4e6; color: #2e6b2e; }
.opn-ai-chip.is-ai { background: #e8f0fe; color: #1d4ed8; }
.opn-ai-legend { font-size: .74rem; line-height: 1.45; }
.opn-ai-lead { font-size: .95rem; line-height: 1.55; border-left: 3px solid var(--accent, #2563eb);
    padding: .15rem 0 .15rem .7rem; margin: .2rem 0 .8rem; }
.opn-ai-block { margin: 0 0 .8rem; }
.opn-ai-block-title { font-weight: 700; font-size: .9rem; margin-bottom: .15rem; }
.opn-ai-block-text { margin: 0; font-size: .88rem; line-height: 1.55; white-space: pre-wrap; }
.opn-ai-block-src { font-size: .74rem; color: #6b7280; margin-top: .15rem; }
.opn-ai-block-src a { color: var(--accent-ink); border-bottom-color: currentColor; }
.opn-ai-list { margin: .25rem 0 .8rem; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; }
.opn-ai-list li { margin-bottom: .2rem; }
.opn-ai-list.is-check { list-style: none; padding-left: 0; }
.opn-ai-list.is-check li::before { content: "☐"; margin-right: .4rem; color: var(--accent, #2563eb); }

/* Footer of the section: the acts it was read from, then the informativity note. The markup is SHARED
   with the Glog app (OpnAnalysisSection.razor) but these three classes only ever existed in that app's
   stylesheet, so here the list inherited the body size - bigger than the analysis text above it - and the
   act links ran together with no gap. Both must stay SMALLER than .opn-ai-block-text (.88rem). */
.parcel-rule-srcs { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .76rem;
    color: var(--ink-mute); margin: .35rem 0 0; line-height: 1.45; }
.parcel-rule-srcs-lbl { font-weight: 600; color: var(--ink-mute); }
.parcel-rule-srcs a { color: var(--accent-ink); border-bottom-color: currentColor; }
.parcel-rule-note { font-size: .74rem; line-height: 1.45; color: var(--ink-mute); margin-top: .55rem; }