/* ---------------- author design ----------------
   One design system with the respondent: only the tokens defined at the top of app.css (palette, type
   scale, spacing, radii, shadow, font). Structure follows the Qualtrics captures (icon rail, "Editar
   pregunta" panel, toolbar row, WYSIWYG cards, data table, export dialog); the finish (charcoal buttons,
   light grey surfaces, lilac selection) follows the Typeform builder. */
body.author { background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--text-sm); line-height: 1.45; -webkit-font-smoothing: antialiased; }
.author h1, .author h2, .author h3 { font-family: var(--font); color: var(--ink); letter-spacing: -.01em; margin: 0; }
.author h1 { font-size: var(--text-lg); font-weight: 600; }
.author h2 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-4); }
.author h3 { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-3); }
.author p { margin: 0 0 var(--space-3); }
.author .rhow { margin: 0 0 var(--space-2) var(--space-6); }
.author .rhow > summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-2); }
.author .rhow > .qnote { margin-top: var(--space-1); max-width: 70ch; }
.author .qnote { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.author a { color: var(--link); text-decoration: none; }
.author a:hover { text-decoration: underline; text-underline-offset: 2px; }
.author .spacer { flex: 1; }
.author :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* controls: the same buttons, inputs, chips and cards on every screen */
.author .btn, .author .mini, .author .plink, .author .menu-item { font-family: var(--font); cursor: pointer; }
.author .btn { min-height: 36px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); color: var(--ink);
  font-size: var(--text-sm); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; transition: background-color .15s, border-color .15s; }
.author .btn:hover { background: var(--surface); border-color: var(--chrome-2); text-decoration: none; }
.author .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.author .btn.primary:hover { background: var(--chrome); border-color: var(--chrome); }
.author .btn.ghost { background: transparent; border-color: transparent; color: var(--link); }
.author .btn.ghost:hover { background: var(--surface); }
.author .btn.danger, .author .menu-item.danger { color: var(--bad); }
.author .btn.small { min-height: 30px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.author .btn:disabled, .author .mini:disabled { opacity: 1; background: var(--tile); border-color: var(--line); color: var(--ink-2); cursor: not-allowed; }
.author .btn.primary:disabled { background: var(--tile); border-color: var(--line); color: var(--ink-2); }
.author .mini { min-width: 28px; min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); color: var(--ink-2); font-size: var(--text-sm); display: inline-flex; align-items: center; justify-content: center; }
.author .mini:hover { background: var(--tile); }
.author .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-xs); }
.author input[type=text], .author input[type=number], .author input[type=search], .author input[type=date], .author input:not([type]), .author select, .author textarea, .author .text {
  min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); background: var(--page); color: var(--ink); font-size: var(--text-sm); max-width: 100%; }
.author textarea { min-height: 5rem; line-height: 1.45; width: 100%; }
.author input:focus, .author select:focus, .author textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--select); }
.author input[type=checkbox], .author input[type=radio] { width: 1rem; height: 1rem; accent-color: var(--accent); }
.author input[type=file] { width: 100%; font-size: var(--text-sm); color: var(--muted); }
.author input[type=file]::file-selector-button { margin-right: var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); color: var(--ink); font: inherit; cursor: pointer; }
.author hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--space-4) 0; }
.author .field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--space-3); }
.author .field.inline { flex-direction: row; align-items: center; gap: var(--space-2); }
.author .status-pill, .author .chip { display: inline-flex; align-items: center; white-space: nowrap; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--tile); color: var(--ink-2); }
.author .status-pill.pub { background: color-mix(in srgb, var(--ok) 14%, var(--page)); color: var(--ok); }
.author .warnings { border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 9%, var(--page)); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--page)); color: var(--warn); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.author .warnings a { text-decoration: underline; }
.author .modal summary { min-height: 24px; cursor: pointer; }
.author .toast { border-radius: var(--radius); background: var(--chrome); color: var(--accent-ink); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow); font-size: var(--text-sm); }
.author .toast.bad { background: var(--bad); }
.author .ico { width: 20px; height: 20px; flex: none; }
.author ::-webkit-scrollbar { width: 10px; height: 10px; }
.author ::-webkit-scrollbar-thumb { background: var(--tile-hover); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; }

/* page chrome: title row, main tabs, toolbar row */
.builder #app { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); height: 100vh; height: 100dvh; }
.author .topbar { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-2) var(--space-6); background: var(--page); border-bottom: 1px solid var(--line-soft); }
.author .topbar .back-label { margin-left: var(--space-1); }
.author .topbar .back { white-space: nowrap; font-weight: 500; display: inline-flex; align-items: center; min-height: 36px; }
.author .topbar input.title-input { flex: 1 1 18rem; max-width: 34rem; border-color: transparent; background: transparent; font-size: var(--text-lg); font-weight: 600; }
@media (hover: hover) { .author .topbar input.title-input:hover { background: var(--surface); } }
.author .topbar input.title-input { text-overflow: ellipsis; }
.author .topbar input.title-input:focus { background: var(--page); border-color: var(--link); }
/* The owner's brand icon next to the app name (T95). */
.author .brand-logo { display: block; flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; margin-right: var(--space-2); }
.author .login-brand .brand-logo { width: 52px; height: 52px; margin-right: 0; }
.author .tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-6); background: var(--page); border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.author .tab { position: relative; padding: var(--space-3) var(--space-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; }
.author .tab:hover { color: var(--ink); }
.author .tab[aria-selected=true] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.author .toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-6); background: var(--page); border-bottom: 1px solid var(--line-soft); }
.author .toolbar .saved { color: var(--muted); font-size: var(--text-sm); }
.author .menu-wrap { position: relative; display: inline-block; }
.author .menu, .author .pop { position: absolute; z-index: 30; top: calc(100% + var(--space-1)); left: 0; min-width: 14rem; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-2); }
.author .pop.right { left: auto; right: 0; }
.author .menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--text-sm); color: var(--ink); min-height: 36px; }
.author .menu-item:hover { background: var(--surface); }
.author .pop-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 16rem; max-height: 50vh; overflow: auto; }

