/* Inkwell: a focused writing app on the site's paper-and-ink tokens from base.css. */
:root { --ink-success:#2f6858; --cat-spelling:#b3261e; --cat-grammar:#2f5fa7; --cat-punctuation:#7a4fa0; --cat-style:#3d7867; --cat-other:#8a6a2c; }
.mode-dark { --ink-success:#75b5a3; --cat-spelling:#f08a80; --cat-grammar:#8fb4f0; --cat-punctuation:#c9a4ea; --cat-style:#7fc3ae; --cat-other:#d8b36a; }
.cat-spelling { --cat:var(--cat-spelling); } .cat-grammar { --cat:var(--cat-grammar); } .cat-punctuation { --cat:var(--cat-punctuation); } .cat-style { --cat:var(--cat-style); } .cat-other { --cat:var(--cat-other); }
body { background:var(--paper); }

.ink-header { position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; padding:.6rem max(1rem,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--rule); background:var(--paper); }
.ink-brand { display:flex; align-items:center; gap:.6rem; font:560 1.35rem var(--font-display); text-decoration:none; color:var(--ink); }
.ink-header-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.ink-inline-label { display:flex; align-items:center; gap:.5rem; font:500 .875rem var(--font-mono); color:var(--ink-soft); }
.ink-noscript { max-width:60ch; margin:2rem auto; padding:0 1rem; }

button { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:44px; padding:.6rem 1rem; 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; }
button:hover { background:var(--accent-hover); }
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); }
select { min-height:44px; padding:.4rem .6rem; color:var(--ink); background:var(--paper-raised); border:1px solid var(--rule-strong); border-radius:7px; font:400 1rem system-ui,sans-serif; }
kbd { display:inline-block; min-width:1.4em; padding:0 .3em; border:1px solid var(--rule-strong); border-radius:4px; background:var(--paper-raised); font:500 .8rem/1.5 var(--font-mono); text-align:center; }

.ink-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(17rem,24rem); align-items:start; gap:1.5rem; max-width:1240px; margin:auto; padding:1.5rem 1rem 4rem; }
.ink-sheet { min-width:0; }

/* The textarea and its mirror share one grid cell, so the mirror's height grows the textarea.
   Every property that affects wrapping must match exactly between the two. */
.ink-paper { position:relative; display:grid; min-height:min(70vh,40rem); border:1px solid var(--rule-strong); border-radius:var(--r-md); background:var(--paper-raised); }
.ink-backdrop,.ink-text { grid-area:1/1; box-sizing:border-box; width:100%; margin:0; padding:clamp(1rem,4vw,2.5rem); border:0; font:400 1.2rem/1.8 var(--font-body); letter-spacing:normal; tab-size:4; white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; }
.ink-backdrop { color:transparent; pointer-events:none; user-select:none; }
.ink-text { position:relative; z-index:1; display:block; min-height:100%; overflow:hidden; resize:none; color:var(--ink); background:transparent; caret-color:var(--accent); outline:none; }
.ink-paper:focus-within { border-color:var(--secondary); box-shadow:0 0 0 2px color-mix(in srgb,var(--secondary) 35%,transparent); }
.ink-text::placeholder { color:var(--ink-faint); }
.ink-mark { color:transparent; background:transparent; text-decoration:underline wavy var(--cat); text-decoration-thickness:2px; text-underline-offset:.28em; text-decoration-skip-ink:none; }
.ink-mark.is-active { background:color-mix(in srgb,var(--cat) 18%,transparent); border-radius:2px; }
.ink-mark-gap { position:relative; text-decoration:none; }
.ink-mark-gap::before { content:''; position:absolute; left:-1px; top:.2em; width:3px; height:1.3em; border-radius:2px; background:var(--cat); }
.ink-footline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin:.6rem 0 0; font:400 .875rem var(--font-mono); color:var(--ink-soft); }
.ink-hint { margin:.6rem 0; font:400 .875rem/1.6 var(--font-mono); color:var(--ink-soft); }

