/* English Coach — one stylesheet for every page.
   Look: white (or dark) pages, flat blocks with a grey edge and a thicker lower edge, round
   corners, and a few strong colours: green for go and for right, blue for what is picked,
   red for what to fix, yellow for what waits.
   Fonts: Nunito for headings, buttons and sentences, DM Sans for longer text (both in this folder). */
@font-face{font-family:"Nunito";font-weight:700 900;font-display:swap;src:url(Nunito.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400 700;font-display:swap;src:url(DMSans.woff2) format("woff2")}
:root{
  color-scheme:light dark;
  --bg:#FFFFFF;--fade:rgba(255,255,255,0);--card:#FFFFFF;--sunk:#F2F4F5;--line:#E5E5E5;--fg:#3C3C3C;--text:#4B4B4B;
  --muted:#6A6A6A;
  --go:#46A302;--go-deep:#3A8702;--on-go:#FFFFFF;--leaf:#58CC02;--leaf-deep:#58A700;--on-leaf:#173B00;
  --ok:#357A00;--ok-soft:#D7FFB8;--ok-edge:#A5ED6E;
  --pri:#1CB0F6;--pri-text:#0B6A99;--pri-soft:#DDF4FF;--pri-edge:#84D8FF;
  --bad:#C01818;--bad-fill:#FF4B4B;--bad-soft:#FFDFE0;--bad-edge:#FFB2B2;
  --warm:#8A5A00;--warm-soft:#FFF5D3;
  --head:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:1rem;--tabs:4.75rem;
}
/* The dark colours: when the phone asks for them (and the owner did not choose light), or when
   the owner chose dark. Keep the two blocks the same. */
@media (prefers-color-scheme:dark){:root:not(.light){
  --bg:#131F24;--fade:rgba(19,31,36,0);--card:#131F24;--sunk:#202F36;--line:#37464F;--fg:#F1F7FB;--text:#DCE6EC;
  --muted:#A3B4BF;
  --go:#93D333;--go-deep:#79B933;--on-go:#131F24;--leaf:#93D333;--leaf-deep:#79B933;--on-leaf:#131F24;
  --ok:#93D333;--ok-soft:#1C3A22;--ok-edge:#3F7A2A;
  --pri:#49C0F8;--pri-text:#49C0F8;--pri-soft:#1B3A49;--pri-edge:#3F85A7;
  --bad:#FF8A8A;--bad-fill:#FF4B4B;--bad-soft:#3F2024;--bad-edge:#8A3A3F;
  --warm:#FFC800;--warm-soft:#3A3212;
}}
:root.dark{
  --bg:#131F24;--fade:rgba(19,31,36,0);--card:#131F24;--sunk:#202F36;--line:#37464F;--fg:#F1F7FB;--text:#DCE6EC;
  --muted:#A3B4BF;
  --go:#93D333;--go-deep:#79B933;--on-go:#131F24;--leaf:#93D333;--leaf-deep:#79B933;--on-leaf:#131F24;
  --ok:#93D333;--ok-soft:#1C3A22;--ok-edge:#3F7A2A;
  --pri:#49C0F8;--pri-text:#49C0F8;--pri-soft:#1B3A49;--pri-edge:#3F85A7;
  --bad:#FF8A8A;--bad-fill:#FF4B4B;--bad-soft:#3F2024;--bad-edge:#8A3A3F;
  --warm:#FFC800;--warm-soft:#3A3212;
}
:root.light{color-scheme:light}
:root.dark{color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:7rem}
body{margin:0;background:var(--bg);color:var(--text);font:500 1rem/1.5 var(--body);
  -webkit-tap-highlight-color:transparent}
main{max-width:36rem;min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;
  padding:1rem 1rem 0}
main>form{flex:1;display:flex;flex-direction:column}
main>:last-child:not(form):not(.actions){margin-bottom:1.5rem}
body.tabbed{padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom,0px))}
body.tabbed main{min-height:0}
a{color:var(--pri-text);text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--pri);outline-offset:3px;border-radius:.5rem}
h1,h2{font-family:var(--head);color:var(--fg);overflow-wrap:anywhere}
h1{font-weight:900;font-size:1.75rem;line-height:1.15;margin:.25rem 0 1rem}
h2{font-weight:800;font-size:1.125rem;line-height:1.25;margin:1.5rem 0 .625rem}
p{margin:0 0 1rem;overflow-wrap:anywhere}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.icon{width:1.625rem;height:1.625rem;flex:0 0 auto}

