/* Studkz AI: the studkz-com "academic notebook" look. Warm paper, ink text,
   Literata for titles, Onest for everything else, the brand green with a
   highlighter yellow as accents; cards are a tinted rim around a white core.
   Flat UI (flat-ui/flat-ui.css, loaded first) owns buttons and badges and the
   --ui-* tokens: this file may position them but must not restyle them.
   Fonts are self-hosted (the CSP allows only 'self'); each subset loads only
   when the page uses it. Both families cover Kazakh, Russian and English.
   Licences: fonts/OFL-*.txt. */
@font-face{font-family:"Literata";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/literata-v40-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/literata-v40-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/literata-v40-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/literata-v40-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/onest-v11-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/onest-v11-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/onest-v11-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/onest-v11-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Tokens: the studkz-com palette under the same names (css/site.css there). */
:root{
 color-scheme:light;
 --background:#f8f5ec;--surface:#ffffff;--text:#17221a;--muted:#5a6457;--faint:#8b9286;--link:#3d7a12;
 --highlight:#fbe27a;--mint:#ebf5df;--mint-soft:#f4f9ec;--match-ring:rgba(114,192,44,.38);--notice:#fff6dc;
 --hairline:rgba(23,34,26,.08);--hairline-strong:rgba(23,34,26,.16);--rim:rgba(23,34,26,.045);--rim-highlight:inset 0 1px 0 rgba(255,255,255,.9);
 --field:#fcfaf4;--danger-soft:#fdecea;
 /* The rim is the outer surface of a card; the core sits inside it with a
    radius smaller by the rim, so the curves stay concentric. */
 --radius-xl:28px;--radius-lg:22px;--radius-md:16px;--radius-sm:12px;--rim-width:6px;
 --shadow-soft:0 1px 2px rgba(23,34,26,.04),0 14px 32px -18px rgba(23,34,26,.16);
 --shadow-lift:0 2px 6px rgba(23,34,26,.05),0 28px 48px -22px rgba(23,34,26,.24);
 --shadow-float:0 1px 2px rgba(23,34,26,.05),0 24px 64px -20px rgba(23,34,26,.28);
 --ease-spring:cubic-bezier(.32,.72,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
 --font:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --font-serif:"Literata","Iowan Old Style","PT Serif",Georgia,serif;
 --gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));--page:1160px;--section-space:3rem;
}
.sprout{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--background);color:var(--text);font:400 1rem/1.6 var(--font);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.sprout *,.sprout *::before,.sprout *::after{box-sizing:border-box}
/* Paper: two soft washes of brand green and highlighter yellow, then a faint
   grain. Both layers are fixed and never take clicks. */
