/* Design tokens (visual pass 2026-09-23). One spacing scale, one type scale, one palette; tools/visual-audit/scale.json mirrors them and the audit reports any value outside them. The same block opens the survey and studio stylesheets (tools/visual-audit/scale.test.mjs keeps them identical). */
:root{--space-0-5:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:20px;--text-xl:24px;--text-2xl:32px;--text-3xl:40px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.65;
--font-sans:Inter,"Segoe UI",system-ui,sans-serif;--font-mono:ui-monospace,Consolas,monospace;
--ink:#231f20;--ink-2:#4a4b4e;--muted:#6b6d70;--primary:#a81d38;--primary-strong:#7a1226;--accent:#d41e46;--surface:#ffffff;--canvas:#f2f2f2;--tint:#fde8e6;--tint-soft:#fff3f5;--line:#e2e2e3;--line-strong:#8a8c90;--success-line:#bfd9c8;
--chart-1:#a81d38;--chart-2:#d9646f;--chart-3:#efc94c;--chart-4:#5f9c7f;--chart-5:#2f7d5a;
--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-full:999px;--control-height:44px;--field-width:35rem;--field-width-short:16rem;--field-width-number:10rem;--measure:70ch;--shadow-card:0 3px 12px #231f2012}
/* End of tokens. */

:root{font-family:var(--font-sans);color:var(--ink);background:var(--canvas);font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{padding:var(--space-6) max(var(--space-6),calc((100% - 1052px)/2));border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--space-5)}a{color:var(--primary)}header a{font-weight:var(--weight-bold);text-decoration:none;color:inherit}header span{font-size:var(--text-xs);letter-spacing:.08em}main{max-width:1100px;margin:var(--space-12) auto;padding:0 var(--space-6)}main>p:not(.eyebrow):not(.notice):not(#status){max-width:var(--measure)}
/* Running text keeps a readable line (about 70 characters) inside any box; the box itself keeps its width. The internal watermark is left as it is. */
main :is(p,li,dd,blockquote){max-width:var(--measure)}main td :is(p,li){max-width:none}
/* Text rhythm: every block keeps the same spacing whatever its font size (browser defaults are in em). */
p,ul,ol,dl,blockquote,figure{margin:var(--space-4) 0}h1,h2,h3,h4{margin:0 0 var(--space-3);line-height:var(--leading-tight)}h1{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-top:var(--space-2);margin-bottom:var(--space-4)}h2{font-size:var(--text-lg);font-weight:var(--weight-semibold)}h3{font-size:var(--text-md);font-weight:var(--weight-semibold);margin-top:var(--space-6)}h4{font-size:var(--text-sm);font-weight:var(--weight-semibold);margin-top:var(--space-4)}ul,ol{padding-left:var(--space-6)}
.eyebrow{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.12em;color:var(--primary);margin:0 0 var(--space-2)}.notice{border-left:3px solid var(--accent);padding:var(--space-3) var(--space-5);background:var(--surface);line-height:var(--leading-relaxed)}section{background:var(--surface);border:1px solid var(--line);padding:var(--space-6);margin:var(--space-6) 0;border-radius:var(--radius-lg)}section:empty{display:none}section>:first-child,article>:first-child,.cards article>:first-child{margin-top:0}section>:last-child{margin-bottom:0}
.row{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap;margin:var(--space-4) 0}label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm)}
/* Controls: one height for fields and buttons (44 px, also the touch target), a field edge that is visible (3:1), widths by what a field holds. */
input,select,button,textarea{font:inherit;font-size:var(--text-sm);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);max-width:100%;min-height:var(--control-height);color:inherit;background:var(--surface)}textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:var(--leading-normal)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{width:var(--field-width)}input[type=date],input[type=datetime-local],input[type=time],input[type=month]{width:var(--field-width-short)}input[type=number]{width:var(--field-width-number)}.row input:not([type=checkbox]):not([type=radio]):not([type=file]),.row select{width:auto;min-width:var(--field-width-number)}.row input[type=search],.row input:not([type]),.row input[type=text]{width:var(--field-width-short)}
button{background:var(--surface);color:var(--ink);cursor:pointer;border-color:var(--line-strong);font-weight:var(--weight-medium);padding:var(--space-2) var(--space-4);line-height:var(--leading-tight)}button.primary{background:var(--primary);color:var(--surface);border-color:transparent;font-weight:var(--weight-semibold)}
/* Three kinds of button and one disabled look: primary (filled brand), secondary (white with a grey edge, visible on a card and on the page), danger (irreversible: pale tint, dark red edge; armed it fills and gains a ring). Disabled (dashed, grey) never borrows a variant's colours. */
button.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}button.danger{background:var(--tint-soft);color:var(--primary-strong);border-color:var(--primary-strong)}button.armed{background:var(--primary-strong);color:var(--surface);border-color:var(--primary-strong);outline:3px solid var(--accent);outline-offset:2px}
button:disabled,button.secondary:disabled,button.danger:disabled{background:transparent;color:var(--muted);border:1px dashed var(--line-strong);cursor:not-allowed;opacity:1}
.confirm-note{display:block;margin:var(--space-2) 0 0;color:var(--primary-strong);font-weight:var(--weight-semibold);font-size:var(--text-sm)}li{padding:var(--space-2) 0}li a{font-weight:var(--weight-semibold)}small{color:var(--muted);margin-left:var(--space-3);font-size:var(--text-sm)}.error{color:var(--primary)}.field-error{margin-left:0;color:var(--primary)}@media(min-width:761px){/* A row of fields lines up at the bottom of its inputs; an error under one field must not lift that field above the others (owner 2026-10-06): it hangs below its input, and the row makes room for it. */.row>label:has(>.field-error){position:relative}.row>label>.field-error{position:absolute;left:0;top:calc(100% + 2px);width:max-content;max-width:min(360px,calc(100vw - 64px));line-height:1.3}.row:has(>label>.field-error){margin-bottom:calc(var(--space-4) + 2.8em);row-gap:calc(var(--space-3) + 2.8em)}}code{overflow-wrap:anywhere;font-family:var(--font-mono)}details{margin-block:var(--space-4)}summary{cursor:pointer;display:flex;align-items:center;gap:var(--space-2);list-style:none}summary::-webkit-details-marker{display:none}summary::before{content:"\25B8";flex:none;width:1em;text-align:center}details[open]>summary::before{content:"\25BE"}#status{min-height:var(--space-6)}#status:empty{min-height:0;margin:0}.notice:empty{display:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:not([type=checkbox]):not([type=radio]):focus,textarea:focus{outline:3px solid var(--accent);outline-offset:3px}input::-webkit-calendar-picker-indicator:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
@media(max-width:600px){header{flex-direction:column}main{margin-top:var(--space-6)}h1{font-size:var(--text-xl)}.row{align-items:stretch;flex-direction:column}.row input:not([type=checkbox]):not([type=radio]),.row select,.row button{width:100%}section{padding:var(--space-4)}summary{min-height:var(--control-height)}.client-card>a,.row>a{display:inline-flex;align-items:center;min-height:var(--control-height)}.portal-brand{min-height:var(--control-height)}}

