/* ==========================================================================
   NVIL // Scan — private document scanner (TOOL-002)
   The landing follows the site theme through /tools/tools.css. The scanner
   itself (`.sc`) is a dark application that takes the viewport while it is
   open, like the NVIL PDF editor: the document image comes first, NVIL red
   marks the detected edge, the capture state, the active option and the
   one primary action.
   ========================================================================== */
.sc-drop { appearance: none; font: inherit; color: inherit; width: 100%; }
.sc-drop svg { color: var(--ink); }

body.sc-open { overflow: hidden; }
body.sc-open .header, body.sc-open .footer, body.sc-open .scrollbar { display: none; }
body.sc-open main > :not(#sc-app) { display: none; }
/* the accessibility button stays reachable while scanning, parked on the left edge at mid height where no screen puts a control */
body.sc-open .a11y-btn { left: .5rem; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: 48px; height: 48px; padding: 0; justify-content: center; z-index: 60; }
body.sc-open .a11y-btn:hover, body.sc-open .a11y-btn:focus-visible { transform: translateY(-50%); }
body.sc-open .a11y-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sc {
  --sc-bg: #0F0F11; --sc-panel: #17181B; --sc-raised: #202226; --sc-line: #2E3136; --sc-ink: #F4F4F5; --sc-soft: #A9ACB2; --sc-dim: #83878F;
  --sc-red: #E90012; --sc-red-text: #FF2A3C; --sc-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sc-ease: cubic-bezier(.22, .8, .3, 1);
  position: fixed; inset: 0; z-index: 50; background: var(--sc-bg); color: var(--sc-ink); font-family: var(--font-body); color-scheme: dark; -webkit-font-smoothing: antialiased;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc h2, .sc h3, .sc p, .sc ol, .sc ul, .sc dl { margin: 0; }
.sc :focus-visible { outline: 2px solid var(--sc-red); outline-offset: 2px; }
.sc-mono { font: 600 .62rem/1.5 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-soft); }
.sc-screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.sc-screen[hidden] { display: none; }

/* buttons: the PDF editor family, so the two tools feel like siblings */
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem 1.1rem; border: 1px solid var(--sc-line); border-radius: 4px; background: none; color: var(--sc-ink); cursor: pointer; font: 600 .84rem/1 var(--font-display); letter-spacing: .02em; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.sc-btn:hover { border-color: var(--sc-ink); }
.sc-btn:active { transform: translateY(2px); }
.sc-btn--primary { background: var(--sc-red); border-color: var(--sc-red); color: #fff; }
.sc-btn--primary:hover { background: #C4000F; border-color: #C4000F; }
.sc-btn--ghost { color: var(--sc-soft); border-color: transparent; }
.sc-btn--ghost:hover { color: var(--sc-ink); border-color: var(--sc-line); }
.sc-btn--danger { color: var(--sc-red-text); border-color: rgba(233,0,18,.4); }
.sc-btn--danger:hover { border-color: var(--sc-red-text); }
.sc-btn--small { min-height: 38px; padding: .4rem .8rem; font-size: .76rem; }
.sc-btn:disabled { opacity: .45; cursor: default; transform: none; }
.sc-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--sc-ink); cursor: pointer; transition: background .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; }
.sc-icon svg { width: 22px; height: 22px; }
.sc-icon:hover { background: var(--sc-raised); }
.sc-icon[aria-pressed="true"] { border-color: var(--sc-red); background: rgba(233,0,18,.14); color: var(--sc-red-text); }
.sc-chip { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .75rem; border: 1px solid var(--sc-line); border-radius: 999px; background: rgba(15,15,17,.7); color: var(--sc-soft); cursor: pointer; font: 600 .58rem/1 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; }
.sc-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-dim); }
.sc-chip[aria-pressed="true"] { color: var(--sc-ink); border-color: var(--sc-red); }
.sc-chip[aria-pressed="true"] i { background: var(--sc-red); box-shadow: 0 0 0 3px rgba(233,0,18,.25); }