.sprout::before,.sprout::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
.sprout::before{background:radial-gradient(42rem 28rem at 8% -6%,rgba(114,192,44,.13),transparent 70%),radial-gradient(36rem 24rem at 100% 0%,rgba(251,226,122,.22),transparent 72%)}
.sprout::after{opacity:.05;background-image:url("img/noise.svg")}
.sprout [hidden]{display:none}
.sprout .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprout a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em;transition:color .3s var(--ease-out)}
.sprout a:hover{color:var(--ui-brand-active)}
.sprout :focus-visible{outline:3px solid var(--ui-brand);outline-offset:2px}
.sprout ::selection{background:var(--highlight);color:var(--text)}
.sprout h1,.sprout h2{font-family:var(--font-serif);font-weight:600;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.sprout h2{margin:0 0 .35rem;font-size:1.2rem;line-height:1.3}

/* Header: a floating pill detached from the top edge, the logo on the left
   and two icon controls on the right at every width, as on studkz-com. The
   menu panel is a dropdown that floats over the page under the pill's right
   edge, so opening it moves nothing: the nav spans the pill's width and lets
   clicks through, the card inside takes them and scrolls a long menu. */
.sprout .site-header{position:relative;z-index:25;padding:calc(.75rem + env(safe-area-inset-top)) var(--gutter) 0}
/* With viewport-fit=cover the page runs under the status bar: a solid strip of
   paper keeps scrolled content from showing behind the clock. */
.sprout .site-header::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--background);pointer-events:none}
.sprout .header-row,.sprout .site-menu{max-width:calc(var(--page) - 2*var(--gutter));margin:0 auto}
.sprout .header-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.3rem .3rem .3rem .5rem;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 0 0 1px var(--hairline),var(--rim-highlight),var(--shadow-soft)}
/* The brand gives way first, so the controls never leave the screen. */
.sprout .brand{display:inline-flex;align-items:center;gap:.6rem;min-width:0;color:var(--text);font-weight:700;font-size:1.1rem;letter-spacing:-.02em;text-decoration:none}
.sprout .brand:hover{color:var(--text)}
.sprout .brand-mark{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--ui-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(23,34,26,.12);color:#fff;font-family:var(--font-serif);font-size:1.15rem;font-weight:700}
.sprout .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprout .brand-tld{color:var(--faint);font-weight:500}
.sprout .header-controls{display:flex;flex:none;align-items:center;gap:.125rem;margin-left:auto}
/* A guest's Sign in button stays in the row at every width; the nav links do not. */
.sprout .header-controls #header-login{margin-right:.25rem;white-space:nowrap}
.sprout .header-nav{display:flex;align-items:center;gap:.25rem;margin-right:.25rem}
.sprout .header-nav a{padding:.5rem .75rem;border-radius:999px;color:var(--text);font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.sprout .header-nav a:hover{background:var(--mint);color:var(--ui-brand-active)}
.sprout .header-nav a[aria-current=page]{color:var(--ui-brand-active)}
@media (max-width:639.98px){.sprout .header-nav{display:none}}
/* The menu icon's three lines fold into a cross while the panel is open. */
.sprout [data-menu-toggle] [data-line]{transform-box:view-box;transform-origin:12px 12px;transition:transform .4s var(--ease-spring),opacity .3s var(--ease-out)}
.sprout [data-menu-toggle][aria-expanded=true] [data-line=top]{transform:rotate(45deg) translateY(5px)}
.sprout [data-menu-toggle][aria-expanded=true] [data-line=middle]{opacity:0;transform:scaleX(.2)}
.sprout [data-menu-toggle][aria-expanded=true] [data-line=bottom]{transform:rotate(-45deg) translateY(-5px)}
/* Menu panel: the pages, then the account, then the language switch, top to
   bottom in DOM and tab order. It is a card under the pill, right-aligned with
   it from 640px and as wide as the pill below that. */
.sprout .site-menu{position:absolute;top:100%;left:var(--gutter);right:var(--gutter);padding:.5rem 0 0;pointer-events:none}
.sprout .site-menu-inner{display:grid;gap:.5rem;max-height:calc(100vh - 6rem);max-height:calc(100dvh - 6rem);overflow-y:auto;overscroll-behavior:contain;padding:.5rem;transform-origin:top right;pointer-events:auto;border:var(--rim-width) solid var(--rim);border-radius:var(--radius-xl);background:var(--surface) padding-box;box-shadow:0 0 0 1px var(--hairline),var(--shadow-float)}
.sprout .menu-links{display:grid;margin:0;padding:0;list-style:none}
.sprout .menu-links a{display:flex;align-items:center;min-height:44px;padding:0 .75rem;border-radius:var(--radius-sm);color:var(--text);font-weight:600;text-decoration:none;transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.sprout .menu-links a[hidden]{display:none}
.sprout .menu-links a:hover{background:var(--mint);color:var(--ui-brand-active)}
.sprout .menu-main a[aria-current=page]{color:var(--ui-brand-active)}
.sprout .menu-group{display:grid;gap:.25rem;padding-top:.75rem;border-top:1px dashed var(--hairline-strong)}
.sprout .menu-label,.sprout .session-name{margin:0;padding:0 .75rem}
.sprout .menu-label{color:var(--faint);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sprout .session-name{font-weight:600;overflow-wrap:anywhere}
.sprout .lang-switch{display:flex;gap:.25rem;margin:0;padding:0 .25rem .25rem;list-style:none}
/* Language items are pills through Flat UI's own radius variable. In a pill
   that holds the switch, an even inset keeps them concentric with its edge:
   item radius = pill radius - inset. */
.sprout .lang-switch a{--button-radius:calc(var(--button-height)/2)}
.sprout .header-row:has(> .header-controls > .lang-switch){--header-inset:8px;padding:var(--header-inset)}
@media (min-width:640px){.sprout .site-menu-inner{max-width:22rem;margin-left:auto}}
/* Without JavaScript the toggle cannot work, so it is hidden and the menu
   stays open, back in the page flow so it covers nothing. */
@media (scripting:none){.sprout [data-menu-toggle]{display:none}.sprout .site-menu[hidden]{display:block}.sprout .site-menu{position:static;pointer-events:auto}}

/* Page frame */
.sprout main{width:100%;max-width:var(--page);margin:0 auto;padding:1.5rem var(--gutter) var(--section-space);flex:1 0 auto}
/* Page heading: the eyebrow pill, then the serif title with a hand-drawn
   green stroke under it. */
.sprout .hero{padding:1rem 0 .5rem;margin-bottom:1.5rem;max-width:48rem}
.sprout .eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .75rem .3rem .6rem;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--hairline),var(--shadow-soft);color:var(--muted);font-size:.7rem;font-weight:600;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.sprout .eyebrow::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--ui-brand);box-shadow:0 0 0 3px rgba(114,192,44,.18)}
.sprout .eyebrow[hidden]{display:none}
.sprout .eyebrow-back{cursor:pointer;text-decoration:none;transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out),color .2s var(--ease-out)}
.sprout .eyebrow-back:hover{background:var(--mint);box-shadow:0 0 0 1px var(--faint),var(--shadow-soft);color:var(--text)}
.sprout .eyebrow-back::before{content:"←";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:.85rem;letter-spacing:0;line-height:1}
.sprout h1{margin:1rem 0 .75rem;font-size:clamp(2rem,5vw,2.75rem);font-weight:650;line-height:1.1;letter-spacing:-.025em}
.sprout h1::after{content:"";display:block;width:4.5rem;height:.6rem;margin-top:.6rem;background:url("img/squiggle.svg") no-repeat left center/contain}
/* Footer: a dashed rule lined up with the content. */
.sprout .site-footer{padding:0 var(--gutter)}
.sprout .footer-row{max-width:calc(var(--page) - 2*var(--gutter));margin:0 auto;padding:1.25rem 0 2rem;border-top:1px dashed var(--hairline-strong);color:var(--muted);font-size:.85rem}
.sprout .footer-row p{margin:0}

/* Cards: fieldsets, articles and .card are a tinted rim (the border) around a
   white core (the padding box), with a hairline ring and a soft shadow. */
