/* MakeLesson free tools — shared stylesheet.
   Mobile-first: the base rules are the phone layout, and min-width queries
   add columns as space appears. This is the opposite of landing.html, which
   is desktop-first. The divergence is deliberate: these two pages are search
   entry points where most visitors arrive on a phone.

   Tokens below are landing.html's, hex for hex, so a visitor moving from a
   tool page to the landing sees one product. The accent is landing's
   graphite --brand, not the maroon the handoff mockup drew. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{--body:'Manrope',system-ui,-apple-system,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}

[data-theme="light"]{
  --paper:#ffffff;--paper-2:#f7f8f7;--paper-3:#eceeec;--card:#fff;
  --ink:#15181a;--ink-2:#33393c;--ink-3:#666e72;--ink-4:#9aa2a6;
  --line:#e6e9e8;--line-2:#f0f2f1;
  --accent:#3d4550;--accent-ink:#2a313a;--accent-soft:#eaecef;
  --ok:#5f6b35;--ok-soft:#eef0e0;--ok-ink:#454f22;
  --err:#a33341;--err-soft:#f7e9ea;
  --shadow:0 1px 2px rgba(20,30,28,.05)
}

/* landing.html is light only, so the dark palette has no counterpart to match.
   --accent has two jobs that pull apart on a near-black ground: link text, and
   button fill behind white text. No single graphite does both. Dark mode takes
   a light slate for text contrast, and the accent-filled buttons flip to dark
   ink below. */
[data-theme="dark"]{
  --paper:#0f1213;--paper-2:#161a1b;--paper-3:#1d2223;--card:#161a1b;
  --ink:#eef1f0;--ink-2:#c3c9c8;--ink-3:#97a0a1;--ink-4:#6c7577;
  --line:#262c2d;--line-2:#1d2223;
  --accent:#aab3c0;--accent-ink:#c9d0d9;--accent-soft:#242a31;
  --ok:#a8b86a;--ok-soft:#222719;--ok-ink:#c3d089;
  --err:#ef8378;--err-soft:#2b1a18;
  --shadow:0 1px 2px rgba(0,0,0,.4)
}

html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:.96rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--accent)}a:hover{color:var(--accent-ink)}
h1,h2,h3{font-family:var(--body);letter-spacing:-.03em;line-height:1.14;color:var(--ink)}
h1{font-size:clamp(2.05rem,4.2vw,3.05rem);font-weight:800;text-wrap:balance}
h2{font-size:clamp(1.32rem,2.8vw,1.95rem);font-weight:700;text-wrap:balance}
h3{font-size:1.01rem;font-weight:700;letter-spacing:-.015em}
button{font:inherit;cursor:pointer;border:none;background:transparent;color:inherit}
svg{display:block}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.lede{color:var(--ink-3);font-size:1.06rem;line-height:1.65;max-width:60ch}
.mono{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}

/* ───── nav ───── */
nav.top{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{width:30px;height:30px;display:block;border-radius:7px}
.brand-text{font-weight:700;font-size:1.1rem;letter-spacing:-.02em;color:var(--ink)}
.brand-text .m{color:var(--accent)}
.brand-text .l{color:var(--ok)}
.nav-spacer{flex:1}
/* Hidden until there is room. No hamburger: the tool links also sit in the
   footer and in the cross-link row, so nothing is unreachable on a phone. */
.nav-links{display:none;gap:2px;align-items:center}
.nav-link{white-space:nowrap;padding:6px 10px;font-size:.82rem;font-weight:500;color:var(--ink-3);border-radius:7px;text-decoration:none}
.nav-link:hover{color:var(--ink);background:var(--paper-2)}
.nav-link[aria-current]{color:var(--ink);font-weight:600}
.nav-right{display:flex;align-items:center;gap:8px}
.tt{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink-3);display:grid;place-items:center}
.tt:hover{color:var(--ink);border-color:var(--ink-4)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-weight:600;font-size:.88rem;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:var(--card)}
.btn-ghost:hover{border-color:var(--ink-4);color:var(--ink)}
.btn-sm{padding:7px 14px;font-size:.8rem}

