/* kognitio: research-tool UI after Elicit's web app. Gray canvas, white work surfaces,
   one deep teal for action and selection, compact sans type. Tokens first; every module stylesheet reads these. */
:root {
  color-scheme: light;
  --paper: oklch(0.979 0 0);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.966 0.001 197);
  --surface-3: oklch(0.945 0.002 197);
  --ink: oklch(0.261 0.03 185);
  --ink-2: oklch(0.355 0.024 188);
  --muted: oklch(0.514 0.014 184);
  --faint: oklch(0.645 0.011 181);
  --line: oklch(0.922 0 0);
  --line-strong: oklch(0.876 0.005 180);
  /* The accent keeps its historical name; it is Elicit's teal. */
  --green: oklch(0.526 0.085 208);
  --green-strong: oklch(0.446 0.072 208);
  --green-bright: oklch(0.591 0.096 208);
  --green-chip: oklch(0.888 0.042 202);
  --green-soft: oklch(0.937 0.023 203);
  --green-wash: oklch(0.977 0.011 190);
  --focus: oklch(0.591 0.096 208);
  --red: oklch(0.5 0.13 30);
  --red-soft: oklch(0.958 0.022 35);
  --amber-soft: oklch(0.968 0.03 92);
  --amber-line: oklch(0.88 0.05 90);
  --amber-ink: oklch(0.38 0.05 80);
  --on-accent: oklch(1 0 0);
  /* State borders: --line/--line-strong divide; --control-line outlines what can be operated (3:1 on paper and white). */
  --control-line: oklch(0.64 0.008 190);
  --line-hover: oklch(0.52 0.012 190);
  --green-line: oklch(0.78 0.05 205);
  --red-line: oklch(0.62 0.09 30);
  --ok: oklch(0.62 0.11 160);
  --ring: color-mix(in oklch, var(--green) 16%, transparent);
  --scrim: oklch(0.2 0.02 200 / .4);
  /* One layer scale for everything that floats; local stacking inside a widget stays below 10. */
  --z-sticky: 10;
  --z-nav: 50;
  --z-skip: 60;
  --z-overlay: 80;
  --z-dialog: 85;
  --z-confirm: 90;
  --z-toast: 100;
  /* Names older module stylesheets already use. */
  --cream: var(--paper);
  --border: var(--line);
  --accent: var(--green);
  --radius: 6px;
  --radius-card: 8px;
  --radius-frame: 12px;
  --header-h: 52px;
  --shadow-sm: 0 1px 2px oklch(0.26 0.03 185 / .05);
  --shadow-md: 0 6px 16px -6px oklch(0.26 0.03 185 / .14), 0 1px 3px oklch(0.26 0.03 185 / .06);
  --shadow-lg: 0 18px 44px -14px oklch(0.26 0.03 185 / .24), 0 4px 10px -4px oklch(0.26 0.03 185 / .08);
  /* Bordered floating layers (menus, recents, toast, dialogs): the border separates, this short shadow only lifts.
     Its blur stays under 16px, so it never turns into a halo; in the dark theme the border does the work. */
  --shadow-pop: 0 8px 15px -6px oklch(0.2 0.02 200 / .16), 0 2px 4px -2px oklch(0.2 0.02 200 / .1);
  --font-ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-read: var(--font-ui);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t: 220ms;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6a68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  --icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5'/%3E%3C/svg%3E");
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);font-size:14px;line-height:1.5}
button,input,textarea,select{font:inherit}
button,a,input,select,textarea,summary{outline-offset:3px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed;opacity:.55}
/* Blocked is not busy: only a control that is working shows progress. */
button.is-busy:disabled,button[aria-busy="true"]{cursor:progress}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--green-strong)}
::selection{background:var(--green-chip)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em}
.hidden{display:none!important}
[hidden]{display:none!important}
.muted{color:var(--muted);font-size:13.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip:not(:focus){clip-path:inset(50%);opacity:0}
.skip{position:fixed;top:10px;left:20px;z-index:var(--z-skip);background:var(--surface);color:var(--green-strong);font-weight:600;padding:9px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-sm);transform:translateY(-160%);transition:transform var(--t) var(--ease-out)}
.skip:focus{transform:none}

/* Form controls */
input,select{border:1px solid var(--control-line);border-radius:var(--radius);min-height:36px;color:var(--ink);background:var(--surface);padding:7px 10px;font-size:13.5px;min-width:0;transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background-color var(--t-fast)}
input,select{max-width:100%}
select{appearance:none;padding-right:30px;text-overflow:ellipsis;background:var(--surface) var(--chevron) no-repeat right 10px center/12px;cursor:pointer}
input[type=checkbox],input[type=radio]{appearance:auto;min-height:0;width:16px;height:16px;padding:0;margin:0;accent-color:var(--green);cursor:pointer;flex-shrink:0}
/* Hover never repaints a focused field: :focus-visible is left out, so the teal focus edge stays under the pointer. */
input:hover:not(:disabled,[readonly],:focus-visible),select:hover:not(:disabled,:focus-visible),textarea:hover:not(:disabled,[readonly],:focus-visible){border-color:var(--line-hover)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--ring)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
input:disabled,input[readonly]{background:var(--surface-2);color:var(--muted)}
textarea{resize:vertical;width:100%;min-height:110px;border:1px solid var(--control-line);border-radius:var(--radius-card);padding:12px 14px;font-size:14px;line-height:1.6;color:var(--ink);background:var(--surface);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
/* Placeholders are small text: --faint alone is 3.3:1 on white, so they sit between --muted and --faint (4.75:1, 6.2:1 dark). */
textarea::placeholder,input::placeholder{color:color-mix(in oklch, var(--muted) 70%, var(--faint));opacity:1}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.45;cursor:pointer}
.check span{font-size:12.5px;color:var(--muted)}
.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.control-grid label{font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.filter-help{font-size:12.5px;line-height:1.6;color:var(--muted)}

/* Buttons: one vocabulary across modules */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:var(--on-accent);border:0;border-radius:var(--radius);padding:8px 14px;min-height:34px;font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm);transition:background-color var(--t) var(--ease-out),transform var(--t-fast) var(--ease-out),box-shadow var(--t) var(--ease-out)}
.primary span{display:inline-block;transition:transform var(--t) var(--ease-expo)}
.primary:hover:not(:disabled){background:var(--green-strong);box-shadow:var(--shadow-md)}
.primary:active:not(:disabled){transform:scale(.97)}
.primary.is-busy{position:relative;color:transparent}
.primary.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in oklch, var(--on-accent) 35%, transparent);border-top-color:var(--on-accent);animation:spin .8s linear infinite}
/* Secondary actions read like Elicit's toolbar buttons: white, hairline border, ink text. */
.secondary{background:var(--surface);color:var(--ink-2);border:1px solid var(--control-line);border-radius:var(--radius);padding:7px 12px;min-height:34px;font-size:13px;font-weight:500;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.secondary:hover:not(:disabled){border-color:var(--line-hover);background:var(--surface-2);color:var(--ink)}
/* Links styled as buttons read as buttons: no underline, centered like the <button> beside them. */
a.primary,a.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
a.primary:hover{color:var(--on-accent)}
/* Small uppercase tag, as on Elicit's PRO / UPGRADE marks. */
.badge,.tier-badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius);background:var(--green-chip);color:var(--green-strong);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.secondary:active:not(:disabled){transform:scale(.97)}
.danger{color:var(--red);border-color:var(--red-line)}
.danger:hover:not(:disabled){color:var(--red);background:var(--red-soft);border-color:var(--red)}
/* A row's own action in a list (open a source, a report, a routine): a quiet ghost button in the action teal, no border,
   so a column of them never outweighs the rows; hover and focus still show it is a control, and it keeps the 34/44px target. */
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--green-strong);font-size:13px;font-weight:600;line-height:1.35;text-align:left;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.ghost:hover:not(:disabled){background:var(--green-wash);border-color:var(--green-line)}
.ghost:active:not(:disabled){transform:scale(.97)}

/* Disclosure, one pattern everywhere: a native <details> whose marker gives way to the 12px chevron, turned -90° while
   closed and upright when open. The summary is a 13.5px semibold line in --ink-2, at least 32px tall (44px on touch); an
   optional short summary follows in --muted after a middle dot (.summary-meta). Zero specificity, so a sheet row or a module
   only adjusts its spacing. The sphere legend draws its own marker inside its figure and is left out.
   The height comes from the padding around one line (1lh), not from centring in a box: a single line still sits in the
   middle of its 32px, and when a long summary wraps, the chevron stays on its first line instead of between the lines. The
   min-height stays as a floor for rows whose own padding is shorter. A row with a taller height of its own sets it the same
   way, padding-block:calc((H - 1lh)/2). */
:where(details:not(.graph-sphere__legend))>:where(summary){display:flex;align-items:flex-start;gap:8px;min-height:32px;padding-block:calc((32px - 1lh)/2);cursor:pointer;list-style:none;font-family:var(--font-ui);font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink-2);border-radius:var(--radius);transition:color var(--t-fast),background-color var(--t-fast)}
:where(details:not(.graph-sphere__legend))>:where(summary)::-webkit-details-marker{display:none}
:where(details:not(.graph-sphere__legend))>:where(summary)::before{content:"";display:inline-block;flex:none;width:12px;height:12px;margin-top:calc((1lh - 12px)/2);background:var(--chevron) no-repeat center/12px;transform:rotate(-90deg);transition:transform var(--t) var(--ease-out)}
:where(details[open]:not(.graph-sphere__legend))>:where(summary)::before{transform:none}
:where(details:not(.graph-sphere__legend))>:where(summary:hover){color:var(--ink)}
:where(summary) :where(.summary-meta,.coverage-fold-summary,.plan-fold-summary,.report-versions-count){font-weight:400;color:var(--muted)}

/* Header: a flat top bar, as in Elicit. Brand on the left, sections as icon + label, tools on the right. */
.app-header{position:sticky;top:0;z-index:var(--z-nav);height:var(--header-h);padding:0 20px;display:flex;align-items:center;gap:16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:8px;align-items:center;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;border-radius:var(--radius);flex-shrink:0}
.brand:hover{color:var(--ink)}
.brand strong{font-weight:600}
.brand-mark{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--radius);background:var(--green);color:var(--on-accent);font-size:11px;font-weight:700;letter-spacing:-.02em;line-height:1;transition:transform var(--t) var(--ease-out),background-color var(--t)}
.brand:hover .brand-mark{background:var(--green-strong)}
/* The monogram is a logo, not words: drawn by CSS with empty alternative text, so the link's visible text is
   "kognitio" and its name, "kognitio, início", starts with it (WCAG 2.5.3). */
.brand-mark::before{content:"ar";content:"ar" / ""}
.environment-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
.workspace-status{font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center;line-height:1.5;white-space:nowrap}
.status-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green-bright);flex-shrink:0}
.status-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ripple 2.8s var(--ease-out) 2}
/* A status that asks for action reads in ink with an amber dot, so it is noticed beside the bar without shouting. */
.workspace-status[data-attention]{color:var(--ink-2)}
.workspace-status[data-attention] .status-dot{background:var(--amber-ink)}
/* "Andamento" is one of the bar's secondary tools: the 6px radius and ink text of .secondary, not a pill. */
.environment-tools>.development-status-toggle{border-radius:var(--radius);color:var(--ink-2);font-size:13px;font-weight:500}
.environment-tools>.development-status-toggle:hover{background:var(--surface-2);border-color:var(--line-hover);color:var(--ink)}

/* The navigation keeps the floating-nav controller, drawn flat in the bar: a narrow bar labels only its current item,
   a wide one names its destinations (data-labels, below). */