.sprout fieldset,.sprout article,.sprout .card{position:relative;min-width:0;margin:0;padding:1.25rem 1.4rem;border:var(--rim-width) solid var(--rim);border-radius:var(--radius-xl);background:var(--surface) padding-box;box-shadow:0 0 0 1px var(--hairline),var(--rim-highlight),var(--shadow-soft)}
.sprout fieldset fieldset{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.sprout legend{float:left;width:100%;padding:0;margin:0 0 .85rem;display:flex;align-items:center;gap:.5rem;color:var(--faint);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sprout legend~*{clear:both}
.sprout #required-options legend{color:var(--text);font-family:var(--font-serif);font-size:1.05rem;font-weight:600;letter-spacing:-.01em;text-transform:none}
.sprout #options .required,.sprout #required-options .required{font-family:var(--font);font-size:.75rem;font-weight:500;letter-spacing:.02em;color:var(--faint)}
.sprout p{margin:0 0 .75rem}
.sprout .hint,.sprout .task-kind,.sprout .fine{color:var(--muted);font-size:.875rem;line-height:1.55}
.sprout .task-kind{margin:-.1rem 0 .75rem}
.sprout article p{white-space:pre-wrap}
.sprout .report-added,.sprout .report-skipped{margin:0 0 .5rem;color:var(--muted)}
.sprout .report-skipped{margin-bottom:1rem}
.sprout .report-note{font-size:.875em}

/* Fields: a warm core with a hairline ring; focus turns the ring brand green. */
.sprout label{display:grid;gap:.4rem;margin:0 0 1rem;color:var(--muted);font-size:.875rem;font-weight:600}
.sprout label[hidden]{display:none}
.sprout input,.sprout select,.sprout textarea{width:100%;padding:.75rem .95rem;font:inherit;font-size:1rem;font-weight:400;color:var(--text);border:0;border-radius:var(--radius-sm);background:var(--field);box-shadow:inset 0 0 0 1px var(--hairline-strong);transition:box-shadow .3s var(--ease-out),background-color .3s var(--ease-out)}
.sprout input:hover,.sprout select:hover,.sprout textarea:hover{box-shadow:inset 0 0 0 1px rgba(23,34,26,.28)}
.sprout input:focus,.sprout select:focus,.sprout textarea:focus{outline:none;background-color:var(--surface);box-shadow:inset 0 0 0 1px var(--ui-brand),0 0 0 4px rgba(114,192,44,.18)}
.sprout select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;background:var(--field) url("icons/chevron.svg") no-repeat right .85rem center/1.05rem}
.sprout select:disabled{opacity:.55;cursor:not-allowed}
.sprout input[type=file]{padding:.6rem;cursor:pointer;color:var(--muted)}
.sprout input[type=file]::file-selector-button{margin-right:1rem;padding:.55rem 1rem;border:0;border-radius:10px;font:inherit;font-size:.9rem;font-weight:700;color:var(--text);background:var(--mint);cursor:pointer;transition:background-color .3s var(--ease-out)}
.sprout input[type=file]::file-selector-button:hover{background:#dcedc8}

/* Choice tiles: rows with a hairline ring; a checked one turns mint, like the
   studkz-com search filters. */
.sprout .checks{display:grid;gap:.5rem}
.sprout .checks label{display:flex;align-items:flex-start;gap:.75rem;margin:0;padding:.75rem .95rem;border-radius:var(--radius-md);color:var(--text);font-size:.95rem;font-weight:500;cursor:pointer;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px var(--hairline);transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.sprout .checks label:hover{box-shadow:0 0 0 1px var(--hairline-strong)}
.sprout .checks label:has(input:checked){background:var(--mint);box-shadow:0 0 0 1px rgba(114,192,44,.45)}
.sprout .checks label:has(input:disabled){opacity:.5;cursor:not-allowed}
/* A locked tick (the only format on offer) keeps the checked look but cannot be toggled. */
.sprout .checks label:has(input[aria-disabled="true"]),.sprout .checks input[aria-disabled="true"]{cursor:default}
.sprout .checks span small{display:block;margin-top:.15rem;color:var(--muted);font-size:.84rem;font-weight:400;line-height:1.5}
/* AI illustrations left off because the limit with them is over the balance. */
.sprout .checks span small.option-credits{color:#7a1d16}
.sprout .checks span small.option-credits[hidden]{display:none}
.sprout input[type=checkbox],.sprout input[type=radio]{flex:none;width:1.125rem;height:1.125rem;margin:.2rem 0 0;padding:0;accent-color:var(--ui-brand);box-shadow:none;cursor:pointer}
.sprout input[type=checkbox]:focus,.sprout input[type=radio]:focus{box-shadow:none}

/* Action rows: right-aligned, wrapping on narrow screens. Buttons are Flat UI. */
.sprout .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}

/* Status messages: notices on a sheet of graph paper; review is yellow,
   failures a light danger tint. */
.sprout #notice:not(:empty),.sprout #error{margin:0 0 1.5rem;padding:1.15rem 1.4rem;border-radius:var(--radius-lg);background:var(--mint);box-shadow:0 0 0 1px rgba(114,192,44,.35)}
.sprout #notice .actions{margin-top:1rem}
.sprout #notice p:last-child{margin-bottom:0}
.sprout #notice .eta{font-variant-numeric:tabular-nums}
.sprout #notice.task-done{position:relative;padding-right:3.5rem}
.sprout #notice .notice-close{position:absolute;top:.5rem;right:.5rem}
.sprout #notice.task-review{background:linear-gradient(var(--notice),rgba(255,246,220,.7)),repeating-linear-gradient(0deg,transparent 0 23px,rgba(23,34,26,.05) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(23,34,26,.05) 23px 24px);background-blend-mode:multiply;box-shadow:0 0 0 1px rgba(214,170,52,.22)}
.sprout #notice.task-failed,.sprout #error{background:var(--danger-soft);color:#7a1d16;box-shadow:0 0 0 1px rgba(220,38,38,.22)}
.sprout #error a{margin-left:.5em;color:inherit;font-weight:600}

/* Create: a four-step wizard (Type, Topic, Extras, Review), so the first
   screen asks one question. Buttons stay Flat UI; this block only lays them
   out. The stepper's progress bars belong to its list items. */
.sprout .wizard{max-width:52rem;display:grid;gap:1.25rem;margin:0}
.sprout .stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
.sprout .stepper li{display:grid;padding-top:.4rem;border-top:3px solid var(--hairline-strong);transition:border-color .3s var(--ease-out)}
.sprout .stepper li:has([data-color=brand]){border-top-color:rgba(114,192,44,.55)}
.sprout .stepper li:has([aria-current=step]){border-top-color:var(--ui-brand)}
.sprout .stepper .step-num{margin-right:.35em;font-variant-numeric:tabular-nums;opacity:.6}
.sprout .step:not([hidden]){display:grid;gap:1rem}
.sprout .step-head h2{margin:0 0 .25rem;font-size:clamp(1.35rem,3vw,1.6rem)}
.sprout .step-head h2:focus{outline:none}
.sprout .step-head .hint{margin:0}
.sprout .segmented{display:flex;flex-wrap:wrap;gap:.4rem}
.sprout .segmented[hidden]{display:none}
.sprout #file-filter{margin-bottom:.8rem}
.sprout .generated{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
/* Preset tiles: a radio group drawn as cards; the radio itself stays focusable but unseen. */
.sprout .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.6rem}
.sprout .tile{position:relative;display:flex;align-items:center;min-height:3.5rem;margin:0;padding:.75rem 1rem;border-radius:var(--radius-md);background:var(--surface);box-shadow:0 0 0 1px var(--hairline),var(--shadow-soft);color:var(--text);font-size:.95rem;font-weight:600;line-height:1.3;cursor:pointer;transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.sprout .tile:hover{box-shadow:0 0 0 1px var(--hairline-strong),var(--shadow-lift)}
.sprout .tile input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
/* Wizard tiles: the chosen group's own come first, tinted with a dot; the chosen
   tile (2px ring, check) always wins over that. The right padding keeps the text
   clear of the dot and the check, so it never reflows between states. #579720
   rather than the brand green for the ring, dot, check and focus: it keeps 3:1. */
.sprout #presets .tile{padding-right:2.25rem}
.sprout #presets .tile.is-match{background:var(--mint-soft);box-shadow:0 0 0 1px var(--match-ring),var(--shadow-soft)}
.sprout #presets .tile.is-match:hover{box-shadow:0 0 0 1px rgba(114,192,44,.6),var(--shadow-lift)}
.sprout #presets .tile.is-match::after,.sprout #presets .tile:has(input:checked)::after{content:"";position:absolute;top:50%;right:.85rem;width:7px;height:7px;border-radius:50%;background:var(--ui-brand-active);transform:translateY(-50%);pointer-events:none}
.sprout #presets .tile:has(input:checked){background:var(--mint);box-shadow:0 0 0 2px var(--ui-brand-active),var(--shadow-soft)}
.sprout #presets .tile:has(input:checked):hover{box-shadow:0 0 0 2px var(--ui-brand-active),var(--shadow-lift)}
.sprout #presets .tile:has(input:checked)::after{right:.6rem;width:18px;height:18px}
.sprout #presets .tile:has(input:checked)::before{content:"";position:absolute;z-index:1;top:50%;right:calc(.6rem + 3px);width:12px;height:12px;background:#fff;-webkit-mask:url("icons/check.svg") center/contain no-repeat;mask:url("icons/check.svg") center/contain no-repeat;transform:translateY(-50%);pointer-events:none}
.sprout #presets .tile:has(input:focus-visible){outline:3px solid var(--ui-brand-active);outline-offset:2px}
.sprout #presets .tiles-divider{grid-column:1/-1;display:flex;align-items:center;gap:.75rem;margin:.6rem 0 0;color:var(--muted);font-size:.84rem;font-weight:500;line-height:1.4}
.sprout #presets .tiles-divider::after{content:"";flex:1;height:1px;background:var(--hairline-strong)}
.sprout .actions.start{justify-content:flex-start}
.sprout .actions.start:not(:has(:not([hidden]))){display:none}
.sprout #options{display:grid;gap:1rem}
.sprout #options:empty,.sprout #required-options:empty,.sprout #images-options:empty,.sprout #inputs-source:empty,.sprout #inputs-home:empty{display:none}
/* Required groups sit under the language in the Topic card, as compact choices. */
.sprout #required-options{display:grid;gap:1rem;padding-top:1rem;border-top:1px dashed var(--hairline-strong)}
.sprout #required-options fieldset{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.sprout .checks.inline{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
.sprout .checks.count{grid-template-columns:minmax(0,20rem)}
.sprout .checks.count label{align-items:center;justify-content:space-between;cursor:default}
.sprout .checks.count input{width:5.5rem}
.sprout .checks.inline label{padding:.55rem .8rem}
.sprout .checks.inline>.hint{grid-column:1/-1}
.sprout .step .card>label:last-child{margin-bottom:0}
.sprout label.prompt{margin:0}
.sprout .prompt>span{color:var(--faint);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.sprout .prompt textarea{min-height:10rem;padding:.25rem 0 0;resize:vertical;font-family:var(--font-serif);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;background:none;box-shadow:none;border-radius:0}
.sprout .prompt textarea::placeholder{color:var(--faint);opacity:1}
.sprout .prompt textarea:focus{box-shadow:none;background:none}
.sprout .prompt-card:focus-within{box-shadow:0 0 0 1px var(--ui-brand),0 0 0 4px rgba(114,192,44,.18),var(--shadow-soft)}
/* Review: label, value, Change; the label goes above the value on phones. */
.sprout .review{display:grid;margin:0}
.sprout .review-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:.15rem 1rem;align-items:baseline;padding:.75rem 0;border-top:1px dashed var(--hairline-strong)}
.sprout .review-row:first-child{border-top:0;padding-top:0}
.sprout .review-row:last-child{padding-bottom:0}
.sprout .review dt{color:var(--faint);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sprout .review dd{margin:0}
.sprout .review dd.value{white-space:pre-wrap}
.sprout .review .empty{color:var(--faint)}
.sprout details.advanced summary{cursor:pointer;color:var(--muted);font-size:.9rem;font-weight:600}
.sprout details.advanced[open] summary{margin-bottom:1rem}
.sprout details.advanced label:last-child{margin-bottom:0}
.sprout .extras-disclosure{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:1rem}
.sprout .extras-disclosure-title{min-width:0;font-size:1.17em;font-weight:700;overflow-wrap:anywhere}
.sprout #more-options-toggle{display:block;width:100%;height:auto;min-height:44px;padding:0;text-align:left;white-space:normal;font:inherit;color:var(--text);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none}
.sprout #more-options-toggle .hint{display:block;margin:.75rem 0 0;font-weight:400}
.sprout #more-options-toggle svg{flex:none;color:var(--ui-brand)}
/* The native button covers the collapsed card's padding and rim. Once open,
   its hit area is only the header, leaving the option inputs independent. */
.sprout #more-options-toggle[aria-expanded="false"]{position:static}
.sprout #more-options-toggle[aria-expanded="false"]::after{content:"";position:absolute;inset:calc(-1 * var(--rim-width));border-radius:inherit}
.sprout #more-options:has(#more-options-toggle[aria-expanded="false"]:hover),.sprout #more-options-toggle[aria-expanded="true"]:hover{background-color:var(--mint-soft)}
.sprout #more-options-toggle:focus-visible{outline:3px solid var(--ui-brand);outline-offset:4px}
.sprout #more-options-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sprout #more-options-panel{margin-top:.75rem}
/* Expanded groups share the card's rim and retain their own labels and inputs. */
.sprout #more-options-content{display:grid;gap:1.5rem}
.sprout #more-options-content>fieldset{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.sprout #more-options-content>fieldset:not([hidden])~fieldset{padding-top:1.5rem;border-top:1px dashed var(--hairline-strong)}
.sprout #executor{margin:0 0 1rem}
/* Type's note for owners without a subscription: a quiet pill under the hint. */
.sprout .subscribe-hint:not([hidden]){display:inline-flex;align-items:center;gap:.45rem;margin:.6rem 0 0;padding:.3rem .8rem;border-radius:999px;background:var(--mint);color:var(--ui-brand-active);font-size:.85rem;line-height:1.4}
.sprout .subscribe-hint::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--ui-brand)}
/* Review's notices stay above the action row and its compact price summary. */
.sprout .summary{display:grid;gap:.75rem}
.sprout .summary:not(:has(>:not([hidden]))){display:none}
.sprout #signin-gate p{margin:0 0 .75rem}
.sprout #signin-gate .actions{margin:0}
.sprout .subscribe-note{padding:1rem 1.2rem;border-radius:var(--radius-lg);background:var(--mint-soft);box-shadow:0 0 0 1px rgba(114,192,44,.35)}
.sprout .subscribe-note p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.sprout .subscribe-note .subscribe-note-title{margin-bottom:.15rem;color:var(--text);font-size:1rem;font-weight:600}
.sprout .cost:not([hidden]){display:flex;align-items:flex-end;justify-content:flex-end;gap:.4rem;max-width:100%;color:var(--muted);font-size:.875rem;line-height:1.5;text-align:right}
.sprout #price-summary{min-width:0;max-width:100%}
.sprout #price{min-width:0;font-weight:400;font-variant-numeric:tabular-nums}
.sprout #price .price-maximum{color:var(--text);font-size:1.125rem;font-weight:750;white-space:nowrap}
.sprout #price .price-original{color:var(--muted);font-size:.875rem;font-weight:400;white-space:nowrap}
.sprout .price-offer:not([hidden]){display:inline-block;max-width:100%;margin-bottom:.25rem;padding:.125rem .5rem;border-radius:999px;background:#e4f3d6;color:#315d12;font-size:.75rem;font-weight:650;overflow-wrap:anywhere}
.sprout .price-offer-end{margin-top:.2rem;color:var(--muted);font-size:.75rem;overflow-wrap:anywhere}
/* Insufficient balance keeps the price summary beside the balance warning. */
.sprout .credit-warning{padding:.75rem 1rem;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);background:var(--notice);text-align:right}
.sprout .credit-warning p{margin:0;color:var(--muted);font-size:.8125rem;line-height:1.5}
.sprout .credit-warning .credit-warning-title{margin-bottom:.2rem;color:var(--text);font-size:.9rem;font-weight:600}
.sprout .credit-warning .actions{justify-content:flex-end;margin-top:.5rem}
.sprout .info-tip{position:relative;display:inline-flex;flex:none}
.sprout #price-tip{position:absolute;right:0;bottom:calc(100% + .5rem);z-index:6;width:max-content;max-width:min(18rem,calc(100vw - 2*var(--gutter)));padding:.6rem .8rem;border-radius:var(--radius-sm);background:var(--text);color:#fff;font-size:.8rem;line-height:1.45;text-align:left;box-shadow:var(--shadow-float);visibility:hidden;opacity:0}
.sprout #price-info[hidden]+#price-tip{display:none}
.sprout #price-info:focus-visible+#price-tip,.sprout #price-info[aria-expanded=true]+#price-tip{visibility:visible;opacity:1}
@media (hover:hover) and (pointer:fine){.sprout #price-info:hover+#price-tip{visibility:visible;opacity:1}}
.sprout #price-info[data-dismissed=true]+#price-tip{visibility:hidden;opacity:0}
/* Navigation stays at hand at the bottom of the screen, edge to edge. */
.sprout .wizard-nav{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:.5rem;margin:0 calc(-1*var(--gutter));padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));background:rgba(248,245,236,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px dashed var(--hairline-strong)}
/* Stack against the right edge on phones; show the summary beside Generate when it fits. */
.sprout .generate-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;min-width:0;max-width:100%;margin-left:auto}
.sprout .generate-actions:not(:has(>:not([hidden]))){display:none}
.sprout .wizard-nav #back{flex:none;align-self:flex-end}
.sprout .wizard-nav #next{margin-left:auto}
@media (min-width:600px){.sprout .generate-actions{flex-direction:row;align-items:center;gap:1rem}}
/* Subscribe to generate holds Generate's place; on a phone its longer label wraps rather than overflowing. */
.sprout #subscribe-generate{min-width:0;text-align:center}
.sprout .stepper .step-name{overflow-wrap:normal}
/* Phones: the other steps keep only their numbers and the current one takes the room it needs. */
@media (max-width:479.98px){
 .sprout .review-row{grid-template-columns:minmax(0,1fr) auto}.sprout .review dt{grid-column:1/-1}
 .sprout .stepper{display:flex}
 .sprout .stepper li{flex:1 1 0;min-width:0}
 .sprout .stepper li:has([aria-current=step]){flex:3 1 auto}
 .sprout .stepper li:not(:has([aria-current=step])){min-width:2.5rem}
 .sprout .stepper button,.sprout .stepper .step-name{min-width:0}
 .sprout .stepper .step-name{overflow-wrap:anywhere}
 .sprout .stepper li:not(:has([aria-current=step])) .step-name{display:none}
}

/* Upload, lists: task and file cards; on hover a card's stronger shadow fades in. */
.sprout #upload-form{max-width:44rem;margin-bottom:2rem}
.sprout #upload-form label{margin-bottom:1.25rem}
.sprout #list{display:grid;grid-template-columns:minmax(0,1fr);gap:.875rem}
.sprout #list:empty{display:none}
.sprout #list>p{color:var(--muted)}
.sprout #list .tasks-empty{padding:clamp(1.25rem,4vw,2.5rem)}
.sprout #list .tasks-empty .actions{margin-top:1.5rem;justify-content:flex-end}
.sprout #list .tasks-empty .button{max-width:100%}
.sprout #list article::before{content:"";position:absolute;inset:calc(-1*var(--rim-width));border-radius:inherit;box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:opacity .6s var(--ease-out)}
.sprout #list article:hover::before{opacity:1}
.sprout #list article .actions{margin-top:1rem;justify-content:flex-start}
/* Profile (site.js profilePage): the account card spans the list; the
   subscription and credits cards sit side by side from 768px; nothing here is
   clickable as a whole, so the cards do not lift on hover. */
.sprout .menu-links a#user[aria-current=page]{color:var(--ui-brand-active)}
.sprout #list.profile article::before{display:none}
.sprout #list.profile h2{margin-bottom:1rem}
.sprout .profile-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.sprout .avatar{display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--mint);color:var(--ui-brand-active);font-size:1.75rem;font-weight:700;box-shadow:0 0 0 1px var(--hairline)}
.sprout .profile-name{margin:0;font-size:1.25rem;font-weight:700;overflow-wrap:anywhere}
.sprout #list.profile .review-row{grid-template-columns:9rem minmax(0,1fr)}
.sprout #list.profile .review dd{overflow-wrap:anywhere}
.sprout .credits-balance{margin:.25rem 0 .5rem;font-size:2rem;font-weight:700;line-height:1.2}
.sprout #list.profile h3{margin:1.5rem 0 .5rem;font-size:1rem}
.sprout .ledger{display:grid;margin:0;padding:0;list-style:none}
.sprout .ledger-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.15rem .875rem;align-items:baseline;padding:.6rem 0;border-top:1px dashed var(--hairline-strong)}
.sprout .ledger-row:first-child{border-top:0}
.sprout .ledger-date{color:var(--muted);font-size:.8rem;white-space:nowrap}
.sprout .ledger-what{min-width:0;overflow-wrap:anywhere}
.sprout .ledger-amount{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.sprout .ledger-amount[data-sign=plus]{color:var(--ui-brand-active)}
@media (max-width:519.98px){.sprout .ledger-row{grid-template-columns:minmax(0,1fr) auto}.sprout .ledger-date{grid-column:1/-1}.sprout #list.profile .review-row{grid-template-columns:minmax(0,1fr)}}
.sprout .file-actions{list-style:none;margin:1rem 0 0;padding:0}
.sprout .file-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.65rem 0;border-top:1px solid var(--hairline-strong)}
.sprout .file-row:last-child{padding-bottom:0}
.sprout .file-kind{display:flex;align-items:center;gap:.5rem;min-width:0;font-weight:600}
.sprout .file-buttons{display:flex;flex-wrap:wrap;gap:.5rem}
.sprout .file-buttons [data-icon-only="true"] .file-label{display:none}
/* Work page Edit (works.js): a small spinner stands in for the pencil while
   the import is prepared; the label stays. Flat UI's keyframes. */
.sprout .file-spinner{width:16px;height:16px;flex:none;box-sizing:border-box;border:2px solid color-mix(in srgb,currentColor 32%,transparent);border-top-color:currentColor;border-radius:999px;animation:ui-button-spin 700ms linear infinite}
@media (prefers-reduced-motion:reduce){.sprout .file-spinner{animation-duration:1.4s}}
.sprout .more{margin-top:1.5rem;justify-content:center}

/* Landing pages (web/landing.html): server-rendered, no script. The language
   switch sits in the pill, preset cards reuse the wizard tiles as links, and
   the FAQ is a list of disclosures. */
.sprout .header-controls .lang-switch{padding:0}
.sprout .landing{max-width:52rem}
.sprout .landing .hero{margin-bottom:1rem}
.sprout .landing .lead{color:var(--muted);font-size:1.075rem}
.sprout .landing-section{margin:0 0 2rem}
.sprout .landing-section ul,.sprout .landing-section ol{margin:0;padding-left:1.25rem}
.sprout .landing-section li{margin:0 0 .35rem}
.sprout .landing-section li::marker{color:var(--ui-brand-active)}
.sprout .landing-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem;list-style:none;padding:0}
.sprout .landing-section .landing-cards{padding-left:0}
.sprout .landing-cards li{margin:0}
.sprout .landing-cards .tile{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.2rem;height:100%;text-decoration:none}
.sprout .landing-cards .tile span{color:var(--muted);font-size:.875rem;font-weight:400;line-height:1.5}
.sprout .landing-faq{display:grid;gap:.5rem}
.sprout .landing-faq details{padding:.75rem 1rem;border-radius:var(--radius-md);background:var(--surface);box-shadow:0 0 0 1px var(--hairline)}
.sprout .landing-faq summary{cursor:pointer;font-weight:600}
.sprout .landing-faq details[open] summary{margin-bottom:.5rem}
.sprout .landing-faq details p{margin:0;color:var(--muted)}
.sprout .landing-cta{margin:0 0 1.5rem}
.sprout .landing-note{margin:0}
/* Public works (web/works.html): the landing layout with a work's meta line,
   its result text as paragraphs and its files as rows. */