/* studio: icon rail, side panel, canvas */
.author .studio { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
.author .studio > .workspace { grid-column: 2; }
.author .rail { display: flex; flex-direction: column; gap: var(--space-1); width: 88px; padding: var(--space-3) var(--space-2); background: var(--page); border-right: 1px solid var(--line-soft); overflow-y: auto; }
.author .rail-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 56px; border: 0; border-radius: var(--radius); background: none; color: var(--ink-2); cursor: pointer; font-size: var(--text-xs); padding: var(--space-2) 0; }
.author .rail-btn:hover { background: var(--surface); }
.author .rail-btn.on { background: var(--select); color: var(--ink); }
.author .rail-label { line-height: 1.1; }
.author .workspace { position: relative; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); min-height: 0; min-width: 0; }
.author .workspace.single { grid-template-columns: minmax(0, 1fr); }
.author .workspace.collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.author .workspace.collapsed > .side { padding: 0; border: 0; overflow: hidden; visibility: hidden; }
.author .side { background: var(--page); border-right: 1px solid var(--line-soft); overflow-y: auto; padding: var(--space-6) var(--space-6) var(--space-12); }
.author .side h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.author .pal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.author .pal .card { display: block; padding: 0; text-align: left; font: inherit; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--page); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.author .pal .card:hover { border-color: var(--chrome-2); }
.author .pal .card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.author .pal .card .sample { display: block; height: 70px; padding: 10px 12px; font-size: 13px; line-height: 1.3; }
.author .pal .card .sample .line { display: block; font-weight: 600; }
.author .pal .card .sample i { display: inline-block; width: 30px; height: 12px; border-radius: 3px; margin: 8px 6px 0 0; }
.author .pal .card .sample b { display: inline-block; width: 30px; height: 12px; border-radius: 3px; margin-top: 8px; }
.author .pal .card .name { display: block; padding: 8px 12px; font-size: var(--text-sm); font-weight: 600; border-top: 1px solid var(--line-soft); }
.author .pal .card.on .name::after { content: ' ✓'; }
.author .field input[type=color] { width: 56px; height: 36px; padding: 2px; }
.author .panel-toggle { position: absolute; z-index: 6; top: var(--space-4); left: calc(380px - 14px); width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--page); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); }
.author .workspace.collapsed > .panel-toggle { left: var(--space-2); }
.author .panel-toggle .ico { width: 16px; height: 16px; }
.author .canvas { position: relative; overflow-y: auto; min-width: 0; padding: var(--space-6) var(--space-8) var(--space-12); background: var(--canvas); }
.author .stack { max-width: 920px; margin: 0 auto; }
.author .stack.narrow { max-width: 680px; margin: 0; }
.author .workspace.single .canvas > .stack { max-width: 1040px; }

/* side panel sections */
.author .psec { border-top: 1px solid var(--line-soft); padding: var(--space-3) 0; }
.author .psec > summary { cursor: pointer; font-size: var(--text-md); font-weight: 600; list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.author .psec > summary::-webkit-details-marker { display: none; }
.author .psec > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--ink-2); transition: transform .15s; }
.author .psec:not([open]) > summary::before { transform: rotate(-90deg); }
.author .psec-body { padding-top: var(--space-3); }
.author .psec { scroll-margin-top: 4.5rem; }
.author .psec-index { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-1); margin-bottom: var(--space-2); }
.author .psec-index .mini { padding: 2px 7px; font-size: var(--text-xs); flex: none; }
.author .psec-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 var(--space-3); }
.author .psec-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.author .plink { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: none; color: var(--link); font-size: var(--text-sm); min-height: 36px; padding: 0; text-align: left; }
.author .plink:hover { text-decoration: underline; }
.author .plink.on { font-weight: 600; }
.author .choice-editor { display: flex; flex-direction: column; gap: var(--space-2); }
.author .choice-line { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem auto; gap: var(--space-2); align-items: center; }
.author .choice-line input { min-width: 0; }
.author .choice-flags { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-2); }
.author .opt-nav { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; background: none; padding: var(--space-3) var(--space-3); border-radius: var(--radius); cursor: pointer; margin-bottom: var(--space-1); }
.author .opt-nav strong { display: block; font-size: var(--text-md); font-weight: 500; color: var(--ink); }
.author .opt-nav span { display: block; font-size: var(--text-sm); color: var(--muted); }
.author .opt-nav:hover { background: var(--surface); }
.author .opt-nav.on { background: var(--select); border-left-color: var(--accent); }
.author .opt-sec { padding: var(--space-6) 0; border-bottom: 1px solid var(--line-soft); }
.author .opt-sec:last-child { border-bottom: 0; }
.author .opt-sec h3 { font-size: var(--text-lg); }