/* ---- a block: every card, tile and field has a grey edge and round corners */
.card,.rows a,.opt,.write,.note,.warn,.why,.raw,.scale span,.seg,.mistake,.days,.chart,.figures li,.md,.help,
.pages img{background:var(--card);border:2px solid var(--line);border-radius:var(--r)}
/* ... and what can be pressed has a thicker lower edge that goes down under the finger */
.rows a,.opt,.scale span{box-shadow:0 2px 0 var(--line);transition:transform .1s ease-out,box-shadow .1s ease-out}
.rows a:active,.choices input:active + .opt,.scale input:active + span{transform:translateY(2px);box-shadow:none}

/* ---- the top line of a page: the way back (or the title) and a short count or a link */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.75rem;margin:0 0 .75rem}
.bar a{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem .875rem;border-radius:.875rem;
  background:var(--card);border:2px solid var(--line);box-shadow:0 2px 0 var(--line);
  font:800 .875rem/1 var(--head);color:var(--pri-text);text-decoration:none;white-space:nowrap;
  transition:transform .1s ease-out,box-shadow .1s ease-out}
.bar a:active{transform:translateY(2px);box-shadow:none}
.bar a:first-child::before{content:"";width:.5rem;height:.5rem;margin-left:.125rem;border-left:3px solid;
  border-bottom:3px solid;border-radius:1px;transform:rotate(45deg)}
.bar h1{margin:0}
.count{font:800 .875rem/1.2 var(--head);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.name{font:800 1.0625rem/1.25 var(--head);color:var(--fg);margin:0 0 .25rem;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* ---- buttons: green to go on, white for the way back */
.btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.75rem 1.25rem;
  border:0;border-radius:1rem;background:var(--go);color:var(--on-go);font:800 1.1875rem/1 var(--head);
  text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--go-deep);
  transition:transform .1s ease-out,box-shadow .1s ease-out}
.btn:active{transform:translateY(4px);box-shadow:none}
.btn.quiet{flex:0 0 5.5rem;background:var(--card);color:var(--pri-text);border:2px solid var(--line);
  box-shadow:0 4px 0 var(--line)}
.btn.quiet:active{box-shadow:none}
.actions{position:sticky;bottom:0;z-index:1;display:flex;gap:.625rem;margin:auto -1rem 0;
  padding:1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(var(--fade),var(--bg) 1.25rem)}
@media (max-height:34rem){.actions{position:static}}
.first{position:absolute;left:-200vw;width:1px;height:1px;padding:0;border:0;opacity:0}

/* ---- home: the next assignment, then the numbers */
.next-up{display:flex;flex-direction:column;align-items:flex-start;padding:1.25rem;margin:0 0 1rem;border-radius:1.25rem;
  background:var(--leaf);color:var(--on-leaf);text-decoration:none;box-shadow:0 5px 0 var(--leaf-deep)}
.next-up::before{content:"Next assignment";font:800 .875rem/1 var(--head)}
.next-up .name{display:block;overflow:visible;font:900 1.625rem/1.15 var(--head);color:var(--on-leaf);margin:.5rem 0 .375rem}
.next-up .state{padding:0;border-radius:0;background:none;white-space:normal;font:700 .9375rem/1.3 var(--body);
  color:var(--on-leaf)}
.next-up .what{order:3;display:inline-flex;align-items:center;min-height:3.25rem;margin-top:1rem;padding:.75rem 2rem;
  border-radius:1rem;background:#FFFFFF;color:#357A00;font:800 1.1875rem/1 var(--head);
  box-shadow:0 4px 0 rgba(0,0,0,.2);transition:transform .1s ease-out,box-shadow .1s ease-out}
.next-up:active .what{transform:translateY(4px);box-shadow:none}
.side>h2:first-child,.list>h2:first-child{margin-top:.5rem}
/* the three figures come first on the screen, whatever their place in the page */
.side{display:flex;flex-direction:column}
.side>h2:nth-of-type(2){order:-2;margin-top:.5rem}
.side>.figures{order:-1}
.side>h2:first-child{margin-top:1.5rem}
/* the home page shows the newest five; the Exercises tab has them all */
.list .rows li:nth-child(n+6){display:none}
.list .rows:has(li:nth-child(6))::after{content:"The Exercises tab has them all.";font-size:.875rem;color:var(--muted)}
.figures{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:0 0 1rem;padding:0;list-style:none}
.figures li{padding:.875rem 1rem}
.figures b{display:block;font:900 1.875rem/1.1 var(--head);color:var(--fg);font-variant-numeric:tabular-nums}
.figures span{display:block;font-size:.8125rem;line-height:1.3;color:var(--muted);margin-top:.125rem}
.figures li:first-child{grid-column:1/-1;display:flex;align-items:center;gap:1rem}
.figures li:first-child b{font-size:2.5rem;color:var(--go)}
.figures li:first-child span{font-size:.9375rem;margin:0}
.days{display:grid;grid-template-columns:repeat(14,1fr);gap:.25rem;margin:0 0 .5rem;padding:.875rem;list-style:none}
.days li{aspect-ratio:1;display:grid;place-items:center;border-radius:.5rem;background:var(--sunk);
  font:800 .6875rem/1 var(--head);color:var(--muted)}