.sprout .works .eyebrow,.sprout .landing a.eyebrow{text-decoration:none}
.sprout .publish{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hairline-strong)}
.sprout .work-meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:0}
/* The Save / Share / Report toolbar (engagement.js): a row of icon buttons
   under a work's meta line or a task's heading, a saved heart filled, then
   its status line; and the report dialog over the page. */
.sprout .engagement{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin:.5rem 0 .25rem -.35rem}
.sprout .engagement [aria-pressed=true] path{fill:currentColor}
.sprout #list .engagement{justify-content:flex-end;margin-inline:0}
.sprout #list .engagement>button,.sprout #list .engagement>a{min-width:44px;min-height:44px;flex:0 0 auto}
.sprout #list .engagement-status{flex-basis:100%;text-align:right;margin-inline:0}
.sprout .engagement-status{margin:0 0 0 .25rem}
.sprout .engagement-status:empty,.sprout .report-note:empty{display:none}
.sprout .report-dialog{width:min(32rem,calc(100vw - 2*var(--gutter)));padding:1.25rem;border:0;border-radius:var(--radius-lg);background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--hairline),var(--shadow-float)}
.sprout .report-dialog::backdrop{background:rgba(23,34,26,.35)}
.sprout .report-dialog h2{margin-top:0}
.sprout .report-dialog label{display:grid;gap:.35rem}
.sprout .report-dialog textarea{resize:vertical}
.sprout .report-dialog .actions{margin-top:.75rem}
.sprout .report-count{margin-right:auto}
/* The favorites page (web/favorites.html): Works and Tasks tabs over the
   gallery's cards; a card that no longer opens is dimmed. */