/* blocks and WYSIWYG question cards */
.author .block-card { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-4); box-shadow: var(--shadow); }
.author .block-card.sel { border-color: var(--link); }
.author .block-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.author .block-head input { flex: 1 1 24rem; min-width: 8rem; border-color: transparent; background: transparent; font-weight: 600; font-size: var(--text-md); }
.author .block-head input:hover { background: var(--surface); }
.author .block-head input:focus { background: var(--page); }
.author .block-actions { display: contents; }
.author .block-meta { color: var(--muted); font-size: var(--text-xs); }
.author .block-card > .qnote { margin: var(--space-3) var(--space-4) 0; }
.author .qcard { position: relative; margin: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--page); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.author .qcard:hover { border-color: var(--line); background: var(--canvas); }
.author .qcard.sel { border: 2px solid var(--accent); padding: calc(var(--space-4) - 1px) calc(var(--space-6) - 1px) calc(var(--space-4) - 1px) calc(var(--space-4) - 1px); background: var(--page); cursor: default; box-shadow: 0 0 0 3px var(--select); }
.author .qhead { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); min-height: 28px; }
.author .qcheck { width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--page); flex: none; }
.author .qcheck.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.author .qcheck .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.author .qtag { font-weight: 600; color: var(--ink-2); font-size: var(--text-sm); }
.author .qtype { color: var(--muted); font-size: var(--text-xs); flex: 1; }
.author .qmore { border: 0; background: none; color: var(--ink-2); border-radius: var(--radius); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.author .qmore:hover { background: var(--tile); }
.author .qtools { display: none; position: absolute; right: var(--space-3); top: calc(var(--space-4) + 34px); z-index: 5; gap: var(--space-1); padding: var(--space-1); background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.author .qcard .qtools, .author .qcard:hover .qtools, .author .qcard.sel .qtools { display: none; }
.author .qcard .qtools.open { display: flex; }
.author .qtext { font-size: var(--text-lg); font-weight: 500; line-height: 1.35; margin-bottom: var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.author .qtext.empty, .author [contenteditable][data-placeholder]:empty::before { color: var(--muted); }
.author [contenteditable][data-placeholder]:empty::before { content: attr(data-placeholder); }
.author [contenteditable] { outline: none; border-radius: var(--radius); }
.author [contenteditable]:hover { background: var(--surface); }
.author [contenteditable]:focus { background: var(--select); }
.author .qtext[contenteditable] { padding: var(--space-1) var(--space-2); margin-left: calc(var(--space-2) * -1); }
.author .qnote-w { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.author .wbody { color: var(--ink); }
.author .wbody input, .author .wbody select, .author .wbody textarea, .author .wbody button { pointer-events: none; }
.author .wbody input[type=text], .author .wbody input[type=number], .author .wbody input[type=date], .author .wbody input[type=password], .author .wbody textarea, .author .wbody select { width: min(100%, 34rem); }
.author .wchoices { display: flex; flex-direction: column; gap: var(--space-2); }
.author .wchoices.wh { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.author .wchoices.wcol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.author .wchoice { display: flex; align-items: center; gap: var(--space-3); min-height: 32px; }
.author .wchoice .wlabel { flex: 1; min-width: 0; padding: var(--space-1) var(--space-2); font-size: var(--text-md); overflow-wrap: anywhere; }
.author .wchoice .wtext { width: 12rem; }
.author .wform, .author .wslider { flex-wrap: wrap; }
.author .wform .wlabel, .author .wslider .wlabel { flex: 0 0 12rem; }
.author .wslider input[type=range] { width: min(100%, 22rem); }
.author .wstars { color: var(--chrome-2); font-size: var(--text-xl); letter-spacing: .15em; }
.author .wscroll { overflow-x: auto; }
.author .wmatrix { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.author .wmatrix th, .author .wmatrix td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-soft); text-align: center; font-weight: 400; }
.author .wmatrix th:first-child { text-align: left; font-weight: 500; }
.author .wscale { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.author .wstep { min-width: 36px; height: 36px; padding: 0 var(--space-2); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); }
/* Final gate T1: the end labels share the width of the buttons they name, so each sits under its own end. */
.author .wscalebox { width: fit-content; max-width: 100%; }
.author .wends { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-2); }
.author .wrank { background: var(--surface); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.author .wgrip { color: var(--muted); }
.author .wnote { color: var(--muted); }
.author .wlist { margin: 0; padding-left: var(--space-6); color: var(--ink-2); }
.author .wimg { max-width: 100%; border-radius: var(--radius); }
.author .badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.author .badge { font-size: var(--text-xs); background: var(--tile); color: var(--ink-2); border-radius: var(--radius-pill); padding: 2px var(--space-3); }
.author .add-row { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4) var(--space-4); }
.author .add-row.center { justify-content: center; padding: 0 0 var(--space-4); }
.author .pagebreak { text-align: center; color: var(--muted); font-size: var(--text-xs); border-top: 1px dashed var(--line); margin: var(--space-2) var(--space-4); padding-top: var(--space-1); }
.author .end-card { padding: var(--space-4); }
.author .end-title { font-weight: 600; margin-bottom: var(--space-2); color: var(--ink-2); }
.author .trash-row { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-soft); }

/* type picker */
.author .type-picker { position: fixed; z-index: 40; width: min(760px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; display: block; padding: var(--space-4); background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.author .tp-head { margin-bottom: var(--space-3); }
.author .tp-head input { width: 100%; }
.author .tp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.author .type-picker .fam { font-size: var(--text-sm); font-weight: 600; color: var(--ink); padding: var(--space-2) 0; text-transform: none; }
.author .type-picker button { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; border: 0; background: none; padding: var(--space-2); border-radius: var(--radius); cursor: pointer; font-size: var(--text-sm); color: var(--ink); min-height: 40px; }
.author .type-picker button:hover, .author .type-picker button:focus { background: var(--surface); outline: none; }
.author .tile { width: 28px; height: 28px; flex: none; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--tile); color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
.author .tile::before { content: attr(data-code); }
.author .tile-1 { background: var(--select); }
.author .tile-2 { background: var(--tile-hover); }

/* modal */
.author .modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: color-mix(in srgb, var(--chrome) 45%, transparent); }
.author .modal { width: min(920px, calc(100vw - 24px)); max-height: 88vh; overflow-y: auto; padding: var(--space-6); background: var(--page); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.author .modal h2 { font-size: var(--text-lg); }
.author .modal .nav { display: flex; justify-content: space-between; margin-top: var(--space-4); }
.author .json { white-space: pre-wrap; font-size: var(--text-xs); }

/* flow, quotas, translations, logic editors */
.author .flow-el { border: 1px solid var(--line); border-left: 4px solid var(--chrome-2); border-radius: var(--radius); background: var(--page); margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); }
.author .flow-el.k-randomizer, .author .flow-el.k-group { border-left-color: var(--link); }
.author .flow-el.k-end { border-left-color: var(--bad); }
.author .flow-el.k-embedded { border-left-color: var(--ok); }
.author .flow-el.k-branch { border-left-color: var(--warn); }
.author .flow-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.author .flow-kind { font-weight: 600; }
.author .flow-kids { margin-left: var(--space-6); }
.author .flow-tools { margin-left: auto; display: flex; gap: var(--space-1); flex-wrap: wrap; }
.author .cond-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-2); padding: var(--space-2); background: var(--surface); border-radius: var(--radius); }
.author .create-card, .author .result-q { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-4); margin-bottom: var(--space-4); }
.author .kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); }
.author table.grid { border-collapse: collapse; width: 100%; background: var(--page); font-size: var(--text-sm); }
.author table.grid th, .author table.grid td { padding: var(--space-3); border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.author table.grid thead th { color: var(--muted); font-size: var(--text-xs); font-weight: 600; background: var(--surface); }
.author .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--page); margin-bottom: var(--space-4); max-width: 100%; }
.author .preview-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--page); height: 74vh; width: 100%; }
.author .preview-frame.phone { width: 390px; max-width: 100%; height: 760px; border: 10px solid var(--chrome); border-radius: var(--radius-lg); }

