:root { --tool-success:#2f6858; }
body { background:var(--paper); }
.mode-dark { --tool-success:#75b5a3; }
.tools-header,.tools-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem max(1rem,calc((100vw - 1080px)/2)); border-bottom:1px solid var(--rule); background:var(--paper); }
.tools-header { position:sticky; top:0; z-index:10; flex-wrap:wrap; }
.tools-header a { font:600 1.15rem var(--font-display); }
.tools-brand { display:flex; min-width:0; max-width:100%; overflow-wrap:anywhere; align-items:center; gap:.7rem; text-decoration:none; }
.tools-brand img { flex-shrink:0; }
main { max-width:1080px; margin:auto; padding:2rem 1rem 4rem; }
.tools-hero { margin-bottom:1rem; }
h1 { font:520 clamp(2rem,4vw,2.5rem)/1.1 var(--font-display); letter-spacing:-.025em; margin:0 0 .875rem; }
h2 { font:520 clamp(2rem,5vw,3rem)/1.05 var(--font-display); letter-spacing:-.025em; margin:.45rem 0 1rem; }
h3 { font:520 1.25rem/1.25 var(--font-display); margin:0 0 1rem; }
p { max-width:68ch; margin:.7rem 0 1rem; }
.intro { font-size:1.125rem; line-height:1.5; max-width:60ch; }
.eyebrow,.hint,.privacy-note,.result-label { font:400 .875rem/1.6 var(--font-mono); color:var(--ink-soft); }
.eyebrow,.result-label { color:var(--accent); text-transform:none; letter-spacing:0; }
.privacy-note { padding:1rem 1.3rem; border:1px solid var(--rule); border-radius:var(--r-md); background:color-mix(in srgb,var(--paper-raised) 72%,transparent); }
.privacy-note summary,.model-optional summary { cursor:pointer; color:var(--ink); font-weight:500; }
.privacy-note summary { padding-block:.7rem; }
.privacy-note p:last-child { margin-bottom:0; }
#tools-startup { min-height:1.5rem; color:var(--ink-muted); }
#choose-tools { scroll-margin-top:6rem; }
.tool-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:1.5rem 0 2rem; gap:.5rem 1rem; }
.tool-links a { min-width:0; overflow-wrap:anywhere; display:grid; align-content:start; gap:.25rem; padding:.875rem 1rem; border-left:3px solid transparent; background:var(--paper-raised); text-decoration:none; }
.tool-links a:hover { background:var(--paper-deep); }
.tool-links a[aria-current=true] { border-color:var(--secondary); background:var(--secondary-wash); }
.tool-links strong { font:520 1.25rem/1.2 var(--font-display); }
.tool-links a>span { font-size:1rem; line-height:1.4; color:var(--ink-soft); }
.tool-links small { font:400 .875rem/1.5 var(--font-body); color:var(--ink-soft); }
.task-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; }
.task-actions button { background:transparent; color:var(--ink-soft); border-color:var(--rule-strong); }
.task-actions button:hover { color:var(--ink); background:var(--paper-deep); }
.task-actions button[aria-pressed=true], .task-actions button[aria-pressed=true]:hover { border-color:var(--secondary); background:var(--secondary-wash); color:var(--ink); }
.tool { overflow-wrap:anywhere; padding:clamp(1.25rem,4vw,3rem); border:1px solid var(--rule-strong); border-radius:var(--r-sm); background:var(--paper-raised); scroll-margin-top:6rem; }
.tool>.eyebrow { margin-top:0; }
.tool>p:not(.eyebrow):first-of-type { font-size:1.15rem; color:var(--ink-soft); }
.back-to-tools { display:flex; align-items:center; min-height:44px; width:fit-content; margin:0 0 1.8rem; font:400 .875rem/1.5 var(--font-mono); color:var(--ink-soft); }
.step-guide { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin:1rem 0 1.5rem; padding-left:1.25rem; color:var(--ink-soft); font-size:.875rem; }
.step-guide li { padding-left:.15rem; }
.workbench { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.work-step,.review-gate { min-width:0; padding:1.25rem; border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--paper); }
.work-step h3 span,.editor-title span,.review-gate h3 span { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; margin-right:.45rem; border-radius:50%; background:var(--accent-wash); color:var(--accent); font:500 .875rem var(--font-mono); }
label { display:block; max-width:100%; margin:1rem 0; font:500 .875rem/1.6 var(--font-mono); }
input,select,textarea { display:block; width:100%; max-width:100%; margin-top:.4rem; padding:.875rem .85rem; color:var(--ink); background:var(--paper-raised); border:1px solid var(--rule-strong); border-radius:7px; font:400 1rem/1.4 system-ui,sans-serif; }
input:hover,select:hover,textarea:hover { border-color:var(--ink-muted); }
input[type=range] { accent-color:var(--accent); }
input[type=file] { white-space:normal; border:0; padding:.6rem 0 0; background:transparent; }
input[type=file]::file-selector-button { border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:var(--paper-raised); padding:.7rem .9rem; margin-right:.7rem; cursor:pointer; font:500 .875rem var(--font-mono); }
.file-picker { padding:1.2rem; border:1.5px dashed var(--rule-strong); border-radius:var(--r-md); background:var(--paper-raised); }
.file-picker:focus-within { border-color:var(--secondary); background:var(--secondary-wash); }
textarea { resize:vertical; }
button,.download { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:44px; padding:.7rem 1rem; margin:.35rem .3rem .35rem 0; border:1px solid var(--accent); border-radius:7px; color:var(--paper-raised); background:var(--accent); font:500 .875rem/1.4 var(--font-mono); cursor:pointer; text-decoration:none; }
button:hover,.download:hover { background:var(--accent-hover); color:var(--paper-raised); }
button:disabled { opacity:.5; cursor:not-allowed; }
.quiet-button { background:transparent; color:var(--ink-soft); border-color:var(--rule-strong); }
.quiet-button:hover { color:var(--ink); background:var(--paper-deep); }
.model-button { background:var(--secondary); border-color:var(--secondary); }
.model-button:hover { background:color-mix(in srgb,var(--secondary) 85%,black); }
.model-button span { opacity:.78; font-weight:400; }
.device-choice { max-width:22rem; }
.controls { display:flex; flex-wrap:wrap; gap:.8rem; align-items:end; }
.controls>* { flex:1 1 160px; }
.controls button { flex:0 1 auto; }
.hint { margin-top:.55rem; }
.result-tray,.download-tray { min-height:88px; margin-top:1rem; padding:1rem 1.2rem; border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--secondary-wash); }
.result-tray [role=status] { margin:.4rem 0; }
[role=status] { font:400 .875rem/1.55 var(--font-mono); overflow-wrap:anywhere; }
[role=status][data-state=working]::before { content:''; display:inline-block; width:.875rem; height:.875rem; margin-right:.55rem; border:2px solid var(--rule-strong); border-top-color:var(--secondary); border-radius:50%; animation:spin .75s linear infinite; }
[role=status][data-state=ready] { color:var(--tool-success); }
.error,[role=status][data-state=error] { color:var(--accent); }
.error::before { content:'!'; display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; margin-right:.45rem; border-radius:50%; background:var(--accent); color:var(--paper-raised); font-weight:600; }
.model-card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr); gap:1.5rem; margin:1.5rem 0 1rem; padding:1.3rem; border:1px solid var(--secondary); border-radius:var(--r-lg); background:var(--secondary-wash); }
.model-card h3 { margin:.3rem 0; }
.model-card p { color:var(--ink-soft); margin:.4rem 0; }
.model-optional { display:block; }
.model-optional summary { font:520 1.15rem var(--font-display); }
.model-optional summary span { float:right; font:400 .7rem var(--font-mono); color:var(--ink-soft); }
#background-editor { margin-top:1rem; padding-top:1.5rem; border-top:1px solid var(--rule); }
.previews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.previews figure { min-width:0; margin:0; padding:.875rem; background:var(--paper-raised); border:1px solid var(--rule); border-radius:10px; }
.previews img,canvas { max-width:100%; height:auto; }
.previews img { border-radius:6px; max-height:420px; object-fit:contain; width:100%; background:var(--paper); }
.photo-previews figure { min-height:180px; }
.photo-previews canvas { display:block; width:100%; max-height:420px; object-fit:contain; border-radius:6px; background:repeating-conic-gradient(#d7d1c7 0% 25%,#fff 0% 50%) 0 / 20px 20px; }
.photo-sliders { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem 1rem; }
.photo-sliders output,.controls output { display:block; color:var(--ink-muted); font-size:.875rem; }
.photo-download { margin-top:1rem; }
.exif-preview:empty,.exif-details:empty,#exif-output:empty { display:none; }
.exif-preview { margin-top:1rem; }
.exif-preview img { display:block; max-width:100%; max-height:320px; border-radius:8px; object-fit:contain; }
.exif-details { margin:1rem 0; padding:1.2rem; border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--paper); }
.exif-details dl { margin:.8rem 0; }
.exif-details dl>div { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(0,2fr); gap:.4rem 1rem; padding:.45rem 0; border-top:1px solid var(--rule); }
.exif-details dt { color:var(--ink-soft); font:500 .76rem var(--font-mono); }
.exif-details dd { min-width:0; margin:0; overflow-wrap:anywhere; }
.exif-details summary { cursor:pointer; }
.exif-gps { padding:.7rem; border-left:3px solid var(--accent); background:var(--accent-wash); }
figcaption { padding:.5rem .2rem 0; font:400 .875rem/1.5 var(--font-mono); }
#background-canvas { display:block; margin:1rem auto; background:repeating-conic-gradient(#d7d1c7 0% 25%,#fff 0% 50%) 0 / 20px 20px; border:1px solid var(--rule-strong); border-radius:8px; touch-action:none; }
.check { display:flex; gap:.875rem; align-items:start; padding:.85rem; border-radius:8px; background:var(--accent-wash); }
.check input { width:auto; flex-shrink:0; margin-top:.25rem; }
.review-gate { margin-top:1rem; border-color:var(--accent); }
.pdf-page { margin:1.5rem 0; padding:1rem; border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--paper); }
.pdf-page canvas { display:block; margin:auto; border:1px solid var(--rule-strong); touch-action:none; }
.pdf-page button { font-size:.875rem; }
.file-list { overflow-wrap:anywhere; padding-left:1.4rem; }
.file-list li { margin:.5rem 0; }
.file-list button { min-height:44px; padding:.3rem .5rem; background:transparent; color:var(--ink-soft); border-color:var(--rule-strong); }
#extract-preview { max-width:100%; max-height:20rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Proofreading: one colour per suggestion category, shared by highlights, cards and filters. */
.inkwell-card { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1rem; }
.inkwell-card ul { margin:0; padding-left:1.2rem; color:var(--ink-soft); }
[hidden] { display:none !important; }
.tools-footer { flex-wrap:wrap; border-top:1px solid var(--rule); border-bottom:0; font-size:.9rem; }
.session-panel { margin:2rem 0 0; padding:1.5rem; border:1px solid var(--rule); border-radius:var(--r-lg); background:color-mix(in srgb,var(--paper-raised) 75%,transparent); }
.session-panel h2 { font-size:1.5rem; }
.session-panel p { font-size:1rem; color:var(--ink-soft); }
.session-panel button { background:transparent; color:var(--ink-soft); border-color:var(--rule-strong); }
.session-panel button[data-armed] { border-color:var(--accent); color:var(--accent); }
summary:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:640px) { .tool-links { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) { .tool { padding:1.3rem; } .workbench,.model-card { grid-template-columns:minmax(0,1fr); } }
@media(max-width:480px) { .previews { grid-template-columns:1fr; } .controls { display:block; } .controls>* { width:100%; } .tools-header { padding:16px; } .tools-brand { font-size:1rem!important; gap:.4rem; } .tools-header button { width:auto; flex-shrink:0; font-size:.875rem; padding:.5rem; } main { padding-top:2rem; } .tool { padding:1rem; border-radius:15px; } .model-optional summary span { float:none; display:block; margin-top:.35rem; } .exif-details dl>div { grid-template-columns:1fr; } button,.download { width:100%; margin-right:0; } .file-list button { width:auto; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }