/* The admin's own layer on top of the shop's skin.
   Only what the shop has no use for: a wider page, dense tables, a block
   editor. Everything else — buttons, fields, notes, panels — is skin.css. */

.adminbar .brand span{color:var(--muted);font-weight:400}
.adminbar .nav{margin-left:28px}
.adminbar .cart{margin-left:auto}
/* On a phone the bar does not fit on one line, and a bar that does not fit
   widens the whole page. So it scrolls sideways on its own instead. */
@media(max-width:760px){
  .adminbar{overflow-x:auto;scrollbar-width:none}
  .adminbar>*{flex:none}
}

/* The admin reads tables, so it gets the whole window rather than a column. */
.adminwrap{max-width:1600px;margin:0 auto;padding:28px var(--gutter) 80px;width:100%}
.adminwrap h1{font-size:clamp(24px,3vw,34px)}

.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:20px 0 10px}
.toolbar .field{gap:5px}
.toolbar .field>span{font-size:12px}
.toolbar .field input,.toolbar .field select{padding:8px 10px;font-size:14px}
.toolbar .spacer{flex:1}

/* ── tables ─────────────────────────────────────────── */
.grid{width:100%;overflow-x:auto;border:1px solid var(--line);background:var(--bg)}
.grid table{width:100%;border-collapse:collapse;font-size:14px}
.grid th,.grid td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);
  white-space:nowrap;vertical-align:middle}
.grid thead th{background:var(--panel);font:500 11.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);position:sticky;top:0;z-index:2}
.grid tbody tr:hover{background:var(--panel)}
.grid tbody tr:last-child td{border-bottom:0}
.grid .n{text-align:right;font-variant-numeric:tabular-nums}
.grid .strong{font-weight:600}
.grid .wrapcell{white-space:normal;min-width:180px}
.grid tfoot td{padding:11px 12px;border-top:1px solid var(--line-strong);font-weight:600;
  background:var(--panel)}
.grid .zero{color:var(--muted)}

/* A row's own id, shown small and in the mono face so it reads as a handle
   rather than as a word. */
.handle{font:500 12px/1 var(--mono);letter-spacing:.02em}
.sub{display:block;font-size:12px;color:var(--muted);margin-top:3px;white-space:normal}

.pill{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:4px 6px}
.pill.on{background:var(--ink);color:var(--bg)}
.pill.off{border-color:var(--line);color:var(--muted)}
.pill.warn{border-color:#8C4A4A;color:#8C4A4A}
.pill.free{background:var(--lemon);border-color:var(--line-strong)}

/* How far a language has got, as a bar thin enough to sit inside a cell. */
.langbar{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.langbar i{display:block;width:46px;height:5px;background:var(--line);position:relative}
.langbar i b{position:absolute;inset:0 auto 0 0;background:var(--ink);display:block}
.langbar.done i b{background:var(--ok)}

/* One card per language of the site, with the switch at the bottom of it. */
.langcard{border:1px solid var(--line);padding:16px 18px;background:var(--bg);
  display:flex;flex-direction:column;gap:14px}
.langcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.langcard-head h2{margin:0;font-size:19px;letter-spacing:-.02em}
.langfacts{margin:0;display:grid;gap:8px;font-size:14px}
.langfacts div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.langfacts dt{color:var(--muted)}
.langfacts dd{margin:0;font-variant-numeric:tabular-nums}
.langcard .btn{align-self:flex-start}
.langcard .dim{font-size:13px}

.empty-grid{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line)}

/* ── a column of cards ──────────────────────────────── */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:18px}
.statcard{border:1px solid var(--line);padding:16px 18px;background:var(--bg)}
.statcard b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.statcard span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.statcard em{display:block;font-size:12px;color:var(--ink-soft);font-style:normal;margin-top:8px}

/* ── forms, beyond what the shop needs ──────────────── */
/* skin.css dresses .field input, because the shop only ever asks for one line
   at a time. Writing a course asks for paragraphs, lists and choices. */
.field textarea,.field select{font:400 15px/1.5 var(--sans);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);padding:9px 11px;width:100%;appearance:none;border-radius:0;
  resize:vertical;display:block}