.floating-nav{--label-gap:7px;position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center;padding:0}
.floating-nav-list{position:relative;display:flex;align-items:center;gap:2px;max-width:100%;height:100%;margin:0;padding:0 4px;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
/* When the bar is narrower than its items it scrolls sideways (wheel included); a fade in the bar's color marks the hidden side. */
.floating-nav-list::before,.floating-nav-list::after{content:"";position:sticky;z-index:3;flex:none;align-self:stretch;width:24px;pointer-events:none;opacity:0;transition:opacity var(--t-fast) var(--ease-out)}
.floating-nav-list::before{left:0;margin-right:-24px;background:linear-gradient(90deg,var(--surface),transparent)}
.floating-nav-list::after{right:0;margin-left:-24px;background:linear-gradient(270deg,var(--surface),transparent)}
.floating-nav-list[data-overflow-start]::before,.floating-nav-list[data-overflow-end]::after{opacity:1}
.floating-nav-list>li{display:flex;align-items:center}
.floating-nav-list>li:has(>.hidden){display:none}
/* Groups: the "new" action, then modules, then the library and history tools. */
#modules>li:has(>#new-research)::after,#modules>li:has(>#open-library)::before{content:"";width:1px;height:20px;background:var(--line);margin:0 8px}
.floating-nav-indicator{position:absolute;left:0;top:0;border-radius:var(--radius);background:var(--green-soft);pointer-events:none;opacity:0}
.floating-nav-item{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;height:34px;min-width:34px;padding:0 9px;border:0;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:13.5px;font-weight:500;transition:color var(--t-fast),background-color var(--t-fast),transform var(--t-fast) var(--ease-out);user-select:none}
.floating-nav-item:hover:not([data-current]){color:var(--ink);background:var(--surface-2)}
.floating-nav-item:active{transform:scale(.97)}
.floating-nav-item[data-current],.floating-nav-item[data-current]:hover{color:var(--green-strong)}
.floating-nav-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
/* "Nova pesquisa" is the bar's one filled action, like Elicit's teal call to action. */
#new-research{background:var(--green);color:var(--on-accent);padding:0 12px 0 9px;box-shadow:var(--shadow-sm)}
#new-research:not([data-current]):hover{background:var(--green-strong);color:var(--on-accent)}
#new-research[data-current],#new-research[data-current]:hover{color:var(--on-accent);background:var(--green-strong)}
#new-research .floating-nav-label{width:auto;opacity:1;margin-left:6px;font-weight:600}
#new-research svg{transition:transform var(--t) var(--ease-out)}
.floating-nav-icon{display:flex;align-items:center;justify-content:center;width:17px;height:17px}
.floating-nav-icon svg{width:100%;height:100%;flex-shrink:0;stroke-width:1.9}
.floating-nav-label{overflow:hidden;white-space:nowrap;width:calc(var(--open,0) * var(--label-width,0px));opacity:var(--open,0);margin-left:calc(var(--open,0) * var(--label-gap))}
/* Where the bar has room, its destinations are named, as Elicit's tabs are (floating-nav.mjs measures and sets
   data-labels): "modules" names every module in the bar; "all" also the library and history tools. In "modules" those
   two tools stay icons with a tip, and the current one names itself as in the narrow bar (the bar reserves that room).
   Named items sit a little tighter, so the modules fit from about 1360px with a classic scrollbar. */
.floating-nav[data-labels]{--label-gap:6px}
.floating-nav[data-labels] #modules>li>.floating-nav-item:not(#new-research){padding:0 7px}
.floating-nav[data-labels] #modules>li:has(>#new-research)::after,.floating-nav[data-labels] #modules>li:has(>#open-library)::before{margin:0 6px}
.floating-nav[data-labels] #modules>li>.floating-nav-item .floating-nav-label{width:auto;opacity:1;margin-left:var(--label-gap)}
.floating-nav[data-labels=modules] #modules>li>.floating-nav-item:not([data-module],.floating-nav-more-toggle,#new-research) .floating-nav-label{width:calc(var(--open,0) * var(--label-width,0px));opacity:var(--open,0);margin-left:calc(var(--open,0) * var(--label-gap))}
/* "Mais" naming a long module ends in an ellipsis past the room the bar measured; its tip then shows the whole name. */
.floating-nav[data-labels] .floating-nav-more-toggle .floating-nav-label{max-width:var(--more-max,none);text-overflow:ellipsis}
/* The last chance for named modules: the wordmark gives its room, the monogram and the link's name stay (as under 1100px). */
.app-header:has(>.floating-nav[data-squeeze]) .brand-name{display:none}
.floating-nav-tip{position:absolute;left:0;top:0;z-index:2;pointer-events:none;padding:4px 8px;border-radius:var(--radius);background:var(--ink);color:var(--on-accent);font-size:12px;font-weight:500;line-height:16px;white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;transform:translate(calc(var(--tip-x,0px) - 50%),calc(var(--tip-y,0px) - 5px)) scale(.96);transition:transform var(--t) var(--ease-out),opacity var(--t-fast) var(--ease-out)}
.floating-nav-tip::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;background:inherit;border-radius:2px;transform:translateX(-50%) rotate(45deg)}
.floating-nav-tip[data-visible]{opacity:1;transform:translate(calc(var(--tip-x,0px) - 50%),var(--tip-y,0px)) scale(1)}
.floating-nav-tip[data-instant]{transition:opacity var(--t-fast) var(--ease-out)}

/* "Mais": with more than six modules, the less used ones open from a native popover inside #modules, grouped and named,
   like Elicit's dropdown menus (white sheet, hairline, rows with icon and label). The toggle is a bar item: same size,
   focus and indicator; while one of its modules is current it carries the indicator and names that module. */
.floating-nav-more-toggle{anchor-name:--nav-more}
.floating-nav-more-toggle .floating-nav-label{width:auto;opacity:1;margin-left:var(--label-gap)}
.floating-nav-chevron{display:flex;width:12px;height:12px;margin-left:4px;transition:transform var(--t) var(--ease-out)}
.floating-nav-more-toggle[aria-expanded="true"] .floating-nav-chevron{transform:rotate(180deg)}
.floating-nav-more-toggle[aria-expanded="true"]:not([data-current]){color:var(--ink);background:var(--surface-2)}
.floating-nav-menu{position:fixed;inset:auto;margin:0;position-anchor:--nav-more;position-area:bottom span-right;margin-top:6px;position-try-fallbacks:bottom span-left,bottom;width:max-content;min-width:220px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--header-h) - 24px);overflow-y:auto;padding:6px;border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
.floating-nav-menu:popover-open{display:grid;gap:2px;animation:pop-in var(--t) var(--ease-out)}
/* Sections: an optional label over a list. A section with nothing visible disappears, and a hairline
   separates each visible section from the visible ones before it. */
.floating-nav-menu-section{display:grid;gap:1px}
.floating-nav-menu-section:not(:has(li>.floating-nav-item:not(.hidden))){display:none}
.floating-nav-menu-section:has(li>.floating-nav-item:not(.hidden))~.floating-nav-menu-section{margin-top:4px;padding-top:6px;border-top:1px solid var(--line)}
.floating-nav-menu-group{display:grid;gap:1px;margin:0;padding:0;list-style:none}
.floating-nav-menu-group>li:has(>.hidden){display:none}
.floating-nav-menu-label{margin:0;padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--muted)}
.floating-nav-menu .floating-nav-item{width:100%;height:36px;justify-content:flex-start;padding:0 10px;color:var(--ink-2);font-size:13.5px}
.floating-nav-menu .floating-nav-label{width:auto;opacity:1;margin-left:10px}
.floating-nav-menu .floating-nav-item[data-current],.floating-nav-menu .floating-nav-item[data-current]:hover{background:var(--green-soft);color:var(--green-strong);font-weight:600}
/* In the folded bar "Nova pesquisa" moves into the menu: a teal row there, not a filled button. */
.floating-nav-menu #new-research{background:transparent;color:var(--green-strong);box-shadow:none;padding:0 10px}
.floating-nav-menu #new-research:not([data-current]):hover{background:var(--green-wash);color:var(--green-strong)}
.floating-nav-menu #new-research .floating-nav-label{width:auto;opacity:1;margin-left:10px}
/* Without anchor positioning the menu opens under the toggle from coordinates the bar measures (floating-nav.mjs uses this width). */
@supports not (anchor-name:--a){
  .floating-nav-menu{top:var(--menu-y,58px);left:var(--menu-x,16px);margin-top:0;width:min(260px,calc(100vw - 32px));min-width:0}
}
/* Folded bar (narrow windows and touch screens, set by app.mjs): the toggle alone names the view and holds every destination;
   a long name ends in an ellipsis instead of pushing the header tools. */
.floating-nav[data-compact] .floating-nav-list>li.floating-nav-more{min-width:0}
.floating-nav[data-compact] .floating-nav-more-toggle{flex-shrink:1;min-width:0}
.floating-nav[data-compact] .floating-nav-more-toggle .floating-nav-label{flex:0 1 auto;min-width:0;text-overflow:ellipsis}
.floating-nav[data-compact] .floating-nav-menu{min-width:min(280px,calc(100vw - 32px))}
/* Recents leave the folded bar for its menu, so they open as a sheet under the header, on the toggle's side;
   on a phone the sheet spans the screen. */
.floating-nav[data-compact] .history-panel{position:fixed;top:calc(var(--header-h) + 6px);left:16px;right:auto;width:min(400px,calc(100vw - 32px));transform-origin:top left}

/* Recents drop down from the bar like Elicit's menus: white sheet, hairline, short lift, under their own toggle. */
#history-toggle{anchor-name:--nav-history}
.history-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:3;width:min(400px,calc(100vw - 32px));max-height:min(62vh,500px);display:flex;flex-direction:column;padding:10px 6px 6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);transform-origin:top right;animation:pop-in var(--t) var(--ease-out) backwards}
@supports (anchor-name:--a){
  .floating-nav:not([data-compact]) .history-panel{position-anchor:--nav-history;top:calc(anchor(bottom) + 6px);right:anchor(right);position-try-fallbacks:flip-inline}
}
.history-label{display:flex;justify-content:space-between;align-items:center;margin:0 10px 8px;color:var(--muted);font-size:12px;font-weight:600}
#history-count{font-variant-numeric:lining-nums tabular-nums;background:var(--surface-2);border-radius:999px;padding:1px 8px;font-size:12px;letter-spacing:0}
.history{overflow-y:auto;flex:1}
.history .muted{margin:8px 10px}
.history-item{background:transparent;border:0;width:100%;text-align:left;padding:9px 10px;border-radius:var(--radius);display:block;color:var(--ink);transition:background-color var(--t-fast)}
.history-item:hover{background:var(--surface-2)}
/* .history scrolls, which clips anything drawn outside its items: the ring goes inside. */
.history-item:focus-visible{outline-offset:-2px}
.history-item.selected{background:var(--green-wash)}
.history-item strong{font-size:13.5px;font-weight:500;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px}
.history-item small{color:var(--muted);font-size:12px}

/* Page frame */
.workspace{min-height:calc(100dvh - var(--header-h));display:flex;flex-direction:column}
/* The page h1 names the view for screen readers, the tab and the history (app.mjs copies it into document.title).
   On screen the bar's current item and each view's own title already name it, so it is not drawn a third time
   as a small label that would never line up with every view's column. */
.topbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.topbar h1{margin:0;font-size:inherit}
/* Content starts below the bar's tip (which reaches ~21px under the bar), so hovering an item never covers a title. */
main{flex:1;padding:32px 32px 56px;max-width:1280px;width:100%;margin:0 auto}
/* Module heading, one pattern for every view but the home: the title on the left (an h2 at view size, .view-title,
   without a full stop), one line of description under it, the module's actions on the right, the primary last;
   on a phone the actions drop below the text. */
.view-head{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 20px}
.view-head-text{min-width:0}
.view-head-text>p{max-width:72ch;margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.view-head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-shrink:0}
/* A notice right under a heading (Rotinas: local execution) belongs to it and keeps the cards at a steady distance. */
.view-head+.notice{margin:0 0 16px}
/* Each view rises in when it becomes visible; "backwards" leaves no transform behind once it ends. */
main>section:not(.hidden){animation:view-in var(--t) var(--ease-out) backwards}
.page-footer{padding:18px 32px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.version{margin-left:10px}
/* One toast, two tones: errors stay until dismissed (click or Esc), confirmations leave on their own.
   The mark is drawn with empty alternative text, so screen readers hear only the message. */
.toast{position:fixed;left:50%;bottom:24px;z-index:var(--z-toast);width:max-content;max-width:min(560px,calc(100% - 32px));transform:translateX(-50%);background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);padding:11px 16px 11px 40px;border-radius:var(--radius-card);font-size:13.5px;line-height:1.5;box-shadow:var(--shadow-pop);cursor:pointer}
.toast::before{content:"!";content:"!" / "";position:absolute;left:12px;top:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-size:12px;font-weight:700}
.toast[data-tone=success]::before{content:"✓";content:"✓" / "";background:var(--green-soft);color:var(--green-strong)}
.toast.is-shown{animation:toast-in var(--t) var(--ease-out)}

/* Composer, after Elicit's home: a gray frame holding a white question card; options sit inside it,
   sources and filters on the frame's lower band, suggestions and the steps underneath. */
