/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */
:root{
  /* VITTAFLOW: interface tones derived from the supplied logo, not an official brand manual. */
  --header:#0B0B0C;--ink:#18181B;--muted:#52525B;--faint:#71717A;
  --line:#D4D4D8;--line-soft:#E4E4E7;--bg:#F5F5F6;--surface:#FFFFFF;--surface-2:#FAFAFA;
  --brand-bright:#FF2436;--accent:#C4162B;--accent-hover:#A61022;--accent-soft:#FFF1F2;
  --success:#166534;--success-soft:#F0FDF4;--success-line:#BBF7D0;
  --amber:#92400E;--amber-soft:#FFFBEB;--amber-line:#FDE68A;
  --rose:#9F1239;--rose-soft:#FFF1F2;--rose-line:#FECDD3;
  --header-text:#FAFAFA;--header-muted:#D4D4D8;--header-line:#3F3F46;
  --chart:#3F3F46;--chart-muted:#71717A;--chart-guide:#A1A1AA;
  --slate-soft:var(--line-soft);
  --font-display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",monospace;
  --fs-body:16px;--fs-small:14px;--fs-label:14px;--fs-h1:clamp(24px,3vw,32px);
  --fs-h2:24px;--fs-h3:20px;--fs-stat:clamp(28px,3vw,40px);--leading:1.6;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;
  --r-card:12px;--r-ctl:8px;--r-small:4px;--container:1240px;--gutter:24px;
  --shadow:0 2px 8px rgb(24 24 27 / 4%);--shadow-dialog:0 24px 64px rgb(0 0 0 / 24%);
  --focus:var(--accent);--focus-soft:rgb(196 22 43 / 14%);
  --duration:200ms;--duration-exit:120ms;--ease-enter:ease-out;--ease-exit:ease-in;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-padding-block:var(--s6)}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--leading);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);line-height:1.3;margin:0;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0;text-wrap:pretty}