.days .on{background:var(--leaf);color:var(--on-leaf);box-shadow:0 2px 0 var(--leaf-deep)}
.days .today{outline:2px solid var(--pri);outline-offset:1px}
.chart{--cell:.75rem;display:flex;align-items:flex-end;gap:var(--cell);height:calc(var(--cell)*10 + 2rem);
  padding:1rem;margin:0 0 .5rem;overflow:hidden}
.chart a{display:flex;flex-direction:column-reverse;gap:2px;width:var(--cell);text-decoration:none}
.chart i{display:block;height:calc(var(--cell) - 2px);border-radius:3px;background:var(--leaf)}
.chart i.fix{background:var(--bad-fill)}

/* ---- lists: one block for each exercise, answer or note */
.rows{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem}
.rows a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.375rem .75rem;min-height:3.75rem;
  padding:.875rem 1rem;color:inherit;text-decoration:none}
.rows .name{display:block;overflow:visible;flex:1 1 9rem;font:800 1.0625rem/1.3 var(--head);color:var(--fg);margin:0}
.state{display:inline-block;padding:.3125rem .625rem;border-radius:.625rem;font:800 .75rem/1.2 var(--head);
  white-space:nowrap;background:var(--sunk);color:var(--muted)}
.state.go{background:var(--pri-soft);color:var(--pri-text)}
.state.right{background:var(--ok-soft);color:var(--ok)}
.state.fix{background:var(--bad-soft);color:var(--bad)}
.seg{display:flex;gap:.25rem;padding:.25rem;margin:0 0 1rem;background:var(--sunk)}
.seg a{flex:1;display:grid;place-items:center;min-height:2.75rem;padding:.375rem .25rem;border-radius:.75rem;
  border:2px solid transparent;font:800 .8125rem/1.15 var(--head);color:var(--muted);text-decoration:none;text-align:center}
.seg a[aria-current]{background:var(--pri-soft);border-color:var(--pri-edge);color:var(--pri-text)}
.foot{max-width:36rem;margin:0 auto;padding:0 1rem 1rem}
.foot .seg{max-width:16rem;margin:0}

/* ---- the tabs: at the bottom on a phone, on the left on a wide screen */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;gap:.25rem;
  padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom,0px));background:var(--bg);
  border-top:2px solid var(--line)}
.tabs a{flex:1;max-width:7rem;display:flex;flex-direction:column;align-items:center;gap:.1875rem;min-height:3.5rem;
  padding:.375rem .25rem;border:2px solid transparent;border-radius:.875rem;font:800 .75rem/1 var(--head);
  color:var(--muted);text-decoration:none}
.tabs a[aria-current]{background:var(--pri-soft);border-color:var(--pri-edge);color:var(--pri-text)}
@media (min-width:56rem){
  body.tabbed{padding-left:14rem;padding-bottom:0}
  main{max-width:44rem;padding:2rem 2rem 0}
  .foot{max-width:44rem;padding:0 2rem 2rem}
  .actions{margin-left:-2rem;margin-right:-2rem;padding-left:2rem;padding-right:2rem}
  .tabs{top:0;right:auto;width:14rem;flex-direction:column;justify-content:flex-start;gap:.375rem;padding:1.5rem 1rem;
    border-top:0;border-right:2px solid var(--line)}
  .tabs::before{content:"English Coach";font:900 1.375rem/1 var(--head);color:var(--go);padding:.5rem .75rem 1.25rem}
  .tabs a{flex:0 0 auto;max-width:none;min-height:3rem;flex-direction:row;gap:.75rem;padding:.625rem .75rem;font-size:.9375rem}
}