.field textarea{overflow:hidden}
.field textarea.mono{font:400 13.5px/1.6 var(--mono);white-space:pre}
.field select{padding-right:28px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field textarea:hover,.field select:hover{border-color:var(--ink-soft)}
.field textarea:focus,.field select:focus{outline:0;border-color:var(--line-strong);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.field input{font-size:15px;padding:9px 11px}

.formcard.wide{max-width:none}
.pair{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.pair{grid-template-columns:1fr 1fr;gap:16px}}
.ticks{display:flex;flex-wrap:wrap;gap:10px 26px}
/* The review date and the button that sets it, on one line. */
.reviewed{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.reviewed b{font-variant-numeric:tabular-nums}
.tick{display:flex;align-items:center;gap:9px;font-size:15px}
.tick input{width:18px;height:18px;flex:none;accent-color:var(--ink)}
.hint{font-size:13px;color:var(--muted);max-width:62ch}
.locked{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:7px 11px;background:var(--panel)}
.locked code{flex:1;font-size:14px}

/* ── the constructor's own chrome ───────────────────── */
.chead{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.chead .ctitle{min-width:0}
.chead h1{font-size:clamp(21px,2.2vw,27px)}
.chead p{font-size:13px;margin-top:4px}
.chead .spacer{flex:1}
.tabs [aria-current=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tabs{position:sticky;top:62px;z-index:30;background:var(--bg);margin:14px 0 0;
  padding:10px 0;border-bottom:1px solid var(--line)}
#note:not(:empty){margin-top:14px}
.offer{border-color:var(--line-strong)}
.offeract{display:flex;gap:10px;margin-top:6px}

/* ── lessons: a rail, an editor, the reader's view ──── */
.cons{display:grid;grid-template-columns:1fr;border:1px solid var(--line);margin-top:16px;
  background:var(--bg);align-items:start}
@media(min-width:1040px){.cons{grid-template-columns:236px minmax(0,1fr)}}
@media(min-width:1440px){.cons.withpv{grid-template-columns:236px minmax(0,1fr) minmax(0,460px)}}

/* Not .rail — the shop already owns that for its horizontal card rail. */
.lrail{border-bottom:1px solid var(--line);min-width:0}
@media(min-width:1040px){.lrail{border-bottom:0;border-right:1px solid var(--line);
  position:sticky;top:122px;max-height:calc(100vh - 134px);overflow-y:auto}}
.railhead{display:flex;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);
  font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.railhead .dim{margin-left:auto}
.raillist{list-style:none}
.raillist a{display:grid;grid-template-columns:22px 1fr;gap:9px;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:14px;align-items:start}
.raillist a:hover{background:var(--panel)}
.raillist a[aria-current]{background:var(--ink);color:var(--bg)}
.raillist a[aria-current] .n,.raillist a[aria-current] em{color:var(--bg);opacity:.75}
.raillist .n{font:400 11.5px/1.6 var(--mono);color:var(--muted)}
.raillist .t{min-width:0}
.raillist em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.railfoot{padding:12px 13px}
.lrail .hint{padding:0 13px}

.edit{padding:18px;min-width:0;display:grid;gap:14px;align-content:start}
.ehead{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.ehead h2{font-size:18px}
.ehead .spacer{flex:1}

/* A heading inside the editor column: the same hard rule the shop uses for a
   section, at the size a form wants. */
.bsec{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;
  padding-bottom:9px;border-bottom:1px solid var(--line-strong)}
.bsec h3{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.bsec .dim{font:500 12px/1 var(--mono)}
.bsec .spacer{flex:1}
.bsec select{width:auto;font-size:13.5px;padding:7px 26px 7px 9px}

/* ── a block ────────────────────────────────────────── */
.blocks{display:grid;gap:10px}
.block{border:1px solid var(--line);background:var(--bg)}
.block:focus-within{border-color:var(--line-strong)}
.block>header{display:flex;align-items:center;gap:6px;padding:6px 7px 6px 0;
  background:var(--panel);border-bottom:1px solid var(--line)}
.block.fold>header{border-bottom:0}
.bgrip{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:3px 10px;text-align:left}
.bn{font:400 11px/1 var(--mono);color:var(--muted);flex:none}
.bk{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;flex:none}
.bdig{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block .in{padding:12px;display:grid;gap:12px}
.iconbtn{flex:none;width:25px;height:25px;display:grid;place-items:center;font-size:13px;
  border:1px solid var(--line);background:var(--bg);line-height:1}
.iconbtn:hover:not(:disabled){border-color:var(--line-strong);background:var(--panel)}
.iconbtn:disabled{opacity:.3;cursor:default}
/* Edit and remove on one line, so a narrow last column does not stack
   them and make every row in the table taller than its text. */
.rowacts{display:flex;align-items:center;gap:8px;justify-content:flex-end}

/* The cells of a table block, and the figures of a stats block. */
.cells{border:1px solid var(--line)}
.cells table{width:100%;border-collapse:collapse}
.cells th{font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);text-align:left;padding:7px 9px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.cells td{padding:4px;border-bottom:1px solid var(--line)}
.cells td.shrink{width:33px;text-align:center}
.cells .field input{border-color:transparent;background:transparent;padding:6px 7px}
.cells input{font-size:14px;border:1px solid transparent;background:transparent;
  padding:6px 7px;width:100%;appearance:none;border-radius:0;color:var(--ink);font-family:var(--sans)}
.cells input:focus{outline:0;border-color:var(--line-strong);background:var(--bg)}
.rowadd{padding:8px 9px}

/* Glossary terms and appendix sections, which are blocks by another name. */
.repeat{border:1px solid var(--line);margin-top:10px}
.rhead{display:flex;align-items:center;gap:9px;padding:7px 9px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.rhead .spacer{flex:1}
.repeat .in{padding:12px;display:grid;gap:12px}

/* ── the reader's view ──────────────────────────────── */
.pvcol{border-top:1px solid var(--line);background:var(--panel);min-width:0}
@media(min-width:1440px){.pvcol{border-top:0;border-left:1px solid var(--line);
  position:sticky;top:122px;height:calc(100vh - 134px);overflow-y:auto}}
.pv{padding:22px}
.pv .inner{max-width:720px}
.pv h1{font-size:25px}
.pv .lesson-head{display:grid;grid-template-columns:1fr;gap:14px}
.pv .lesson-fig{max-width:180px}
/* The preview is read, not used: a checkpoint here must not look clickable. */
.pv .checklist label{cursor:default}
.pv .checklist label:hover{background:transparent}

/* ── naming a funnel ────────────────────────────────── */
/* One form in a sheet, rather than a queue of browser prompts. */
/* skin.css zeroes every margin, and a <dialog> centres itself with margin:auto
   — so without this the sheet opens in the top-left corner. */
.sheet{border:1px solid var(--line-strong);background:var(--bg);padding:0;margin:auto;
  max-width:420px;width:calc(100vw - 32px);color:var(--ink)}
.sheet::backdrop{background:rgba(28,36,16,.3)}
.sheet h2{font-size:19px}
.sheet .shead{padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet .shead p{font-size:13px;color:var(--muted);margin-top:4px}
.sheet form{padding:20px;display:grid;gap:14px}
.sheet .sfoot{display:flex;gap:10px;align-items:center;margin-top:2px}
.sheet .sfoot .spacer{flex:1}

/* ── dropping a picture on a block ──────────────────── */
/* Dashed, because it is the one thing on this screen that is not a field: it
   is somewhere to put a file. */
.drop{border:1px dashed var(--line-strong);background:var(--panel);padding:14px;
  display:grid;gap:10px;justify-items:center;text-align:center;cursor:pointer}
.drop:hover,.drop.over{background:var(--bg);border-color:var(--ink)}
.drop.over{box-shadow:inset 0 0 0 2px var(--ink)}
.drop.busy{opacity:.6;cursor:progress}
.drop img{max-width:100%;max-height:200px;width:auto;height:auto;border:1px solid var(--line)}
.dropsay{font-size:13px;color:var(--muted);line-height:1.4}
.dropmiss{font:500 12px/1 var(--mono);color:#8C4A4A}
.droperr{font-size:13px;color:#8C4A4A}
/* A picture already chosen, where uploading is not on offer. */
.drop.still{cursor:default;border-style:solid;border-color:var(--line)}
.drop.still:hover{background:var(--panel);border-color:var(--line)}
/* A hint that has become a complaint. */
.field > em.bad{color:#8C4A4A}
.slugrow{display:flex;gap:8px;align-items:stretch}
.slugrow input{flex:1;min-width:0}
.slugrow .btn{white-space:nowrap}
/* A row that is ours, not a reader's: visible as such at a glance. */
.grid tbody tr.probe td{color:var(--muted)}

/* ── directions: a palette, and the tile it paints ──── */
.tracklist{display:grid;gap:14px;margin-top:4px}
/* The heading of a direction is a sample of it: the tile colour with the ink
   that was chosen to read on it. Picking a colour and judging it in a swatch
   the size of a thumbnail is how two of the five ended up unreadable. */
.tilepv{display:inline-block;min-width:140px;max-width:46ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;padding:6px 11px;font-weight:600;font-size:14px;
  border:1px solid var(--line-strong)}
.palette{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:720px){.palette{grid-template-columns:repeat(5,1fr)}}
.pal{display:grid;gap:5px;min-width:0}
.pal>span{font:500 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink-soft)}
.hexrow{display:flex;gap:6px;align-items:stretch;min-width:0}
/* A colour input is a button in every browser and a different one in each,
   so it is given a size here rather than left to its own idea of one. */
.hexrow input[type=color]{flex:none;width:36px;height:36px;padding:2px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);appearance:none;border-radius:0}
.hexrow input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.hexrow input[type=color]::-webkit-color-swatch{border:0}
.hexrow input[type=color]::-moz-color-swatch{border:0}
.hexval{flex:1;min-width:0;font:400 13px/1 var(--mono);text-transform:uppercase}
.swrow{display:flex;gap:9px;align-items:center}
.swrow select{flex:1;min-width:0}
.sw{flex:none;width:36px;height:36px;border:1px solid var(--line-strong);display:block}