.sprout .favorites-tabs{margin:0 0 1rem}
.sprout .landing-cards .tile.is-gone{opacity:.6}
.sprout .work-text p{white-space:pre-line;overflow-wrap:anywhere}
.sprout .work-preview.is-cut{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 7em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 7em),transparent)}
.sprout .paywall{margin-top:1rem}
.sprout .paywall h3{margin:0 0 .5rem}
.sprout .paywall .actions{margin-top:1rem;flex-wrap:wrap}
.sprout .work-file{overflow-wrap:anywhere}
/* Rendered documents (works_render.go). A DOCX is white sheets on a neutral
   background, paginated by works.js; a PPTX is a column of slide cards with a
   counter and a thumbnail strip. The document's own rules come from its
   doc.css; only the viewer chrome lives here. */
.sprout .work-render{max-width:none}
.sprout .work-doc{--zoom:1;position:relative}
.sprout .work-render[data-kind=docx] .work-doc{background:#e4e6ea;padding:1rem 0;border-radius:var(--radius-md);overflow:auto}
.sprout .work-render .sheet{margin:0 auto 1rem;box-shadow:0 1px 3px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.08);zoom:var(--zoom)}
.sprout .work-render .sheet:last-child{margin-bottom:0}
.sprout .work-render .slides{display:grid;gap:1rem;scroll-snap-type:y proximity}
.sprout .work-render .slide{scroll-snap-align:start;border-radius:var(--radius-md);box-shadow:0 1px 3px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.08)}
.sprout .work-render .slide-counter{position:sticky;top:.5rem;z-index:1;width:max-content;margin:0 auto .75rem;padding:.2rem .75rem;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--hairline)}
.sprout .work-render .slide-thumbs{display:flex;gap:.5rem;margin-top:1rem;padding:.25rem 0 .5rem;overflow-x:auto;scrollbar-width:thin}
.sprout .work-render .slide-thumbs button{flex:0 0 10rem;padding:0;border:2px solid transparent;border-radius:var(--radius-sm);background:none;cursor:pointer;overflow:hidden}
.sprout .work-render .slide-thumbs button[aria-current=true]{border-color:var(--brand)}
.sprout .work-render .slide-thumbs .slide{pointer-events:none;box-shadow:none;border-radius:0}
.sprout .work-doc.is-cut{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 7em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 7em),transparent)}
@media (max-width:699px){.sprout .work-render[data-kind=docx] .work-doc{padding:0;background:none}.sprout .work-render .sheet{box-shadow:none}}
.sprout .works .landing-cards .tile strong{overflow-wrap:anywhere}