a{color:var(--ink);text-underline-offset:var(--s1)}
button,input,select,textarea{font:inherit}
button,a,select,input[type="radio"]{cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:var(--s1)}
button:disabled{cursor:wait;opacity:.6}
.topbar{background:var(--header);color:var(--header-text);border-bottom:1px solid var(--header-line)}
.topbar-inner{max-width:var(--container);margin-inline:auto;padding:var(--s6) var(--gutter);display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s6);min-width:0}
.company-logo{display:block;width:224px;max-width:100%;height:auto;flex:none}
.brand-copy{border-left:1px solid var(--header-line);padding-left:var(--s6);max-width:25ch;--od-gap:var(--s1)}
.brand-name{font-family:var(--font-display);font-size:var(--fs-body);font-weight:700;line-height:1.3}
.brand-sub{font-size:var(--fs-small);color:var(--header-muted);line-height:1.5}
.topbar-actions{margin-left:auto;display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.topbar .field-label{color:var(--header-muted)}
.topbar input{background:var(--surface);color:var(--ink)}
.topbar .btn-ghost{background:transparent;color:var(--header-text);border-color:var(--header-line)}
.topbar :focus-visible{outline-color:var(--header-text)}
.field-label{font-size:var(--fs-label);font-weight:600;color:var(--muted);display:block;margin-bottom:var(--s1)}
select,input[type="text"],input[type="month"],textarea{display:block;max-width:100%;min-width:0;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s3);min-height:var(--s12);font-size:var(--fs-body)}
select:focus,input:focus,textarea:focus{border-color:var(--ink);outline:3px solid var(--focus-soft);outline-offset:1px}
textarea{resize:vertical;line-height:var(--leading)}
.btn{border:1px solid transparent;border-radius:var(--r-ctl);padding:var(--s3) var(--s4);min-height:var(--s12);font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);justify-content:center;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--surface)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-soft{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-sm{min-height:44px;padding:var(--s2) var(--s3);font-size:var(--fs-small)}
.btn:active:not(:disabled),.icon-btn:active{transform:translateY(1px)}
.layout{max-width:var(--container);margin-inline:auto;padding:var(--s6) var(--gutter) var(--s12)}
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap;padding-bottom:var(--s6);margin-bottom:var(--s2);border-bottom:1px solid var(--line)}
.tab{display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;border-radius:var(--r-ctl);padding:var(--s3) var(--s4);min-height:var(--s12);font:inherit;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.tab:focus-visible{outline-color:var(--accent)}
.panel{display:none}
.panel.active{display:block;animation:panel-enter var(--duration) var(--ease-enter)}
@keyframes panel-enter{from{opacity:0;transform:translateY(var(--s1))}to{opacity:1;transform:translateY(0)}}
.card{min-width:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow)}
.card-pad{padding:var(--s6)}
.section-title{font-size:var(--fs-h3);letter-spacing:-.02em}
.muted{color:var(--muted)}.small{font-size:var(--fs-small);line-height:1.6}
.survey-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s8);flex-wrap:wrap}
.survey-heading>.od-fill{flex:1 1 480px}
.survey-heading p{margin-top:var(--s3);max-width:70ch}
.progress-block{flex:0 1 240px;min-width:0;width:100%}
.progress-block>.od-row{justify-content:space-between;margin-bottom:var(--s2)}
.progress-caption{font-size:var(--fs-small);font-weight:600;color:var(--muted);white-space:nowrap}
.progress-count{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink);font-weight:600;white-space:nowrap}
.progress{display:block;height:var(--s2);background:var(--line-soft);border-radius:var(--r-small);overflow:hidden}
.progress>div{display:block;height:100%;background:var(--ink);width:0%}
.templates-title{margin:var(--s8) 0 var(--s4);font-size:var(--fs-body);letter-spacing:0}
.template-rail{--od-gap:var(--s3);--od-rail-pad:var(--s1);display:flex;gap:var(--s3);overflow-x:auto;padding:var(--s1) var(--s1) var(--s3);scrollbar-width:thin;scroll-snap-type:x proximity;scroll-padding-inline:var(--s1)}
.tpl{display:flex;flex-direction:column;gap:var(--s2);flex:1 0 256px;min-width:0;max-width:100%;scroll-snap-align:start;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-ctl);padding:var(--s4);cursor:pointer;text-align:left;color:var(--ink)}
.tpl[aria-pressed="true"]{border-color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.tpl h3{font-size:var(--fs-body);letter-spacing:-.015em;overflow-wrap:anywhere}
.tpl p{font-size:var(--fs-small);color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.tpl>.badge{align-self:flex-start}
.template-state{display:block;margin-top:auto;padding-top:var(--s2);font-size:var(--fs-small);font-weight:650}
.tpl[aria-pressed="true"] .template-state::before{content:"✓";margin-right:var(--s2)}
.badge{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-small);font-weight:600;line-height:1.5;border-radius:var(--r-small);padding:var(--s1) var(--s2);border:1px solid var(--line-soft);background:var(--surface-2);color:var(--muted)}
.badge-teal{background:var(--success-soft);border-color:var(--success-line);color:var(--success)}
.badge-amber{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.badge-rose{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.eyebrow{display:block;font-size:var(--fs-small);font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
#answerForm{margin-top:var(--s4)}
.q{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:var(--s8);border-top:1px solid var(--line-soft);padding:var(--s6) 0;scroll-margin-block:var(--s6)}
.question-heading{--od-gap:var(--s2)}
.question-answer{--od-gap:var(--s2);min-width:0}
.q-label{font-weight:650;display:block;line-height:1.6;overflow-wrap:anywhere}
.q-label .small{display:block;font-size:var(--fs-small);font-weight:400}
.req{color:var(--rose);font-weight:700}
.q-help{font-size:var(--fs-small);color:var(--muted);display:block;line-height:1.6;max-width:55ch}
.scale-row,.nps-grid{display:flex;gap:var(--s2);flex-wrap:wrap}
.scale-btn{display:flex;align-items:center;justify-content:center;flex:0 0 44px;min-width:44px;min-height:var(--s12);border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:var(--fs-body);font-weight:650;cursor:pointer}
.scale-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.question-answer>[role="radiogroup"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.radio-card{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s3);cursor:pointer;background:var(--surface);min-height:var(--s12)}
.radio-card>span{display:block;overflow-wrap:anywhere}
.radio-card:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.radio-card input{display:block;flex:none;width:20px;height:20px;margin:var(--s1) 0 0;accent-color:var(--ink)}
.err{color:var(--rose);font-size:var(--fs-small);font-weight:600;display:none;line-height:1.6}
.q.invalid .err{display:block}
.q.invalid textarea{border-color:var(--rose)}
.q.invalid .q-label{color:var(--rose)}
.form-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:var(--s6)}
.form-status{font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--s4)}
.form-status a{display:inline-flex;min-height:44px;align-items:center;margin-right:var(--s3);color:var(--rose)}
.kpis{display:grid;gap:var(--s4);grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s6)}
.kpi{min-width:0;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-ctl);padding:var(--s4);--od-gap:var(--s2)}
.kpi-num{font-family:var(--font-display);font-size:var(--fs-stat);font-variant-numeric:tabular-nums;font-weight:700;line-height:1.2;letter-spacing:-.04em;white-space:nowrap}
.kpi-cap{font-size:var(--fs-small);color:var(--muted);font-weight:500;display:block}
.kpi-delta{font-size:var(--fs-small);font-weight:600;display:block}
.up{color:var(--success)}.down{color:var(--rose)}
.grid-2{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.grid-2b{display:grid;gap:var(--s6);grid-template-columns:repeat(2,minmax(0,1fr))}
#panel-metricas>.od-stack,#panel-criar .od-stack{--od-gap:var(--s6)}
#panel-criar>.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
#panel-metricas .section-title{margin-bottom:var(--s2)}
.bar-row{display:grid;grid-template-columns:minmax(104px,1fr) minmax(64px,1fr) max-content;gap:var(--s3);align-items:center;margin:var(--s4) 0;font-size:var(--fs-small)}
.bar-row>span{overflow-wrap:anywhere}
.bar-track{display:block;height:var(--s2);background:var(--line-soft);border-radius:var(--r-small);overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--chart);border-radius:var(--r-small)}
#distBars{margin-top:var(--s6)}
#distBars .bar-row{grid-template-columns:minmax(0,1fr) max-content;margin:var(--s2) 0 var(--s4)}
#distBars .bar-row>span:first-child{display:none}
#bySurvey .bar-row>span{white-space:normal;overflow:visible;text-overflow:clip}
.dot{display:inline-block;width:var(--s2);height:var(--s2);border-radius:50%;margin-right:var(--s2)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
th,td{text-align:left;padding:var(--s4) var(--s3);border-bottom:1px solid var(--line-soft);vertical-align:middle}
th{font-size:var(--fs-small);font-weight:600;color:var(--muted);background:var(--surface-2)}
td{overflow-wrap:anywhere}
.table-panel{margin-top:var(--s6);min-width:0}
#respRows td:first-child{min-width:144px}
#respRows td:last-child{text-align:right}
.rowbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;padding:var(--s2) var(--s3);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-ctl);padding:var(--s2) var(--s3);min-height:44px;font-weight:600;cursor:pointer;font-size:var(--fs-small);color:var(--ink);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.toolbar{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:end;margin-bottom:var(--s6)}
.toolbar>.grow{flex:1 1 240px;min-width:0}
.toolbar>div{flex:1 1 200px;min-width:0}
.toolbar select{width:100%}
dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:0;max-width:calc(100vw - var(--s8));width:640px;max-height:calc(100dvh - var(--s8));box-shadow:var(--shadow-dialog)}
dialog[open]{display:flex;flex-direction:column;animation:panel-enter var(--duration) var(--ease-enter)}
dialog::backdrop{background:rgb(11 11 12 / 64%)}
.sheet-head{padding:var(--s6);border-bottom:1px solid var(--line-soft);display:flex;gap:var(--s4);align-items:flex-start;flex:none}
.sheet-head .badge{display:block;width:fit-content;overflow-wrap:anywhere}
.sheet-head h3{overflow-wrap:anywhere}
.sheet-body{padding:var(--s6);overflow-y:auto;min-height:0;overflow-wrap:anywhere}
.sheet-foot{padding:var(--s4) var(--s6);border-top:1px solid var(--line-soft);display:flex;gap:var(--s3);justify-content:flex-end;flex-wrap:wrap;flex:none}
.toast{position:fixed;left:50%;bottom:max(var(--s6),env(safe-area-inset-bottom));transform:translateX(-50%) translateY(var(--s2));background:var(--ink);color:var(--surface);border-radius:var(--r-ctl);padding:var(--s3) var(--s4);font-weight:600;opacity:0;pointer-events:none;transition:opacity var(--duration-exit) var(--ease-exit),transform var(--duration-exit) var(--ease-exit);z-index:60;width:max-content;max-width:calc(100vw - var(--s8));box-shadow:var(--shadow-dialog)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);transition-duration:var(--duration);transition-timing-function:var(--ease-enter)}
.builder-q{border:1px solid var(--line-soft);border-radius:var(--r-ctl);padding:var(--s4);background:var(--surface-2);margin-bottom:var(--s4)}
.builder-grid{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;align-items:end}
.builder-grid>div{min-width:0}
.builder-grid>div:first-child{grid-column:1/-1}
.builder-grid select{width:100%}
.icon-btn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;min-height:var(--s12);border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:var(--fs-h2);line-height:1}
.empty{border:1px dashed var(--line);border-radius:var(--r-ctl);padding:var(--s8);text-align:center;color:var(--muted);background:var(--surface-2)}
.skeleton{border-radius:var(--r-ctl);background:var(--line-soft);min-height:var(--s4)}
.export-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
.export-card{min-width:0;display:flex;align-items:flex-start;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--r-ctl);padding:var(--s4);background:var(--surface);text-align:left}
.export-card h3{font-size:var(--fs-body);margin:var(--s3) 0 var(--s2)}
.export-card p{font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--s4)}
.export-card .btn{margin-top:auto}
.evo-svg{width:100%;height:auto;display:block;margin:var(--s4) 0}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-small);color:var(--muted)}
.survey-list-row{border:1px solid var(--line-soft);border-radius:var(--r-ctl);padding:var(--s3);background:var(--surface)}
.survey-list-row .od-field{--od-gap:var(--s1);overflow-wrap:anywhere}
.dataset-note{padding:var(--s6) 0 0;color:var(--muted);font-size:var(--fs-small);max-width:75ch}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:var(--s4);top:var(--s4);z-index:100;background:var(--surface);padding:var(--s3) var(--s4);border-radius:var(--r-ctl)}
@media(hover:hover){
  .btn-primary:hover:not(:disabled){background:var(--accent-hover)}
  .btn-ghost:hover,.btn-soft:hover,.rowbtn:hover,.icon-btn:hover{background:var(--surface-2);border-color:var(--ink);color:var(--ink)}
  .topbar .btn-ghost:hover{background:var(--header-line);color:var(--header-text);border-color:var(--header-muted)}
  .tab:hover:not([aria-selected="true"]),.chip:hover:not([aria-pressed="true"]){background:var(--line-soft);color:var(--ink)}
  .tpl:hover{border-color:var(--ink)}
  .scale-btn:hover:not([aria-pressed="true"]),.radio-card:hover{border-color:var(--ink);background:var(--surface-2)}
  tbody tr:hover{background:var(--surface-2)}
  a:hover{color:var(--accent-hover)}
}
@media(min-width:1440px){.card-pad{padding:var(--s8)}.layout{padding-top:var(--s8)}}
@media(max-width:1024px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2,.grid-2b,#panel-criar>.grid-2{grid-template-columns:minmax(0,1fr)}
  .topbar-actions{margin-left:0}
  .topbar-inner{justify-content:space-between}
  .brand-copy{max-width:23ch}
  .q{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s6)}
  #panel-criar .export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  :root{--gutter:16px}
  .topbar-inner{padding-block:var(--s4)}
  .topbar-actions{width:100%;justify-content:space-between}
  .brand-copy{max-width:none}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .tab{padding:var(--s3) var(--s2);font-size:var(--fs-small)}
  .card-pad{padding:var(--s6)}
  .q{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .survey-heading{gap:var(--s6)}
  .progress-block{flex-basis:100%;max-width:320px}
  .template-rail{--od-rail-pad:var(--s1)}
  .tpl{flex:0 0 256px}
  .kpis{gap:var(--s3)}
  .toolbar{gap:var(--s3)}
  #aggBox>.od-grid{grid-template-columns:minmax(0,1fr)}
  #indBox table,#indBox tbody{display:block;width:100%}
  #indBox thead{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
  #respRows tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);padding:var(--s4);margin-bottom:var(--s3);border:1px solid var(--line-soft);border-radius:var(--r-ctl);background:var(--surface)}
  #respRows td{display:block;padding:0;border:0;min-width:0}
  #respRows td:first-child,#respRows td:nth-child(2),#respRows td:last-child{grid-column:1/-1}
  #respRows td:last-child{text-align:left}
  #respRows td[data-label]::before{content:attr(data-label);display:block;margin-bottom:var(--s1);font-size:var(--fs-small);font-weight:500;color:var(--muted)}
  #respRows .rowbtn{width:100%}
  #respRows td:nth-child(5){white-space:nowrap}
}
@media(max-width:480px){
  .brand{width:100%;justify-content:space-between;gap:var(--s3)}
  .company-logo{width:192px}
  .brand-copy{padding-left:var(--s3);flex:1;max-width:120px}
  .brand-sub{font-size:var(--fs-small)}
  .topbar-actions{align-items:flex-end;gap:var(--s3)}
  .topbar-actions>div:first-child{flex:1 1 160px}
  .topbar-actions>div:last-child{flex:1 1 150px}
  .topbar-actions input,.topbar-actions .btn{width:100%}
  .topbar-actions .field-label[aria-hidden]{display:none}
  .layout{padding-top:var(--s4);padding-bottom:var(--s8)}
  .card-pad{padding:var(--s4)}
  .question-answer>[role="radiogroup"]{grid-template-columns:minmax(0,1fr)}
  .kpi{padding:var(--s3)}
  .kpi-delta{overflow-wrap:anywhere}
  .bar-row{grid-template-columns:minmax(0,1fr) max-content;gap:var(--s2)}
  .bar-row>span:first-child{grid-column:1/-1}
  #panel-criar .export-grid{grid-template-columns:minmax(0,1fr)}
  .sheet-head,.sheet-body{padding:var(--s4)}
  .sheet-foot{padding:var(--s4)}
}
@media(max-width:374px){.brand{flex-wrap:wrap}.brand-copy{max-width:none}.tabs{grid-template-columns:minmax(0,1fr)}.kpis{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* ---------- superfície pública de resposta (/r/:id) ---------- */
.pub-layout{max-width:880px;margin-inline:auto;padding:var(--s8) var(--gutter) var(--s12)}
.pub-ok{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--success-soft);border:1px solid var(--success-line);margin-bottom:var(--s4)}
.pub-meta{display:flex;flex-direction:column;gap:var(--s2);width:100%;border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.pub-meta>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.pub-meta .mono{font-family:var(--font-mono);font-size:var(--fs-small);font-weight:600}
.pub-note{color:var(--muted);font-size:var(--fs-small);margin-top:var(--s4);max-width:70ch}
.pub-ident{margin-top:var(--s6);max-width:420px}
.topbar .badge{background:transparent;border-color:var(--header-line);color:var(--header-muted)}

/* ---------- módulo de link público (aba Criar) ---------- */
.share-row{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;margin-top:var(--s3)}
.share-row>div{flex:1 1 320px;min-width:0}
.share-row input{width:100%;font-family:var(--font-mono);font-size:var(--fs-small)}
.share-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s4)}
.share-stats>div{display:grid;gap:var(--s1)}
.share-stats strong{font-family:var(--font-display);font-size:var(--fs-h3);letter-spacing:-.03em}
@media(max-width:480px){.share-stats{grid-template-columns:minmax(0,1fr)}}