/* The suggestion card floats under a mark; phones get a bottom sheet instead. */
.ink-card { position:absolute; z-index:5; width:min(23rem,calc(100% - 1rem)); padding:.9rem 1rem; border:1px solid var(--rule-strong); border-top:4px solid var(--cat,var(--accent)); border-radius:var(--r-md); background:var(--paper-raised); box-shadow:0 10px 30px rgba(26,20,16,.18); }
.ink-card:focus { outline:3px solid var(--secondary); outline-offset:2px; }
.ink-card-head { display:flex; justify-content:space-between; gap:.5rem; margin:0 0 .3rem; font:500 .8rem/1.4 var(--font-mono); color:var(--cat); text-transform:uppercase; letter-spacing:.06em; }
.ink-card-message { margin:0 0 .6rem; font:400 1rem/1.45 var(--font-body); color:var(--ink); }
.ink-fixes { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .5rem; }
.ink-fix { background:var(--paper); color:var(--ink); border-color:var(--rule-strong); font:500 1rem/1.3 var(--font-body); }
.ink-fix:hover { background:var(--secondary-wash); color:var(--ink); }
.ink-fix del { color:var(--cat-spelling); text-decoration-thickness:2px; }
.ink-fix ins { color:var(--ink-success); text-decoration:none; font-weight:600; }
.ink-fix kbd { margin-left:.35rem; font-size:.7rem; }
.ink-actions { display:flex; flex-wrap:wrap; gap:.3rem; border-top:1px solid var(--rule); padding-top:.5rem; }
.ink-actions button { min-height:40px; padding:.4rem .7rem; font-size:.8rem; }

.ink-side { position:sticky; top:4.5rem; max-height:calc(100vh - 5.5rem); overflow:auto; min-width:0; padding:0 .25rem 1rem 0; }
.ink-side-title { margin:0 0 .4rem; font:520 1.5rem/1.2 var(--font-display); }
.ink-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.15rem; margin-bottom:.8rem; border-bottom:1px solid var(--rule-strong); }
.ink-tabs button { min-width:0; padding:.5rem .15rem; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--ink-soft); font-size:.75rem; }
.ink-tabs button[aria-selected=true] { border-bottom-color:var(--ink); color:var(--ink); }
.ink-tabs button:hover { background:var(--paper-deep); }
.ink-tabs span { font-size:.7rem; }
.ink-outline-item { padding:.7rem 0; border-bottom:1px solid var(--rule); overflow-wrap:anywhere; }
.ink-outline-item button { min-height:44px; }
.ink-review-context { white-space:pre-wrap; overflow-wrap:anywhere; }
.ink-list > [hidden] { display:none; }
.ink-field-text { box-sizing:border-box; max-width:100%; }
.ink-status { margin:.2rem 0 .8rem; font:400 .875rem/1.55 var(--font-mono); color:var(--ink-soft); overflow-wrap:anywhere; }
.ink-status[data-state=working]::before { content:''; display:inline-block; width:.8rem; height:.8rem; margin-right:.5rem; border:2px solid var(--rule-strong); border-top-color:var(--secondary); border-radius:50%; animation:ink-spin .75s linear infinite; }
.ink-status[data-state=error] { color:var(--accent); }
.ink-filters { margin:0 0 .8rem; padding:0; border:0; min-inline-size:0; }
#ink-categories { display:flex; flex-wrap:wrap; gap:.35rem; }
.ink-chip { display:inline-flex; align-items:center; gap:.4rem; min-height:36px; padding:.2rem .6rem; border:1px solid var(--rule-strong); border-radius:999px; font:400 .8rem var(--font-mono); color:var(--ink-soft); cursor:pointer; }
.ink-chip input { margin:0; accent-color:var(--cat); }
.ink-chip b { color:var(--cat); font-weight:600; }
.ink-list { display:grid; gap:.6rem; margin:0; padding:0; list-style:none; }
.ink-item { padding:.7rem .85rem; border:1px solid var(--rule); border-left:4px solid var(--cat); border-radius:var(--r-md); background:var(--paper-raised); }
.ink-item.is-active { border-color:var(--cat); box-shadow:0 0 0 1px var(--cat); }
.ink-item-show { display:block; width:100%; min-height:0; margin:0; padding:0; border:0; background:none; color:var(--ink); text-align:left; font:400 .95rem/1.45 var(--font-body); }
.ink-item-show:hover { background:none; color:var(--ink); text-decoration:underline; }
.ink-item-kind { display:block; font:500 .75rem/1.5 var(--font-mono); color:var(--cat); text-transform:uppercase; letter-spacing:.06em; }
.ink-item .ink-fixes { margin:.5rem 0 0; }
.ink-privacy { margin-top:1.5rem; padding-top:.8rem; border-top:1px solid var(--rule); }
@keyframes ink-spin { to { transform:rotate(360deg); } }