/* ───── hero + tool card ───── */
.hero{padding:44px 0 20px}
.hero .lede{margin-top:18px}
.tool-sec{padding:0 0 52px}
.tool-card{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.tool-card .pane{padding:22px}
/* The form is first in source order and stays first when stacked. The mockup
   is proof, and proof belongs after the ask on a page whose whole job is
   getting someone into the textarea. */
.tool-card .pane.side{border-top:1px solid var(--line-2);background:var(--paper-2);display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;padding:26px 16px}
.side-cap{display:flex;align-items:center;gap:8px;align-self:flex-start}
.side-cap .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.side-note{font-size:.78rem;color:var(--ink-3);text-align:center;max-width:26ch}

/* ───── tool form ───── */
.tool{display:flex;flex-direction:column;gap:.8rem}
.tool label{font-size:.82rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
/* 16px, not .95rem. Below 16px iOS Safari zooms the page when the field takes
   focus and the visitor has to pinch back out. Relaxed to .95rem from tablet
   width up, where the zoom behaviour does not apply. */
.tool textarea,.tool input[type=file]{width:100%;font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;resize:vertical}
.tool textarea:focus,.tool input[type=file]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tool textarea::placeholder{color:var(--ink-4)}
.tool input[type=file]{font-size:.85rem;color:var(--ink-3);padding:.75rem .85rem;border-style:dashed}
/* The browser's own "Choose File" chip is the one control on these pages the
   theme cannot reach through ordinary properties, so it arrives grey and
   system-styled next to everything else. ::file-selector-button is the hook
   for it. Styled rather than replaced with a label-and-hidden-input: that
   trick loses the native filename readout and the keyboard behaviour that
   comes free with the real control. */
.tool input[type=file]::file-selector-button{
  font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line);border-radius:7px;
  padding:.42rem .8rem;margin:-.1rem .75rem -.1rem 0;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease
}
.tool input[type=file]:hover::file-selector-button{background:var(--accent-soft);border-color:var(--accent)}
.tool input[type=file]::file-selector-button:active{background:var(--paper-3)}
.counter{font-family:var(--mono);font-size:.72rem;color:var(--ink-4);text-align:right;margin-top:-.55rem}
.note{font-size:.79rem;color:var(--ink-3);line-height:1.55}
/* Full width on a phone so the tap target spans the card, self-sized once
   there is room beside it. */
.tool button[type=submit]{align-self:stretch;background:var(--accent);color:#fff;padding:.85rem 1.6rem;border-radius:10px;font-size:.95rem;font-weight:700}
.tool button[type=submit]:hover{background:var(--accent-ink)}
.tool button[type=submit]:disabled{opacity:.55;cursor:default}
[data-theme="dark"] .tool button[type=submit],[data-theme="dark"] .cc-accept{color:#15181a}
#tool-progress{padding:1.4rem 0 0;color:var(--ink-3);font-size:.92rem}
.error{margin-top:.8rem;padding:.75rem 1rem;border-radius:10px;background:var(--err-soft);color:var(--err);font-size:.85rem;font-weight:600}
/* The way forward, when there is one. Lighter than the error above it: the
   limit is the news, the free account is the answer, and styling both at alarm
   weight would read as two problems. */
.error-more{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(163,51,65,.18);color:var(--ink-2);font-weight:500;line-height:1.5}
.error-more a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.error-more a:hover{color:var(--ink)}
/* Past the limit the count is the thing to look at, so it stops being a quiet
   monospace footnote. */
.counter.over{color:var(--err);font-weight:700}
.cf-turnstile{margin:.1rem 0}

/* ───── sections ───── */
.sec{padding:52px 0;border-top:1px solid var(--line-2)}
.sec.band{background:var(--paper-2)}
.sec-head{max-width:640px}
.sec-head p{margin-top:14px;color:var(--ink-3);font-size:1rem}
.steps{display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px}
.step .n{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);display:block;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.step h3{margin-bottom:7px}
.step p{font-size:.9rem;color:var(--ink-3);line-height:1.6}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:start}
.two p{color:var(--ink-3);font-size:1rem}
.two p+p{margin-top:14px}
.note-card{margin-top:20px;border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--card);font-size:.9rem;color:var(--ink-3)}
.faq{display:grid;grid-template-columns:1fr;gap:0 44px;margin-top:24px}
.faq-item{padding:20px 0;border-top:1px solid var(--line)}
.faq-item h3{margin-bottom:6px}
.faq-item p{font-size:.9rem;color:var(--ink-3);line-height:1.6}
.ul-check{list-style:none;display:grid;gap:10px;margin:18px 0}
.ul-check li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.ul-check .ck{width:19px;height:19px;border-radius:6px;background:var(--ok-soft);color:var(--ok-ink);display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.links-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.links-row a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--line);border-radius:10px;font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none;background:var(--card)}
.links-row a:hover{border-color:var(--ink-4);color:var(--ink)}
.links-row a::after{content:"→";color:var(--ink-4);font-weight:400}