/* data table (b1102) and export dialog (b1103) */
.author .data-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.author .data-layout.with-export { grid-template-columns: minmax(0, 1fr) 340px; }
.author .data-main { min-width: 0; }
.author .data-head, .author .results .page-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-soft); }
.author .data-head h2, .author .results .page-head h2 { margin: 0; }
.author .results .page-head .qnote { margin: 0; }
.author .page-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.author .page-actions .field { margin: 0; }
.author .last-record { color: var(--ink-2); font-size: var(--text-sm); }
.author .data-controls { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.author .data-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin-left: auto; }
.author .pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex: 1 1 auto; }
.author .pager input[type=number] { width: 4rem; text-align: center; }
.author .pager-of { color: var(--ink-2); }
.author .bulk { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--select); border-radius: var(--radius); }
.author .data-wrap { margin-bottom: var(--space-4); }
.author table.data-table { min-width: 100%; width: max-content; }
.author table.data-table thead th { vertical-align: bottom; max-width: 16rem; min-width: 9rem; color: var(--ink-2); font-size: var(--text-sm); }
.author table.data-table thead th.qh span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.author table.data-table th.cb, .author table.data-table td.cb { width: 44px; min-width: 44px; text-align: center; vertical-align: middle; }
.author table.data-table td { vertical-align: middle; max-width: 16rem; overflow-wrap: anywhere; }
.author table.data-table td.date, .author table.data-table th.date { text-align: center; white-space: nowrap; background: var(--canvas); min-width: 8rem; }
.author table.data-table .clock { color: var(--muted); }
.author table.data-table td.ans { text-align: center; }
.author table.data-table .chip { margin: 2px; background: var(--tile); color: var(--ink); font-weight: 500; font-size: var(--text-sm); white-space: normal; text-align: left; }
.author table.data-table .rowmenu { width: 48px; text-align: center; }
.author .data-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--muted); }
.author .data-empty p { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.author .empty-mark { width: 64px; height: 64px; margin: 0 auto var(--space-4); color: var(--tile-hover); }
.author .empty-mark .ico { width: 64px; height: 64px; stroke-width: 1.2; }
.author .export-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--chrome) 45%, transparent); }
.author .export-dialog { width: min(780px, calc(100vw - 32px)); max-height: 90dvh; display: flex; flex-direction: column; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.author .export-dialog h2 { padding: var(--space-6); margin: 0; border-bottom: 1px solid var(--line-soft); }
.author .export-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); overflow: visible; flex: none; margin: var(--space-2) var(--space-6) 0; border-bottom: 1px solid var(--line); }
.author .export-tabs .tab { padding: var(--space-3); margin-bottom: -1px; }
.author .export-body h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.author .export-body > p { color: var(--ink-2); line-height: 1.55; }
.author .more-options { margin-top: var(--space-4); }
.author .more-options > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); color: var(--ink); font-weight: 500; cursor: pointer; list-style: none; }
.author .more-options > summary::-webkit-details-marker { display: none; }
.author .more-options > summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.author .more-options[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.author .more-options > summary:hover { background: var(--surface); border-color: var(--chrome-2); }
.author .more-options[open] > summary { margin-bottom: var(--space-3); }
.author .export-body { padding: var(--space-6); overflow-y: auto; }
.author .export-body fieldset { border: 0; padding: 0; margin: var(--space-4) 0; }
.author .export-body legend { padding: 0; margin-bottom: var(--space-2); font-weight: 600; }
.author .export-footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line-soft); }
@media (max-width: 800px) { .author .export-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; } }
.author .dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.author .fmt-list { list-style: none; margin: var(--space-3) 0; padding: 0; }
.author .fmt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.author .fmt p { margin: 0; font-size: var(--text-xs); }
.author .missing-codes { background: var(--surface); border-radius: var(--radius); padding: var(--space-3); font-size: var(--text-xs); color: var(--ink-2); }
.author .import-link { font-size: var(--text-sm); }

/* results */
.author .stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.author .stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--page); border: 1px solid var(--line); }
.author .stat strong { font-size: var(--text-2xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.author .stat span { color: var(--muted); font-size: var(--text-sm); }
.author .stat.lead strong { color: var(--link); }
.author .rq-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.author .rq-head h3 { margin: 0; }
.author .rq-title { font-size: var(--text-md); font-weight: 600; }
.author .rq-sub { margin: var(--space-4) 0 var(--space-1); font-weight: 600; }
.author .cohort-head { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) 0 var(--space-4); }
.author .cohort-head h3 { margin: 0; font-size: var(--text-lg); }
.author .bar-row { display: grid; grid-template-columns: minmax(8rem, 32%) 1fr 8.5rem; gap: var(--space-3); align-items: center; margin: var(--space-2) 0; }
.author .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author .bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--tile); overflow: hidden; }
.author .bar-row .bar { height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
.author .bar-value { white-space: nowrap; text-align: right; color: var(--muted); font-size: var(--text-sm); }
.author .bar-value strong { color: var(--ink); }
.author .metric-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline; margin: var(--space-2) 0; }
.author .metric-value { font-size: var(--text-2xl); font-weight: 600; line-height: 1; }
.author .metric-caption { color: var(--muted); }
.author .kv-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); }
.author .text-answers { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.author .text-answers li { padding: var(--space-3); border-radius: var(--radius); background: var(--surface); }
.author .grid.responses td { white-space: nowrap; }

/* project list */
.author:not(.builder) .wrap { max-width: 1120px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); }
.author:not(.builder) .wrap > h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.author:not(.builder) .wrap > h2:not(:first-child) { margin-top: var(--space-12); }
.author .create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; }
.author .create-card { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.author .create-card h3 { margin: 0; }
.author .create-card p { margin: 0; color: var(--muted); }
.author .create-card > .btn, .author .create-card > select { align-self: flex-start; }
.author .create-card > .btn { margin-top: auto; }
.author .create-card textarea { min-height: 7rem; font-size: var(--text-xs); background: var(--surface); }
.author .create-card select { width: 100%; }
.author .proj-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.author .proj-table th { color: var(--muted); font-size: var(--text-xs); font-weight: 600; background: var(--surface); text-align: left; }
.author .proj-table th, .author .proj-table td { padding: var(--space-4); border-bottom: 1px solid var(--line-soft); text-align: left; }
.author .proj-table tbody tr:last-child td { border-bottom: 0; }
.author .proj-table tbody tr:hover { background: var(--canvas); }
.author .proj-table td:first-child a { font-weight: 600; color: var(--ink); }
.author .proj-table td:first-child a:hover { color: var(--link); }
.author .proj-table td:last-child > * { margin-right: var(--space-2); }
.author .proj-scroll { overflow-x: auto; }

/* login (same tokens, same controls) */
body.author.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }
.author .login-card { width: min(440px, 100%); background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-8); }
.author .login-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; margin-bottom: var(--space-8); color: var(--ink); }
.author .login-card h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.author .login-card label { display: block; font-weight: 500; margin: var(--space-4) 0 var(--space-1); }
.author .login-card input[type=password] { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--text-md); background: var(--page); }
.author .login-card .btn { width: 100%; margin-top: var(--space-4); min-height: 44px; }
.author .login-card .help { color: var(--muted); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.author .login-card .error { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--page)); border-radius: var(--radius); padding: var(--space-3); }
.author .login-note { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: var(--text-sm); }
.author .login-note p { margin: var(--space-1) 0 0; }
.author .login-links { margin-top: var(--space-4); font-size: var(--text-sm); }