/* status layers */
.sc-busy { position: absolute; left: 50%; top: 50%; z-index: 70; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-panel); font: 600 .7rem/1 var(--sc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.sc-busy[hidden] { display: none; }
.sc-busy i { width: 12px; height: 12px; border: 2px solid var(--sc-line); border-top-color: var(--sc-red); border-radius: 50%; animation: sc-spin .8s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-toast { position: absolute; left: 50%; bottom: 8.4rem; z-index: 65; transform: translate(-50%, 8px); max-width: min(92vw, 30rem); padding: .6rem 1rem; border: 1px solid var(--sc-line); border-left: 3px solid var(--sc-red); border-radius: 4px; background: var(--sc-panel); font-size: .86rem; color: var(--sc-ink); opacity: 0; transition: opacity .2s ease, transform .25s var(--sc-ease); pointer-events: none; }
.sc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sc-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin: 0 1rem; padding: .55rem .9rem; border: 1px solid rgba(233,0,18,.45); border-radius: 4px; background: rgba(233,0,18,.08); font-size: .84rem; }

/* modal */
.sc-modal { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sc-modal__box { width: min(100%, 26rem); padding: 1.4rem; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-panel); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.sc-modal__title { font: 700 1.15rem/1.2 var(--font-display); letter-spacing: -.01em; }
.sc-modal__text { margin-top: .6rem; color: var(--sc-soft); font-size: .92rem; line-height: 1.55; }
.sc-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }

/* permission explainer */
.sc-perm { align-items: center; justify-content: center; padding: 1.5rem; }
.sc-perm__box { width: min(100%, 30rem); padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-panel); }
.sc-perm__box h2 { margin-top: .8rem; font: 800 clamp(1.6rem, 5vw, 2.1rem)/1.05 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.sc-perm__box p { margin-top: .9rem; color: var(--sc-soft); line-height: 1.6; }
.sc-perm__err { padding: .7rem .9rem; border-left: 3px solid var(--sc-red); background: rgba(233,0,18,.08); color: var(--sc-ink); font-size: .9rem; }
.sc-perm__err[hidden] { display: none; }
.sc-perm__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* camera */
.sc-cam { background: #000; }
.sc-cam__top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: max(.6rem, env(safe-area-inset-top)) .8rem .6rem; background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,0)); }
.sc-cam__status { justify-self: center; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(15,15,17,.72); font: 600 .6rem/1 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-soft); white-space: nowrap; }
.sc-cam__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-dim); }
.sc-cam__status[data-state="found"] { color: var(--sc-ink); }
.sc-cam__status[data-state="found"]::before { background: var(--sc-red); box-shadow: 0 0 0 3px rgba(233,0,18,.25); }
.sc-cam__tools { display: flex; align-items: center; gap: .3rem; }
.sc-cam__view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* the video is absolutely sized to the view so its box never exceeds it: cover on phones (a portrait
   stream fills the screen), contain on wide screens (a webcam is letterboxed, never cropped) */