/* ───── crossword mock ───── */
.cw-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:3px;width:100%;max-width:calc(var(--cols) * 34px)}
.cwc{aspect-ratio:1;border:1px solid var(--line);background:var(--paper);border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-size:clamp(.6rem,1.5vw,.8rem);font-weight:500;color:var(--ink);position:relative}
.cwc.off{border:none;background:transparent}
.cwc.done{background:var(--ok-soft);border-color:color-mix(in oklab,var(--ok) 32%,transparent);color:var(--ok-ink)}
.cwc.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cwc i{position:absolute;top:0;left:2px;font-family:var(--mono);font-size:7px;font-style:normal;color:var(--ink-4);line-height:1.4}
.cw-clues{display:grid;grid-template-columns:1fr;gap:6px 22px;font-size:.8rem;color:var(--ink-3);line-height:1.5}
.cw-clues b{color:var(--ink-2);font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.04em;display:block}
/* The browser-frame mock carries two grids. A phone gets the six-column
   puzzle with its shorter clue list; the eleven-column one would give ~28px
   cells. Swapped at 700px. */
.cw-wide{display:none}
.cw-narrow{display:grid}

/* ───── browser frame ───── */
.frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 24px 50px -32px rgba(20,30,28,.45)}
.fr-bar{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--paper-2);border-bottom:1px solid var(--line-2)}
.fr-bar i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.fr-url{margin-left:8px;font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.03em}
.fr-body{padding:18px;display:grid;gap:20px}
.fr-kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.fr-title{font-weight:700;letter-spacing:-.02em;font-size:1.02rem;margin:4px 0 0}
.fr-split{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start;justify-items:center}