.composer{max-width:680px;margin:0 auto;padding-top:20px}
.intro{text-align:center}
.intro h2{font-size:26px;line-height:1.25;letter-spacing:-.02em;font-weight:600;margin:0 0 8px;color:var(--ink)}
.intro p{font-size:14px;line-height:1.6;color:var(--muted);max-width:54ch;margin:0 auto 22px}
.ask{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mode mode" "text text" "opts opts" "band switch";background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-frame);padding:6px;transition:border-color var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out)}
.ask:focus-within{border-color:var(--line-strong)}
/* The question box is the page's main control: its focus is a teal edge (4.9:1 on the canvas) with a soft ring.
   A focused chip or select only firms the frame, so there is one strong indicator at a time. */
.ask:has(#question:focus-visible){border-color:var(--green);box-shadow:0 0 0 3px var(--ring)}
.ask-bar,.ask-row,.ask-submit{display:contents}
/* The question's label, above it: field-label ink and size, not the teal of actions; the magnifier stays as a quiet glyph
   hanging left of the text column (desktop), so the label does not read as a mode switch. */
.ask-mode{grid-area:mode;display:flex;align-items:center;gap:9px;padding:14px 18px 2px;background:var(--surface);border-radius:var(--radius-card) var(--radius-card) 0 0;color:var(--ink-2);font-size:13px;font-weight:500}
.ask-mode-icon{width:15px;height:15px;background:var(--muted);-webkit-mask:var(--icon-search) center/contain no-repeat;mask:var(--icon-search) center/contain no-repeat}
.ask textarea{grid-area:text;display:block;min-height:112px;border:0;border-radius:0;background:var(--surface);padding:10px 18px 6px 42px;font-size:14.5px;line-height:1.6;color:var(--ink);resize:none}
.ask textarea:focus-visible{box-shadow:none}
.ask textarea.is-filled{animation:fill-flash var(--t) var(--ease-out)}
.ask-bar>.chips{grid-area:opts;align-self:stretch;align-content:flex-end;padding:8px 196px 14px 22px;background:var(--surface);border-radius:0 0 var(--radius-card) var(--radius-card)}
/* The send button rides the white options row, bottom right, where Elicit puts its arrow. */
#create-button{grid-row:3;grid-column:2;align-self:end;justify-self:end;margin:0 14px 14px 0}
.ask .switch{grid-area:switch;align-self:center;padding:6px 12px 0 0}
.ask-row>.chips{grid-area:band;padding:10px 10px 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 2px 0 9px;border-radius:var(--radius);background:var(--surface-2);border:1px solid transparent;color:var(--ink-2);font-size:12.5px;white-space:nowrap;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.chip:hover{background:var(--surface-3)}
.chip:focus-within{border-color:var(--focus)}
.chip:has(select:focus-visible){box-shadow:0 0 0 3px var(--ring)}
.chip-key{color:var(--muted);font-size:12px;transition:color var(--t-fast)}
.chip select{border:0;background-color:transparent;background-position:right 7px center;min-height:0;height:26px;padding:0 24px 0 1px;font-size:12.5px;font-weight:600;color:var(--ink);max-width:200px;text-overflow:ellipsis;box-shadow:none}
.chip select:focus-visible{box-shadow:none}
/* Sources and filters read like the list rows under Elicit's question card. */
.chip-toggle{height:32px;padding:0 12px 0 10px;gap:8px;background:transparent;border:1px solid transparent;border-radius:var(--radius);font-size:13.5px;color:var(--ink-2)}
.chip-toggle:hover{background:var(--surface)}
.chip-toggle svg{color:var(--muted);transition:color var(--t-fast),transform var(--t) var(--ease-expo)}
.chip-toggle .chip-key{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.chip-value{font-weight:600;color:var(--ink);transition:color var(--t-fast)}
.chip-toggle .chip-value{font-weight:400;font-size:12.5px;color:var(--muted)}
.chip-toggle:active{transform:scale(.97)}
.chip-toggle[aria-expanded=true]{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.chip-toggle[aria-expanded=true] svg{color:var(--green)}
.chip-toggle[data-warn] .chip-value{color:var(--red)}
.chip-toggle[data-set]:not([aria-expanded=true]) .chip-value{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius);background:var(--green-chip);color:var(--green-strong);font-size:12px;font-weight:600}
#create-button{border-radius:999px;padding:8px 16px;min-height:36px}
.switch{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;min-height:36px}
.switch input{appearance:none;position:relative;width:30px;height:18px;min-height:0;padding:0;margin:0;border:0;border-radius:999px;background:var(--control-line);cursor:pointer;transition:background-color var(--t) var(--ease-out)}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--t) var(--ease-out)}
.switch input:checked{background:var(--green)}
.switch input:checked::after{transform:translateX(12px)}
.switch input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
.switch:hover input:not(:checked){background:var(--line-hover)}
.ask-hint{font-size:12px;line-height:1.55;color:var(--muted);margin:10px 4px 0;text-align:center}
.ask-hint span:empty{display:none}
.ask-panel{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-frame);padding:16px 20px 18px;box-shadow:var(--shadow-sm);animation:panel-in var(--t) var(--ease-out) backwards}
.ask-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ask-panel h3{font-size:15px;font-weight:600;margin:0;color:var(--ink)}
.ask-panel h3:focus{outline:none}
.panel-close{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:19px;line-height:1;transition:background-color var(--t-fast),color var(--t-fast),transform var(--t) var(--ease-out)}
.panel-close:hover{background:var(--surface-2);color:var(--ink)}
.field-inline{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.source-options{border:0;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.source-option{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink);transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t) var(--ease-out),box-shadow var(--t)}
.source-option input{margin-top:2px}
.source-option span{grid-column:2;font-size:12px;font-weight:400;line-height:1.45}
.source-option:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.source-option:has(input:checked){border-color:var(--green-chip);background:var(--green-wash)}
.ask-panel details{margin:10px 0}
/* The canonical disclosure (above), sized to its text: the row does not span the panel. */
.ask-panel summary,.sub-details summary{display:inline-flex}
.ask-panel details[open]>*:not(summary){animation:fade-in var(--t) var(--ease-out) backwards}
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin:10px 0 4px}
.check-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 6px}
.panel-group{border:0;padding:0;margin:0 0 18px;min-width:0}
.panel-group+.panel-group{padding-top:18px;border-top:1px solid var(--line)}
.panel-group legend{font-size:13px;font-weight:600;color:var(--ink-2);padding:0;margin-bottom:12px}
.field-selector{width:100%;margin:12px 0}
.field-selector>label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);margin:10px 0}
.field-selector fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;border:0;padding:0;margin:12px 0}
.field-selector .check{align-items:flex-start;line-height:1.5}
.field-selector legend{font-weight:600;font-size:13px;margin-bottom:6px}
#library-picker{margin-top:10px}
#library-items{display:grid;gap:2px;max-height:340px;overflow-y:auto;padding-right:4px}
.library-item{padding:10px 8px;border-radius:var(--radius);align-items:flex-start;transition:background-color var(--t-fast)}
.library-item:hover{background:var(--surface-2)}
.library-item span{font-size:13.5px;color:var(--ink)}
.library-item small{display:block;color:var(--muted);font-size:12px;line-height:1.7}
.library-item input{margin-top:3px}
/* "Try searching for": the label and the outlined suggestion pills share one centered line, which wraps when narrow. */
.examples{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:24px 0 0}
.examples-label{font-size:12.5px;color:var(--muted);margin-right:2px}
.examples button{font-size:13px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink-2);transition:border-color var(--t-fast),background-color var(--t-fast),color var(--t-fast),transform var(--t) var(--ease-out)}
.examples button:hover{border-color:var(--green-chip);background:var(--green-wash);color:var(--green-strong)}
/* The research steps sit in a list card, like Elicit's "Quick tools". */
.journey-label{margin:40px 0 8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.journey{list-style:none;padding:4px 6px;margin:0;display:grid;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-frame);counter-reset:step}
.journey li{position:relative;counter-increment:step;display:flex;align-items:baseline;gap:10px;padding:9px 10px 9px 40px;font-size:12.5px;line-height:1.45;color:var(--muted);border-radius:var(--radius);animation:rise-in var(--t) var(--ease-out) backwards}
.journey li::before{content:counter(step);position:absolute;left:10px;top:9px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--green-chip);font-size:12px;font-weight:600;font-variant-numeric:lining-nums tabular-nums;color:var(--green)}
.journey li:nth-child(2){animation-delay:.04s}
.journey li:nth-child(3){animation-delay:.08s}
.journey li:nth-child(4){animation-delay:.12s}
.journey li:nth-child(5){animation-delay:.16s}
.journey b{font-size:14px;font-weight:500;color:var(--ink)}

/* Question refinement: a chat with the assistant, in the notebook column. */
#draft-view{max-width:780px}
.draft-original{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 8px}
.draft-original::before{content:"";flex-shrink:0;width:15px;height:15px;margin-top:3px;background:var(--muted);-webkit-mask:var(--icon-search) center/contain no-repeat;mask:var(--icon-search) center/contain no-repeat}
#draft-processing:not(:empty){margin:8px 0}
.draft-turn{margin:12px 0;padding:14px 18px;border-radius:var(--radius-card);background:var(--surface);border:1px solid var(--line);max-width:94%}
.draft-turn.is-new{animation:turn-in var(--t) var(--ease-out) backwards}
.user-turn{margin-left:auto;background:var(--green-wash);border-color:var(--green-soft)}
.draft-turn strong{font-size:12px;color:var(--green);font-weight:600}
.draft-turn p{font-size:14px;line-height:1.7;white-space:pre-line;margin:6px 0 0;color:var(--ink-2)}
.draft-typing{display:inline-flex;gap:5px;padding:14px 16px;margin:6px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);animation:turn-in var(--t) var(--ease-out) backwards}
.draft-typing span{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:typing 1.2s ease-in-out infinite}
.draft-typing span:nth-child(2){animation-delay:.15s}
.draft-typing span:nth-child(3){animation-delay:.3s}
.draft-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
#draft-form{margin-top:20px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-frame)}
#draft-form>label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:10px}
#draft-form textarea{min-height:84px}
#draft-form .draft-actions{margin-bottom:0}
#draft-status{font-size:13px;color:var(--muted)}
#draft-final{margin-top:18px}
#draft-final>label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:16px 0 8px}
#draft-final-question{width:100%;font-size:14.5px;line-height:1.7}
#draft-language{max-width:320px}
.draft-clarifications{padding-left:22px;line-height:1.65;margin:12px 0 0}
.draft-clarifications li{margin:12px 0;font-size:14px}
.draft-clarifications li::marker{color:var(--green);font-weight:600}
.draft-clarifications strong,.draft-example strong{font-size:13.5px;color:var(--ink)}
.draft-clarifications p{margin-top:4px}
.draft-example{margin-top:16px;padding:14px 0 0;border-top:1px solid var(--line)}
.draft-example blockquote{margin:10px 0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.draft-example small{font-size:12px;color:var(--muted)}

/* Research view, after Elicit's notebook: the title with its actions, the question as its subtitle,
   then steps, coverage and the report on white sheets. */
#research-view{max-width:1120px;margin:0 auto}
.research-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 20px;margin:4px 0 22px}
.research-heading>div:first-child{display:contents}
#run-status{grid-column:1/-1;justify-self:start}
.research-heading h2{grid-column:1;font-size:26px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:4px 0 2px;max-width:860px}
/* The question is the run's own words, not a field: it reads as the title's subtitle, larger than body text,
   in the second ink and at a reading measure, with nothing that invites typing. */
#run-question{grid-column:1/-1;margin:2px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:80ch;overflow-wrap:anywhere}
#run-question:empty{display:none}
.run-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--green-strong);background:var(--green-soft);padding:3px 9px 3px 8px;border-radius:var(--radius)}
.run-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.run-status:empty{display:none}
#research-view[data-running] .run-status::before{animation:pulse-dot 1.6s var(--ease-out) infinite}
#research-view[data-status=failed] .run-status{color:var(--red);background:var(--red-soft)}
#research-view:is([data-status=cancelled],[data-status=interrupted]) .run-status{color:var(--amber-ink);background:var(--amber-soft)}
#run-actions{grid-column:2;grid-row:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding-top:4px}
#run-actions:empty{display:none}
/* The pending-cancellation note stays narrow beside the actions, so the title keeps its width. */
#run-actions p{max-width:32ch;margin:0;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:right}
/* Rows of the research view ("Modelo e processamento", "Cobertura da pesquisa", "Rever etapas e extrações", "Versões"):
   one look, a white row under a hairline whose summary is the canonical disclosure line (above), 36px tall (44px on touch);
   opened, a hairline under the summary and the body on the same sheet, never a second card.
   Above the tabs the provenance rows make one dense band of metadata under the steps and the notice: no gap between them,
   a row that follows another shares its hairline (margin-top:-1px) and the corners where two rows meet are square
   (--band-top/--band-bottom), so only the band's outer corners are round and the report starts sooner. */