/* Regenerate and unavailable pages reuse the frame with a short message. */
.sprout main>p[role=alert]{max-width:44rem;color:var(--muted);font-size:1.1rem}
.sprout main>ul{padding-left:1.1rem}
.sprout main>.actions:not(.more){justify-content:flex-start;margin-top:1.5rem}

/* Keep route content visible immediately; document navigation already replaces
   it. Only the menu panel animates when explicitly opened. */
@media (prefers-reduced-motion:no-preference){
 @keyframes menu-open{from{opacity:0;transform:translate3d(0,-.5rem,0)}}
 .sprout .site-menu:not([hidden]) .site-menu-inner{animation:menu-open .15s var(--ease-out) both}
}
@media (prefers-reduced-motion:reduce){.sprout [data-menu-toggle] [data-line],.sprout .menu-links a{transition:none}}

@media (min-width:768px){
 :root{--gutter:24px;--section-space:5rem}
 .sprout .hero{padding-top:2rem}
 .sprout fieldset,.sprout article,.sprout .card{padding:1.4rem 1.6rem}
 .sprout #list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sprout #list article:first-child{grid-column:1/-1}
}
@media (max-width:639.98px){.sprout .actions>*{flex:1 1 auto}.sprout .works .file-row .file-buttons{flex-basis:100%}}

