/* New conversion experience ("Calm"). Everything is scoped to .ux-next (opened with ?ux=next). */
.ux-next{
  /* Springs: a soft overshoot that settles. --spring for things that arrive, --spring-soft for size changes. */
  --spring:linear(0, .031 2.5%, .112 5%, .226 7.5%, .357 10%, .493 12.5%, .626 15%, .747 17.5%, .853 20%, .942 22.5%, 1.011 25%, 1.063 27.5%, 1.097 30%, 1.118 32.5%, 1.126 35%, 1.124 37.5%, 1.116 40%, 1.103 42.5%, 1.087 45%, 1.07 47.5%, 1.053 50%, 1.037 52.5%, 1.023 55%, 1.011 57.5%, 1.001 60%, .994 62.5%, .989 65%, .986 67.5%, .984 70%, .985 75%, .988 80%, .993 85%, .997 90%, .999 95%, 1);
  --spring-soft:linear(0, .031 2.5%, .108 5%, .213 7.5%, .332 10%, .454 12.5%, .571 15%, .677 17.5%, .77 20%, .849 22.5%, .912 25%, .962 27.5%, .999 30%, 1.024 32.5%, 1.041 35%, 1.05 37.5%, 1.054 40%, 1.05 45%, 1.038 50%, 1.025 55%, 1.014 60%, 1.006 65%, 1.001 70%, .998 75%, .997 80%, .998 90%, 1);
}
.ux-next .visually-hidden,.ux-next[data-doc-state=working] #document-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ux-next #document-result{display:none!important}

/* ---------- Smooth, springy layout changes (View Transitions) ----------
   Parts are named only while one of this page's own animations runs (data-vt), so leaving the page
   never drags them into the page-to-page fade. */