section>label{margin:var(--space-3) 0}
.report-scope{display:block;min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-6) 0}.report-scope legend{font-weight:var(--weight-semibold);padding:0 var(--space-2)}.report-scope .choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}.scope-units>p{font-size:var(--text-sm);color:var(--muted)}.scope-units label{flex-direction:column;align-items:stretch;margin:var(--space-4) 0}.scope-units select{width:100%}.scope-summary{background:var(--canvas);padding:var(--space-4);border-radius:var(--radius-sm);overflow-wrap:anywhere;font-size:var(--text-sm)}.scope-summary p{margin:var(--space-2) 0}.scope-summary>:last-child{margin-bottom:0}.report-scope [hidden]{display:none}@media(max-width:600px){.report-scope .choice-list{grid-template-columns:1fr}}
/* Actions in running content: a button or action link placed straight into a box (panel, card, list item, cell …) keeps 8 px
   to its neighbours on the same line, when the line wraps and below a field. Until 2026-09-29 only section>button and
   article>button had this, so buttons in any other box touched each other. Flex and grid rows space their children with gap
   and zero the margin (list below; a new flex/grid row that holds buttons belongs in it). Specificity 0, so any specific rule wins. */
:where(*)>:where(button,a.action-link){margin:var(--space-2) var(--space-2) var(--space-2) 0}
:where(*)>:where(a,select,input,textarea,span,small,code,strong,em,output)+:where(button,a.action-link){margin-left:var(--space-2)}
:where(td)>:where(button,a.action-link){margin-top:var(--space-1);margin-bottom:var(--space-1)}
:where(.row,header,fieldset,label,summary,dl,.ika-tabs,.theme-row,.theme-tags,.legend,.portal-brand,.portal-account,.cards,.diff-pair,.report-controls,#personas,
 .app-topbar,.app-crumbs,.app-switch-list,.app-account,.page-heading,.name-row,.segmented,.overview-grid,.dashboard-columns,.record-list li,
 .flow-step,.client-grid,.client-card,.card-top,.sidebar-footer,.app-sidebar,.action-outcome,.dialog-actions,.app-switch,.ui-language,.app-brand)>:where(button,a.action-link){margin:0}article{padding:var(--space-4) 0;border-bottom:1px solid var(--line)}article:last-child{border-bottom:0}fieldset{border:1px solid var(--line);border-radius:var(--radius-md);margin:var(--space-4) 0;padding:var(--space-4);display:flex;gap:var(--space-4);flex-wrap:wrap}fieldset label{flex-direction:row;align-items:center}input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:0;accent-color:var(--primary)}.org-nodes article{display:grid;grid-template-columns:minmax(100px,1fr) minmax(170px,2fr) minmax(170px,2fr) auto;align-items:end;gap:var(--space-3)}.org-nodes input,.org-nodes select{width:100%}nav{line-height:2}select{min-width:0;text-align:start} @media(max-width:760px){.org-nodes article{grid-template-columns:1fr}fieldset{flex-direction:column;gap:var(--space-3)}}