/* Single-action informational notice, centered with a 16px mobile gutter. */
.sprout .notice-dialog{width:calc(100% - 32px);max-width:440px;max-height:calc(100dvh - 32px);margin:auto;padding:1.5rem;border:0;border-radius:var(--radius-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-float);overflow-y:auto}
.sprout .notice-dialog::backdrop{background:rgba(222,214,195,.65)}
.sprout .notice-dialog h2{margin:0 0 .75rem;font-size:1.25rem;line-height:1.35}
.sprout .notice-dialog p{margin:0 0 1.25rem}
.sprout .notice-dialog .actions>button{flex:0 0 auto;min-width:5rem}
/* The two-button confirmation on the same card: a close (×) beside the title and
   the request's error inside the dialog. On phones its buttons share the row. */
.sprout .confirm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.sprout .confirm-head>button{flex:0 0 auto;min-width:44px;margin:-.5rem -.75rem 0 0}
.sprout .notice-dialog .confirm-error{padding:.75rem 1rem;border-radius:var(--radius-sm);background:var(--danger-soft);color:#7a1d16}
@media (max-width:639.98px){.sprout .confirm-dialog .actions>button{flex:1 1 auto}}

/* Source files: a dashed dropzone until the first file, then the list with a
   compact drop row under it. Rows are uploading, processing, attached or error;
   a phone gets one Add file button and a bottom sheet instead. */
:root{--drop-border:#a9be93;--drop-fill:#f8fbf3;--progress:#74c12f;--error-text:#b42318;--error-fill:#fef6f5;--error-border:#f3b8b1}
.sprout .attach.is-drag{box-shadow:0 0 0 2px var(--drop-border),var(--rim-highlight),var(--shadow-lift)}
.sprout .attach .attach-count{margin-left:auto;color:var(--muted);font-size:.75rem;font-weight:500;letter-spacing:.02em;text-transform:none}
.sprout .attach .attach-count[hidden]{display:none}
.sprout .dropzone{display:grid;justify-items:center;gap:.35rem;padding:1.75rem 1rem 1.25rem;border:2px dashed var(--drop-border);border-radius:var(--radius-md);background:var(--drop-fill);text-align:center}
.sprout .attach.is-drag .dropzone,.sprout .attach.is-drag .dropzone-more{background:var(--mint)}
.sprout .dropzone-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--mint);color:var(--link)}
.sprout .dropzone-title{margin:.25rem 0 0;font-family:var(--font-serif);font-size:1.1rem;font-weight:600;color:var(--text)}
.sprout .dropzone-or{margin:0;color:var(--muted);font-size:.875rem}
.sprout .dropzone .actions{justify-content:center;margin:.25rem 0 .5rem}
.sprout .dropzone .fine,.sprout .bottom-sheet .fine{margin:0}
.sprout .dropzone-more{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;padding:.6rem .85rem;border:2px dashed var(--drop-border);border-radius:var(--radius-md);background:var(--drop-fill);color:var(--muted);font-size:.875rem}
.sprout .dropzone-more>span{flex:1 1 12rem}
.sprout .dropzone[hidden],.sprout .dropzone-more[hidden],.sprout .attach-list[hidden],.sprout .attach-add[hidden]{display:none}
.sprout .attach-add{display:none}
.sprout .attach button,.sprout #file-picker button,.sprout .bottom-sheet button{min-height:44px}
.sprout .attach-actions>button[data-icon-only],.sprout .picker-head>button{min-width:44px}
.sprout .attach-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.sprout .attach-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.65rem .65rem .65rem .85rem;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);background:var(--surface)}
.sprout .attach-row[data-state=error]{border-color:var(--error-border);background:var(--error-fill)}
.sprout .attach-row[data-state=error] .attach-meta{color:var(--error-text)}
.sprout .attach-main{display:grid;gap:.2rem;min-width:0}
.sprout .attach-name{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal;color:var(--text);font-weight:600}
.sprout .attach-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;color:var(--muted);font-size:.84rem}
.sprout .attach-extra{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.sprout .attach-extra:empty{display:none}
.sprout .attach-temp{padding:.1rem .55rem;border-radius:999px;color:var(--muted);font-size:.75rem;line-height:1.5;box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.sprout .attach-extra .vision{display:flex;align-items:flex-start;gap:.5rem;margin:0;font-size:.84rem;font-weight:500}
.sprout .attach-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
.sprout .attach-bar{width:100%;height:4px;border:0;border-radius:2px;background:var(--hairline);overflow:hidden;-webkit-appearance:none;appearance:none}
.sprout .attach-bar[hidden]{display:none}
.sprout .attach-bar::-webkit-progress-bar{background:var(--hairline)}
.sprout .attach-bar::-webkit-progress-value{background:var(--progress);transition:width .2s linear}
.sprout .attach-bar::-moz-progress-bar{background:var(--progress)}
/* Processing has no percentage: a band of the progress green sweeps across. */
.sprout .attach-bar:indeterminate{background:linear-gradient(90deg,var(--hairline) 0,var(--progress) 50%,var(--hairline) 100%) 0 0/200% 100%}
.sprout .attach-bar:indeterminate::-webkit-progress-bar{background:transparent}
.sprout .attach-bar:indeterminate::-moz-progress-bar{background:transparent}
@media (prefers-reduced-motion:no-preference){@keyframes sweep{to{background-position:-200% 0}}.sprout .attach-bar:indeterminate{animation:sweep 1.2s linear infinite}}
.sprout #attach-note{margin:.75rem 0 0}
.sprout .type-badge{display:inline-grid;place-items:center;min-width:3rem;padding:.3rem .4rem;border-radius:8px;font-size:.7rem;font-weight:700;letter-spacing:.04em;color:#fff;background:#566150}
.sprout .type-badge[data-tone=docx]{background:#2563eb}
.sprout .type-badge[data-tone=pdf]{background:#b42318}
.sprout .type-badge[data-tone=pptx]{background:#c2410c}
.sprout .type-badge[data-tone=image]{background:#7c3aed}
/* Review: the attached files as chips over their caption. */
.sprout .file-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .35rem;padding:0;list-style:none}
.sprout .file-chip{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;padding:.2rem .6rem .2rem .25rem;border-radius:999px;background:var(--mint-soft);box-shadow:0 0 0 1px var(--hairline)}
.sprout .file-chip>span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
.sprout .file-chip .type-badge{min-width:2.6rem;padding:.15rem .3rem;border-radius:999px;font-size:.62rem}
.sprout .review-files .fine{margin:0}

/* My files: a modal up to 640px; on a phone, a full-height sheet.
   Scope the dialog by ID: Google also uses .picker on its host elements. */
.sprout #file-picker,.sprout .bottom-sheet{width:calc(100% - 32px);max-width:640px;max-height:calc(100dvh - 32px);margin:auto;padding:1.25rem 1.4rem;border:0;border-radius:var(--radius-xl);background:var(--surface);color:var(--text);box-shadow:var(--shadow-float);overflow:hidden}
.sprout #file-picker[open]{display:flex;flex-direction:column}
.sprout #file-picker::backdrop,.sprout .bottom-sheet::backdrop{background:rgba(222,214,195,.65)}
.sprout .picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.sprout #file-picker h2,.sprout .bottom-sheet h2{margin:0 0 .25rem;font-size:1.3rem;line-height:1.3}
.sprout .picker-search{margin:.75rem 0}
.sprout .picker-list{flex:1 1 auto;min-height:6rem;margin:0;padding:.15rem;list-style:none;overflow-y:auto;display:grid;align-content:start;gap:.4rem}
.sprout .picker-row{display:flex;align-items:center;gap:.75rem;margin:0;min-height:44px;padding:.55rem .85rem;border-radius:var(--radius-md);color:var(--text);font-weight:500;cursor:pointer;box-shadow:0 0 0 1px var(--hairline)}
.sprout .picker-row:has(input:checked:not(:disabled)){background:var(--mint);box-shadow:0 0 0 1px rgba(114,192,44,.45)}
.sprout .picker-row:has(input:disabled){cursor:default}
.sprout .picker-row input[type=checkbox]{margin:0}
.sprout .picker-name{display:grid;flex:1 1 auto;min-width:0}
.sprout .picker-name small{color:var(--muted);font-size:.8rem;font-weight:400}
.sprout .picker-empty{margin:1rem 0;color:var(--muted);text-align:center}
.sprout .picker-empty[hidden]{display:none}
.sprout #file-picker .fine{margin:.6rem 0 0}
.sprout #file-picker .actions.more{margin:.5rem 0 0}
.sprout .picker-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hairline)}
.sprout .picker-gap{flex:1 1 auto}
.sprout .bottom-sheet .sheet-options{display:grid;gap:.5rem;margin:1rem 0 .5rem}
.sprout .sheet-camera{flex-direction:column;gap:0}
.sprout .sheet-camera small{color:var(--muted);font-size:.78rem;font-weight:400}
.sprout .sheet-camera[hidden]{display:none}

@media (max-width:639.98px){
 .sprout .dropzone,.sprout .dropzone-more{display:none}
 .sprout .attach-add{display:flex;min-height:48px;border-style:dashed}
 .sprout .attach-row{gap:.6rem;padding-left:.65rem}
 .sprout .attach-row[data-state=error] .attach-actions{grid-column:2/-1;justify-content:flex-start;margin-top:-.25rem}
 .sprout .attach-list:not([hidden]){margin-bottom:.75rem}
 .sprout #file-picker{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom))}
 .sprout .picker-foot>button{flex:1 1 auto}
 .sprout .picker-gap{display:none}
 .sprout .bottom-sheet{width:100%;max-width:none;margin:auto 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom))}
 .sprout .wizard-nav #next{min-width:7.5rem}
}

/* Drive extends the existing attachment controls without changing the drop target. */
#inputs-section .drive-button, #add-sheet .drive-button { gap: .5rem; }
#inputs-section .drive-button[hidden], #add-sheet .drive-button[hidden] { display: none; }
#inputs-section .drive-button img, #add-sheet .drive-button img { flex: 0 0 20px; }
#inputs-section .dropzone .actions, #inputs-section .dropzone-more { justify-content: flex-end; }
#inputs-section .dropzone .actions { justify-self: stretch; }

.sprout .task-cost-details{margin:1rem 0}
.sprout .task-cost-details summary{cursor:pointer;text-align:right;padding:.75rem 0;font-weight:600;color:var(--muted)}
.sprout .task-cost-details summary:focus-visible{outline:2px solid #72c02c;outline-offset:2px}

/* Only the description text is clipped; the action row stays outside it. */
.sprout .task-description-text{overflow-wrap:anywhere;line-height:1.6}
.sprout .task-description-text[data-collapsed=true]{max-height:5lh;overflow:hidden}
.sprout .task-description-text[data-collapsed=false]{max-height:none}
.sprout .task-description-text[data-collapsed=true][data-overflow=true]{mask-image:linear-gradient(to bottom,#000 calc(100% - 1lh),transparent)}
.sprout #list .task-description .actions{margin:0 0 .75rem;justify-content:flex-end}
.sprout #list .task-description .actions[hidden]{display:none}