#research-view{--band-top:var(--radius-card);--band-bottom:var(--radius-card)}
#run-processing:not(:empty){margin:12px 0 0}
:is(.run-processing,.coverage-fold,.workflow-history,.report-controls){background:var(--surface);border:1px solid var(--line);border-radius:var(--band-top) var(--band-top) var(--band-bottom) var(--band-bottom)}
:is(.run-processing,.coverage-fold,.workflow-history,.report-controls)>summary{padding:calc((36px - 1lh)/2) 14px;border-radius:calc(var(--band-top) - 1px) calc(var(--band-top) - 1px) calc(var(--band-bottom) - 1px) calc(var(--band-bottom) - 1px)}
:is(.run-processing,.coverage-fold,.workflow-history,.report-controls)>summary:hover{background:var(--surface-2)}
:is(.run-processing,.coverage-fold,.workflow-history,.report-controls)[open]>summary{border-radius:calc(var(--band-top) - 1px) calc(var(--band-top) - 1px) 0 0;border-bottom:1px solid var(--line)}
#run-processing:has(+.metrics>:is(.coverage-fold,.coverage-line)){--band-bottom:0px}
#run-processing:not(:empty)+.metrics:has(>:is(.coverage-fold,.coverage-line)){--band-top:0px;margin-top:-1px}
.metrics:has(>:is(.coverage-fold,.coverage-line)):has(+.review-layout>#workflow-panel>.workflow-history){--band-bottom:0px;margin-bottom:0}
.metrics:has(>:is(.coverage-fold,.coverage-line))+.review-layout:has(>#workflow-panel>.workflow-history){--band-top:0px;margin-top:-1px}
.run-processing-body{padding:4px 16px 14px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.run-processing-body p{max-width:72ch;margin:8px 0 4px}
.run-processing-body strong{font-weight:600;color:var(--ink-2)}
.run-processing-body :is(h4,h5){margin:14px 0 2px;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--ink-2)}
/* Disclosures inside the record are a level below its labels: the same chevron, in the body's 12.5px and a lighter weight, so
   a value ("Vínculo não registrado") never reads louder than the h4 label above it. */
.run-processing-body details>summary{min-height:28px;padding-block:calc((28px - 1lh)/2);font-size:12.5px;font-weight:500}
.run-processing[open]>.run-processing-body{animation:fade-in var(--t) var(--ease-out) backwards}
/* Steps: hollow teal rings that fill as each stage completes, joined by a hairline. */
.stage-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);list-style:none;margin:0;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}
.stage{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:12px;font-size:12.5px;line-height:1.35;color:var(--muted);transition:color var(--t) var(--ease-out)}
.stage::before,.stage::after{content:"";position:absolute;top:10px;left:30px;right:8px;height:1px;background:var(--line-strong)}
.stage::after{height:2px;top:9.5px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease-out)}
.stage.done::after{transform:scaleX(1)}
.stage:last-child::before,.stage:last-child::after{display:none}
.stage .number{position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;font-variant-numeric:lining-nums tabular-nums;background:var(--surface);border:1.5px solid var(--green-chip);color:var(--green);transition:background-color var(--t) var(--ease-out),border-color var(--t) var(--ease-out),color var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out),transform var(--t) var(--ease-out)}
.stage.done{color:var(--ink-2)}
.stage.done .number{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.stage.active{color:var(--ink);font-weight:600}
.stage.active .number{border-color:var(--green);color:var(--green-strong);box-shadow:0 0 0 4px var(--green-soft);transform:scale(1.06)}
/* While the run works, only the current step turns; the status dot breathes. Nothing else loops. */
#research-view[data-running] .stage.active .number::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--green);animation:spin 1.1s linear infinite}
/* The progress bar is the steps card's inner bottom edge, drawn only while the run works; at rest the steps already say
   where the run stands, so it stays out of sight but remains the page's progressbar for assistive technology. */
.stage-frame{position:relative;border-radius:var(--radius-card);overflow:hidden}
.progress-line{position:absolute;left:0;right:0;bottom:0;height:2px;margin:0;background:transparent;opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease-out)}
#research-view[data-running] .progress-line{opacity:1}
.progress-line>div{width:100%;height:100%;background:var(--green);transform:scaleX(var(--progress,0));transform-origin:left;transition:transform var(--t) var(--ease-out)}
/* One line that says every step is done, drawn in place of the finished track at every width, so a finished report starts
   sooner; the track stays in the accessibility tree (visually hidden), so the line itself is hidden from assistive technology. */
.stage-summary{display:none;align-items:center;gap:10px;margin:0;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);font-size:13px;font-weight:500;line-height:1.4;color:var(--ink-2)}
.stage-summary-mark{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--on-accent);font-size:11px;font-weight:700}
.stage-frame:has(>#stage-track[data-complete]) .stage-summary{display:flex}
.stage-frame>#stage-track[data-complete]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.notice{background:var(--amber-soft);padding:11px 14px;border:1px solid var(--amber-line);border-radius:var(--radius-card);margin-top:16px;font-size:13px;line-height:1.6;color:var(--amber-ink)}
/* A long run notice (app.mjs renderWarning): its first sentence leads, the rest follows on the same paragraph. On a phone the
   rest folds behind "Ver detalhes", a quiet text button in the notice's ink, so the report starts sooner (below). */
.notice-more{display:none;margin:0 0 0 4px;padding:0;border:0;background:none;color:inherit;font-size:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.notice-more:hover{text-decoration-thickness:2px}
.notice.error{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.notice:not(.hidden){animation:fade-in var(--t) var(--ease-out) backwards}
/* Coverage above the tabs: a folded row like "Modelo e processamento", its summary line saying what was counted;
   opened, the sheet holds the hairline ledger of research_coverage.css. The report keeps the ledger in full.
   Before anything is counted it is one quiet line. */
.metrics{margin:12px 0 20px}
.metrics:empty{display:none}
.coverage-fold-summary{min-width:0;font-weight:400;color:var(--muted)}
.coverage-fold>.research-coverage>h3{display:none}
.coverage-fold[open]>.research-coverage{animation:fade-in var(--t) var(--ease-out) backwards}
.coverage-pending{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
/* With a report, the ledger lives once, in the report (#report-coverage): the row above the tabs keeps its summary line and
   is a link down to it, marked by a downward arrow instead of the disclosure chevron. */
.coverage-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:36px;padding:6px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--band-top) var(--band-top) var(--band-bottom) var(--band-bottom);font-size:13.5px;line-height:1.45;color:var(--ink-2);text-decoration:none;transition:background-color var(--t-fast),color var(--t-fast)}
.coverage-line:hover{background:var(--surface-2);color:var(--ink)}
.coverage-line strong{font-weight:600}
.coverage-line-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--green-strong);white-space:nowrap}
.coverage-line-go::after{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--icon-arrow) center/contain no-repeat;mask:var(--icon-arrow) center/contain no-repeat;transform:rotate(90deg);transition:transform var(--t) var(--ease-out)}
/* The report's ledger takes focus when the row leads to it; the ring shows for keyboard users only. */
#report-coverage:focus{outline:none}
#report-coverage:focus-visible{outline:2px solid var(--focus);outline-offset:6px;border-radius:var(--radius)}
.tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 20px}
.tabs button{background:none;border:0;border-radius:var(--radius) var(--radius) 0 0;padding:10px 12px;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color var(--t-fast),background-color var(--t-fast)}
.tabs button:hover{color:var(--ink);background:var(--surface-2)}
.tabs button:active{background:var(--surface-3)}
.tabs button[aria-selected=true]{color:var(--green-strong);font-weight:600}
.tab-indicator{position:absolute;left:0;bottom:-1px;width:100px;height:2px;border-radius:2px;background:var(--green);pointer-events:none;transform-origin:left;transform:translateX(var(--x,0)) scaleX(calc(var(--w,0) / 100))}
.tab-indicator[data-ready]{transition:transform var(--t) var(--ease-out)}
.content-layout{display:flex;align-items:flex-start;gap:16px}
#content-panel{flex:1;min-width:0}
#content-panel.is-entering>*{animation:rise-in var(--t) var(--ease-out) backwards}
#content-panel.is-entering>*:nth-child(2){animation-delay:.04s}
#content-panel.is-entering>*:nth-child(n+3){animation-delay:.08s}
#content-panel.is-entering .source-card:nth-child(-n+8){animation:rise-in var(--t) var(--ease-out) backwards}
#content-panel.is-entering .source-card:nth-child(2){animation-delay:.04s}
#content-panel.is-entering .source-card:nth-child(3){animation-delay:.08s}
#content-panel.is-entering .source-card:nth-child(4){animation-delay:.12s}
#content-panel.is-entering .source-card:nth-child(n+5){animation-delay:.16s}
/* White sheet with a hairline, like Elicit's step cards. */
.paper-surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:24px 28px;box-shadow:var(--shadow-sm)}
.paper-surface h3{font-weight:600;font-size:18px;line-height:1.3;margin:26px 0 10px;color:var(--ink)}
.paper-surface h3:first-child{margin-top:0}
.paper-surface p{font-size:14px;line-height:1.75;color:var(--ink-2);max-width:76ch}
.paper-surface .filter-help,.paper-surface .muted{font-size:12.5px;line-height:1.6;color:var(--muted)}
.paper-surface .report-note{font-size:12.5px;background:var(--green-wash);border:1px solid var(--green-line);padding:10px 14px;border-radius:var(--radius-card);color:var(--ink-2);line-height:1.6;max-width:none}
.paper-surface ul,.paper-surface ol{line-height:1.7;font-size:14px}
/* The report's own title, under the note and the contents: a document title, smaller than the run's. When it only repeats
   the page title above (render.mjs data-repeats-run-title), the screen does not draw it twice: it stays for assistive
   technology, and print shows it (below). */
.paper-surface .report-title{margin:24px 0 8px;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.3;color:var(--ink)}
.paper-surface .report-title[data-repeats-run-title]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Export actions: Elicit's "Export as" toolbar buttons. The arrow is drawn with empty alternative text,
   so a link is named "PDF", not "seta para baixo PDF". At most three are in view (render.mjs exportLinks): the report's
   copy button, the first two formats and "Mais formatos", a native popover menu with the other formats. */
.report-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px}
.report-actions>.export-row{margin:0}
/* The copy button, the formats and "Mais formatos" read as one toolbar: one type size, one 34px height (44px on touch, below). */
:where(.report-actions)>.secondary{font-size:12.5px}
:where(.report-actions)>.secondary,.export-more-toggle{min-height:34px;padding-block:0}
.export-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.export-row a{display:inline-flex;align-items:center;gap:6px;min-height:34px;font-size:12.5px;font-weight:500;text-decoration:none;color:var(--ink-2);background:var(--surface);border:1px solid var(--control-line);padding:0 12px;border-radius:var(--radius);transition:border-color var(--t-fast),background-color var(--t-fast),color var(--t-fast)}
.export-row a::before{content:"↓";content:"↓" / "";color:var(--muted);transition:transform var(--t) var(--ease-out),color var(--t-fast)}
.export-row a:hover{border-color:var(--line-hover);background:var(--surface-2);color:var(--ink)}
.export-row a:hover::before{color:var(--green)}
.export-row a:active{background:var(--green-soft)}
.export-more-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;anchor-name:--export-more}
/* "formatos" (render.mjs .label-rest, which a narrow phone hides) joins "Mais" in one text run, so the words keep a plain space. */
.export-more-toggle .label-rest{display:contents}
.export-more-chevron{width:12px;height:12px;background:var(--chevron) no-repeat center/12px;transition:transform var(--t) var(--ease-out)}
.export-more-toggle:has(+.export-menu:popover-open){background:var(--surface-2);border-color:var(--line-hover);color:var(--ink)}
.export-more-toggle:has(+.export-menu:popover-open) .export-more-chevron{transform:rotate(180deg)}
/* The 6px gap sits on both block sides, so the menu keeps it when it flips above its button. It opens on the side with more
   room and never runs past the screen: its height is capped by the room on that side (the position area), and it scrolls. */
.export-menu{position:fixed;inset:auto;margin:6px 0;position-anchor:--export-more;position-area:bottom span-right;position-try-fallbacks:bottom span-left,top span-right;position-try-order:most-height;width:max-content;min-width:220px;max-width:calc(100vw - 32px);max-height:min(calc(100% - 12px),480px);overflow-y:auto;padding:6px;border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
.export-menu:popover-open{display:grid;gap:2px;animation:pop-in var(--t) var(--ease-out)}
.export-menu-group{display:grid;gap:1px}
.export-menu-group+.export-menu-group{margin-top:4px;padding-top:6px;border-top:1px solid var(--line)}
.export-menu-label{margin:0;padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--muted)}
.export-menu .export-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:var(--radius);background:transparent;color:var(--ink-2);font-size:13.5px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast)}
.export-menu .export-menu-item::before{width:12px;text-align:center;flex-shrink:0}
.export-menu .export-menu-item:hover{background:var(--surface-2);color:var(--ink)}
.export-menu .export-menu-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* The local link is no download: a link glyph in the arrow's place. */
.export-menu button.export-menu-item::before{content:"";height:12px;background:var(--muted);-webkit-mask:var(--icon-link) center/contain no-repeat;mask:var(--icon-link) center/contain no-repeat}
@supports not (anchor-name:--a){
  .export-menu{inset:0;margin:auto}
}
/* In-text citations are small gray number chips, teal on hover, as in Elicit's answers. They close their sentence on its line:
   the last word and the chips form one unbreakable group (render.mjs citedTextHtml), so a chip never starts a line alone. */