@media (max-width: 900px) {
  .ink-main { grid-template-columns:minmax(0,1fr); }
  .ink-side { position:static; max-height:none; overflow:visible; }
}
@media (max-width: 640px) {
  /* On phones the header scrolls away so the writing gets the screen. */
  .ink-header { position:static; padding-block:.5rem; }
  .ink-header-tools { gap:.35rem; }
  .ink-header-tools button { min-height:40px; padding:.4rem .65rem; font-size:.8rem; }
  .ink-main { padding-top:1rem; }
  .ink-paper { min-height:55vh; }
  .ink-card { position:fixed; left:.5rem !important; right:.5rem; top:auto !important; bottom:calc(.5rem + env(safe-area-inset-bottom,0px)); width:auto; max-height:60vh; overflow:auto; }
}
@media (prefers-reduced-motion: reduce) { .ink-status[data-state=working]::before { animation:none; } }
.ink-update { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.3rem 1rem; padding:.4rem 1rem; border-bottom:1px solid var(--secondary); background:var(--secondary-wash); font:400 .9rem var(--font-mono); }
.ink-update p { margin:0; }
.ink-saved { margin-left:.6rem; color:var(--ink-muted); }
.ink-saved.is-error { color:var(--accent); }
.ink-docs { width:min(32rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); margin:1rem auto auto; padding:1.2rem 1.3rem; border:1px solid var(--rule-strong); border-radius:var(--r-lg); color:var(--ink); background:var(--paper-raised); box-shadow:0 18px 50px rgba(26,20,16,.25); }
.ink-docs::backdrop { background:rgba(26,20,16,.35); }
.ink-docs-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ink-docs h2 { margin:0; font:520 1.5rem/1.2 var(--font-display); }
.ink-doc-list { display:grid; gap:.4rem; margin:1rem 0; padding:0; list-style:none; }
.ink-doc { display:flex; align-items:center; gap:.4rem; padding:.3rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper); }
.ink-doc.is-current { border-color:var(--secondary); background:var(--secondary-wash); }
.ink-doc-open { flex:1; min-width:0; display:grid; justify-content:start; justify-items:start; gap:.1rem; border:0; background:none; color:var(--ink); text-align:left; font:520 1.05rem/1.3 var(--font-display); overflow-wrap:anywhere; }
.ink-doc-open:hover { background:var(--paper-deep); color:var(--ink); }
.ink-doc-open small { font:400 .8rem var(--font-mono); color:var(--ink-muted); }
.ink-check { display:flex; align-items:center; gap:.6rem; margin:1rem 0 .2rem; font:500 .9rem var(--font-mono); }
.ink-check input { width:1.1rem; height:1.1rem; accent-color:var(--accent); }
.is-armed { border-color:var(--accent); color:var(--accent); }
.ink-settings { width:min(40rem,calc(100vw - 2rem)); }
.ink-field { display:grid; gap:.35rem; margin:1rem 0 .5rem; font:500 .875rem var(--font-mono); }
.ink-field input[type=search],.ink-field-text { width:100%; padding:.7rem .8rem; color:var(--ink); background:var(--paper); border:1px solid var(--rule-strong); border-radius:7px; font:400 1rem/1.45 system-ui,sans-serif; }
.ink-field-text { display:block; resize:vertical; }
.ink-section { margin:.6rem 0; padding:.6rem .9rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper); }
.ink-section summary { cursor:pointer; min-height:32px; font:500 .9rem var(--font-mono); }
.ink-section summary span { margin-left:.4rem; color:var(--ink-muted); font-weight:400; }
#ink-rules { max-height:24rem; overflow:auto; }
.ink-rule-group { margin:.4rem 0; padding:.4rem .7rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper-raised); }
.ink-rule-group summary { cursor:pointer; font:520 1rem var(--font-display); }
.ink-rule-group summary small { font:400 .7rem var(--font-mono); color:var(--ink-muted); }
.ink-rule-row { display:flex; gap:.6rem; align-items:start; margin:.45rem 0; font:400 .9rem/1.4 system-ui,sans-serif; }
.ink-rule-row input { margin-top:.2rem; accent-color:var(--accent); }
.ink-rule-row strong { display:block; font-weight:600; }
.ink-rule-row small { display:block; color:var(--ink-soft); overflow-wrap:anywhere; }
.ink-one-of { display:block; }
.ink-packs { padding-left:1.2rem; }
.ink-hint.is-error,#ink-words-status.is-error,#ink-pack-status.is-error { color:var(--accent); }
.ink-settings code { font:400 .85em var(--font-mono); }
.ink-score { gap:.45rem; background:var(--paper-raised); color:var(--ink-soft); border-color:var(--secondary); }
.ink-score:hover { background:var(--secondary-wash); color:var(--ink); }
.ink-score strong { font:600 1.05rem var(--font-mono); color:var(--secondary); }
.ink-tone { margin:-.4rem 0 .8rem; font:400 .85rem var(--font-mono); color:var(--secondary); }
.ink-goals-form { display:grid; gap:.6rem; }
.ink-goal-set { margin:0; padding:.6rem .9rem; border:1px solid var(--rule); border-radius:var(--r-md); }
.ink-goal-set legend { padding:0 .3rem; font:500 .9rem var(--font-mono); }
.ink-goal { display:flex; align-items:start; gap:.6rem; margin:.35rem 0; cursor:pointer; }
.ink-goal input { margin-top:.3rem; accent-color:var(--accent); }
.ink-goal strong { display:block; font:520 1rem var(--font-display); }
.ink-goal small { display:block; font:400 .8rem var(--font-mono); color:var(--ink-muted); }
.ink-performance h3 { margin:1.2rem 0 .4rem; font:520 1.1rem var(--font-display); }
.ink-score-head { display:flex; align-items:center; gap:1rem; }
.ink-score-big { font:560 3rem/1 var(--font-display); color:var(--secondary); }
.ink-parts { display:grid; gap:.7rem; margin-top:.8rem; }
.ink-part-title { display:flex; justify-content:space-between; margin:0; font:500 .9rem var(--font-mono); }
.ink-part meter { width:100%; height:.7rem; }
.ink-part small { display:block; font:400 .8rem/1.4 var(--font-mono); color:var(--ink-muted); }
.ink-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.5rem; margin:0; }
.ink-stats div { padding:.5rem .7rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper); }
.ink-stats dt { font:400 .75rem var(--font-mono); color:var(--ink-muted); }
.ink-stats dd { margin:0; font:560 1.3rem var(--font-display); }
.ink-stats small { display:block; font:400 .75rem var(--font-mono); color:var(--ink-muted); }
.ink-tone-detail p { margin:.3rem 0; }
.ink-ai { margin-top:1.2rem; padding:.7rem .9rem; border:1px solid var(--secondary); border-radius:var(--r-md); background:var(--secondary-wash); }
.ink-ai summary { cursor:pointer; font:520 1.05rem var(--font-display); }
.ink-ai summary span { display:block; font:400 .75rem var(--font-mono); color:var(--ink-muted); }
.ink-ai-tasks { display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0; }
.ink-ai-tasks button { min-height:40px; padding:.4rem .7rem; font-size:.8rem; }
.ink-ai-diff { margin:.6rem 0; padding:.7rem .8rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper-raised); font:400 1rem/1.6 var(--font-body); white-space:pre-wrap; overflow-wrap:anywhere; }
.ink-ai-diff del { color:var(--cat-spelling); }
.ink-ai-diff ins { color:var(--ink-success); text-underline-offset:3px; }
.ink-ai-label { display:block; font:500 .75rem var(--font-mono); color:var(--ink-muted); }
.ink-file-actions { display:flex; flex-wrap:wrap; gap:.35rem; }
.ink-file-actions button { min-height:40px; padding:.4rem .7rem; }
.ink-download { font:400 .85rem var(--font-mono); }
.ink-synonyms small { display:block; margin:.3rem 0 .2rem; font:500 .75rem var(--font-mono); color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; }
.ink-card-synonyms { border-top-color:var(--secondary); max-height:24rem; overflow:auto; }
.ink-rd-view { max-height:18rem; overflow:auto; margin:.5rem 0; padding:.7rem .8rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper); font:400 1rem/1.8 var(--font-body); white-space:pre-wrap; overflow-wrap:anywhere; }
.rd-hard { background:color-mix(in srgb,#e0b100 30%,transparent); }
.rd-very-hard { background:color-mix(in srgb,#d4513a 26%,transparent); }
.rd-passive { background:color-mix(in srgb,#3f7fcf 24%,transparent); border-bottom:2px solid #3f7fcf; }
.rd-adverb { border-bottom:2px dotted #8a55c2; background:color-mix(in srgb,#8a55c2 16%,transparent); }
.ink-rd-legend span { display:inline-block; margin:.15rem .5rem .15rem 0; padding:0 .35rem; border-radius:3px; color:var(--ink); }
.ink-deep { margin-top:1.2rem; padding:.7rem .9rem; border:1px solid var(--rule-strong); border-radius:var(--r-md); background:var(--paper-raised); }
.ink-deep-title { margin:0; font:520 1.05rem var(--font-display); }
.ink-deep-title span { display:block; font:400 .75rem var(--font-mono); color:var(--ink-muted); }