dl{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr);gap:var(--space-3)}dt{font-weight:var(--weight-semibold)}dd{margin:0;overflow-wrap:anywhere}#issued-code:empty{display:none}#issued-code{padding:var(--space-4);background:var(--canvas);margin:var(--space-4) 0;border-radius:var(--radius-md)}#issued-code input{width:100%;font-family:var(--font-mono)}@media(max-width:600px){dl{grid-template-columns:1fr;gap:var(--space-1)}dd{margin-bottom:var(--space-3)}}

.diff-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.diff-pair p{white-space:pre-wrap;overflow-wrap:anywhere}h4{overflow-wrap:anywhere}@media(max-width:600px){.diff-pair{grid-template-columns:1fr}}

.import-mapping{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
label,.row>*{min-width:0;max-width:100%}label select{max-width:100%}
/* Tables: numbers right-aligned in tabular figures (table-numbers.js marks the columns), the header stays in view while a long table scrolls inside its frame. */
.table-scroll{max-width:100%;max-height:80vh;overflow:auto;margin:var(--space-4) 0;border:1px solid var(--line);border-radius:var(--radius-md)}.table-scroll table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.table-scroll th,.table-scroll td{padding:var(--space-3);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.table-scroll tr:last-child>td{border-bottom:0}.table-scroll th{background:var(--canvas);font-weight:var(--weight-semibold);vertical-align:bottom;position:sticky;top:0;z-index:1}.table-scroll .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.table-scroll td:has(>input,>select,>label>input,>label>select){padding-block:var(--space-1)}.table-scroll td input:not([type=checkbox]):not([type=radio]){width:var(--field-width-number)}.table-scroll td select{width:auto}#workspace p{overflow-wrap:anywhere}
.qr{margin:var(--space-3) 0;width:192px;max-width:100%}.qr svg{display:block;width:100%;height:auto}.copy-block{margin:var(--space-2) 0 var(--space-4)}.table-scroll td label{margin:0}.table-scroll td input[type=number]{width:7em}
.suppressed{color:var(--muted);font-style:italic}
/* ADR-0134: a value under the threshold, shown internally on request: tinted and edged so it is never mistaken for a client value. */
td.below-threshold{background:var(--tint-soft);box-shadow:inset 3px 0 0 var(--accent)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}.cards article{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4)}.cards h3{margin:0 0 var(--space-2);font-size:var(--text-md)}.cards .big{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin:var(--space-1) 0}.cards small{display:block;margin-left:0}
/* Distribution bars: a segment label is dark on the light segments and white on the dark ones, so every label reads at 4.5:1. */
.bar{display:flex;width:100%;min-width:160px;height:var(--space-6);border-radius:var(--radius-sm);overflow:hidden;background:var(--canvas)}.bar .seg{display:block;height:100%;font-size:var(--text-xs);line-height:var(--space-6);color:var(--surface);text-align:center;overflow:hidden;white-space:nowrap}.seg-l1,.seg-e0,.seg-e1,.seg-e2,.seg-e3,.seg-e4,.seg-detractors{background:var(--chart-1)}.seg-l2,.seg-e5,.seg-e6{background:var(--chart-2)}.seg-l3,.seg-e7,.seg-e8,.seg-passives{background:var(--chart-3)}.seg-l4,.seg-e9{background:var(--chart-4)}.seg-l5,.seg-e10,.seg-promoters{background:var(--chart-5)}.legend{display:flex;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-xs)}.legend .seg{padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-sm);color:var(--surface)}:is(.bar,.legend) :is(.seg-l2,.seg-e5,.seg-e6,.seg-l3,.seg-e7,.seg-e8,.seg-passives,.seg-l4,.seg-e9){color:var(--ink)}
.scan-preview{max-width:100%;border:1px solid var(--line);margin:var(--space-3) 0}
.theme-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}.theme-tags{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-2) 0}.theme-tags label,article.quote label{display:inline-flex;flex-direction:row;align-items:center;gap:var(--space-2);margin:0;font-size:var(--text-sm)}.theme-tags input{width:auto}article.answer,article.quote{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}article.answer blockquote,article.quote blockquote{margin:0 0 var(--space-2);padding-left:var(--space-3);border-left:4px solid var(--accent)}.quote-editor{margin:var(--space-2) 0;padding:var(--space-3);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-md)}.quote-editor textarea{width:100%}
ul.quotes{list-style:none;padding:0;margin:var(--space-2) 0}ul.quotes li{margin:0 0 var(--space-3);padding:0}ul.quotes blockquote{margin:0 0 var(--space-0-5);padding-left:var(--space-3);border-left:4px solid var(--accent)}ul.quotes small{color:var(--muted);margin-left:0;padding-left:var(--space-4)}
/* Client portal header: the brand, the test mark and the account controls on one line, as the administration topbar has them; its edges line up with the page content. */
#portal [hidden]{display:none}.portal-header{align-items:center;flex-wrap:wrap}.portal-brand{display:flex;align-items:center}.portal-brand img{display:block;height:36px;width:auto}.portal-header>span{margin-right:auto;color:var(--muted);font-size:var(--text-xs)}.portal-account{display:flex;align-items:center;gap:var(--space-3)}.portal-account .ui-language{flex-direction:row;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.portal-account .ui-language span{letter-spacing:0;font-size:inherit;white-space:nowrap}.portal-account select{width:auto}
@media(max-width:600px){.portal-header{flex-direction:row;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4)}.portal-brand img{height:30px}.portal-header>span{order:3;width:100%;margin:0}.portal-account{margin-left:auto;gap:var(--space-2)}/* UX test 2026-10-06 (UX-02): with the test-person menu the account group was wider than a phone and the whole portal scrolled sideways; on a phone the menu takes its own row under the logo, language and Odjava. */.portal-account{display:contents}.portal-account .ui-language{margin-left:auto}.portal-account .persona-switch{order:2;flex-basis:100%}.portal-account .persona-switch-toggle{width:100%}.portal-account .ui-language>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* Tabs (tabs.js): the workspace and the portal share them. The secondary row sits inside a tab and reads as a lighter choice. */
.ika-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--line);margin:var(--space-6) 0 var(--space-4);overflow-x:auto;scrollbar-width:thin}.ika-tabs>.ika-tab{flex:none;min-height:44px;margin:0;padding:var(--space-2) var(--space-4);background:transparent;color:var(--ink-2);border:0;border-bottom:3px solid transparent;border-radius:0;font-weight:var(--weight-medium);white-space:nowrap}.ika-tabs>.ika-tab:hover{background:var(--tint)}.ika-tabs>.ika-tab[aria-selected=true]{color:var(--primary);border-bottom-color:var(--primary);font-weight:var(--weight-semibold)}.ika-tabpanel>label:first-child{margin-bottom:var(--space-4)}.ika-tabpanel>:first-child{margin-top:0}
.ika-tabs.secondary{flex-wrap:wrap;gap:var(--space-2);border-bottom:0;margin:0 0 var(--space-4)}.ika-tabs.secondary>.ika-tab{min-height:36px;padding:var(--space-1) var(--space-4);border:1px solid var(--line-strong);border-radius:999px}.ika-tabs.secondary>.ika-tab[aria-selected=true]{background:var(--tint);border-color:var(--primary)}
/* A card the tab above already names (.tab-card in a tab panel) keeps its heading for screen readers only. */
.ika-tabpanel>.tab-card>h2:first-child,.ika-tabpanel>.tab-card>h3:first-child,.ika-tabpanel>.tab-card>.row:first-child>h2:first-child{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ika-tabpanel>.tab-card>h2:first-child+*,.ika-tabpanel>.tab-card>h3:first-child+*{margin-top:0}

.ika-tabs.secondary>.ika-tab{min-height:44px}#portal details{overflow-wrap:anywhere}

.ika-tabs.secondary>.ika-tab[aria-selected=true]:hover{background:var(--canvas)}
/* ADR-0137: the cohort filters are long lists of short checkbox labels; keep them in compact rows. */
label.checkbox-row{flex-direction:row;align-items:center}label.checkbox-row input{width:auto;margin:0}.filter-groups fieldset{gap:var(--space-2) var(--space-4);align-items:flex-start}.filter-groups fieldset>label.checkbox-row{margin:0;min-height:0}

/* ADR-0132 (dopuna 2026-10-02): the test role menu in the admin topbar and the client portal header; the panel names the rights of the entry under the pointer. */
.persona-switch{position:relative;flex:none}.persona-switch .persona-switch-toggle{margin:0;display:grid;justify-items:start;gap:0;min-height:var(--control-height);padding:var(--space-1) var(--space-8) var(--space-1) var(--space-3);background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-md);text-align:left;position:relative;line-height:1.2;cursor:pointer}.persona-switch-toggle::after{content:"";position:absolute;right:var(--space-3);top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg)}.persona-switch-toggle small{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:var(--weight-semibold)}.persona-switch-toggle strong{font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap}.persona-switch-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:340px;max-width:calc(100vw - 32px);box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 16px 40px #231f2029;padding:var(--space-2)}.persona-switch-panel[hidden]{display:none}.persona-switch-group{margin:var(--space-2) var(--space-2) var(--space-1);font-size:var(--text-xs);letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:var(--weight-bold)}.persona-switch .persona-switch-panel>button{display:flex;align-items:center;width:100%;margin:0;min-height:36px;padding:var(--space-2) var(--space-3);background:none;color:var(--ink);border:0;border-radius:var(--radius-sm);text-align:left;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer}.persona-switch .persona-switch-panel>button:hover,.persona-switch .persona-switch-panel>button:focus-visible{background:var(--tint-soft);color:var(--primary);outline:none}.persona-switch .persona-switch-panel>button[aria-checked=true]{color:var(--primary);font-weight:var(--weight-semibold)}.persona-switch .persona-switch-panel>button[aria-checked=true]::after{content:"✓";margin-left:auto;padding-left:var(--space-3)}.persona-switch-details{margin:var(--space-2) 0 0;padding:var(--space-3);border-top:1px solid var(--line);font-size:var(--text-xs);line-height:1.5;color:var(--ink-2);min-height:3em}
/* Cross-document view transitions (ADR-0141): a page of the administration, the portal or the sign-in hands over to the next one as one short crossfade instead of a blank frame; parts of the shell that are the same in both pages stay still (identical pixels crossfade into themselves). Browsers without support load the page as before. */
@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}.portal-header{view-transition-name:ika-portal-header}::view-transition-group(ika-portal-header){animation:none}::view-transition-old(ika-portal-header),::view-transition-new(ika-portal-header){animation-duration:.15s}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* The portal keeps its scrollbar track drawn too: a page that grows past the window as its blocks arrive would otherwise narrow by the scrollbar and move the centred header and content sideways. */
html:has(>body>.portal-header){overflow-y:scroll}
/* Report pages share the export font and layout; app controls keep the UI font. */
@font-face{font-family:"IKA Report Sans";src:url("/report-fonts/LiberationSans-Regular.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"IKA Report Sans";src:url("/report-fonts/LiberationSans-Bold.ttf") format("truetype");font-weight:700;font-display:block}
.web-report .slide-page{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--line)}
.web-report .slide-page text{font-family:"IKA Report Sans",sans-serif}
/* Past-wave import (ADR-0147): the database question keeps a readable width beside the questionnaire dropdown. */.historical-questions td:nth-child(3){min-width:16em}.historical-questions select{max-width:28em}
/* Unit mapping between waves (owner 2026-10-09): one row per unit, the dropdown takes the remaining width, nothing scrolls sideways. */.unit-map{list-style:none;margin:var(--space-3) 0 var(--space-4);padding:0;border:1px solid var(--line);border-radius:var(--radius-md);max-height:70vh;overflow-y:auto;overflow-x:hidden}.unit-map>li{max-width:none;display:grid;grid-template-columns:minmax(0,2fr) auto minmax(0,3fr);gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line)}.unit-map>li:last-child{border-bottom:0}.unit-map>li[hidden]{display:none}.unit-map-name{display:flex;flex-direction:column;min-width:0}.unit-map-name strong{font-weight:var(--weight-semibold);overflow-wrap:anywhere}.unit-map-name small{color:var(--muted);font-size:var(--text-xs);overflow-wrap:anywhere}.unit-map-arrow{color:var(--muted)}.unit-map-pick{display:flex;align-items:center;gap:var(--space-3);min-width:0}.unit-map-pick label{flex:1;min-width:0;margin:0}.unit-map-pick select{width:100%;min-width:0;max-width:100%}.unit-map-source{flex:none;width:9em;font-size:var(--text-xs);color:var(--muted)}.unit-map-source.none{color:var(--primary-strong);font-weight:var(--weight-semibold)}.unit-map-source.manual{color:var(--ink)}.unit-map-tools{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.unit-map-tools input[type=search]{width:min(100%,var(--field-width))}@media(max-width:720px){.unit-map>li{grid-template-columns:minmax(0,1fr)}.unit-map-arrow{display:none}.unit-map-pick{flex-wrap:wrap;gap:var(--space-1) var(--space-3)}.unit-map-pick label{flex:1 1 100%}.unit-map-source{width:auto}}
/* ADR-0175 (meeting 2026-10-21 T12): a merged unit lists several earlier units, each in its own dropdown; SELECTIO's table can fill them. */.unit-map-pick{flex-wrap:wrap}.unit-map-selects{flex:1 1 16em;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}.unit-map-earlier{display:flex;align-items:center;gap:var(--space-2);min-width:0}.unit-map-earlier label{flex:1;min-width:0;margin:0}.unit-map-earlier select{width:100%;min-width:0;max-width:100%}.ika-app .unit-map-pick button.secondary,.unit-map-pick button.secondary{flex:none;min-height:32px;padding:2px var(--space-2);font-size:var(--text-xs)}.unit-map-paste{margin:var(--space-3) 0}.unit-map-paste textarea{width:100%;max-width:100%;font-family:var(--font-mono,monospace);font-size:var(--text-xs)}
/* Upitnici, second attempt (owner 2026-10-20, board P2-upitnici): the client's questionnaires as a list of links in two groups and a new questionnaire on its own view. Bound to #workspace so the shell's element rules (.ika-app section, button) do not reshape it; the note tones are the editor's (apps/questionnaire-preview/studio.css). */
:root{--info-bg:#e8f1f8;--info-line:#bcd4e6;--info-ink:#1f4f73;--ok-bg:#e8f3ec;--ok-ink:#256b4c}
#workspace .q-library{display:flex;flex-direction:column;gap:var(--space-5)}#workspace .q-library h1{margin:0}#workspace .q-library .lead{margin:var(--space-1) 0 0;color:var(--ink-2);max-width:var(--measure)}
#workspace .q-library-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}#workspace .q-library-head>.action-link{margin:0}
#workspace .q-library-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
#workspace .q-library-controls input[type=search]{flex:0 1 22rem;min-width:12rem}
#workspace .q-library .segmented{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
#workspace .q-library .segmented button{margin:0;border:0;border-radius:0;background:var(--surface);color:var(--ink-2);font-weight:var(--weight-medium);min-height:40px;padding:var(--space-1) var(--space-4)}
#workspace .q-library .segmented button+button{border-left:1px solid var(--line-strong)}
#workspace .q-library .segmented button[aria-checked=true]{background:var(--ink);color:var(--surface)}
/* On a phone the views wrap instead of squeezing a word apart (Izvještaji at 390 px, 2026-10-21). */
@media(max-width:600px){#workspace .q-library .segmented{display:flex;flex-wrap:wrap}#workspace .q-library .segmented button{flex:1 1 auto;white-space:nowrap;padding:var(--space-1) var(--space-3)}}
#workspace .q-library .check{display:inline-flex;flex-direction:row;align-items:center;gap:var(--space-2);min-height:var(--control-height);font-weight:var(--weight-regular);color:var(--ink)}#workspace .q-library .check input{accent-color:var(--ink);width:18px;height:18px;min-height:0}
#workspace .q-library-groups{display:flex;flex-direction:column;gap:var(--space-5)}
#workspace .q-group{border:0;padding:0;margin:0;box-shadow:none;background:none;display:flex;flex-direction:column;gap:var(--space-2)}#workspace .q-group h2{margin:0;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#workspace .q-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
#workspace .q-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);padding:var(--space-4) var(--space-5);color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
#workspace .q-item:first-child{border-top:0}#workspace .q-item:hover{background:var(--canvas);color:var(--ink)}#workspace .q-item:focus-visible{outline-offset:-3px}
#workspace .q-item-name{flex:3 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}#workspace .q-item-title{font-weight:var(--weight-semibold);overflow-wrap:anywhere}
#workspace .q-item-sub{font-size:var(--text-xs);color:var(--muted)}
#workspace .q-item-state{flex:2 1 200px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1)}
#workspace .q-item-meta{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:var(--text-sm)}#workspace .q-item-label{font-size:var(--text-xs);color:var(--muted)}
#workspace .q-item-arrow{flex:none;color:var(--line-strong);font-size:var(--text-lg)}
#workspace .q-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--weight-semibold);padding:2px var(--space-3);border-radius:var(--radius-full);background:var(--canvas);color:var(--ink-2)}
#workspace .q-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
#workspace .q-chip.in_review{background:var(--info-bg);color:var(--info-ink)}#workspace .q-chip.approved,#workspace .q-chip.published{background:var(--ok-bg);color:var(--ok-ink)}
#workspace .q-empty{margin:0;padding:var(--space-4) var(--space-5);color:var(--muted);font-size:var(--text-sm)}
#workspace .q-note{margin:0;font-size:var(--text-sm);color:var(--muted)}
#workspace .q-new{max-width:780px;margin:0 auto;width:100%}#workspace .q-new .back-link{font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;align-self:flex-start}
#workspace .q-form{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
#workspace .q-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);min-width:0}#workspace .q-form legend{font-size:var(--text-lg);font-weight:var(--weight-semibold);padding:0;margin-bottom:var(--space-3);color:var(--ink)}
#workspace .q-option{display:flex;gap:var(--space-3);align-items:flex-start;border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-4);font-weight:var(--weight-regular);color:var(--ink)}#workspace .q-option.chosen{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
#workspace .q-option input{accent-color:var(--ink);width:18px;height:18px;min-height:0;margin-top:3px}#workspace .q-option>span{display:flex;flex-direction:column;gap:var(--space-1)}
#workspace .q-field{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:var(--space-2);font-weight:var(--weight-semibold);color:var(--ink);margin:0}#workspace .q-field select,#workspace .q-field input{width:100%;max-width:var(--field-width)}
#workspace .q-form p{margin:0}
#workspace .q-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);border-top:1px solid var(--line);padding-top:var(--space-4)}#workspace .q-actions>*{margin:0}
@media(max-width:600px){#workspace .q-item{padding:var(--space-3) var(--space-4)}#workspace .q-item-arrow{display:none}#workspace .q-library-controls input[type=search]{flex:1 1 100%}#workspace .q-form{padding:var(--space-4)}}
/* UX review 2026-10-21 (redesign plan, phase 1): the reason beside a control that cannot be used (admin-ui withReason), and the parts
   of the redesigned questionnaire start page for the other screens (record-ui.js): record head and state, the way to the goal with
   one next step, task tiles and a checklist. Bound to #workspace like the Upitnici list, so the shell's element rules do not reshape
   them; the tones are those of the questionnaire editor (apps/questionnaire-preview/studio.css). */
:root{--warn-bg:#fdf3dc;--warn-ink:#7a4a00}
:is(#workspace,#portal,.person-dialog) .lock-reason{display:block;margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--ink-2);max-width:42rem;font-weight:var(--weight-regular)}
:is(#workspace,#portal) :is(.row,.buttons,.rec-buttons,.q-actions)>.lock-reason{flex-basis:100%;margin-top:0}:is(#workspace,#portal) .q-actions>.lock-reason{text-align:right;max-width:none}
:is(#workspace,#portal) .lock-reason.block{padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);font-size:var(--text-sm)}
#workspace .rec-page{display:flex;flex-direction:column;gap:var(--space-5);width:100%;padding-bottom:var(--space-10)}
#workspace .rec-head{display:flex;flex-direction:column;gap:var(--space-1)}#workspace .rec-head p{margin:0}
#workspace .rec-back{display:inline-flex;align-items:center;gap:var(--space-1);min-height:32px;font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;align-self:flex-start}
#workspace .rec-title-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}#workspace .rec-title-line h1{margin:0}
#workspace .rec-title-line .rec-head-actions{margin-left:auto;display:flex;gap:var(--space-2);flex-wrap:wrap}#workspace .rec-head-actions>*{margin:0}
#workspace .rec-meta{font-size:var(--text-sm);color:var(--muted)}
#workspace .rec-lead{color:var(--ink-2);max-width:var(--measure)}
#workspace .rec-pill{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-full);padding:2px var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--ink-2);white-space:nowrap}
#workspace .rec-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
#workspace .rec-pill.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}#workspace .rec-pill.info::before{background:var(--info-ink)}
#workspace .rec-pill.ok{background:var(--ok-bg);border-color:var(--success-line);color:var(--ok-ink)}#workspace .rec-pill.ok::before{background:var(--ok-ink)}
#workspace .rec-pill.warn{background:var(--warn-bg);border-color:#f0d9a8;color:var(--warn-ink)}#workspace .rec-pill.warn::before{background:var(--warn-ink)}
#workspace .rec-pill.now{background:var(--tint-soft);border-color:var(--tint);color:var(--primary-strong)}#workspace .rec-pill.now::before{background:var(--primary)}
#workspace .rec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);min-width:0;margin:0;box-shadow:none}
#workspace .rec-card>h2,#workspace .rec-card>h3{margin:0}#workspace .rec-card>p{margin:0}
#workspace .rec-kicker{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#workspace .rec-path{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:var(--space-6)}
#workspace .rec-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--stages,4),minmax(96px,1fr));gap:var(--space-3);flex:999 1 520px;align-self:flex-start;max-width:none}
#workspace .rec-stage{display:flex;flex-direction:column;gap:var(--space-1);border-top:4px solid var(--line);padding:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--muted);max-width:none}
#workspace .rec-stage strong{font-weight:var(--weight-semibold)}#workspace .rec-stage small{margin:0;font-size:var(--text-xs);color:inherit}
#workspace .rec-stage.done{border-top-color:var(--ok-ink);color:var(--ink)}#workspace .rec-stage.now{border-top-color:var(--primary);color:var(--ink)}
#workspace .rec-next{flex:1 1 280px;display:flex;flex-direction:column;gap:var(--space-2);padding-left:var(--space-6);border-left:1px solid var(--line)}#workspace .rec-next p{margin:0;font-size:var(--text-sm)}
#workspace .rec-buttons{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}#workspace .rec-buttons>*{margin:0}
#workspace .rec-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,30%,420px);gap:var(--space-5);align-items:start}#workspace .rec-grid>*{min-width:0}
#workspace .rec-aside{display:flex;flex-direction:column;gap:var(--space-5);position:sticky;top:var(--space-4)}
#workspace .rec-main{display:flex;flex-direction:column;gap:var(--space-5)}
#workspace .rec-tasks{display:flex;flex-direction:column;gap:var(--space-3);border:0;padding:0;margin:0;background:none;box-shadow:none;border-radius:0}#workspace .rec-tasks>h2{margin:0}
#workspace .rec-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
#workspace .rec-tile{display:flex;flex-direction:column;gap:var(--space-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);color:var(--ink);text-decoration:none;min-height:140px}
#workspace a.rec-tile:hover{border-color:var(--line-strong);color:var(--ink)}#workspace a.rec-tile:focus-visible{outline-offset:2px}
#workspace .rec-tile.locked{background:var(--canvas)}
#workspace .rec-tile-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}#workspace .rec-tile-top span:last-child{color:var(--muted)}
#workspace .rec-tile-title{font-size:var(--text-md);font-weight:var(--weight-semibold)}#workspace .rec-tile-text{font-size:var(--text-sm);color:var(--ink-2)}
#workspace .rec-tile-line{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--ink)}#workspace .rec-tile-text+.rec-tile-line{margin-top:auto}
#workspace .rec-tile-line .dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
#workspace .rec-tile-line.warn{color:var(--warn-ink)}#workspace .rec-tile-line.warn .dot{background:var(--warn-ink)}#workspace .rec-tile-line.ok .dot{background:var(--ok-ink)}#workspace .rec-tile-line.block{color:var(--primary-strong)}#workspace .rec-tile-line.block .dot{background:var(--primary)}
#workspace .rec-checks h2{font-size:var(--text-lg)}
#workspace .rec-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-width:none}
#workspace .rec-check{display:flex;align-items:flex-start;gap:var(--space-3);border-top:1px solid var(--line);padding:var(--space-3) 0;font-size:var(--text-sm);max-width:none}
#workspace .rec-check-words{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:0}#workspace .rec-check-words a{font-weight:var(--weight-medium)}
#workspace .rec-check-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-weight:var(--weight-bold);flex:none;font-size:var(--text-sm)}
#workspace .rec-check.ok .rec-check-mark{background:var(--ok-bg);color:var(--ok-ink)}#workspace .rec-check.block .rec-check-mark{background:var(--tint);color:var(--primary-strong)}#workspace .rec-check.warn .rec-check-mark{background:var(--warn-bg);color:var(--warn-ink)}
#workspace .rec-muted{color:var(--muted);font-size:var(--text-sm)}
#workspace .rec-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#workspace .rec-history{list-style:none;margin:0;padding:0;max-width:none}#workspace .rec-history li{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);border-top:1px solid var(--line);padding:var(--space-2) 0;font-size:var(--text-sm);max-width:none}#workspace .rec-history li span:first-child{color:var(--muted);min-width:9rem}
/* Organisation as a tree (UX review 2026-10-21, phase 8): depth indents a unit under its parent, read or edited. */
#workspace .org-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-width:none}#workspace ul.org-tree li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);padding:var(--space-2) 0 var(--space-2) calc(var(--depth,0)*var(--space-6));border-top:1px solid var(--line);max-width:none}#workspace ul.org-tree li small{font-size:var(--text-xs)}#workspace .org-row{display:grid;grid-template-columns:minmax(120px,2fr) minmax(90px,1fr) minmax(120px,1.5fr) 13rem;gap:var(--space-2) var(--space-3);align-items:end;padding:var(--space-3) 0 var(--space-3) calc(var(--depth,0)*var(--space-6));border-top:1px solid var(--line)}#workspace .org-row label{min-width:0}#workspace .org-row input,#workspace .org-row select{width:100%;min-width:0}#workspace .org-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}#workspace .org-actions>*{margin:0}#workspace .org-actions button{white-space:nowrap}#workspace .org-actions .lock-reason{flex-basis:100%}#workspace .org-changes{margin:0;padding-left:var(--space-5);font-size:var(--text-sm)}#workspace .org-row label.bare{font-size:0;gap:0}#workspace .org-head{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--muted);border-top:0;padding-top:0;padding-bottom:var(--space-1)}
@media(max-width:760px){#workspace .org-row{grid-template-columns:1fr;padding-left:calc(var(--depth,0)*var(--space-3))}#workspace .org-head{display:none}#workspace .org-row label.bare{font-size:var(--text-sm);gap:var(--space-2)}}
#workspace .rec-todos{list-style:none;margin:0;padding:0;max-width:none}#workspace .rec-todo{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2) var(--space-4);border-top:1px solid var(--line);padding:var(--space-3) 0;max-width:none}#workspace .rec-todo-words{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1 1 240px}#workspace .rec-todo-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3)}#workspace .rec-todo-title{font-weight:var(--weight-semibold);color:var(--ink);text-decoration:none}#workspace a.rec-todo-title:hover{text-decoration:underline}#workspace .rec-todo>.action-link{margin:0}
#workspace .rec-facts li{display:grid;grid-template-columns:minmax(8rem,13rem) minmax(0,1fr);gap:var(--space-1) var(--space-4)}#workspace .rec-facts li span:first-child{min-width:0}
@media(max-width:1000px){#workspace .rec-grid{grid-template-columns:minmax(0,1fr)}#workspace .rec-aside{position:static}#workspace .rec-grid.aside-first .rec-aside{order:-1}}
@media(max-width:600px){#workspace .rec-card{padding:var(--space-4)}#workspace .rec-next{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:var(--space-4)}#workspace .rec-stages{grid-template-columns:repeat(2,minmax(0,1fr))}#workspace .rec-facts li{grid-template-columns:minmax(0,1fr)}}
/* Pristupi (UX review 2026-10-21, phase 9): the changes of a person listed before they are saved. */
.change-preview p{margin:var(--space-3) 0 var(--space-1);font-weight:var(--weight-semibold);font-size:var(--text-sm)}.change-preview ul{margin:0 0 var(--space-3);padding-left:var(--space-5);font-size:var(--text-sm)}
/* Pregled audita (UX review 2026-10-21, phase 10): a long identifier wraps inside its cell instead of widening the table; words do not. */
#workspace .audit-table td.audit-id{overflow-wrap:anywhere;min-width:10rem}
/* Owner 2026-10-22: the units of a person (Pristupi, also in Dodaj osobu) are a tree under the version, not a flex row: the generic
   fieldset row put the tree beside a stretched "Ukloni ovaj obuhvat" and left the list bullets apart from their checkboxes. */
fieldset.org-scope{flex-direction:column;align-items:stretch;gap:var(--space-3)}fieldset.org-scope>button{align-self:flex-start}fieldset.org-scope ul{list-style:none;margin:0;padding-left:var(--space-5)}fieldset.org-scope>div>ul{padding-left:0}fieldset.org-scope li{margin:var(--space-1) 0}fieldset.org-scope .org-scope-row{display:flex;align-items:center;gap:var(--space-1)}fieldset.org-scope .org-scope-row>label{margin:0}fieldset.org-scope .org-scope-toggle{flex:0 0 2rem;width:2rem;min-height:2rem;padding:0;border:0;background:transparent;color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:var(--radius-sm)}fieldset.org-scope button.org-scope-toggle:hover{background:var(--tint-soft)}fieldset.org-scope button.org-scope-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}