.cite-tail{white-space:nowrap}
.citation{color:var(--ink-2);background:var(--surface-3);border:0;border-radius:var(--radius);padding:2px 5px;margin-left:3px;font-family:var(--font-ui);font-size:12px;font-weight:600;line-height:1;vertical-align:super;cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.citation:hover{background:var(--green);color:var(--on-accent)}
.citation:active{transform:scale(.97)}
.empty-surface{border:1px dashed var(--line-strong);border-radius:var(--radius-frame);padding:48px 28px;text-align:center;background:var(--surface)}
.empty-surface h3{font-size:17px;font-weight:600;margin:14px 0 6px}
.empty-surface p{font-size:13.5px;line-height:1.7;color:var(--muted);max-width:52ch;margin:0 auto}
.loader{display:inline-block;width:26px;height:26px;border-radius:50%;border:2px solid var(--green-soft);border-top-color:var(--green);animation:spin .9s linear infinite}
.eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
/* Details drawer, like Elicit's right-hand "Details" panel: a bordered sheet with a short lift, wider on wide screens. */
.source-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 20px;width:clamp(300px,32vw,420px);flex-shrink:0;min-width:0;position:sticky;top:calc(var(--header-h) + 14px);max-height:calc(100dvh - var(--header-h) - 28px);overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;box-shadow:var(--shadow-sm);scroll-margin-top:calc(var(--header-h) + 12px);animation:drawer-in var(--t) var(--ease-out) backwards}
/* Focus moves here when a source opens; the ring shows for keyboard users only. */
.source-panel:focus{outline:none}
.source-panel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.source-panel h3{font-size:15px;line-height:1.4;font-weight:600;margin:10px 0 8px}
.source-panel p{font-size:13px;line-height:1.7;color:var(--muted)}
.source-panel .abstract{font-size:13.5px;line-height:1.75;color:var(--ink-2);max-height:440px;overflow-y:auto;white-space:pre-wrap;background:var(--surface-2);padding:12px 14px;border-radius:var(--radius)}
.source-panel a{font-size:13px;overflow-wrap:anywhere}
.source-panel details{margin:14px 0}
.source-panel blockquote{margin:10px 0;padding:10px 14px;background:var(--green-wash);border:0;border-radius:var(--radius);line-height:1.65}
.source-panel img{max-width:100%;height:auto}
.source-panel figure{margin:16px 0}
.source-panel iframe{max-width:100%}
.source-panel .article-inspection{border:0;padding:0;background:transparent}
.source-panel>.workflow-actions:first-child{margin-top:0}
.close-source{float:right;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--control-line);border-radius:var(--radius);background:var(--surface);color:var(--muted);font-size:17px;line-height:1;transition:background-color var(--t-fast),color var(--t-fast),transform var(--t) var(--ease-out)}
.close-source:hover{background:var(--surface-2);color:var(--ink)}
.close-source:active{transform:scale(.97)}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.plan-grid textarea{font-size:13.5px;min-height:130px}
.plan-title{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;font-size:13px;font-weight:500;color:var(--ink-2)}
.plan-title input{width:100%}
.plan-description{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:20px}
/* The read-only plan under a staged review: one folded row on its sheet, like the report's tray; opened, the plan as before. */
.paper-surface.plan-fold{padding:0}
.plan-fold>summary{padding:calc((44px - 1lh)/2) 20px;border-radius:var(--radius-card)}
.plan-fold>summary:hover{background:var(--surface-2);color:var(--ink)}
.plan-fold[open]>summary{border-radius:var(--radius-card) var(--radius-card) 0 0;border-bottom:1px solid var(--line)}
.plan-fold-summary{font-weight:400;color:var(--muted)}
.plan-fold-body{padding:20px 28px 24px}
.plan-fold[open]>.plan-fold-body{animation:fade-in var(--t) var(--ease-out) backwards}
.form-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:22px}
.form-bottom p{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:420px;margin:0}
/* Source list: rows of a paper table. */
.source-list{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.source-card{background:var(--surface);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 20px;transition:background-color var(--t-fast)}
.source-card:last-child{border-bottom:0}
.source-card:hover{background:var(--green-wash)}
/* The source open in the side panel stays marked in its list (app.mjs markOpenSource: aria-current), as Elicit marks the open row.
   One look everywhere: the selection wash inside a hairline teal edge. A row flush with its frame (a card of the source list, a
   table row) takes it on itself, square; a row that floats on the sheet (a reference with its number, a row under review) takes
   it on a layer behind its content that reaches a little past the text, with the small radius. */
.source-card[aria-current=true],.source-card[aria-current=true]:hover{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line)}
/* Its teal tags would melt into the selection wash: on the marked card they sit on white. */
.source-card[aria-current=true] .tag:not(.excluded){background:var(--surface)}
/* A table row draws the same hairline edge as an outline drawn inward: the cells' collapsed borders would cover an inset shadow's top and bottom. */
:is(.table-scroll,.table-wrap) tbody tr[aria-current=true],:is(.table-scroll,.table-wrap) tbody tr[aria-current=true]:hover{background:var(--green-soft);outline:1px solid var(--green-line);outline-offset:-1px}
.refs li[aria-current=true],.workflow-review .workflow-items>[data-source-row][aria-current=true]{position:relative;isolation:isolate}
.refs li[aria-current=true]::before,.workflow-review .workflow-items>[data-source-row][aria-current=true]::before{content:"";position:absolute;z-index:-1;inset:0 -12px;border-radius:var(--radius);background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line);pointer-events:none}
/* A reference's layer also covers its number, which sits in the list's left padding. */
.refs li[aria-current=true]::before{inset:-4px -10px -4px -30px}
/* Teal text on the wash falls under 4.5:1 in the light theme (4.34): the open reference reads in the strong teal. */
.refs li[aria-current=true]>button{color:var(--green-strong)}
/* Teal tags of a marked review row sit on white, as on the marked card. */
.workflow-review .workflow-items>[data-source-row][aria-current=true] .tag:not(.excluded){background:var(--surface)}
.source-card h3{font-size:14px;line-height:1.45;font-weight:500;margin:0 0 6px;color:var(--ink)}
.source-card p{font-size:13px;line-height:1.65;color:var(--muted);margin:6px 0}
.source-card>button{font-size:12.5px;font-weight:600;min-height:30px;padding:5px 0;border:0;background:transparent;color:var(--green-strong)}
.source-card>button:hover{text-decoration:underline;text-underline-offset:3px}
.source-card>button:active,.refs button:active{opacity:.7}
.tag{display:inline-flex;align-items:center;background:var(--green-soft);color:var(--green-strong);border-radius:var(--radius);padding:2px 8px;margin:6px 6px 0 0;font-size:12px;font-weight:500}
.tag.excluded{background:var(--amber-soft);color:var(--amber-ink)}
/* An inactive state (a paused or archived routine) is no action: a neutral tag, gray under a hairline, never the teal. */
.tag.neutral{background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
/* A state that failed is an error, in the error colors; amber stays for what needs attention. */
.tag.error{background:var(--red-soft);color:var(--red);box-shadow:inset 0 0 0 1px var(--red-line)}
.extraction{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.extraction dt{font-size:12.5px;font-weight:600;margin-top:8px}
.extraction dd{font-size:13px;margin:4px 0;color:var(--muted);line-height:1.6}
.extraction blockquote{margin:6px 0;padding:8px 12px;background:var(--surface-2);border:0;border-radius:var(--radius);font-style:italic;font-size:13px;line-height:1.6;color:var(--ink-2)}
.activity-list{list-style:none;margin:0;padding:0}
.activity-list li{position:relative;padding:11px 0 11px 22px;font-size:13px;line-height:1.6;border-bottom:1px solid var(--line)}
.activity-list li::before{content:"";position:absolute;left:3px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.activity-list li:last-child{border-bottom:0}
.activity-list li:last-child::before{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.activity-list time{font-size:12px;color:var(--muted);margin-right:12px;font-variant-numeric:lining-nums tabular-nums}
.refs{font-size:13px;line-height:1.7;color:var(--muted);padding-left:22px}
.refs li{margin:8px 0}
/* Top-aligned, so the list number stays on the first line when a long title wraps. */
.refs button{border:0;background:transparent;padding:0;text-align:left;vertical-align:top;color:var(--green);font-size:13px;cursor:pointer}
.refs button:hover{text-decoration:underline;text-underline-offset:3px}
.chart{margin:20px 0;padding:14px 16px;background:var(--surface-2);border-radius:var(--radius-card)}
.chart-title{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.chart-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin:7px 0;font-variant-numeric:lining-nums tabular-nums}
.chart-row span{width:40px}
.chart-row b{display:block;height:8px;min-width:3px;font-weight:400;background:var(--green);border-radius:4px;transform-origin:left;animation:bar-grow var(--t) var(--ease-out) backwards}
/* Tables follow Elicit's paper table: gray header band, hairline grid, roomy cells, teal-washed hover.
   .table-wrap is the older name some workbench modules still emit; it gets the same frame and scroll. */
/* When a table is wider than its frame it scrolls inside it, and a soft shadow at the hidden edge says so: the classic
   pairing of covers that scroll with the content and shadows that stay put, drawn from tokens. The shadow is cut from --scrim,
   dark in both themes, so on a dark sheet it still reads as depth, not as a glow. Body cells are transparent so the shadow
   shows through them. */
:is(.table-scroll,.table-wrap){max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-card);background:linear-gradient(to right,var(--surface) 30%,transparent) left center/40px 100% no-repeat local,linear-gradient(to left,var(--surface) 30%,transparent) right center/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,color-mix(in oklch,var(--scrim) 45%,transparent),transparent) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,color-mix(in oklch,var(--scrim) 45%,transparent),transparent) right center/14px 100% no-repeat scroll,var(--surface)}
:is(.table-scroll,.table-wrap) table{border-collapse:collapse;width:100%;font-size:13px}
:is(.table-scroll,.table-wrap) th{text-align:left;font-weight:500;color:var(--ink-2);background:var(--paper)}
:is(.table-scroll,.table-wrap) th,:is(.table-scroll,.table-wrap) td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
:is(.table-scroll,.table-wrap) th+th,:is(.table-scroll,.table-wrap) td+td,:is(.table-scroll,.table-wrap) th+td{border-left:1px solid var(--line)}
:is(.table-scroll,.table-wrap) tbody th{background:transparent;font-weight:500;color:var(--ink)}
:is(.table-scroll,.table-wrap) tbody tr:last-child>*{border-bottom:0}
:is(.table-scroll,.table-wrap) tbody tr{transition:background-color var(--t-fast)}
:is(.table-scroll,.table-wrap) tbody tr:hover{background:var(--green-wash)}
:is(.table-scroll,.table-wrap) caption{text-align:left;font-size:12px;color:var(--muted);padding:8px 14px;background:var(--surface)}
.table-wrap{margin:16px 0}
.table-wrap td a{overflow-wrap:anywhere}

/* Dialogs */
#scope-modal,.feature-modal{max-height:90dvh;overflow:auto;border:1px solid var(--line-strong);border-radius:var(--radius-frame);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
#scope-modal{width:min(540px,calc(100% - 32px));padding:24px}
dialog[open]{animation:dialog-in var(--t) var(--ease-out)}
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(2px);animation:fade-in var(--t) var(--ease-out)}
#scope-modal h2{font-size:19px;font-weight:600;margin:0}
#scope-help{font-size:13.5px;line-height:1.6;color:var(--muted)}
#scope-modal>form>label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin:16px 0 4px}
.scope-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.scope-heading .secondary{flex:none;width:34px;height:34px;min-height:0;padding:0;border-color:transparent;font-size:18px;line-height:1}
.scope-options{display:grid;gap:8px;border:0;padding:12px 0;margin:0}
.scope-card{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-card);cursor:pointer;background:var(--surface);transition:border-color var(--t-fast),background-color var(--t-fast),box-shadow var(--t),transform var(--t) var(--ease-out)}
.scope-card:hover{border-color:var(--line-strong)}
.scope-card:has(input:checked){border-color:var(--green);background:var(--green-wash);box-shadow:0 0 0 1px var(--green)}
.scope-card input{width:18px;height:18px}
.scope-card strong{display:block;font-size:14px;font-weight:600}
.scope-card small{display:block;font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:2px}
.scope-actions{justify-content:flex-end;margin-bottom:0}
.feature-modal{width:min(680px,calc(100% - 32px));padding:24px}
/* Labels sit above their fields; a checkbox stays on its text's line (.check is left out on purpose). */
.feature-modal label:not(.check),.report-controls label:not(.check){display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2);margin:12px 0}
.feature-modal .check{margin:8px 0}
.feature-modal h2{font-size:19px;font-weight:600;margin:0}
.feature-modal details{margin:14px 0}
.feature-modal :is(h4,dt){font-size:13.5px;font-weight:600;color:var(--ink)}
.feature-modal dd{margin:2px 0 8px;font-size:13px;color:var(--ink-2)}
/* Fieldsets nested in a dialog or in the revision settings group by space and a small label, not a second frame. */
.revision-settings details fieldset,.feature-modal fieldset{display:flex;flex-wrap:wrap;gap:4px 18px;min-width:0;margin:14px 0 0;padding:0;border:0}
.revision-settings details fieldset>legend,.feature-modal fieldset>legend{width:100%;margin-bottom:4px;padding:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.revision-settings details fieldset .check,.feature-modal fieldset .check{margin:4px 0}

/* Review between stages: one sheet. Inside it, items read as rows divided by hairlines (Elicit's fine grid),
   never as cards inside the card; their forms are separated by space and a hairline, not by a filled box. */
.workflow-review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px 24px 22px;margin:20px 0;box-shadow:var(--shadow-sm)}
.workflow-review>h3{margin:16px 0 4px;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)}
/* With one stage there is no switcher above it: the title opens the sheet on its padding alone. */
.workflow-review>h3:first-child{margin-top:0}
.workflow-review>p{max-width:72ch;margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.workflow-review p{max-width:72ch}
/* The review's own option (e.g. "Garantir inclusão e citação…") reads as an option, not as a hint. */
.workflow-review .check>span{font-size:13.5px;color:var(--ink-2)}
/* "Abrir plano completo" follows the questions form: the same 12px rhythm as the actions below it. */
.workflow-review>button{margin:12px 8px 0 0}
.workflow-review>p.muted{color:var(--muted)}
.workflow-review h4{margin:24px 0 6px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.workflow-nav,.workflow-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
/* The stage switcher is one segmented control, not a row of buttons: a gray track holding the stages, the chosen one raised
   on white (aria-pressed), the others quiet. It stays one row: where the stages do not fit (a narrow phone) the track
   scrolls sideways instead of wrapping, and a focused stage draws its ring inside, so the track does not clip it. */
.workflow-nav{display:inline-flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:2px;margin-top:0;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
.workflow-nav>button.secondary{flex:none;min-height:30px;padding:4px 12px;border-color:transparent;background:transparent;color:var(--muted);font-weight:500;white-space:nowrap;border-radius:calc(var(--radius) - 2px)}
.workflow-nav>button:focus-visible{outline-offset:-2px}
.workflow-nav>button.secondary:hover:not(:disabled){background:var(--surface-3);border-color:transparent;color:var(--ink)}
.workflow-nav>button.chosen,.workflow-nav>button.chosen:hover:not(:disabled){background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.workflow-items{display:grid;gap:10px;margin:16px 0}
.workflow-paper{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-card);align-items:flex-start;transition:border-color var(--t-fast),background-color var(--t-fast)}
.workflow-paper:hover{border-color:var(--line-strong)}
.workflow-paper:has(input:checked){background:var(--green-wash);border-color:var(--green-chip)}
.workflow-paper input{margin-top:3px}
.workflow-paper small{display:block;color:var(--muted);margin-top:4px;font-size:12px}
.workflow-review .workflow-items{gap:0;border-top:1px solid var(--line)}
.workflow-review .workflow-items>*{padding:14px 0;border-bottom:1px solid var(--line)}
/* A corpus row: the record on the left, its source action on the right; a checked row takes the teal wash. */
.workflow-review .workflow-items>div{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;transition:background-color var(--t-fast)}
.workflow-review .workflow-items>div>.workflow-paper{flex:1 1 320px;min-width:0;padding:0;border:0;border-radius:0;background:none}
.workflow-review .workflow-items>div>button{flex:none}
/* The ghost action's text lines up with the row's right edge and with the title's first line: the button's 6px padding and
   1px border are pulled back up (and once it wraps under the title, with the title's left edge, below). */
.workflow-review .workflow-items>div>.ghost{margin:-6px -10px 0 0}
.workflow-review .workflow-items>div:has(input:checked){background:var(--green-wash);box-shadow:-12px 0 0 var(--green-wash),12px 0 0 var(--green-wash)}
.workflow-review #workflow-library .workflow-paper{padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0}
.workflow-review #workflow-library .workflow-paper:has(input:checked){background:var(--green-wash);box-shadow:-12px 0 0 var(--green-wash),12px 0 0 var(--green-wash)}
.criterion{border:1px solid var(--line);padding:16px;border-radius:var(--radius-card)}
.workflow-review .criterion{padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0}
.criterion>strong{display:block;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.criterion p{white-space:pre-line}
.criterion blockquote{margin:12px 0;padding:10px 14px;background:var(--surface-2);border-radius:var(--radius);line-height:1.6}
.criterion dt{font-weight:600;margin-top:10px}
.criterion dd{margin-left:0}
.criterion .tag{margin:8px 6px 0 0}
.criterion .workflow-actions{margin:10px 0 0}
/* A review row's own ghost action ("Conferir fonte e trechos") lines its text up with the row's text. */
.criterion>.ghost{margin:6px 0 0 -10px}
/* A label's weight never reaches the field it wraps (fields inherit the font). */
label :is(input,select,textarea){font-weight:400}
.workflow-paper strong{font-weight:600}
/* Labels of the review and routine forms sit above their fields. */
.workflow-review form label:not(.check),#routines-view form label:not(.check){display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:10px 0;font-size:13px;font-weight:500;color:var(--ink-2)}
.workflow-review form input[type=number],#routines-view form input[type=number]{max-width:200px}
.workflow-review .extraction-schema-row label:not(.check),.workflow-review .plan-grid label:not(.check){margin:0}
.workflow-review form>button,.workflow-review .criterion>label+button{margin-top:4px}
/* A supporting question is one line: a compact field that grows with its text where field-sizing exists, and beside it a quiet
   remove button (an icon named by its question) that turns red only on hover, so ten of them do not outweigh the questions. */
.workflow-review form .question-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 10px}
.workflow-review form .question-row>label:not(.check){margin:0}
.workflow-review .question-row textarea{min-height:44px;padding:9px 12px;line-height:1.55;field-sizing:content;max-height:calc(8lh + 20px)}
/* The field already grows with its text, so its resize grip would only add noise. */
@supports (field-sizing:content){.workflow-review .question-row textarea{resize:none}}
.workflow-review .criterion.question-row>label+button{margin:0 0 4px}
/* Ten of them sit in a column, so the remove button draws no border at rest: a muted icon that turns red, with its border,
   only under the pointer or keyboard focus; the 36px target (44px on touch) stays. */
.question-row>.question-remove{display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;color:var(--muted);background:transparent;border-color:transparent}
.question-row>.question-remove:is(:hover,:focus-visible):not(:disabled){color:var(--red);background:var(--red-soft);border-color:var(--red-line)}
/* The stage's main action stays within reach on a long review: a bar held at the foot of the sheet while it scrolls,
   on the sheet's white under a hairline, secondary actions first and the primary last, on the right. Its two halves only
   matter on a phone (below); here their buttons sit in the bar itself. */
.workflow-review>.workflow-bar{position:sticky;bottom:0;z-index:2;justify-content:flex-end;align-items:center;gap:8px;margin:20px -24px -22px;padding:12px 24px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 var(--radius-card) var(--radius-card)}
.workflow-bar>:is(.workflow-bar-more,.workflow-bar-main){display:contents}
/* Keyboard focus never lands under the held bar or the sticky header: scrolling to a focused field keeps it clear of both
   (WCAG 2.4.11). The bar is about 61px tall here and 65px on a phone. */
html:has(.workflow-review>.workflow-bar){scroll-padding-block:calc(var(--header-h) + 12px) 80px}
/* That padding already clears the header, so the source panel's own margin would double it when the panel is scrolled to. */
html:has(.workflow-review>.workflow-bar) .source-panel{scroll-margin-top:0}
.feature-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
/* Report and routine cards: the tag, the name, the text, and the card's one action at its foot. Only that button acts. */
.feature-cards .paper-surface{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:20px 22px}
.feature-cards .paper-surface>.tag{margin:0}
.feature-cards h3{margin:10px 0 4px;font-size:16px;font-weight:600;line-height:1.35}
.feature-cards p{margin:6px 0;font-size:14px;line-height:1.6;white-space:pre-line}
.feature-cards .paper-surface>button{margin-top:auto}
/* The card's ghost action lines its text up with the card's text. */
.feature-cards .paper-surface>.ghost{margin-left:-10px}
.feature-cards .paper-surface>.filter-help{margin:8px 0 14px}
/* Report tools fold into one row of the research view's kind (above) so the report itself stays the main surface;
   opened, the tools follow on the same sheet. */
.paper-surface.report-controls{margin-bottom:16px;padding:0 16px;box-shadow:none}
.report-controls>summary{margin:0 -16px}
.paper-surface.report-controls[open]{padding-bottom:16px}
.report-controls[open]>summary{margin-bottom:12px}
.report-versions-count{font-weight:400;color:var(--muted)}
.report-controls .workflow-actions{align-items:end;gap:10px;margin:12px 0}
.report-controls label:not(.check){flex:1;min-width:min(170px,100%);margin:0}
/* The checkbox sits on the line of the fields beside it (36px), not at the middle of label plus field. */
.report-controls .workflow-actions>.check{flex:0 1 auto;align-self:flex-end;min-height:36px;color:var(--ink-2)}
.report-controls form>.check{margin:10px 0}
/* The chat sits in the same tray, below a hairline, without a box of its own. */
.report-controls .report-chat{margin-top:16px;padding:14px 0 0;background:none;border-top:1px solid var(--line);border-radius:0}
.source-document{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
.source-document input[type=file]{width:100%;margin:8px 0}
.source-document button{margin:5px 3px 5px 0}
.source-document figure{margin:20px 0}
.source-document figure img{width:100%;height:auto;object-fit:contain}
.document-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
/* Routine notifications: rows of one sheet, like the source list. */
#routine-notifications:has(.notification){background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.notification{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);margin:10px 0;font-size:12.5px;color:var(--muted)}
#routine-notifications .notification{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;align-items:baseline}
/* The row's action is a quiet ghost button on the right of the date line, its text on the row's right edge and on the date's
   baseline; a read notification says so in the same place. */
.notification>.ghost{margin:-7px -10px -7px auto}
.notification-state{margin-left:auto;font-size:12px;color:var(--muted)}
#routine-notifications .notification:last-child{border-bottom:0}
.notification p{flex-basis:100%;margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.notification small{font-size:12px;color:var(--muted)}
#routine-detail{margin-top:20px}
#routine-detail:empty{display:none}
#routine-detail h4{margin:22px 0 8px;font-size:15px;font-weight:600;color:var(--ink)}
#routine-form-error{font-size:13px}
/* Routines: the usage and delivery sheets keep their distance and stay out of sight until loaded. */
#routines-view>.paper-surface{margin-top:16px}
#routines-view>.paper-surface:empty{display:none}
#routines-view>.routines-heading{margin:28px 0 10px;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)}
#routines-view form>button{margin-top:4px}
#routines-view form .check{margin:8px 0}
#routines-view form input[type=email]{max-width:420px}
.table-controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:20px 0}
.table-controls label{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.query-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px}
.query-tabs button{min-width:150px;max-width:340px;white-space:normal;text-align:left;flex-shrink:0}
.query-tabs [aria-pressed=true]{border-color:var(--green);background:var(--green-wash);color:var(--green-strong)}
/* Contents of the report: a hairline band under the note, not a box inside the sheet. On a wide sheet it becomes a
   column beside the text that stays in view while the report scrolls (below, from 1200px). Its links are quiet, as in
   Elicit's side index: muted, no underline; the section in view (app.mjs bindReportToc, aria-current="location") reads in
   ink and, in the column, carries a 2px teal mark on the column's hairline that tells where the reader is. */
.report-toc{display:flex;gap:6px 14px;flex-wrap:wrap;padding:12px 0;border-block:1px solid var(--line);margin:16px 0 22px;font-size:13px}
.report-toc strong{width:100%;font-size:12.5px;font-weight:600;color:var(--muted)}
.report-toc a{position:relative;color:var(--muted);font-weight:500;text-decoration:none;border-radius:2px;transition:color var(--t-fast)}
.report-toc a:hover{color:var(--ink)}
.report-toc a[aria-current]{color:var(--ink)}
/* The reading measure is held by each text element, so the table, the chart, the notes and the coverage ledger take the
   whole width of the text column instead of the prose's: paragraphs (.paper-surface p), lists and headings stop near 76ch. */
.report-body>:is(ul,ol,h3){max-width:76ch}
/* The notes are prose too: in their 12.5px, 85ch ends the box where the 14px paragraphs end (76ch), not at the table's edge. */
.report-sheet .report-note{max-width:85ch}
/* A jump from the contents lands below the sticky header, not under it. */
.report-sheet [id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* From 1200px the sheet has two columns: the text column takes the room (1fr) and the contents a narrow 180-220px column
   beside it, 40px apart. Prose keeps its measure inside the text column; data uses its full width. */
@media(min-width:1200px){
  .content-layout:not(:has(>.source-panel:not(.hidden))) .report-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,220px);grid-template-areas:"note toc" "body toc";column-gap:40px;align-items:start}
  .content-layout:not(:has(>.source-panel:not(.hidden))) .report-sheet>.report-note{grid-area:note}
  .content-layout:not(:has(>.source-panel:not(.hidden))) .report-sheet>.report-body{grid-area:body;min-width:0}
  /* The column scrolls when taller than the screen, so it clips at its padding box: its hairline is drawn as a 1px background
     at the padding box's left edge, and the current link's 2px mark sits on that same edge, over the hairline, unclipped. */
  .content-layout:not(:has(>.source-panel:not(.hidden))) .report-sheet>.report-toc{grid-area:toc;position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100dvh - var(--header-h) - 32px);overflow-y:auto;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;padding:0 0 0 16px;border:0;background:linear-gradient(var(--line),var(--line)) left top/1px 100% no-repeat}
  .content-layout:not(:has(>.source-panel:not(.hidden))) .report-sheet>.report-toc strong{margin-bottom:6px}
  .content-layout:not(:has(>.source-panel:not(.hidden))) .report-sheet>.report-toc a{padding:4px 0;line-height:1.45}
  .content-layout:not(:has(>.source-panel:not(.hidden))) .report-sheet>.report-toc a[aria-current]::before{content:"";position:absolute;left:-16px;top:4px;bottom:4px;width:2px;border-radius:0 1px 1px 0;background:var(--green)}
}
.synthesis-table td details{min-width:180px}
/* In a cell the summary is the extracted value itself: data, so it keeps the cell's text, with the chevron on its first line. */
.synthesis-table summary{align-items:flex-start;padding-block:4px;font-size:13px;font-weight:400;color:var(--ink)}
.synthesis-table summary::before{margin-top:3px}
.synthesis-table details button{margin-top:10px}
/* Edit forms inside a review row: a hairline and space, not a filled box inside the row. */
.criterion-edit-form,.decision-form,.extraction-edit-form{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.extraction-schema-row{display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:end;padding:14px 0;border-bottom:1px solid var(--line)}
#extraction-schema-form{border-top:1px solid var(--line);margin-bottom:12px}
#extraction-schema-form>button{margin:12px 8px 0 0}
.claim-focus{padding:14px 16px;background:var(--green-wash);border:1px solid var(--green-line);border-radius:var(--radius-card);margin:18px 0}
.source-pdf{width:100%;height:520px;border:1px solid var(--line-strong);border-radius:var(--radius-card);margin-top:16px}
.pilot-history pre,#routine-proposal pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:400px;overflow:auto}
.report-chat{margin-top:16px;padding:14px 0 0;border-top:1px solid var(--line)}
.report-chat form{margin-top:12px}
.report-chat form>button{margin-top:10px}
.report-chat article{border-top:1px solid var(--line);padding:14px 0}
/* The staged reading plan under the chat: below a hairline, with a quiet summary. */
.report-chat-reading{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.report-chat-reading h4{margin:18px 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.report-chat-reading p{font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:72ch}
/* "Rever etapas e extrações" is a row like the others; opened, the review it holds loses its own frame and sits on the
   row's sheet under the summary's hairline, so there is no card inside the card. Right after the coverage row it closes the
   band of provenance rows (above). */
.workflow-history{margin:0 0 20px}
/* A source opened from the review sits beside it, as it sits beside the tab's content (app.mjs placeSourcePanel), so the row
   that was clicked stays in view next to it. The review starts on the coverage row's 20px either way, so opening the panel
   moves nothing. */
.review-layout>#workflow-panel>.workflow-review{margin-top:0}
.review-layout:has(>.source-panel:not(.hidden)){display:flex;align-items:flex-start;gap:16px}
.review-layout>#workflow-panel{flex:1;min-width:0}
.review-layout>.source-panel{margin-bottom:20px}
/* "Versões, revisão e perguntas ao corpus" and the export toolbar share one line where there is room, so the report starts
   sooner; opened, the tray takes the whole line and the toolbar follows under it. */
#content-panel:has(>.report-controls){display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
#content-panel:has(>.report-controls)>*{flex:1 1 100%;min-width:0}
#content-panel>.report-controls:not([open]){flex:1 1 360px}
#content-panel:has(>.report-controls)>.report-actions{flex:0 1 auto}
#content-panel>#report-versions-status:empty{display:none}
/* While the corpus is under review this tab's list folds under one line (render.mjs evidenceHtml): the review is the list in view. */
.corpus-fold>summary{margin-bottom:4px}
.workflow-history>.workflow-review{margin:0;border:0;border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:none}
.workflow-history[open]>*:not(summary){animation:fade-in var(--t) var(--ease-out) backwards}
/* Settings for a new search, inside the tray: a hairline section with a floated legend, so the line stays whole. */
.revision-settings{min-width:0;margin:16px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0}
.revision-settings>legend{float:left;width:100%;margin:0 0 4px;padding:0;font-size:14px;font-weight:600;color:var(--ink)}
.revision-settings>legend+*{clear:both}
.revision-settings>.check{margin:10px 0}
.revision-settings details{margin:16px 0}

/* Independent evidence modules follow the same identity, in the same column as every module (Radar, Explorar, Conta):
   the full width of main, so their headers start where the others do. */
#evidence-workbench-view{max-width:none;margin:0}
#evidence-workbench-view>header{margin-bottom:20px}
/* The shell's topbar holds the page h1; the view title is an h2 sized as the view heading (as in Relatórios and the Radar),
   then each sheet keeps its own h2 at sheet size (the inspector inside #workbench-source keeps its own). */
.view-title{margin:0;font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.25;color:var(--ink)}
#evidence-workbench-view .paper-surface>h2{margin:0 0 8px;font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)}
#evidence-workbench-view .paper-surface{margin:18px 0}
/* The project tray under the header, the Radar's tray: evidence_projects.mjs fills it with a label and a note, discovery.mjs
   adds "Uso de IA deste projeto" after them, as a second row under a hairline. */
#evidence-workbench-view>.wb-context{display:grid;grid-template-columns:minmax(220px,350px) minmax(0,1fr);align-items:center;gap:12px 20px;margin:0 0 20px;padding:16px 20px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-card)}
#evidence-workbench-view>.wb-context:has(>#evidence-project-context:empty){display:none}
#evidence-workbench-view>.wb-context>#evidence-project-context{display:contents}
#evidence-workbench-view>.wb-context>#evidence-project-context>label{display:flex;flex-direction:column;gap:6px;max-width:none;margin:0;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink-2)}
#evidence-workbench-view>.wb-context>#evidence-project-context>label>select{font-weight:400}
#evidence-workbench-view>.wb-context>#evidence-project-context>p{max-width:72ch;margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
#evidence-workbench-view>.wb-context>#discovery-usage{grid-column:1/-1;margin:0;padding-top:4px;border-top:1px solid var(--line)}
#evidence-workbench-view>.wb-context>#discovery-usage>details{margin:0}
#evidence-workbench-view>.wb-context>#discovery-usage p{font-size:13px;line-height:1.6}
#evidence-workbench-view form>label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2);margin:16px 0}
/* Inside a sheet a fieldset groups by space and a small label, without a second frame. */
#evidence-workbench-view fieldset{min-width:0;border:0;padding:0;margin:18px 0}
#evidence-workbench-view legend{margin-bottom:6px;padding:0;font-size:13px;font-weight:600;color:var(--ink-2)}
/* A group of options right under its legend keeps the label-to-control distance of the other fields (6px). */
#evidence-workbench-view fieldset>legend+.workflow-actions{margin-top:0}
#evidence-workbench-view fieldset .check{display:inline-flex;margin:6px 16px 6px 0;line-height:1.5}
#evidence-workbench-view form>label:has(>input[type=checkbox]){flex-direction:row;align-items:center;gap:9px;font-weight:400}
/* The sheet's prose, at the weight of .paper-surface p: the view's id is kept out of the count (:where), so the captions and
   notes of the modules embedded in the workbench (.filter-help, a module's own legend rules) still win over it. */
:where(#evidence-workbench-view) .paper-surface p{font-family:inherit;font-size:14px;line-height:1.7}
/* Submits a module marks .secondary stay secondary; only an unmarked submit gets the primary look. */
#evidence-workbench-view button[type=submit]{margin-top:18px}
#evidence-workbench-view button[type=submit]:not(.secondary,.primary){display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:var(--on-accent);border:0;border-radius:var(--radius);padding:8px 14px;min-height:34px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-sm);transition:background-color var(--t) var(--ease-out),transform var(--t-fast) var(--ease-out)}
#evidence-workbench-view button[type=submit]:not(.secondary,.primary):hover:not(:disabled){background:var(--green-strong)}
#evidence-workbench-view button[type=submit]:not(.secondary,.primary):active:not(:disabled){transform:scale(.97)}
#evidence-workbench-view .control-grid{margin:18px 0}
#evidence-workbench-view summary{cursor:pointer;font-size:13.5px;font-weight:600;line-height:1.7}
#evidence-workbench-view details{margin:15px 0}
#evidence-workbench-view blockquote{margin:16px 0;padding:12px 16px;background:var(--surface-2);border-radius:var(--radius);line-height:1.7;font-size:14px}
#evidence-workbench-view pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:380px;overflow:auto;font-size:12px;line-height:1.6}
#evidence-workbench-view svg{display:block;max-width:580px;width:100%;margin:auto}
#evidence-workbench-view td small{display:block;color:var(--muted);margin-top:5px;font-size:12px}
/* Inside a workbench sheet, listed items (papers, source directions, markers, shared links) are rows divided by
   hairlines, as in Elicit's fine grid, never cards inside the card. A chosen paper takes the teal wash. */
#evidence-workbench-view .paper-surface .paper-surface{margin:18px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
#evidence-workbench-view .paper-surface :is(.criterion,.workflow-paper){padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
#evidence-workbench-view .paper-surface .workflow-paper:hover{border-color:var(--line)}
#evidence-workbench-view .paper-surface .workflow-paper:has(input:checked){background:var(--green-wash);box-shadow:-12px 0 0 var(--green-wash),12px 0 0 var(--green-wash)}
/* A paper row reads like a row of Elicit's paper table: the title, then compact metadata lines. */
#evidence-workbench-view .paper-surface .workflow-paper h4{margin:0 0 4px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
#evidence-workbench-view .paper-surface .workflow-paper>div>p{margin:2px 0;font-size:13px;line-height:1.6;color:var(--muted)}
#evidence-workbench-view .paper-surface .workflow-paper details{margin:8px 0}
/* A group of actions nested in another (the citation downloads inside a row's actions) adds no margin, so the
   buttons beside it keep their own height; mixed controls line up on their centers. */
.workflow-actions .workflow-actions{margin:0}
#evidence-workbench-view :where(.workflow-actions){align-items:center}
/* Labels of a field grid read like the other labels of the form. */
#evidence-workbench-view .control-grid label{font-size:13px;font-weight:500;color:var(--ink-2)}
/* Status is an information notice; when discovery.mjs turns it into an alert it reads as an error. */
#evidence-workbench-view #workbench-status:empty{display:none}
#evidence-workbench-view #workbench-status{margin:0 0 16px;padding:11px 14px;background:var(--green-wash);border:1px solid var(--green-line);border-radius:var(--radius-card);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
#evidence-workbench-view #workbench-status[role=alert]{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
/* The module's tools (private reports, staged research, private PDFs, discovery from the library, a search without history)
   share one sheet under the search (discovery.mjs .wb-tools), as rows divided by hairlines, not loose disclosures on the canvas. */
#evidence-workbench-view .wb-tools{padding-bottom:12px}
#evidence-workbench-view .wb-tools>:is(section,details){padding:4px 0;border-top:1px solid var(--line)}
#evidence-workbench-view .wb-tools>section:empty{display:none}
#evidence-workbench-view .wb-tools>details,#evidence-workbench-view .wb-tools>section>details,#evidence-workbench-view .wb-tools>section>section>details{margin:0}
/* "Histórico deste módulo" holds its content on the line of its summary's text, past the chevron and its gap (12px + 8px):
   the archived option, the saved records, the history search and the batch deletion start under the word "Histórico". */
#evidence-workbench-view>details>:not(summary){margin-inline-start:20px}
/* The history search is one row where there is room: the words field stops near 480px, the selects are as wide as their
   options (below), and the option and the action follow on the fields' line; narrower, the row wraps. */
#evidence-workbench-view [data-history-search]{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin:16px 0 0}
#evidence-workbench-view [data-history-search]>label{margin:0}
#evidence-workbench-view [data-history-search]>label:has(>input[type=search]){flex:1 1 240px;max-width:480px}
#evidence-workbench-view [data-history-search]>label.check{min-height:36px}
#evidence-workbench-view [data-history-search]>button[type=submit]{margin-top:0}
/* Short fields stop near what they hold, as in Elicit's compact tools: a select is as wide as its longest option and a number
   field as wide as a few digits, instead of spanning the sheet; text areas, text and search fields keep the line's width. */
#evidence-workbench-view .paper-surface label>select{align-self:flex-start;width:auto;min-width:12ch;max-width:100%}
#evidence-workbench-view .paper-surface label>input[type=number]{align-self:flex-start;width:16ch;max-width:100%}
#library-collection-create,#library-collection-rename{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,2fr) auto;gap:12px;align-items:end;margin-block:18px}
#library-collection-create label,#library-collection-rename label{min-width:0}
#library-collection-create textarea,#library-collection-rename textarea{width:100%;min-height:64px;height:64px}
#library-collection-create button,#library-collection-rename button{align-self:end;min-height:36px;height:36px}
#workbench-library>.workflow-actions{align-items:center}
/* "Ditar pergunta" fills the question field, so it sits right under it, inside the form: dictation.mjs marks its host
   .dictation, which discovery.mjs places after the field's label. Closed, a quiet row 10px under the field. Opened, a
   --surface-2 tray around its controls (the transcript keeps its --surface field), not a second card; the tray reaches 14px
   past the row on each side, so the summary does not move when it opens, and "Bases de pesquisa" keeps its 18px below. */
#discovery-create>.dictation>.dictation-fold{margin:-10px -14px 14px;padding:4px 14px 0;border-radius:var(--radius-card)}
#discovery-create>.dictation>.dictation-fold[open]{padding-bottom:12px;margin-bottom:18px;background:var(--surface-2)}
.dictation-fold>p{max-width:72ch;margin:8px 0;font-size:13px;line-height:1.6;color:var(--muted)}
.dictation-fold>button{margin:4px 8px 4px 0}
.dictation-fold>.check{margin:8px 0}
.dictation-fold>label:not(.check){display:flex;flex-direction:column;gap:6px;margin:12px 0 8px;font-size:13px;font-weight:500;color:var(--ink-2)}
.dictation-fold textarea{min-height:76px}

/* Research view on touch: its own controls reach 44px too. */
@media(pointer:coarse){
  .tabs button,.source-card>button,.export-row a,.export-menu .export-menu-item,.coverage-fold>summary,.coverage-line,.query-tabs button,.workflow-history>summary,.run-processing>summary,.report-controls>summary,.ghost{min-height:44px}
  /* The stages of the segmented control and the record's inner disclosures override their desktop height, so they say 44px again. */
  .workflow-nav>button.secondary,.run-processing-body details>summary{min-height:44px}
  /* Those rows set their own height through padding (one line plus padding), so on touch the padding says 44px too. */
  :is(.run-processing,.coverage-fold,.workflow-history,.report-controls)>summary,.run-processing-body details>summary{padding-block:calc((44px - 1lh)/2)}
  .close-source{width:44px;height:44px}
  .workflow-review .criterion.question-row>label+button{margin-bottom:0}
  .question-row>.question-remove{width:44px;height:44px}
  /* The workbench's unmarked submits and the collection forms' fixed 36px buttons reach 44px as well. */
  #evidence-workbench-view button[type=submit]:not(.secondary,.primary),#library-collection-create button,#library-collection-rename button{min-height:44px;height:auto}
  /* The history search's option keeps the 44px of every option on touch (its row sets 36px above). */
  #evidence-workbench-view [data-history-search]>label.check{min-height:44px}
}
/* Movement on hover only where hover exists; cards that are not clickable as a whole never lift. */
@media(hover:hover) and (pointer:fine){
  .export-row a:hover::before{transform:translateY(2px)}
  .coverage-line:hover .coverage-line-go::after{transform:rotate(90deg) translateX(2px)}
}

/* Motion vocabulary. Exits are instant; entrances ease out. */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes view-in{from{opacity:0;transform:translateY(10px)}}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px);clip-path:inset(0 0 100% 0 round 12px)}to{clip-path:inset(0 0 0 0 round 12px)}}
@keyframes drawer-in{from{opacity:0;transform:translateX(18px)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,14px) scale(.97)}to{transform:translate(-50%,0)}}
@keyframes turn-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes fill-flash{from{background-color:var(--green-soft)}}
@keyframes line-draw{from{transform:scaleX(0)}}
@keyframes bar-grow{from{transform:scaleX(0)}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes ripple{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3);opacity:0}}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}

/* Responsive */
/* The workspace note gives its room to the bar's labels: from about 1360px the bar names its modules (floating-nav.mjs),
   and only from 1520px is there room for both. A status that asks for action (signed out, deletion under review,
   closed account: app.mjs data-attention) stays at every width but a phone's, and the bar refits around it. */
@media(max-width:1519px){
  .environment-tools>.workspace-status:not([data-attention]){display:none}
}
@media(max-width:1100px){
  .brand-name{display:none}
  main{padding:28px 24px 40px}
  .app-header{padding:0 16px;gap:12px}
  .page-footer{padding:18px 24px}
  .paper-surface{padding:22px 24px}
  .stage{font-size:12px}
}
@media(max-width:1000px){
  .floating-nav{--label-gap:6px}
  .floating-nav-item{padding:0 8px;font-size:13px}
  /* "Nova pesquisa" keeps its filled "+" and names itself in the tip, as on Elicit's narrow layouts; the bar then fits tablets. */
  #new-research{padding:0 9px}
  #new-research .floating-nav-label{width:0;opacity:0;margin-left:0}
  #modules>li:has(>#new-research)::after,#modules>li:has(>#open-library)::before{margin:0 4px}
}
@media(max-width:820px){
  .control-grid{grid-template-columns:1fr 1fr}
  .source-options{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr 1fr}
  .content-layout{flex-direction:column;align-items:stretch}
  .source-panel{width:100%;position:static;max-height:none;animation-name:rise-in}
  .review-layout:has(>.source-panel:not(.hidden)){flex-direction:column;align-items:stretch}
  .research-heading{grid-template-columns:minmax(0,1fr)}
  #run-actions{grid-column:1;grid-row:auto;justify-content:flex-start}
  #run-actions p{max-width:none;text-align:left}
  .plan-grid{grid-template-columns:1fr}
  .stage-label{font-size:12px}
  .source-option span{display:block}
  .form-bottom{gap:12px}
}
@media(max-width:600px){
  :root{--header-h:52px}
  .app-header{padding:0 10px 0 14px;gap:8px}
  .brand{gap:0}
  main{padding:20px 16px 36px}
  .page-footer{padding:16px;font-size:12px;flex-direction:column;gap:6px}
  .intro h2{font-size:22px}
  .intro p{font-size:13.5px;margin-bottom:18px}
  .view-head{flex-direction:column;align-items:flex-start}
  .view-head .view-title{font-size:22px}
  .ask{grid-template-columns:minmax(0,1fr);grid-template-areas:"mode" "text" "opts" "send" "band" "switch"}
  .ask textarea{font-size:16px;padding:8px 16px 4px}
  .ask-mode{padding:12px 16px 2px}
  /* "Experimente" heads its own line, so it labels both suggestions, not just the first one beside it. */
  .examples-label{flex-basis:100%;margin:0;text-align:center}
  .environment-tools>.workspace-status{display:none}
  .ask-bar>.chips{grid-area:3/1/5/2;padding:8px 12px 62px}
  #create-button{grid-area:send;justify-self:stretch;margin:0 12px 12px}
  .ask .switch{justify-self:start;padding:4px 12px 2px}
  .chip select{max-width:150px}
  .ask-panel{padding:16px}
  .control-grid,.check-grid,.field-selector fieldset{grid-template-columns:1fr}
  .journey-label,.journey{display:none}
  .form-bottom{flex-direction:column;align-items:stretch;gap:14px}
  .form-bottom p{max-width:none}
  .stage-track{padding:14px 12px}
  /* The tab row scrolls sideways here; the underline sits inside it and the focus ring is drawn inward, so neither is clipped. */
  .tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .tabs button{font-size:13px;padding:10px 10px;min-height:44px}
  .tabs button:focus-visible{outline-offset:-3px}
  .tab-indicator{bottom:0}
  .paper-surface{padding:18px}
  .paper-surface .report-title{font-size:20px}
  .plan-fold-body{padding:16px 18px 18px}
  .plan-fold>summary{padding-inline:18px}
  .workflow-review{padding:16px 18px 18px}
  /* On a phone only the main action is held at the foot of the screen, one 65px band instead of two rows: the bar gives way
     to its halves, the secondary actions join the flow just above it and the main half becomes the held band. */
  .workflow-review>.workflow-bar{display:contents}
  .workflow-bar>.workflow-bar-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .workflow-bar-more>*{flex:1 1 auto}
  .workflow-bar>.workflow-bar-main{display:block;position:sticky;bottom:0;z-index:2;margin:16px -18px -18px;padding:10px 18px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 var(--radius-card) var(--radius-card)}
  .workflow-bar-more+.workflow-bar-main{margin-top:12px}
  .workflow-bar-main>.primary{width:100%}
  /* While text is typed the on-screen keyboard takes the room: the band rests at the end of the sheet until the field is left.
     A checkbox or a select brings up no keyboard, so they leave it held. */
  .workflow-review:has(:is(textarea,input:not([type=checkbox],[type=radio],[type=file])):focus)>.workflow-bar>.workflow-bar-main{position:static}
  /* The report's table of sources scrolls in its frame with readable columns: the title column keeps about 16 characters.
     Only that table: short tables of other modules still fit a phone without scrolling. */
  .table-scroll>.synthesis-table{min-width:36rem}
  .synthesis-table :is(th,td):first-child{min-width:16ch}
  .research-heading h2{font-size:22px}
  .stage{padding-right:4px}
  .stage::before,.stage::after{left:26px;right:4px}
  .stage-label{font-size:12px;overflow-wrap:anywhere}
  #scope-modal,.feature-modal{padding:20px}
  .scope-actions>*{flex:1}
  .draft-actions>*{width:100%}
  .draft-turn{max-width:100%}
  .report-controls .workflow-actions{align-items:stretch}
  .report-controls .workflow-actions>*{width:100%}
  /* The report's toolbar keeps one line on a phone: "Copiar relatório com citações" shows its first word (render.mjs
     .label-rest) and the rest of its name stays for assistive technology, so the visible word starts the name. */
  .report-actions>#copy-report .label-rest{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .toast{bottom:16px}
}
/* Under 400px "Mais formatos" also shows its first word, so Copiar, PDF, Word and Mais still share one line. With the whole
   label the row needs about 368px in Segoe UI and more in a wider phone font (SF Pro, a larger text setting), which a
   375-393px phone does not reliably have; with "Mais" it needs about 314px. */