.ux-next[data-vt] .document-card{view-transition-name:doc-card}
.ux-next[data-vt] .tool-copy{view-transition-name:doc-copy}
.ux-next[data-vt] .doc-stage{view-transition-name:doc-stage}
::view-transition-group(*){animation-duration:.72s;animation-timing-function:linear(0, .031 2.5%, .108 5%, .213 7.5%, .332 10%, .454 12.5%, .571 15%, .677 17.5%, .77 20%, .849 22.5%, .912 25%, .962 27.5%, .999 30%, 1.024 32.5%, 1.041 35%, 1.05 37.5%, 1.054 40%, 1.05 45%, 1.038 50%, 1.025 55%, 1.014 60%, 1.006 65%, 1.001 70%, .998 75%, .997 80%, .998 90%, 1)}
::view-transition-old(*),::view-transition-new(*){animation-duration:.3s;animation-timing-function:ease}
/* The card keeps its content pinned to the top while it grows or shrinks, instead of stretching. */
::view-transition-old(doc-card),::view-transition-new(doc-card){height:100%;width:100%;object-fit:none;object-position:top left}
::view-transition-new(doc-stage):only-child{animation:doc-arrive .8s linear(0, .031 2.5%, .112 5%, .226 7.5%, .357 10%, .493 12.5%, .626 15%, .747 17.5%, .853 20%, .942 22.5%, 1.011 25%, 1.063 27.5%, 1.097 30%, 1.118 32.5%, 1.126 35%, 1.124 37.5%, 1.116 40%, 1.103 42.5%, 1.087 45%, 1.07 47.5%, 1.053 50%, 1.037 52.5%, 1.023 55%, 1.011 57.5%, 1.001 60%, .994 62.5%, .989 65%, .986 67.5%, .984 70%, .985 75%, .988 80%, .993 85%, .997 90%, .999 95%, 1) both}
::view-transition-old(doc-stage):only-child,::view-transition-old(doc-copy):only-child{animation:doc-leave .28s ease both}
::view-transition-new(doc-copy):only-child{animation:doc-fade .4s ease both}
@keyframes doc-arrive{from{opacity:0;transform:translateY(-28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes doc-leave{to{opacity:0;transform:translateY(-10px) scale(.98)}}
@keyframes doc-fade{from{opacity:0}}
@keyframes doc-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes doc-spin{to{transform:rotate(360deg)}}
@keyframes doc-draw{to{stroke-dashoffset:0}}
@keyframes doc-sweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* Buttons give a small springy press */
.ux-next .document-card button,.ux-next .doc-stage button,.ux-next .doc-stage a.doc-report{transition:transform .5s var(--spring),border-color .2s,background .2s,color .2s}
.ux-next .document-card button:not(:disabled):active,.ux-next .doc-stage button:active{transform:scale(.96);transition-duration:.08s}

/* ---------- Compact file row (while working and when done) ---------- */
.ux-next .doc-compact,.ux-next .doc-progress{display:none}
.ux-next[data-doc-state=working] .doc-compact,.ux-next[data-doc-state=done] .doc-compact{display:flex}
.ux-next .doc-compact{align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--divider);background:var(--paper);animation:doc-pop .6s var(--spring) both}
.ux-next .doc-compact-text{flex:1;min-width:0}
.ux-next .doc-compact-name{margin:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ux-next .doc-compact-sub{margin:0;font-size:.8125rem;color:var(--muted)}
.ux-next .doc-compact-actions{display:none;gap:8px;flex-wrap:wrap}
.ux-next[data-doc-state=done] .doc-compact-actions{display:flex}
.ux-next .doc-compact-actions button{width:auto;min-height:40px;padding:8px 16px;font-size:.8125rem}
.ux-next .doc-ficon{position:relative;display:block;width:30px;height:36px;flex:0 0 auto}
.ux-next .doc-ficon svg{width:100%;height:100%;fill:var(--surface);stroke:var(--divider)}
.ux-next .doc-ficon b{position:absolute;left:3px;right:3px;bottom:5px;padding:1px 0;border-radius:2px;background:var(--muted);color:var(--paper);font-size:.5rem;font-weight:600;letter-spacing:.04em;text-align:center}

/* ---------- Working: only the file and its progress ---------- */
.ux-next[data-doc-state=working] .document-card>:not(.panel-heading):not(.doc-compact):not(.doc-progress):not(#document-status):not([role=alert]){display:none!important}
.ux-next[data-doc-state=working] .doc-progress{display:grid}
.ux-next .doc-progress{position:relative;overflow:hidden;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;margin:12px 0 0;padding:16px 16px 20px;border:1px solid var(--divider);background:var(--paper);animation:doc-pop .7s .05s var(--spring) both}
.ux-next .doc-spinner{width:18px;height:18px;margin-top:2px;border:1.5px solid var(--divider);border-top-color:var(--ink);border-radius:50%;animation:doc-spin .9s linear infinite}
.ux-next .doc-progress-title{margin:0;font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere}
.ux-next .doc-progress-note{margin:4px 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.ux-next .doc-progress-time{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.ux-next .doc-progress-bar{position:absolute;left:16px;right:16px;bottom:10px;height:2px;border-radius:2px;background:var(--divider);overflow:hidden}
.ux-next .doc-progress-bar i{position:absolute;inset:0;width:40%;background:var(--ink);border-radius:2px;animation:doc-sweep 1.6s cubic-bezier(.45,0,.2,1) infinite}

/* ---------- Done: the input folds into a slim bar under the result ---------- */
.ux-next[data-doc-state=done] .tool-intro{grid-template-columns:minmax(0,1fr);margin-top:24px}
.ux-next[data-doc-state=done] .tool-copy{display:none}
.ux-next[data-doc-state=done] .document-card{padding:19px}
.ux-next[data-doc-state=done] .document-card>:not(.doc-compact):not(#document-status):not([role=alert]){display:none!important}
.ux-next[data-doc-state=done] .doc-compact{border:0;background:transparent;padding:0}
.ux-next[data-doc-state=done] #document-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Errors ---------- */
.ux-next #document-status.is-error{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--warning) 45%,var(--divider));background:color-mix(in srgb,var(--warning) 9%,var(--paper));color:var(--ink);font-size:.875rem;line-height:1.5;scroll-margin-bottom:24px;animation:doc-pop .6s var(--spring) both}
.ux-next .doc-error-icon{grid-row:span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--warning);color:var(--paper);font-weight:600;font-size:.8125rem}
.ux-next .doc-error-ref{font-size:.75rem;color:var(--muted)}

/* ---------- The result stage at the top ---------- */
.ux-next .doc-stage{margin:24px 0 8px;scroll-margin-top:calc(var(--header-clearance) + 16px)}
.ux-next .doc-stage[hidden]{display:none}
.ux-next .doc-stage-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:20px}
.ux-next .doc-tick{display:block;width:40px;height:40px}
.ux-next .doc-tick svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ux-next .doc-tick circle{stroke-dasharray:66;stroke-dashoffset:66;animation:doc-draw .7s .15s var(--spring-soft) forwards}
.ux-next .doc-tick path{stroke-dasharray:16;stroke-dashoffset:16;animation:doc-draw .5s .5s var(--spring) forwards}
.ux-next .doc-stage h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.ux-next .doc-stage h2:focus{outline:none}
.ux-next .doc-stage-meta{margin:4px 0 0;font-size:.875rem;color:var(--muted);overflow-wrap:anywhere}
.ux-next .doc-stage-actions{display:flex;gap:10px}
.ux-next .doc-stage-actions button{width:auto;min-height:48px;padding:12px 28px;animation:doc-pop .7s .25s var(--spring) both}
.ux-next .doc-stage-actions button[hidden]{display:none}
.ux-next #document-unlock-options{margin:0 0 20px;padding:23px;border:1px solid var(--divider);background:var(--surface);animation:doc-pop .6s var(--spring) both}
.ux-next #document-unlock-options[hidden]{display:none}
.ux-next .doc-stage-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.ux-next .doc-viewer{min-width:0;background:var(--surface);border:1px solid var(--divider);padding:23px;animation:doc-pop .8s .1s var(--spring) both}
.ux-next .doc-viewer.is-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.ux-next .doc-viewer-label{margin:0 0 12px;font-size:.8125rem;color:var(--muted);text-align:center}
.ux-next .doc-original .doc-page img{opacity:.92}

/* PDF pages, as a viewer shows them */
.ux-next .doc-pages{display:grid;gap:24px;justify-items:center}
.ux-next .doc-page{margin:0;width:100%;max-width:720px}
.ux-next .doc-page img{display:block;width:100%;height:auto;background:#fff;}
.ux-next .doc-page figcaption{margin-top:8px;text-align:center;font-size:.75rem;color:var(--muted)}
.ux-next .doc-pages>*{animation:doc-pop .7s var(--spring) both}
.ux-next .doc-pages>:nth-child(2){animation-delay:.08s}.ux-next .doc-pages>:nth-child(3){animation-delay:.16s}.ux-next .doc-pages>:nth-child(4){animation-delay:.24s}
.ux-next .doc-more{margin:0;font-size:.8125rem;color:var(--muted);text-align:center}

/* Word pages */
.ux-next .doc-word-page{border:1px solid var(--doc-hairline);width:100%;max-width:640px;aspect-ratio:1/1.414;overflow:hidden;padding:9% 10%;background:#fff;color:#1d1d1d;border-radius:16px;font-family:Aptos,Calibri,'Segoe UI',-apple-system,sans-serif;font-size:.8125rem;line-height:1.55}
.ux-next .doc-word-page p{margin:0 0 .9em}

/* Spreadsheets, as Excel shows them: light, or Excel's dark look in dark mode */
.ux-next .doc-sheet{--x-bg:#fff;--x-text:#1f1f1f;--x-grid:#e1e1e1;--x-line:#dadada;--x-head:#f3f3f3;--x-head-text:#555;--x-accent:#1f6f43;--x-foot:#fafafa;--x-foot-text:#666;transition:background-color .5s var(--spring-soft),color .5s var(--spring-soft)}
.ux-next[data-theme=dark] .doc-viewer:not(.as-printed) .doc-sheet{--x-bg:#1b1b1b;--x-text:#e6e6e6;--x-grid:#333;--x-line:#3d3d3d;--x-head:#262626;--x-head-text:#a8a8a8;--x-accent:#6fcf97;--x-foot:#202020;--x-foot-text:#9a9a9a;}
/* PDF and Word pages in dark mode: the page colours are flipped for comfortable reading (hues kept).
   "As printed" shows them exactly as the downloaded file. */
.ux-next .doc-page img,.ux-next .doc-word-page{transition:filter .55s var(--spring-soft),background-color .55s var(--spring-soft),color .55s var(--spring-soft)}
.ux-next[data-theme=dark] .doc-viewer:not(.as-printed) .doc-page img{filter:invert(.88) hue-rotate(180deg);}
.ux-next[data-theme=dark] .doc-viewer:not(.as-printed) .doc-word-page{background:#1f1f1f;color:#e4e4e4;}
.ux-next .doc-viewer-tools{display:none;justify-content:flex-end;margin:-8px 0 14px}
.ux-next[data-theme=dark] .doc-viewer-tools{display:flex}
.ux-next .doc-viewer.is-compare .doc-viewer-tools{grid-column:1/-1;margin-bottom:0}
.ux-next .doc-print-toggle{width:auto;min-height:32px;padding:4px 14px;font-size:.75rem;background:transparent;color:var(--muted);border:1px solid var(--divider)}
.ux-next .doc-print-toggle[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ux-next .doc-sheet{overflow:hidden;background:var(--x-bg);border:1px solid var(--x-line);color:var(--x-text);font-family:Aptos,Calibri,'Segoe UI',-apple-system,sans-serif}
.ux-next .doc-app-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--x-head);border-bottom:1px solid var(--x-line);font-size:.75rem;color:var(--x-head-text)}
.ux-next .doc-app-bar .doc-ficon{width:18px;height:22px}.ux-next .doc-app-bar .doc-ficon b{display:none}
.ux-next .doc-app-bar .doc-ficon svg{fill:var(--x-bg);stroke:var(--x-head-text)}
.ux-next .doc-grid{overflow:auto;max-height:560px;position:relative}
.ux-next .doc-grid:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ux-next .doc-grid table{border-collapse:collapse;font-size:13px;min-width:100%;animation:doc-fade .25s ease}
.ux-next .doc-grid th,.ux-next .doc-grid td{border:1px solid var(--x-grid);padding:4px 8px;height:24px;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:400}
.ux-next .doc-grid thead th{position:sticky;top:0;z-index:1;background:var(--x-head);color:var(--x-head-text);text-align:center;font-size:12px;min-width:72px}
.ux-next .doc-grid th.row{position:sticky;left:0;background:var(--x-head);color:var(--x-head-text);text-align:center;font-size:12px;min-width:40px;width:40px}
.ux-next .doc-grid th.corner{position:sticky;left:0;z-index:2;min-width:40px;width:40px}
.ux-next .doc-grid td.num{text-align:right;font-variant-numeric:tabular-nums}
.ux-next .doc-grid tr.empty td{color:transparent}
.ux-next .doc-grid.is-locked tbody tr:nth-last-child(-n+4) td{filter:blur(3px);opacity:.5}
.ux-next .doc-tabs{display:flex;gap:2px;padding:0 8px;background:var(--x-head);border-top:1px solid var(--x-line);overflow-x:auto}
.ux-next .doc-tabs button{width:auto;min-height:32px;padding:4px 14px;border:0;border-radius:0;background:transparent;color:var(--x-head-text);font-size:12px;border-bottom:2px solid transparent}
.ux-next .doc-tabs button[aria-selected=true]{background:var(--x-bg);color:var(--x-accent);border-bottom-color:var(--x-accent);font-weight:500}
.ux-next .doc-grid-foot{margin:0;padding:8px 12px;font-size:.75rem;color:var(--x-foot-text);background:var(--x-foot);border-top:1px solid var(--x-grid)}

/* Settings beside the preview (like the Artwork tools) */
.ux-next .doc-settings{display:grid;gap:12px;padding:23px;border:1px solid var(--divider);background:var(--surface)}
.ux-next .doc-settings[hidden]{display:none}
.ux-next .doc-settings h3{margin:0;font-size:.875rem;font-weight:500;color:var(--ink)}
.ux-next .doc-settings-state{margin:0;font-size:.75rem;line-height:1.5;color:var(--muted)}
.ux-next .doc-settings-error{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;margin:0;padding:12px;border:1px solid color-mix(in srgb,var(--warning) 45%,var(--divider));background:color-mix(in srgb,var(--warning) 9%,var(--paper));font-size:.8125rem;line-height:1.5;animation:doc-pop .6s var(--spring) both}
.ux-next .doc-settings-error[hidden],.ux-next .doc-update[hidden],.ux-next .doc-settings-credit[hidden]{display:none}
.ux-next .doc-update{width:100%;min-height:44px;animation:doc-pop .6s var(--spring) both}
.ux-next .doc-settings-credit{margin:0;font-size:.75rem;color:var(--muted)}
.ux-next .doc-stage-info{display:grid;gap:16px}
/* While the preview is out of date or updating, it steps back; when updated, it springs forward. */
.ux-next .doc-viewer{transition:opacity .5s var(--spring-soft),filter .5s var(--spring-soft),transform .6s var(--spring)}
.ux-next .doc-stage.is-stale .doc-viewer,.ux-next .doc-stage.is-updating .doc-viewer{opacity:.45;filter:saturate(.4);transform:scale(.99)}
.ux-next .doc-stage.is-updating .doc-viewer{position:relative}
.ux-next .doc-stage.is-updating .doc-settings-state::before{content:"";display:inline-block;width:11px;height:11px;margin:0 8px -1px 0;border:1.5px solid var(--divider);border-top-color:var(--ink);border-radius:50%;animation:doc-spin .9s linear infinite}
.ux-next .doc-viewer.is-refreshed{animation:doc-refresh .7s var(--spring) both}
@keyframes doc-refresh{from{opacity:.45;transform:scale(.985)}to{opacity:1;transform:none}}
.ux-next .doc-stage-actions button:disabled{opacity:.4;cursor:default}

/* Things to check, beside the preview */
.ux-next .doc-stage-side{display:grid;gap:16px;animation:doc-pop .8s .2s var(--spring) both}
.ux-next .doc-stage-side h3{margin:0;font-size:.8125rem;font-weight:400;color:var(--muted)}
.ux-next .doc-things-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.875rem;line-height:1.5}
.ux-next .doc-things-list li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;animation:doc-pop .6s var(--spring) both}
.ux-next .doc-things-list li:nth-child(2){animation-delay:.3s}.ux-next .doc-things-list li:nth-child(3){animation-delay:.36s}.ux-next .doc-things-list li:nth-child(4){animation-delay:.42s}.ux-next .doc-things-list li:nth-child(n+5){animation-delay:.48s}
.ux-next .doc-things-list li::before{grid-row:span 2;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.6875rem;margin-top:1px}
.ux-next .doc-things-list li.ok::before{content:"✓";background:var(--surface);border:1px solid var(--divider);color:var(--ink)}
.ux-next .doc-things-list li.look::before{content:"!";background:color-mix(in srgb,var(--warning) 14%,var(--paper));color:var(--warning);font-weight:600}
.ux-next .doc-thing-label{color:var(--ink)}
.ux-next .doc-thing-detail{color:var(--muted)}
.ux-next .doc-more-checks{justify-self:start;width:auto;min-height:0;padding:0;border:0;background:none;color:var(--ink);font-size:.8125rem;text-decoration:underline;text-underline-offset:3px}
.ux-next .doc-things-list li[hidden]{display:none}
.ux-next .doc-compare{width:100%;min-height:44px}
.ux-next .doc-report{font-size:.8125rem;color:var(--muted)}

@media (max-width:900px){
  .ux-next .doc-stage-body{grid-template-columns:minmax(0,1fr)}
  .ux-next .doc-stage-head{grid-template-columns:auto minmax(0,1fr)}
  .ux-next .doc-stage-actions{grid-column:1/-1}
  .ux-next .doc-stage-actions button{flex:1}
  /* Phones: less padding, so the outer corner shrinks by the same amount (32 - 16 = 16 inside). */
  .ux-next .doc-viewer{padding:15px;--corner-size:32px;border-radius:32px}
  .ux-next .doc-viewer.is-compare{grid-template-columns:minmax(0,1fr)}
  .ux-next[data-doc-state=done] .doc-compact{flex-wrap:wrap}
  .ux-next[data-doc-state=done] .doc-compact-actions{width:100%}
  .ux-next[data-doc-state=done] .doc-compact-actions button{flex:1}
}
/* On phones the theme button sits in the header instead of over the upload box */
@media (max-width:720px){
  .ux-next .theme-toggle{position:fixed;top:calc(env(safe-area-inset-top,0px) + 13px);bottom:auto;right:calc(var(--gutter) + 44px);width:36px;height:36px;min-height:36px;border-color:transparent}
}

/* Local-only helpers */
.ux-next .doc-demo-tag,.ux-next .doc-ux-switch{position:fixed;z-index:40;left:16px;font-size:.75rem;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--paper);margin:0;text-decoration:none}
.ux-next .doc-ux-switch{bottom:16px;background:var(--surface);color:var(--muted);border:1px solid var(--divider)}
.ux-next .doc-demo-tag{bottom:52px}

@media (prefers-reduced-motion:reduce){
  .ux-next *,.ux-next *::before,.ux-next *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .ux-next .doc-spinner{animation:doc-spin 2.4s linear infinite!important}
  .ux-next .doc-progress-bar i{animation:none!important;width:100%;opacity:.4}
  .ux-next .doc-tick circle,.ux-next .doc-tick path{stroke-dashoffset:0}
}

/* Corners: smooth (superellipse) everywhere, and concentric. Each inner corner is the outer corner
   less the gap between them: 40px containers with 24px padding hold 16px boxes (corners.css),
   and a 16px box with 12px padding holds 4px marks. Capsule buttons and circles stay round. */
.ux-next .doc-settings :is(select,input[type=text],input[type=number]){--corner-size:16px;border-radius:16px}
.ux-next .doc-ficon svg path:first-child{stroke-linejoin:round}
@supports(corner-shape:superellipse(1.5)){
  .ux-next :is(.doc-settings select,.doc-word-page,.doc-page-frame,.doc-page-frame::after){corner-shape:superellipse(1.5)}
}
/* The gap between an outer and an inner edge includes the 1px border line: 23px padding + 1px = 24px,
   so 40px outside gives exactly 16px inside. In the slim bar, 19px + 1px = 20px matches the 20px
   radius of its 40px-tall pill buttons. */
.ux-next .document-card{padding:23px}
.ux-next[data-doc-state=done] .doc-compact-actions button{min-height:40px;height:40px}

/* ---------- Settings, grouped and in plain words (before converting and beside the preview) ---------- */
.ux-next .document-fields{display:grid!important;grid-template-columns:minmax(0,1fr);gap:0;margin:0!important}
.ux-next .doc-group{display:grid;gap:16px;padding:18px 0}
.ux-next .doc-group[hidden]{display:none}
.ux-next .doc-group:first-child{padding-top:4px}
.ux-next .doc-group:not([hidden])~.doc-group{border-top:1px solid var(--divider)}
.ux-next .doc-group-title{margin:0;font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ux-next .doc-group>label{position:relative;display:grid;gap:8px;margin:0;color:var(--ink);font-size:.8125rem}
.ux-next .doc-group>label[hidden]{display:none}
.ux-next .doc-caption{font-weight:500;color:var(--ink)}
.ux-next .doc-setting-help{margin:0;font-size:.75rem;line-height:1.45;color:var(--muted);animation:doc-fade .3s ease}
.ux-next .doc-setting-help[hidden]{display:none}
.ux-next .doc-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden}
.ux-next .doc-group :is(input[type=text],input[type=number],select:not(.doc-native)){width:100%;min-height:40px;padding:8px 14px;border:1px solid var(--divider);background-color:var(--paper);color:var(--ink);font-size:.875rem;--corner-size:16px;border-radius:16px}
.ux-next .doc-group select:not(.doc-native){padding-right:40px}

/* Segmented buttons: a track with a thumb that slides on a spring under the chosen option.
   Concentric: track 16px, thumb 3px inside it = 13px. */
.ux-next .doc-segmented{position:relative;display:flex;padding:3px;border-radius:16px;background:color-mix(in srgb,var(--ink) 7%,var(--paper));isolation:isolate}
.ux-next .doc-segmented-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:0;border-radius:13px;background:var(--paper);border:1px solid var(--divider);transition:transform .55s var(--spring),width .55s var(--spring)}
.ux-next[data-theme=dark] .doc-segmented{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
.ux-next[data-theme=dark] .doc-segmented-thumb{background:#3a3a3a;border-color:#4a4a4a}
.ux-next .document-fields .doc-segment{position:relative;z-index:1;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;min-height:34px;margin:0;padding:6px 8px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-size:.8125rem;line-height:1.2;white-space:nowrap;transition:color .25s ease,transform .5s var(--spring)}
.ux-next .document-fields .doc-segment:not(:disabled):hover{color:var(--ink);border:0}
.ux-next .document-fields .doc-segment[aria-checked=true]{color:var(--ink);font-weight:500}
.ux-next .document-fields .doc-segment:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ux-next .document-fields .doc-segment:disabled{opacity:.5;cursor:default}
.ux-next .doc-segment span{overflow:hidden;text-overflow:ellipsis}
.ux-next .doc-segment svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4}

/* On/off switches instead of tick boxes */
.ux-next .doc-group>label.doc-switch{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:16px;min-height:32px;cursor:pointer}
.ux-next .doc-switch .doc-caption{font-weight:500}
.ux-next input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:46px;height:28px;margin:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 18%,var(--paper));cursor:pointer;transition:background-color .3s ease}
.ux-next input[role=switch]::before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .5s var(--spring)}
.ux-next input[role=switch]:checked{background:var(--accent)}
.ux-next input[role=switch]:checked::before{transform:translateX(18px)}
.ux-next input[role=switch]:active::before{width:26px}
.ux-next input[role=switch]:checked:active::before{transform:translateX(14px)}
.ux-next input[role=switch]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ux-next input[role=switch]:disabled{opacity:.5;cursor:default}
@supports(corner-shape:superellipse(1.5)){
  .ux-next :is(.doc-segmented,.doc-segmented-thumb,.document-fields .doc-segment,.doc-group select:not(.doc-native)){corner-shape:superellipse(1.5)}
}
.ux-next .document-fields .doc-segment:has(svg){flex-direction:column;gap:4px;min-height:54px;padding:8px 4px}
.ux-next .doc-segment:has(svg) svg{width:18px;height:18px}
.ux-next .doc-group>label.doc-depends-off{display:none}

/* Outlines inside the preview: a faint grey hairline, never a bright line. */
.ux-next{--doc-hairline:color-mix(in srgb,var(--ink) 10%,transparent)}
.ux-next .doc-page-frame{position:relative;display:block;overflow:hidden;border-radius:16px}
.ux-next .doc-page-frame::after{content:"";position:absolute;inset:0;border:1px solid var(--doc-hairline);border-radius:inherit;pointer-events:none}
.ux-next[data-theme=dark] .doc-viewer:not(.as-printed) .doc-sheet{--x-line:rgba(255,255,255,.08)}
/* The preview area in dark mode: dark grey with the faintest touch (4%) of the FileNeat blue. */
.ux-next[data-theme=dark] .doc-viewer{background-color:#1e2226;border-color:#2e3237}
.ux-next[data-theme=dark] .doc-viewer .doc-print-toggle{border-color:#2e3237}

/* Switches use the brand gradient when on. */
.ux-next input[role=switch]:checked{background:var(--accent-gradient)}