/* ───── phone ───── */
.phone{width:250px;background:#12100f;border-radius:30px;padding:7px;box-shadow:0 26px 50px -26px rgba(20,30,28,.55),0 0 0 1px rgba(0,0,0,.22);position:relative;flex-shrink:0}
.ph-notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:74px;height:18px;background:#12100f;border-radius:99px;z-index:2}
.phone-screen{border-radius:24px;overflow:hidden;background:var(--card);aspect-ratio:9/17.4;display:flex;flex-direction:column}
.ph-stat{display:flex;justify-content:space-between;padding:9px 15px 4px;font-size:10px;font-weight:700;color:var(--ink)}
.ph-body{flex:1;min-height:0;padding:11px;display:flex;flex-direction:column;gap:12px;overflow:hidden;justify-content:flex-start}
.ph-body>*:not(.ph-key){flex-shrink:0}
.ph-body .cw-grid{flex-shrink:1;min-height:0;max-width:150px;align-self:center;gap:2px}
.ph-clues{display:grid;gap:6px;font-size:.6rem;color:var(--ink-3);line-height:1.35}
.ph-clues b{font-family:var(--mono);font-size:.53rem;letter-spacing:.04em;color:var(--ink-2);font-weight:500;display:block}
.ph-body .cwc{font-size:.56rem;border-radius:2px}
.ph-body .cwc i{font-size:5.5px;left:1px}
.ph-kick{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ph-title{font-size:.83rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.ph-hint{font-size:.66rem;color:var(--ink-3)}
.ph-key{margin-top:auto;flex-shrink:0;display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.ph-key span{height:17px;border-radius:4px;background:var(--paper-2);border:1px solid var(--line-2)}
.ph-lead{font-size:.7rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ph-sub{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding-top:8px;border-top:1px solid var(--line-2)}
.ph-sub.first{padding-top:0;border-top:none}

/* ───── exercise mocks ───── */
.m-fib{font-size:.86rem;line-height:2.2;color:var(--ink-2)}
.m-fib.sm{font-size:.68rem;line-height:2}
.m-blank{display:inline-block;min-width:54px;padding:1px 8px;background:var(--paper);border-bottom:1.5px solid var(--ok);font-family:var(--mono);font-size:.76rem;color:var(--ok-ink);font-weight:500;border-radius:4px 4px 0 0;text-align:center}
.m-fib.sm .m-blank{min-width:40px;font-size:.62rem;padding:0 5px}
.m-blank.wrong{border-bottom-color:var(--err);color:var(--err);background:var(--err-soft);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--err) 55%,transparent)}
.m-blank.empty{border-bottom-color:var(--accent);color:var(--accent);background:var(--accent-soft);min-width:44px}
.m-blank.empty::before{content:"\00a0";display:inline-block}
.m-cue{font-family:var(--mono);font-size:.72em;color:var(--ink-4);letter-spacing:.01em;white-space:nowrap}
.m-lead{font-size:.9rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.m-qs{display:grid;gap:16px}
.m-sec{display:grid;gap:8px}
.m-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

/* ───── footer ───── */
footer{border-top:1px solid var(--line-2);padding:32px 0 42px;background:var(--paper-2)}
.foot-in{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:14px}
.foot-tools,.foot{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.78rem;color:var(--ink-4);align-items:center}
.foot-tools a,.foot a{color:var(--ink-3);text-decoration:none}
.foot-tools a:hover,.foot a:hover{color:var(--ink)}

/* ───── cookie banner ───── */
.cc-banner{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:12px;z-index:9999;box-shadow:0 -2px 20px rgba(0,0,0,.07);font-size:.82rem;color:var(--ink-3);flex-wrap:wrap;text-align:center}
.cc-banner a{color:var(--accent);text-decoration:none}
.cc-banner button{padding:.45rem 1.1rem;border-radius:8px;font-size:.79rem;font-weight:700}
.cc-accept{background:var(--accent);color:#fff}.cc-accept:hover{background:var(--accent-ink)}
.cc-reject{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line)}.cc-reject:hover{border-color:var(--ink-4)}

/* ═══════════ 620px — room to breathe ═══════════ */
@media(min-width:620px){
  .wrap{padding:0 28px}
  .nav-inner{padding:0 28px}
  .hero{padding:60px 0 24px}
  .tool-sec{padding:0 0 64px}
  .tool-card{margin-top:30px}
  .tool-card .pane{padding:30px}
  .tool-card .pane.side{padding:30px 20px}
  .tool textarea,.tool input[type=file]{font-size:.95rem}
  .tool input[type=file]{font-size:.85rem}
  .tool button[type=submit]{align-self:flex-start;padding:.8rem 1.6rem;font-size:.92rem}
  .sec{padding:64px 0}
  .fr-body{padding:22px}
  .foot-in{padding:0 28px;flex-direction:row;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
  .cc-banner{padding:14px 28px;gap:14px}
}

/* ═══════════ 700px — the wide crossword fits ═══════════ */
@media(min-width:700px){
  .cw-wide{display:grid}
  .cw-narrow{display:none}
}

/* ═══════════ 900px — multi-column content ═══════════ */
@media(min-width:900px){
  .hero{padding:76px 0 26px}
  .tool-sec{padding:0 0 80px}
  .tool-card{margin-top:34px}
  .sec{padding:88px 0}
  .steps{grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px}
  .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
  .faq{grid-template-columns:1fr 1fr;margin-top:30px}
  .cw-clues{grid-template-columns:1fr 1fr}
  .fr-split{grid-template-columns:auto minmax(0,1fr);gap:26px;justify-items:start}
}

/* ═══════════ 980px — the tool card splits ═══════════ */
@media(min-width:980px){
  .tool-card{grid-template-columns:minmax(0,1fr) 340px}
  .tool-card .pane.side{border-top:none;border-left:1px solid var(--line-2)}
}

/* ═══════════ 1040px — nav links fit ═══════════ */
@media(min-width:1040px){
  .nav-links{display:flex}
}