@media(max-width:399px){
  .report-actions .export-more-toggle .label-rest{display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}
/* The report on a phone starts sooner, with nothing removed: a long notice keeps its first sentence with the rest one tap away,
   the question loses the rows' gaps and the contents become one row that scrolls sideways (a finished track is already its one
   summary line at every width, above). */
@media(max-width:640px){
  #run-warning:not([data-expanded]) .notice-rest{display:none}
  #run-warning .notice-more{display:inline}
  .research-heading{margin-bottom:16px}
  #run-question{font-size:15px}
  /* Each edge of the row fades while more links wait past it (app.mjs sets data-start and data-end while the first and the
     last item are in view), so a cut word reads as "more this way"; the marked link is scrolled into the row (app.mjs
     keepTocLinkInView). The mask only uses the gradient's alpha: its color is any opaque token. */
  .report-toc{--fade-start:32px;--fade-end:48px;flex-wrap:nowrap;align-items:baseline;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:12px 0 18px;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) var(--fade-start),var(--ink) calc(100% - var(--fade-end)),transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) var(--fade-start),var(--ink) calc(100% - var(--fade-end)),transparent)}
  .report-toc[data-start]{--fade-start:0px}
  .report-toc[data-end]{--fade-end:0px}
  /* The stage switcher spans the sheet with tighter segments, so the five stages fit a 390px phone in one row; narrower, it
     scrolls and the chosen stage is kept in view (app.mjs keepChosenStage). */
  .workflow-nav{display:flex;width:100%}
  .workflow-nav>button.secondary{flex:1 0 auto;padding:4px 6px;font-size:12.5px}
  .report-toc strong{width:auto;flex:none}
  .report-toc a{flex:none;white-space:nowrap;padding:4px 0}
  /* Wrapped under the record, the ghost action's text starts where the title starts: past the checkbox and its 12px gap when
     the row has one, at the row's edge when it has none (the 10px padding and 1px border are pulled back). */
  .workflow-review .workflow-items>div>.ghost{margin:0 0 0 -11px}
  .workflow-review .workflow-items>div:has(>.workflow-paper>input)>.ghost{margin-left:17px}
  /* The coverage row keeps its summary and its arrow; the arrow's words stay for assistive technology. */
  .coverage-line{flex-wrap:nowrap}
  .coverage-line-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}