.sc-cam__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sc-cam__ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-ov__quad { fill: rgba(233,0,18,.12); stroke: var(--sc-red); stroke-width: 2.5; stroke-linejoin: round; }
.sc-ov__dot { fill: #fff; stroke: var(--sc-red); stroke-width: 3; }
/* a candidate that is not yet stable is shown subdued; only a persistent, confident one is red */
.sc-cam__ov[data-state="detecting"] .sc-ov__quad { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.75); stroke-width: 2; stroke-dasharray: 8 6; }
.sc-cam__ov[data-state="detecting"] .sc-ov__dot { fill: rgba(255,255,255,.85); stroke: rgba(255,255,255,.5); stroke-width: 2; }
.sc-cam__status[data-state="detecting"] { color: var(--sc-ink); }
.sc-cam__status[data-state="detecting"]::before { background: #fff; }
.sc-ov__debug polygon { fill: none; stroke: #4FD1FF; stroke-width: 1; opacity: .7; }
.sc-ov__debug text { fill: #4FD1FF; font: 10px var(--sc-mono); }
.sc-debug { position: absolute; left: .5rem; top: 4.4rem; z-index: 90; max-width: 20rem; max-height: 60vh; overflow: auto; padding: .5rem .6rem; border: 1px solid #4FD1FF; background: rgba(15,15,17,.9); color: #DDF6FF; font: 10px/1.4 var(--sc-mono); white-space: pre; pointer-events: none; }
.sc-cam__guide { position: absolute; inset: 10% 8%; pointer-events: none; opacity: .5; }
.sc-cam__guide i { position: absolute; width: 22px; height: 22px; border: 2px solid #fff; }
.sc-cam__guide i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.sc-cam__guide i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.sc-cam__guide i:nth-child(3) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.sc-cam__guide i:nth-child(4) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.sc-cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.sc-cam__flash.is-on { opacity: .75; transition: none; }
.sc-cam__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: .9rem 1rem max(1rem, env(safe-area-inset-bottom)); background: #000; }
.sc-cam__side { display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 64px; min-height: 56px; padding: .4rem .3rem; border: 0; border-radius: 6px; background: none; color: var(--sc-soft); cursor: pointer; font: 600 .58rem/1 var(--sc-mono); letter-spacing: .12em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.sc-cam__side svg { width: 26px; height: 26px; }
.sc-cam__side:hover { color: var(--sc-ink); }
.sc-cam__pages { justify-self: end; color: var(--sc-ink); }
.sc-cam__pages img { width: 34px; height: 44px; object-fit: cover; border: 1px solid var(--sc-line); background: var(--sc-panel); }
.sc-cam__pages[hidden] { display: none; }
#sc-cam-add { justify-self: start; }
.sc-shutter { position: relative; width: 78px; height: 78px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.sc-shutter i { width: 60px; height: 60px; border-radius: 50%; background: var(--sc-red); transition: transform .12s ease, background .2s ease; }
.sc-shutter:hover i { background: #FF1F30; }
.sc-shutter:active i { transform: scale(.88); }
.sc-shutter:disabled { opacity: .6; cursor: default; }
.sc-shutter__ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); pointer-events: none; }
.sc-shutter__ring circle { transition: stroke-dashoffset .1s linear; }

/* shared bar for the editing screens */
.sc-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; padding: max(.7rem, env(safe-area-inset-top)) 1rem .7rem; border-bottom: 1px solid var(--sc-line); background: var(--sc-panel); }
.sc-bar__title { font: 700 1rem/1.2 var(--font-display); letter-spacing: -.01em; }
.sc-bar__status { grid-column: 1 / -1; margin-top: .35rem; font-size: .82rem; color: var(--sc-soft); }
.sc-bar__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.sc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .8rem 1rem max(.8rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--sc-line); background: var(--sc-panel); }
.sc-actions .sc-btn--primary { margin-left: auto; }

/* crop */
.sc-crop__host { flex: 1; min-height: 0; position: relative; padding: .8rem; }
.sc-crop__frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.sc-crop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
.sc-crop__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-crop__shade { fill: rgba(0,0,0,.5); }
.sc-crop__quad { fill: none; stroke: var(--sc-red); stroke-width: 2; stroke-linejoin: round; }
.sc-crop__handle { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.sc-crop__handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid var(--sc-red); border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .12s ease; }
.sc-crop__handle:hover::before, .sc-crop__handle:focus-visible::before { transform: scale(1.15); }
.sc-crop__handle:active { cursor: grabbing; }
.sc-crop__handle:focus-visible { outline: none; }
.sc-crop__handle:focus-visible::before { box-shadow: 0 0 0 3px rgba(233,0,18,.45), 0 2px 8px rgba(0,0,0,.5); }
.sc-crop__loupe { position: absolute; width: 120px; height: 120px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 6px 20px rgba(0,0,0,.6); pointer-events: none; z-index: 2; }

/* enhance */
.sc-enh__view { flex: 1; min-height: 0; display: grid; place-items: center; padding: .8rem; background: #000; }
.sc-enh__canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.sc-enh__controls { display: grid; gap: .6rem; padding: .7rem 1rem; border-top: 1px solid var(--sc-line); background: var(--sc-panel); }
.sc-seg { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.sc-seg button { min-height: 40px; padding: .4rem .8rem; border: 1px solid var(--sc-line); border-radius: 4px; background: none; color: var(--sc-soft); cursor: pointer; font: 600 .72rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; transition: color .15s ease, border-color .15s ease, background .15s ease; -webkit-tap-highlight-color: transparent; }
.sc-seg button:hover { color: var(--sc-ink); }
.sc-seg button[aria-pressed="true"] { color: var(--sc-ink); border-color: var(--sc-red); background: rgba(233,0,18,.14); }
.sc-seg--small button { min-height: 34px; font-size: .64rem; }
.sc-seg__label { margin-right: .3rem; font: 600 .6rem/1 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-dim); }
.sc-seg[hidden] { display: none; }

/* pages */
.sc-pages__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: auto; }
.sc-pages__main { padding: 1rem; }
.sc-pages__empty { padding: 2rem 1rem; border: 1px dashed var(--sc-line); text-align: center; color: var(--sc-soft); }
.sc-pages__empty[hidden] { display: none; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; padding: 0; list-style: none; }
.sc-page { position: relative; }
.sc-page__pick { display: block; width: 100%; padding: 0; border: 2px solid var(--sc-line); border-radius: 4px; background: var(--sc-panel); cursor: pointer; overflow: hidden; transition: border-color .15s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.sc-page__pick img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #000; }
.sc-page__num { position: absolute; left: .4rem; top: .4rem; padding: .25rem .45rem; border-radius: 3px; background: rgba(15,15,17,.85); font: 700 .62rem/1 var(--sc-mono); letter-spacing: .1em; color: var(--sc-ink); }
.sc-page.is-selected .sc-page__pick { border-color: var(--sc-red); }
.sc-page__grip { position: absolute; right: .35rem; top: .35rem; display: grid; gap: 3px; padding: .4rem; border-radius: 3px; background: rgba(15,15,17,.85); cursor: grab; touch-action: none; }
.sc-page__grip i { display: block; width: 14px; height: 2px; background: var(--sc-soft); }
.sc-page.is-dragging { opacity: .6; }
.sc-page.is-drop-before::before, .sc-page.is-drop-after::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--sc-red); }
.sc-page.is-drop-before::before { left: -.5rem; }
.sc-page.is-drop-after::after { right: -.5rem; }
.sc-page.is-dragging .sc-page__pick { transform: scale(.97); }
.sc-page-actions { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--sc-line); border-radius: 4px; background: var(--sc-panel); }
.sc-page-actions[hidden] { display: none; }
.sc-page-actions__row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.sc-export { padding: 1rem; border-top: 1px solid var(--sc-line); background: var(--sc-panel); }
.sc-export[hidden] { display: none; }
.sc-export h3 { margin: .5rem 0 1rem; font: 800 1.3rem/1.1 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.sc-field { display: grid; grid-template-columns: 1fr; gap: .3rem; margin-bottom: .8rem; position: relative; }
.sc-field span { font: 600 .6rem/1 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-dim); }
.sc-field input, .sc-field select { width: 100%; min-height: 42px; padding: .5rem .7rem; border: 1px solid var(--sc-line); border-radius: 4px; background: var(--sc-bg); color: var(--sc-ink); font: 500 .92rem/1.2 var(--font-body); }
.sc-field input { padding-right: 3rem; }
.sc-field b { position: absolute; right: .7rem; bottom: .75rem; font: 600 .7rem/1 var(--sc-mono); color: var(--sc-dim); }
.sc-field input:focus, .sc-field select:focus { outline: none; border-color: var(--sc-red); }
.sc-export__est { min-height: 1.2em; margin-bottom: .8rem; font: 600 .66rem/1.4 var(--sc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-soft); }
.sc-export .sc-btn--action { width: 100%; }
.sc-btn--action { position: relative; overflow: hidden; }
.sc-btn--action span { grid-area: 1 / 1; display: block; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .25s var(--sc-ease); }
.sc-btn--action { display: grid; place-items: center; }
.sc-btn--action span.is-on { opacity: 1; transform: none; }
.sc-btn--action[data-state="done"] { background: #17181B; border-color: var(--sc-red); color: var(--sc-red-text); }
.sc-btn--action[data-state="error"] { background: none; border-color: var(--sc-red-text); color: var(--sc-red-text); }
.sc-btn--action[data-state="processing"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: rgba(255,255,255,.7); animation: sc-slide 1s linear infinite; }
@keyframes sc-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.sc-export__done { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--sc-line); }
.sc-export__ready { color: var(--sc-red-text); }
.sc-export__file { font: 600 .95rem/1.3 var(--font-display); word-break: break-word; }
.sc-export__local { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.sc-export__local i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-red); box-shadow: 0 0 0 3px rgba(233,0,18,.2); }
.sc-export__hint { font-size: .78rem; line-height: 1.5; color: var(--sc-soft); }
.sc-export__secondary { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
/* action priority by capability and input: file sharing available on a touch device puts Save / Share first;
   a desktop puts Download first; without file sharing the share button and its hint are not shown */
.sc-export__done[data-share="false"] .sc-export__share, .sc-export__done[data-share="false"] .sc-export__hint { display: none; }
.sc-export__done[data-layout="mobile"] .sc-export__share { order: 1; } .sc-export__done[data-layout="mobile"] .sc-export__edit { order: 2; } .sc-export__done[data-layout="mobile"] .sc-export__hint { order: 3; } .sc-export__done[data-layout="mobile"] .sc-export__download { order: 4; } .sc-export__done[data-layout="mobile"] .sc-export__secondary { order: 5; } .sc-export__done[data-layout="mobile"] .sc-export__note { order: 6; }
.sc-export__done[data-layout="mobile"][data-share="true"] .sc-export__download { background: none; border-color: var(--sc-line); color: var(--sc-ink); }
.sc-export__done[data-layout="mobile"][data-share="false"] .sc-export__download { order: 0; }   /* no file sharing: Download leads on a phone too */
.sc-export__done[data-layout="desktop"] .sc-export__download { order: 1; } .sc-export__done[data-layout="desktop"] .sc-export__edit { order: 2; } .sc-export__done[data-layout="desktop"] .sc-export__share { order: 3; background: none; border-color: var(--sc-line); color: var(--sc-ink); } .sc-export__done[data-layout="desktop"] .sc-export__hint { order: 4; } .sc-export__done[data-layout="desktop"] .sc-export__secondary { order: 5; } .sc-export__done[data-layout="desktop"] .sc-export__note { order: 6; }
.sc-export__done[hidden] { display: none; }
.sc-export__note, .sc-export__privacy { font-size: .78rem; line-height: 1.5; color: var(--sc-dim); }
.sc-export__privacy { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font: 600 .58rem/1.4 var(--sc-mono); letter-spacing: .12em; text-transform: uppercase; }
.sc-export__privacy i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-red); box-shadow: 0 0 0 3px rgba(233,0,18,.2); }