/* tablet and phone: the editor stacks, the panel is a bottom sheet, touch targets reach 44 px */
@media (max-width: 1100px) {
  .author .data-layout.with-export { grid-template-columns: minmax(0, 1fr); }
  .author .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .builder #app { display: block; height: auto; min-height: 100vh; }
  .author .topbar, .author .toolbar, .author .tabs { padding-left: var(--space-3); padding-right: var(--space-3); }
  .author .topbar { gap: var(--space-2); }
  .author .topbar .back { min-height: 44px; min-width: 44px; }
  .author .topbar input.title-input { min-height: 44px; }
  .author .tab { min-height: 44px; padding: var(--space-3); }
  .author .export-tabs .tab { min-height: 40px; padding: var(--space-2) var(--space-3); }
  .author .export-tabs { margin: 0 var(--space-4); }
  .author .export-body, .author .export-dialog h2 { padding: var(--space-4); }
  .author .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); scroll-padding-inline: var(--space-3) 36px; }
  .author .topbar { flex-wrap: nowrap; }
  .author .topbar .back-label { display: none; }
  .author .topbar .back { justify-content: center; font-size: var(--text-lg); }
  .author .topbar input.title-input { flex: 1 1 0; min-width: 0; max-width: none; padding: var(--space-2) var(--space-1); font-size: var(--text-md); }
  .author .toolbar { padding-top: var(--space-1); padding-bottom: var(--space-1); gap: var(--space-2); }
  .author .toolbar { flex-wrap: wrap; }
  .author .toolbar .btn, .author .toolbar button { min-height: 44px; min-width: 44px; }
  .author .toolbar .saved { display: none; }
  .author .toolbar .spacer, .author .toolbar #open-link { display: none; }
  .author .toolbar .btn { white-space: nowrap; }
  .author .block-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
  .author .block-head > input { grid-column: 1 / 4; grid-row: 1; text-overflow: ellipsis; font-size: var(--text-sm); padding-inline: var(--space-2); min-height: 44px; }
  .author .block-head .block-select { grid-column: 1; grid-row: 2; }
  .author .block-head .block-meta { grid-column: 2; grid-row: 2; order: 0; flex-basis: auto; }
  .author .block-head .spacer { display: none; }
  .author .block-head .block-actions { grid-column: 3; grid-row: 2; display: flex; justify-content: flex-end; gap: var(--space-2); }
  .author .block-options .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .author .block-options { padding: 0; }
  .author .toolbar #publish, .author .toolbar #toolbar-preview { flex: 1 1 140px; }
  .author .studio { display: block; }
  .author .studio > .workspace { grid-column: auto; }
  .author .rail { position: sticky; top: 0; z-index: 20; flex-direction: row; width: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: var(--space-2) var(--space-3); border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .author .rail-btn { min-height: 44px; min-width: 64px; flex: none; }
  .author .rail { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); scroll-padding-inline: var(--space-3) 36px; }
  .author .rail-btn .ico { width: 18px; height: 18px; }
  .author .workspace, .author .workspace.collapsed { display: block; }
  .author .canvas { overflow: visible; padding: var(--space-3) var(--space-3) 96px; }
  .author .side { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: 56px; padding: var(--space-3) var(--space-4); overflow: hidden; border: 0; border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow); visibility: visible; }
  .author .workspace:not(.collapsed) > .side { height: 50dvh; overflow-y: auto; padding-top: var(--space-4); }
  .author .workspace:not(.collapsed) > .canvas { padding-bottom: calc(50dvh + var(--space-6)); }
  .author .workspace.collapsed > .side { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); visibility: visible; }
  .author .side h2 { margin-bottom: var(--space-3); padding-right: 56px; }
  .author .panel-toggle, .author .workspace.collapsed > .panel-toggle { position: fixed; z-index: 26; left: auto; right: var(--space-3); top: auto; bottom: calc(50dvh - 50px); width: 44px; height: 44px; }
  .author .workspace.collapsed > .panel-toggle { bottom: 6px; }
  .author .panel-toggle .ico { transform: rotate(90deg); width: 20px; height: 20px; }
  .author .block-head { padding: var(--space-3); }
  .author .block-head .mini, .author .qmore, .author .qtools .mini { min-width: 44px; min-height: 44px; }
  .author .qcard { margin: var(--space-2) 0; padding: var(--space-3); }
  .author .qcard.sel { padding: calc(var(--space-3) - 1px); }
  .author .qtools { right: var(--space-2); }
  .author .add-row .btn, .author button[data-add] { min-height: 44px; }
  .author .field.inline { min-height: 44px; }
  .author .btn.small { min-height: 44px; }
  .author .plink, .author .menu-item { min-height: 44px; }
  .author .type-picker { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 80vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .author .tp-cols { grid-template-columns: minmax(0, 1fr); }
  .author .type-picker button { min-height: 44px; }
  .author .data-controls { display: block; }
  .author .data-controls > * { margin-bottom: var(--space-3); }
  .author .pager { flex-wrap: wrap; justify-content: flex-start; }
  .author .data-actions { justify-content: flex-start; }
  .author .data-head { align-items: flex-start; }
  .author .bar-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .author .bar-value { text-align: left; }
  .author .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .author .flow-kids { margin-left: var(--space-3); }
  .author .choice-line { grid-template-columns: minmax(0, 1fr) 3.4rem; }
  .author .preview-frame { height: 70vh; }
  .author:not(.builder) .wrap { padding: var(--space-4) var(--space-3) var(--space-8); }
  .author .proj-table { display: block; overflow-x: auto; }
  .author .menu, .author .pop { max-width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) { .author * { transition: none !important; } }

/* Consent page language picker (B9 PR3, T25): links, so the translated text reloads without script. */
.lang-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.lang-picker .lang-label { color: var(--ink-2); font-size: var(--text-sm); }
.lang-option { border: 1px solid var(--line); border-radius: 6px; padding: var(--space-1) var(--space-3); color: var(--ink); text-decoration: none; font-size: var(--text-sm); }
.lang-option:hover { border-color: var(--accent); }
.lang-option[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Visual lows of the author screens (T63, T70, T74, T84). Presentation only. */
/* A heading that follows a control inside a canvas (Flujo, Puntuación) gets room above it. */
.author .canvas > h3:not(:first-child) { margin-top: var(--space-8); }
.author .url-note { margin-top: var(--space-3); }
.author .url-note p { max-width: 70ch; margin-bottom: var(--space-1); }
.author .empty-state { padding: var(--space-3) 0; max-width: 70ch; }
/* A note inside a flex row is a row item: the paragraph margin would lift it off the line of its neighbours. */
.author .pager .qnote, .author .flow-head .qnote { margin: 0; }
.author .flow-head .quota-count { color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
.author .flow-head .quota-count[data-quota-of] { margin-left: calc(-1 * var(--space-1)); font-weight: 400; }
/* Response detail: labels beside values on a wide screen, stacked on a phone. */
.author .response-detail h3 { margin: var(--space-4) 0 var(--space-2); }
.author .detail-list { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.author .detail-list dt { color: var(--muted); }
.author .detail-list dd { margin: 0; overflow-wrap: anywhere; }
/* The export dialog keeps one size and place on every tab; a long description scrolls inside its body. */
.author .export-dialog { height: min(46rem, 90dvh); }
.author .export-body { flex: 1 1 auto; min-height: 0; }
/* Ends of a scale: left, centre and right anchors never overflow their card. */
.author .wends span { flex: 0 1 33%; min-width: 0; overflow-wrap: anywhere; }
.author .wends span:nth-child(2) { text-align: center; }
.author .wends span:last-child { text-align: right; }
.author .wends span:first-child { text-align: left; }
@media (max-width: 800px) {
  .author .export-dialog { height: 100dvh; }
  .author .detail-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .author .detail-list dd { margin-bottom: var(--space-2); }
}
.author .tpl-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.author .tpl-choices legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.author .tpl-choices .tpl { align-items: flex-start; margin-bottom: var(--space-2); }
.author .tpl-choices .tpl input { margin-top: .2rem; flex: none; }

/* T94: the author's picker button uses the compact control size of the other author inputs. */
.author .filepick-btn { font-size: var(--text-sm); font-weight: 500; }

/* Request record columns (User-Agent and Referer): shown whole, wrapped inside the cell. */
.author table.grid td.ua, .author .grid.responses td.ua { max-width: 24em; white-space: normal; overflow-wrap: anywhere; font-size: var(--text-xs); }
.author .claude-panel { margin-top: var(--space-3); }
.author .claude-suggestions { padding-left: 0; list-style-position: inside; }
.author .claude-suggestions li { margin-bottom: var(--space-4); }
.author .claude-suggestions blockquote { margin: var(--space-2) 0; padding-left: var(--space-3); border-left: 3px solid var(--line-soft); color: var(--muted); }
.author .claude-error { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--page)); border-radius: var(--radius); padding: var(--space-3); }
.author .claude-analysis { margin-top: var(--space-3); }

/* Distribuciones tab (T99): anonymous link with copy and QR, access and maximum, single-use invitations. */
.author .dist-sec h3 { margin-bottom: var(--space-2); }
.author .dist-link-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
.author .dist-link-row input.text { flex: 1 1 18rem; min-width: 0; }
.author .copy-status { min-height: 1.4em; margin: var(--space-1) 0 0; }
.author .copy-status:empty { min-height: 0; margin: 0; }  /* no reserved band above the QR code until there is something to say */
.author .dist-qr { margin: var(--space-2) 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.author .dist-qr svg { display: block; flex: none; width: 200px; height: 200px; max-width: 100%; }
.author .dist-qr figcaption { flex: 1 1 14rem; min-width: 0; margin: 0; }
.author .dist-access { border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0; }
.author .dist-access legend { font-weight: 600; margin-bottom: var(--space-2); }
.author .dist-access .field.inline { align-items: flex-start; margin-bottom: var(--space-2); }
.author input.dist-max { width: 10rem; }
.author .field-error { color: var(--bad); font-size: var(--text-sm); margin: var(--space-1) 0 0; min-height: 0; }
.author .field-error:empty { display: none; }
.author .inv-form { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin: var(--space-3) 0; }
.author .inv-form .field { margin: 0; }
.author .inv-form #inv-count { width: 8rem; }
.author .inv-form #inv-label { width: 24rem; max-width: 100%; }  /* wide enough for its own hint */
.author .inv-batch { margin: var(--space-3) 0; }
.author .inv-batch p { margin: 0 0 var(--space-2); }
.author .inv-links { margin-top: var(--space-2); }
.author .inv-links textarea { width: 100%; font-family: var(--mono, monospace); font-size: var(--text-xs); }
.author .inv-summary { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: var(--space-3) 0; }
.author .inv-summary .badge { font-size: var(--text-sm); }
.author #inv-table code { font-size: var(--text-xs); }
@media (max-width: 800px) {
  .author .dist-sec .btn { min-height: 44px; }
  .author .inv-form { align-items: stretch; flex-direction: column; }
  .author .inv-form #inv-label, .author .inv-form #inv-count { width: 100%; }
}

/* S5 (F5): per-survey permission matrix and people screens (LimeSurvey «Permisos de la encuesta», REA ev_e5982aec). */
.author .perm-note { padding: .2rem .6rem; border-radius: 999px; background: #fff3cd; color: #6b4e00; font-size: .8rem; font-weight: 600; }
.author .access-links { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6) var(--space-6); font-size: .88rem; }
@media (max-width: 800px) { .author .access-links { padding: 0 var(--space-3) var(--space-6); } }
body.author[data-can_create="0"] .wrap > h2:first-child, body.author[data-can_create="0"] .wrap > .field,
body.author[data-can_create="0"] .wrap > .create-grid,
body.author[data-can_create="0"] .proj-table td button.btn.small:not(.danger) { display: none; }
body.author[data-can_delete="0"] .proj-table .btn.danger { display: none; }
/* W7 (S11) moved the creation cards behind the list's «Crear» button: without «Crear encuestas» neither is drawn. */
body.author[data-can_create="0"] #create-open, body.author[data-can_create="0"] #create-panel { display: none; }
.author.access-page .topbar .back { text-decoration: none; }
body.author.access-page .access-wrap h2 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; letter-spacing: 0; }
body.author.access-page .topbar { flex-wrap: wrap; row-gap: .3rem; }
body.author.access-page .topbar .back { white-space: nowrap; }
.author .access-summary th[scope=row], .author .access-grid th[scope=row] { font-weight: 600; white-space: nowrap; }
.author .access-summary td { font-size: .85rem; }
.author .access-grid td { text-align: center; }
.author .access-grid input[type=checkbox] { width: 1.15rem; height: 1.15rem; }
.author .access-add, .author .access-remove, .author .access-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; }
.author .access-person-form { max-width: 34rem; }
.author .access-person-form input[type=text], .author .access-person-form input[type=password] { border: 1px solid var(--line); border-radius: 5px; padding: .4rem .5rem; }
.author .access-error { color: var(--bad); font-weight: 600; }
.author .access-saved { color: var(--good, #1a7f37); font-weight: 600; }
.author .access-log { padding-left: 1.2rem; font-size: .88rem; }
.author .access-log li { margin: .25rem 0; }
@media (max-width: 800px) {
  .author .access-grid input[type=checkbox] { width: 1.5rem; height: 1.5rem; }
}
/* W6 (S2, S3, S7, S8): results period, response time and drop-off, test-response dialog, export footer. */
.author .results-dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.author .results-dates .field { margin: 0; }  /* the label shares the row's centre line with its fields */
.author .results-dates .field.inline input[type=date] { min-height: 44px; }
.author #res-timing h4 { margin: var(--space-4) 0 var(--space-2); }
.author .test-dialog { display: grid; gap: var(--space-3); min-width: min(32rem, 100%); }
.author .test-dialog textarea { width: 100%; }
.author .test-dialog #test-n { max-width: 10rem; min-height: 44px; }
.author .export-footer { flex-wrap: wrap; }
.author .version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* S4 (F4): publish dialog; S15 (F15): embed code in Distribuciones. */
.author .publish-dialog { width: min(640px, calc(100vw - 24px)); }
.author .publish-dialog textarea.text { width: 100%; box-sizing: border-box; }
.author .publish-dialog .publish-list { margin: var(--space-1) 0 var(--space-3); padding-left: 1.2rem; }
.author .publish-dialog .nav { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.author .publish-dialog .nav .btn { min-height: 44px; }
.author .publish-dialog .nav > #publish-ok { margin-left: auto; }
.author .publish-dialog .linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, #2b46ae); text-decoration: underline; cursor: pointer; }
.author .dist-embed-preview { margin: var(--space-3) 0; }
.author #dist-embed-code { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
/* REA decisions W4: end address (S1/S25), logo (S10), welcome and consent fields (S13/S26). */
.author .end-link-fields { margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.author .end-link-fields .end-url { width: 100%; max-width: 36rem; }
.author .logo-field .logo-preview { display: block; max-height: 64px; max-width: 220px; margin: var(--space-2) 0; object-fit: contain; }
.author .lang-fields textarea { width: 100%; min-height: 7rem; }
/* S6 preview tools (REA rea-cat-qualtrics §1.3, b908): skip validation, hidden questions, desktop and phone side by
   side, a QR code for the phone and the survey's languages. */
.author .preview-tools { flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: flex-start; margin: var(--space-2) 0 var(--space-3); }
.author .preview-tools .preview-tool { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); }
/* Final gate T1: the device buttons wrap as one group and the note goes under them instead of squeezing them beside it. */
.author .preview-modes { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.author .preview-devices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.author .preview-qr code { word-break: break-all; font-size: var(--text-xs); }
.author .preview-pair { display: flex; gap: var(--space-4); align-items: flex-start; }
.author .preview-pair-desktop { flex: 1 1 auto; min-width: 0; }
.author .preview-twin { flex: 0 0 auto; width: 390px; max-width: 100%; height: 760px; border: 10px solid var(--chrome); border-radius: var(--radius-lg); background: var(--page); }
@media (max-width: 1100px) {
  .author .preview-pair { flex-direction: column; align-items: center; }
  .author .preview-pair-desktop { width: 100%; }
}
@media (max-width: 800px) { .author .preview-tools .btn, .author .preview-tools select { min-height: 44px; } }
/* Inside the preview frame: a question display logic hides, shown by «Mostrar preguntas ocultas». */
body.respondent .logic-hidden { outline: 2px dashed var(--warn); outline-offset: 6px; opacity: .78; }
body.respondent .logic-hidden-flag { display: inline-block; margin: 0 0 var(--space-2); padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs, .75rem);
  color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, #fff); border: 1px solid color-mix(in srgb, var(--warn) 35%, #fff); }

/* S11 survey list: the list first, search and sort, «Crear» opens the creation options (REA rea-cat-qualtrics b000, b003). */
.author .list-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.author .list-head .spacer { flex: 1; }
.author .list-tools { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin: var(--space-3) 0; }
.author .list-tools .field { margin: 0; }
.author .list-tools #proj-search { width: 22rem; max-width: 100%; }
.author .create-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-3) 0; background: var(--page); }
.author .create-panel[hidden] { display: none; }
@media (max-width: 800px) {
  .author .list-head .btn, .author .list-tools select, .author .list-tools input { min-height: 44px; }
  .author .list-tools { flex-direction: column; align-items: stretch; }
  .author .list-tools .field, .author .list-tools #proj-search, .author .list-tools select { width: 100%; }
}
.author .list-head h2 { margin: 0; }
/* Final gate T1: «Cerrar» stays on the heading's row, at the panel's right edge, on a phone too. */
.author .create-panel .list-head { flex-wrap: nowrap; }
.author .create-panel .list-head h2 { min-width: 0; overflow-wrap: anywhere; }
/* S19: the external link preview on the canvas and the warning of an address that cannot be published. */
.author .wbody .wlink { display: inline-flex; pointer-events: none; }
.author .qnote.bad { color: var(--bad); }
/* Distribuciones: PIN (F23) and link alias (F24). */
.author .dist-pin { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--line, #d2d2d7); }
.author .dist-pin input.text { max-width: 14rem; }
.author .dist-alias-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 4px); min-width: 0; }
.author .dist-alias-prefix { color: var(--muted, #6e6e73); overflow-wrap: anywhere; }
.author .dist-alias-row input.text { flex: 1 1 14rem; min-width: 0; }

/* Mail server settings page (F16): the login card layout with ordinary fields. */
.author .mail-card { width: min(560px, 100%); }
.author .mail-card input.text, .author .mail-card select.text { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--text-md); background: var(--page); }
.author .mail-card .mail-inline { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.author .mail-card .mail-ok { background: color-mix(in srgb, var(--accent, #0071e3) 8%, var(--page)); border-radius: var(--radius); padding: var(--space-3); }
.author .mail-card .mail-test { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.author .mail-card .mail-test h2 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.author .mail-card .help { overflow-wrap: anywhere; }

/* Distribuciones: invitations by email (F17). */
.author .mail-form textarea.text, .author .mail-list textarea.text { width: 100%; min-height: 8rem; }
.author .mail-list { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.author .mail-list h4 { margin: 0 0 var(--space-2); }
.author .mail-list .mail-email { overflow-wrap: anywhere; }
.author .mail-reminder { margin-top: var(--space-3); }
.author #mail-rejected caption { text-align: left; font-weight: 600; padding-bottom: var(--space-1); }

/* Pantalla final (T4): spacing and fit on the settings, mail, distribution and data screens. */
.author .dist-link-row { margin-bottom: var(--space-3); }
.author #mail-upload-result { margin-top: var(--space-3); }
.author #mail-rejected caption { padding: var(--space-2) var(--space-3); }
.author .mail-list [id^="mail-message-"]:empty { display: none; }
.author .field-error { margin-bottom: var(--space-2); }
.author .badge .mini { margin-left: var(--space-2); }
.author #versions-table { margin-bottom: var(--space-3); }
.author #preview-qr-url { display: block; margin-top: var(--space-1); overflow-wrap: anywhere; }
.author table.grid td.ua.ref { max-width: 32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.author .mail-card .help { margin-top: var(--space-1); }
.author .cond-editor { margin-bottom: var(--space-3); }
@media (min-width: 801px) {
  /* the title of the question panel stays in view while its fields scroll under it */
  .author #side:has(> #qpanel) { padding-top: 0; }
  .author #qpanel > h2:first-child { position: sticky; top: 0; z-index: 3; margin: 0 0 var(--space-3); padding: var(--space-3) 0; background: var(--page); }
}

/* forms-pantalla-final T3: people and permissions pages. The gutter is reserved so a taller page does not shift the content
   sideways; flex drops the space between the arrow and the label of the back link; the matrix gets the room its 13 columns need. */
html:has(body.access-page) { scrollbar-gutter: stable; }
body.author.access-page .topbar .back { display: inline-flex; align-items: center; gap: var(--space-1); }
body.author.access-page .access-wrap { max-width: 1400px; }
body.author.access-page .access-wrap > .qnote { max-width: 72ch; }
.author .access-wrap .proj-table th[scope=row] { color: var(--ink); font-size: var(--text-sm); }
.author .access-wrap .proj-table th .qnote { display: inline; margin: 0; font-size: var(--text-xs); font-weight: 400; }
.author .access-summary th, .author .access-summary td { padding: var(--space-3) .45rem; }
.author .access-summary th[scope=row] { white-space: normal; min-width: 9rem; }
.author .access-summary thead th { vertical-align: bottom; }
.author .access-summary .qnote, .author .access-grid .qnote { display: block; margin: 0; line-height: 1.15rem; text-align: center; }
.author .access-grid td { vertical-align: middle; }
.author .access-grid input[type=checkbox] { display: block; margin: 0 auto; }
.author .access-inline input[type=password] { border: 1px solid var(--line); border-radius: 5px; padding: .4rem .5rem; background: var(--page); }
.author .access-summary thead th:not(:first-child):not(:last-child) { min-width: 6.2rem; }

/* Round 2 T7: a read-only link longer than its field ends in an ellipsis instead of a half-cut letter. */
.author input.text[readonly] { text-overflow: ellipsis; }

/* Rows that scroll sideways fade at the edge that still has content (scroll-driven; no fade when the row fits). */
@property --cue-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --cue-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes scroll-cue {
  0% { --cue-start: 0px; --cue-end: 28px; }
  4% { --cue-start: 28px; --cue-end: 28px; }
  96% { --cue-start: 28px; --cue-end: 28px; }
  100% { --cue-start: 28px; --cue-end: 0px; }
}
.author .tabs, .author .rail, .author .proj-scroll, .author .table-wrap, .author .proj-table {
  animation: scroll-cue linear both; animation-timeline: scroll(self inline);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--cue-start), #000 calc(100% - var(--cue-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--cue-start), #000 calc(100% - var(--cue-end)), transparent);
}