/* On a touch phone "Ver detalhes" is a 44px target without growing the notice's line: its box reaches 44px and the negative
   block margins give the line back what the box added. */
@media(max-width:640px) and (pointer:coarse){
  #run-warning .notice-more{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 -12px -2px;padding:0 6px}
}
@media(max-width:760px){
  #library-collection-create,#library-collection-rename{grid-template-columns:1fr}
}
@media(max-width:700px){
  .extraction-schema-row{grid-template-columns:1fr}
  .table-controls{display:block}
  .table-controls label{margin:10px 0}
  .source-pdf{height:420px}
  #evidence-workbench-view .control-grid{grid-template-columns:1fr}
  #evidence-workbench-view .paper-surface{padding:18px}
  #evidence-workbench-view fieldset .check{display:flex}
  #evidence-workbench-view>.wb-context{grid-template-columns:minmax(0,1fr);padding:16px}
}

/* A shared link hides the bar, so nothing competes with the header status: the read-only notice stays visible at every width. */
.app-header:has(#primary-nav.hidden) .environment-tools{margin-left:auto}
.app-header:has(#primary-nav.hidden) .environment-tools>.workspace-status{display:flex}
/* Touch: every control of the shell is at least 44px tall. */
@media(pointer:coarse){
  .brand{min-width:44px;min-height:44px;justify-content:center}
  .primary,.secondary,#create-button{min-height:44px}
  .floating-nav-item{height:44px;min-width:44px}
  .floating-nav-menu .floating-nav-item{height:44px}
  .chip,.chip-toggle{height:44px}
  .chip select{height:42px}
  .panel-close,.scope-heading .secondary{width:44px;height:44px}
  .examples button{min-height:44px}
  .switch{min-height:44px}
  .ask-panel summary,.sub-details summary{min-height:44px}
  /* The canonical disclosure line (zero specificity, as its rule above). */
  :where(details:not(.graph-sphere__legend))>:where(summary){min-height:44px;padding-block:calc((44px - 1lh)/2)}
  .report-toc a{display:inline-flex;align-items:center;min-height:44px}
  .check{min-height:44px}
  .history-item{min-height:44px}
}
/* Movement on hover only where hover exists; on touch it would stick after the tap. */
@media(hover:hover) and (pointer:fine){
  .primary:hover:not(:disabled) span{transform:translateX(3px)}
  .brand:hover .brand-mark{transform:rotate(-6deg)}
  #new-research:hover svg{transform:rotate(90deg)}
  .panel-close:hover{transform:rotate(90deg)}
  .source-option:hover,.scope-card:hover,.examples button:hover{transform:translateY(-1px)}
}

/* A printed report opens with its own title, even where the screen leaves it to the page title. */
@media print{
  .paper-surface .report-title[data-repeats-run-title]{position:static;width:auto;height:auto;margin:24px 0 8px;overflow:visible;clip-path:none;white-space:normal}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}