/* wider screens: the page manager becomes a workspace with the export column beside it */
@media (min-width: 1024px) {
  .sc-pages__body { grid-template-columns: minmax(0, 1fr) 22rem; }
  .sc-export { position: sticky; top: 0; align-self: start; height: 100%; border-top: 0; border-left: 1px solid var(--sc-line); overflow: auto; }
  .sc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sc-bar__status { grid-column: auto; margin: 0; }
  .sc-bar { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .sc-cam__view { background: #000; }
  .sc-cam__video { object-fit: contain; }
  .sc-crop__host { padding: 1.2rem; }
  .sc-enh__controls { grid-template-columns: auto auto; justify-content: center; column-gap: 1.6rem; }
}
@media (max-width: 720px) {
  .sc-bar { grid-template-columns: auto minmax(0, 1fr); padding-inline: .8rem; }
  .sc-bar__tools { grid-column: 1 / -1; justify-content: flex-start; margin-top: .55rem; }
  .sc-bar__tools .sc-btn { padding-inline: .6rem; }
  .sc-toast { top: 6.2rem; bottom: auto; transform: translate(-50%, -8px); }
  .sc-toast.is-on { transform: translate(-50%, 0); }
  .sc-actions { justify-content: stretch; }
  .sc-actions .sc-btn { flex: 1 1 auto; }
  .sc-actions .sc-btn--primary { flex-basis: 100%; margin-left: 0; order: 9; }
  .sc-seg { justify-content: center; }
  .sc-seg button { flex: 1 1 auto; }
  .sc-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
  .sc-page-actions__row .sc-btn { flex: 1 1 45%; }
  .sc-modal__actions .sc-btn { flex: 1 1 auto; }
  .sc-cam__status { font-size: .54rem; padding: .4rem .6rem; }
}
@media (hover: none) {
  .sc-crop__handle::before { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-toast, .sc-btn, .sc-shutter i, .sc-page__pick, .sc-crop__handle::before, .sc-btn--action span { transition: none; }
  .sc-cam__flash.is-on { opacity: .3; }
  .sc-busy i { animation-duration: 1.6s; }
}
html.a11y-motion .sc-toast, html.a11y-motion .sc-btn--action span, html.a11y-motion .sc-shutter i { transition: none !important; }
html.a11y-motion .sc-cam__flash.is-on { opacity: .3; }