/* ---- one sentence: the progress, the card, the answer */
.steps{display:flex;flex-wrap:wrap;gap:0 .3125rem;margin:-.5rem 0 .25rem;padding:0;list-style:none}
.steps li{flex:1;min-width:.5rem}
.steps button,.steps a{display:block;width:100%;height:2.75rem;border:0;padding:0;background:none;cursor:pointer}
.steps button::before,.steps a::before{content:"";display:block;height:.75rem;margin-top:1rem;border-radius:.375rem;
  background:var(--line)}
.steps .here button::before,.steps .here a::before{height:1rem;margin-top:.875rem;border-radius:.5rem;background:var(--pri)}
.steps .done button::before,.steps .done a::before{background:var(--leaf)}
.steps .right a::before{background:var(--leaf)}
.steps .fix a::before{background:var(--bad-fill)}
.deck{position:relative;margin:0 0 1rem}
.deck.one,.deck.two{margin-bottom:1.75rem}
.deck.one::before,.deck.two::before,.deck.two::after{content:"";position:absolute;left:.875rem;right:.875rem;top:100%;
  height:.5rem;background:var(--card);border:2px solid var(--line);border-top:0;border-radius:0 0 .875rem .875rem}
.deck.two::after{left:1.75rem;right:1.75rem;top:calc(100% + .5rem)}
.card{position:relative;padding:1.125rem 1.25rem 1.375rem;margin:0 0 1rem;border-radius:1.25rem}
.deck .card{margin:0}
.card .task{font-size:.875rem;line-height:1.4;margin:0 0 .625rem}
.card .sentence,.card .marked{margin:0}
.card .verdict{margin:0 0 .75rem}
.card .label{margin:0 0 .25rem}
.task{color:var(--muted);font-size:.9375rem;margin:0 0 .625rem}
.sentence,.marked{font:800 1.5rem/1.35 var(--head);color:var(--fg);margin:0 0 1rem}
.task,.sentence,.why,.raw,.marked{white-space:pre-wrap;overflow-wrap:anywhere}
.gap{display:inline-block;min-width:3.25em;height:1.2em;vertical-align:-.25em;overflow:hidden;color:transparent;
  border-bottom:3px solid var(--pri);border-radius:.375rem .375rem 0 0;background:var(--pri-soft);user-select:none}
del{color:var(--bad);text-decoration-thickness:2px}
ins{color:var(--ok);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
.choices{display:grid;gap:.75rem;margin:0 0 1rem;padding:0;list-style:none}
.choices label{position:relative;display:block}
.choices input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt{display:flex;gap:.75rem;align-items:center;min-height:3.5rem;padding:.75rem 1rem;
  font:700 1.125rem/1.3 var(--head);color:var(--fg);overflow-wrap:anywhere}
.letter{flex:0 0 auto;width:2rem;height:2rem;display:grid;place-items:center;border:2px solid var(--line);
  border-radius:.5rem;font:800 .875rem/1 var(--head);color:var(--muted);text-transform:uppercase}
.tag{margin-left:auto;font:800 .75rem/1 var(--head);white-space:nowrap}
.choices input:checked + .opt,.choices .picked{border-color:var(--pri-edge);background:var(--pri-soft);
  color:var(--pri-text);box-shadow:0 2px 0 var(--pri-edge)}
.choices input:checked + .opt .letter,.choices .picked .letter{border-color:var(--pri-edge);color:var(--pri-text)}
.choices input:focus-visible + .opt{outline:3px solid var(--pri);outline-offset:3px}
.choices .right{border-color:var(--ok-edge);background:var(--ok-soft);color:var(--ok);box-shadow:0 2px 0 var(--ok-edge)}
.choices .right .letter{border-color:var(--ok-edge);color:var(--ok)}
.choices .wrong{border-color:var(--bad-edge);background:var(--bad-soft);color:var(--bad);box-shadow:0 2px 0 var(--bad-edge)}
.choices .wrong .text{text-decoration:line-through;text-decoration-thickness:2px}
.choices .wrong .letter{border-color:var(--bad-edge);color:var(--bad)}
.choices .other{color:var(--muted);box-shadow:none}
.write{padding:.75rem 1rem .875rem;margin:0 0 1rem}
.write:focus-within{border-color:var(--pri)}
.write label{display:block;font:800 .8125rem/1 var(--head);color:var(--muted);margin:0 0 .375rem}
.write textarea,.write input{display:block;width:100%;padding:0;border:0;border-radius:0;background:none;
  font:600 1.1875rem/1.45 var(--body);color:var(--fg);caret-color:var(--pri)}
.write textarea{min-height:5.5rem;resize:vertical}
.write textarea:focus,.write input:focus{outline:none}
.write.tall textarea{min-height:45vh;font-size:1.0625rem}

/* ---- the self-check, corrections, mistakes, notes and messages */
.ask{font:800 1.0625rem/1.3 var(--head);color:var(--fg);margin:1rem 0 .5rem}
.scale{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .375rem}
.scale label{flex:1;position:relative;min-width:2.75rem}
.scale input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.scale span{display:grid;place-items:center;min-height:3rem;border-radius:.875rem;font:800 1.0625rem/1 var(--head);color:var(--fg)}
.scale input:checked + span{border-color:var(--pri-edge);background:var(--pri-soft);color:var(--pri-text);
  box-shadow:0 2px 0 var(--pri-edge)}
.scale input:focus-visible + span{outline:3px solid var(--pri);outline-offset:3px}
.ends{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--muted);margin:0 0 1rem}
.verdict{display:inline-block;padding:.375rem .75rem;border-radius:.625rem;font:800 .875rem/1 var(--head);margin:0 0 1rem}
.verdict.right{background:var(--ok-soft);color:var(--ok)}
.verdict.fix{background:var(--bad-soft);color:var(--bad)}
.label{font:800 .8125rem/1.2 var(--head);color:var(--muted);margin:0 0 .375rem}
.why,.raw,.note,.warn{padding:.875rem 1rem;margin:0 0 1rem}
.note{border-color:var(--ok-edge);background:var(--ok-soft);color:var(--ok)}
.note b{color:inherit}
.warn{border-color:var(--bad-edge);background:var(--bad-soft);color:var(--bad)}
.warn a{color:inherit}
.mistake{padding:.875rem 1rem;margin:0 0 .75rem}
.mistake .times{float:right;margin-left:.75rem;padding:.3125rem .625rem;border-radius:.625rem;background:var(--bad-soft);
  color:var(--bad);font:800 .75rem/1.2 var(--head);font-variant-numeric:tabular-nums}
.mistake .pattern{font:800 1.0625rem/1.35 var(--head);color:var(--fg);overflow-wrap:anywhere}
.mistake .pattern del,.mistake .pattern ins{display:block}
.mistake .pattern ins{text-decoration:none}
.mistake .example{font-size:.9375rem;color:var(--muted);margin:.375rem 0 0}
.mistake .reason{font-size:.9375rem;margin:.5rem 0 0;padding-top:.5rem;border-top:2px solid var(--line)}
.md{padding:1.25rem;margin:0 0 1rem;line-height:1.6;overflow-wrap:anywhere}
.md h1{font-size:1.5rem;margin:0 0 .75rem}
.md h2{font-size:1.1875rem;margin:1.5rem 0 .5rem}
.md h3{font:800 1.0625rem/1.3 var(--head);color:var(--fg);margin:1.25rem 0 .375rem}
.md ul,.md ol{margin:0 0 1rem;padding-left:1.375rem}
.md li{margin:.25rem 0}
.md li>ul,.md li>ol{margin-bottom:0}
.md li>p,.md li>pre,.md li>blockquote,.md li>table{margin:.5rem 0 0}
.md strong{color:var(--fg)}
.md code{font:500 .9375em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--sunk);
  padding:.125rem .375rem;border-radius:.375rem}
.md pre{overflow-x:auto;background:var(--sunk);padding:.875rem 1rem;border-radius:.875rem;margin:0 0 1rem}
.md pre code{background:none;padding:0}
.md blockquote{margin:0 0 1rem;padding:.5rem 0 .5rem 1rem;border-left:4px solid var(--pri);color:var(--text)}
.md blockquote p:last-child{margin-bottom:0}
.md table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 1rem}
.md th,.md td{padding:.5rem .75rem;border:2px solid var(--line);text-align:left;vertical-align:top}
.md th{font-family:var(--head);font-weight:800;color:var(--fg);background:var(--sunk)}
.md hr{border:0;border-top:2px solid var(--line);margin:1.25rem 0}
.md>:last-child{margin-bottom:0}
.help{padding:.75rem 1rem;margin:0 0 1rem}
.help summary{font:800 .875rem/1.3 var(--head);color:var(--pri-text);cursor:pointer}
.help .raw{margin:.75rem 0 0;font:500 .875rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pages{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem}
.pages img{display:block;width:100%;height:auto;background:#FFFFFF}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}