/* Logicers Live, Build your own: the editor (15 Oct 2026; live/build/, "Make your own" until that day). Every class here starts with mk-: the mock-ups'
   names (.q, .net, .scale, .track, .card, .label, .sheet…) mean something else on the site, the lesson of the
   stamp and of How Sure?. The look is the approved mock-up (r/live-workshop/mockups/sheet5.png): a laptop gets
   three columns (the game and its questions | the open question | the settings), a tablet two, a phone one
   (the list; a tap opens the question full width, with Back, and Save / Host it now in a dock at the bottom).
   The page wears the game's own colour (body[data-kc], by day and by night). Yellow means one thing on the
   site, a wrong or missed answer, so nothing here is yellow: a problem to fix is marked in ink. */

/* ---------- the game's colour: the eight of the site's palette ---------- */
body[data-kc="indigo"] { --c: #470BA8; --tint: #EAE8FF; }
body[data-kc="blue"]   { --c: #2D4FC4; --tint: #E3E9FD; }
body[data-kc="teal"]   { --c: #0D7D73; --tint: #D8F3EE; }
body[data-kc="red"]    { --c: #CF4327; --tint: #FDE6DF; }
body[data-kc="pink"]   { --c: #BE3A82; --tint: #FBE2EE; }
body[data-kc="green"]  { --c: #238453; --tint: #DBF3E4; }
body[data-kc="orange"] { --c: #A55200; --tint: #FAE8D7; }
body[data-kc="slate"]  { --c: #3A3F5C; --tint: #ECEEF6; }
@media (prefers-color-scheme: dark) {
  body[data-kc="indigo"] { --c: #D2D3FF; --tint: #17152A; }
  body[data-kc="blue"]   { --c: #7FA5FF; --tint: #131A33; }
  body[data-kc="teal"]   { --c: #3FE0C6; --tint: #0C2028; }
  body[data-kc="red"]    { --c: #FF8468; --tint: #24151C; }
  body[data-kc="pink"]   { --c: #FF86BF; --tint: #24152A; }
  body[data-kc="green"]  { --c: #63E6A0; --tint: #0F2222; }
  body[data-kc="orange"] { --c: #E08600; --tint: #1E1307; }
  body[data-kc="slate"]  { --c: #AEB6DA; --tint: #141728; }
}
/* the swatches (and the badge of a kept game) show each colour as it will look, by day and by night */
[data-c="indigo"] { --sw: #470BA8; } [data-c="blue"] { --sw: #2D4FC4; } [data-c="teal"] { --sw: #0D7D73; }
[data-c="red"] { --sw: #CF4327; } [data-c="pink"] { --sw: #BE3A82; } [data-c="green"] { --sw: #238453; }
[data-c="orange"] { --sw: #A55200; } [data-c="slate"] { --sw: #3A3F5C; }
@media (prefers-color-scheme: dark) {
  [data-c="indigo"] { --sw: #D2D3FF; } [data-c="blue"] { --sw: #7FA5FF; } [data-c="teal"] { --sw: #3FE0C6; }
  [data-c="red"] { --sw: #FF8468; } [data-c="pink"] { --sw: #FF86BF; } [data-c="green"] { --sw: #63E6A0; }
  [data-c="orange"] { --sw: #E08600; } [data-c="slate"] { --sw: #AEB6DA; }
}

body.mk-page { background: var(--bg); overflow-x: hidden; }
.mk-view[hidden] { display: none !important; }
.mk-ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
.mk-ic svg { width: 100%; height: 100%; }

/* ---------- the top bar ---------- */
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 1480px; margin: 0 auto; padding: 16px 28px 4px; }
.mk-top-l { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mk-top .wordmark { flex: none; }
.mk-where { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1.1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-gtitle { color: var(--soft); font-weight: 700; font-size: 1.02rem; letter-spacing: 0; }
.mk-gtitle:not(:empty)::before { content: " · "; }
.mk-top-r { display: flex; align-items: center; gap: 10px; flex: none; }
.mk-top-r .chip { height: 44px; }
.mk-tb { min-height: 44px; padding: 0 20px; font-size: 1rem; }
.mk-top-r .btn.solid { flex: 0 0 auto; }
.mk-codechip { color: var(--c); font-family: var(--display); font-weight: 800; letter-spacing: .12em; }
.mk-savebtn { position: relative; gap: 8px; }
.mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }

/* ---------- the panel of problems and messages ---------- */
.mk-msgwrap { max-width: 1480px; margin: 0 auto; padding: 0 28px; }
.mk-msg { margin-top: 10px; display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); border: 2px solid var(--ink); }
.mk-msg-body { flex: 1; min-width: 0; }
.mk-msg-body > p { font-weight: 700; line-height: 1.35; }
.mk-msg ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.mk-msg li button { appearance: none; border: 0; background: none; padding: 5px 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.mk-msg .mk-btnrow { margin-top: 8px; }
.mk-msg .mk-x { flex: none; }
.mk-x { appearance: none; border: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; }

/* ---------- the grid of the editor ---------- */
.mk-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 290px; gap: 18px; align-items: start; max-width: 1480px; margin: 0 auto; padding: 14px 28px 48px; }
.mk-col { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 16px; min-width: 0; }
/* the open question and the settings stay in view while a long list scrolls; each fits the window. While the
   editor is open (html.mk-shell, set by make.js) a laptop gets the window-filling layout below instead */
.mk-c2, .mk-c3 { position: sticky; top: 12px; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; }

/* ---------- a laptop: the editor fills the window and each column scrolls by itself (Khayyam, 15 Oct 2026: in
   Safari the middle column stopped short of the bottom, and scrolling over it never moved the page). The top bar
   with Save and Host it now never scrolls away; nothing else on the page can scroll, so nothing gets stuck. Only with
   a mouse or a trackpad: a tablet's on-screen keyboard would cover the bottom of a column that cannot move ---------- */
@media (min-width: 1100px) and (pointer: fine) {
  html.mk-shell { height: 100%; overflow: hidden; }
  html.mk-shell body.mk-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  html.mk-shell .mk-top, html.mk-shell .mk-msgwrap { flex: none; width: 100%; }
  html.mk-shell .mk-msg { max-height: 32vh; overflow-y: auto; }
  html.mk-shell .mk-main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  html.mk-shell #v-edit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html.mk-shell .mk-grid { flex: 1 1 auto; min-height: 0; width: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; padding-bottom: 18px; }
  html.mk-shell .mk-col { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html.mk-shell .mk-c2, html.mk-shell .mk-c3 { position: static; max-height: none; }
}
@media (prefers-color-scheme: dark) {
  .mk-col, .mk-card, .mk-msg { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px var(--line); }
  .mk-msg { box-shadow: none; border-color: var(--ink); }
}

/* labels, fields, words */
.mk-lab { display: block; font-size: .82rem; font-weight: 800; color: var(--soft); margin: 14px 0 6px; letter-spacing: .01em; }
.mk-lab.mk-first, .mk-col > .mk-lab:first-child { margin-top: 0; }
.mk-in { width: 100%; border: 2px solid var(--line); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 1rem; line-height: 1.35; color: var(--ink); background: var(--card); min-height: 44px; }
.mk-in::placeholder { color: color-mix(in srgb, var(--soft) 75%, transparent); }
.mk-in:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.mk-in.mk-bad-in { border-color: var(--ink); }
textarea.mk-in { resize: none; min-height: 46px; max-height: 16em; overflow-y: auto; display: block; }
.mk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.mk-small { color: var(--soft); font-size: .86rem; line-height: 1.38; margin-top: 6px; }
.mk-small.mk-tight { margin-top: 2px; }
.mk-note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: .88rem; color: var(--soft); line-height: 1.38; }
.mk-note b { color: var(--ink); }
.mk-notice { margin: 0 0 12px; background: var(--tint); color: var(--ink); font-weight: 600; }
.mk-err { margin-top: 6px; display: flex; gap: 7px; align-items: flex-start; font-size: .86rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.mk-err::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--card); font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.mk-warn { margin-top: 8px; font-size: .86rem; color: var(--soft); font-weight: 600; line-height: 1.35; }
.mk-status { min-height: 1.2em; font-weight: 600; }
.mk-status:empty { display: none; }
@media (prefers-color-scheme: dark) {
  .mk-in { background: rgba(255, 255, 255, .04); }
  .mk-note { background: rgba(255, 255, 255, .05); }
  .mk-notice { background: var(--tint); }
}

/* ---------- the game: colour and the list of questions ---------- */
.mk-sws { display: flex; gap: 7px; flex-wrap: wrap; padding: 3px 0 2px 3px; }
.mk-sw { appearance: none; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: var(--sw); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mk-sw[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.mk-sw:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 50%; }
.mk-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.mk-li { appearance: none; width: 100%; display: grid; grid-template-columns: 22px 26px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-size: .92rem; line-height: 1.28; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mk-li > b { color: var(--soft); font-variant-numeric: tabular-nums; text-align: right; }
.mk-li .mk-tyi { color: var(--c); width: 26px; height: 17px; margin-top: 1px; }
.mk-li .mk-tyi svg { width: 26px; height: 17px; }
.mk-lt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mk-lt.mk-empty { color: var(--soft); font-style: italic; }
.mk-li[aria-current="true"] { background: var(--tint); }
.mk-li[aria-current="true"] > b { color: var(--c); }
.mk-li.mk-drag { opacity: .45; }
.mk-li.mk-over { box-shadow: inset 0 3px 0 var(--c); }
@media (hover: hover) { .mk-li:hover { background: color-mix(in srgb, var(--tint) 55%, transparent); } .mk-li[aria-current="true"]:hover { background: var(--tint); } }
.mk-bad { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--card); font-style: normal; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.mk-addrow { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mk-addrow .btn { min-height: 44px; font-size: .95rem; }

/* ---------- the open question ---------- */
.mk-qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mk-qhead .mk-lab { margin: 0; }
.mk-qtools { display: flex; gap: 4px; flex: none; }
.mk-tool { appearance: none; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mk-tool svg { width: 18px; height: 18px; }
.mk-tool[disabled] { opacity: .35; cursor: default; }
.mk-back { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 8px 2px; font: inherit; font-weight: 700; color: var(--c); cursor: pointer; border-radius: 10px; }
.mk-back .mk-ic { width: 20px; height: 20px; }
.mk-phonenav { display: none; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 8px; }
.mk-phonenav .mk-qnav { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; }
.mk-ty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-ty button { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: .88rem; line-height: 1.15; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mk-ty button svg { width: 34px; height: 22px; }
.mk-ty button[aria-checked="true"] { border-color: var(--c); background: var(--tint); color: var(--c); }
@media (prefers-color-scheme: dark) { .mk-ty button { background: transparent; } .mk-ty button[aria-checked="true"] { background: var(--tint); } }
.mk-two, .mk-three { display: grid; gap: 10px; }
.mk-two { grid-template-columns: 1fr 1fr; }
.mk-three { grid-template-columns: 1.1fr 1fr; }
.mk-two > div, .mk-three > div { min-width: 0; }
.mk-numwrap { position: relative; display: block; }
.mk-sign { display: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--bg); color: var(--ink); font-weight: 800; font-size: 1.05rem; cursor: pointer; }
@media (pointer: coarse) {
  .mk-sign { display: inline-flex; align-items: center; justify-content: center; }
  .mk-numwrap .mk-in { padding-right: 44px; }
}
.mk-numin { font-variant-numeric: tabular-nums; }
.mk-twoways { margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--ink); }
.mk-twoways p { font-weight: 700; font-size: .9rem; }
.mk-twoways .mk-btnrow { margin-top: 8px; }
.mk-twoways button { appearance: none; border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 7px 12px; font: inherit; cursor: pointer; text-align: left; }
.mk-twoways button b { display: block; font-family: var(--display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.mk-twoways button small { color: var(--soft); font-weight: 600; }
.mk-twoways button[aria-pressed="true"] { border-color: var(--c); background: var(--tint); }

/* segmented choices and switches (the live page's look) */
.mk-seg { display: flex; background: var(--bg); border-radius: 12px; padding: 3px; gap: 3px; }
.mk-seg button { appearance: none; flex: 1 1 0; min-width: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: .88rem; line-height: 1.15; color: var(--soft); padding: 8px 6px; border-radius: 9px; cursor: pointer; }
.mk-seg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(21, 23, 43, .14); }
.mk-seg button[disabled] { opacity: .4; cursor: default; }
@media (prefers-color-scheme: dark) { .mk-seg button[aria-checked="true"] { background: rgba(255, 255, 255, .12); } }
.mk-switch { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; flex: none; margin: 0; cursor: pointer; transition: background-color .2s; }
.mk-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .2s; }
.mk-switch:checked { background: var(--c); }
.mk-switch:checked::after { left: 21px; }
.mk-switch:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .mk-switch { background: rgba(255, 255, 255, .18); } .mk-switch:checked { background: var(--c); } .mk-switch:checked::after { background: #0A0C1A; } }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .93rem; }
.mk-row > label, .mk-row > span { flex: 1; min-width: 0; }
.mk-row.mk-stack { flex-direction: column; align-items: stretch; gap: 7px; }
.mk-select { appearance: none; -webkit-appearance: none; border: 2px solid var(--line); border-radius: 10px; padding: 6px 30px 6px 10px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%235D6279' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 7px center / 16px no-repeat; max-width: 60%; cursor: pointer; }
.mk-select:focus { outline: none; border-color: var(--c); }
@media (prefers-color-scheme: dark) { .mk-select { background-color: rgba(255, 255, 255, .06); } .mk-select option { background: #12152A; color: #F3F4FF; } }

/* choice: 2 to 4 answers, a round mark for the right one */
.mk-opts { display: grid; gap: 8px; }
.mk-opt { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.mk-mark { appearance: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.mk-mark svg { width: 16px; height: 16px; }
.mk-mark[aria-checked="true"] { background: var(--c); border-color: var(--c); color: var(--on-c); }
.mk-rm { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--soft); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0 2px; }
.mk-add { appearance: none; margin-top: 8px; border: 2px dashed var(--line); background: none; border-radius: 12px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: .92rem; color: var(--soft); cursor: pointer; }
.mk-add[disabled] { display: none; }
.mk-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-tf button { appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.mk-tf button .mk-mark { width: 26px; height: 26px; pointer-events: none; }
.mk-tf button[aria-checked="true"] { border-color: var(--c); background: var(--tint); }
.mk-tf button[aria-checked="true"] .mk-mark { background: var(--c); border-color: var(--c); color: var(--on-c); }
@media (prefers-color-scheme: dark) { .mk-tf button, .mk-mark { background: transparent; } .mk-tf button[aria-checked="true"] { background: var(--tint); } }

/* typed: the right answers as chips */
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--tint); color: var(--c); font-weight: 800; }
.mk-chip span { overflow-wrap: anywhere; }
.mk-chip button { appearance: none; border: 0; background: none; color: inherit; width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: .75; padding: 0 0 2px; }
.mk-okin { width: 9.5em; max-width: 100%; border: 2px dashed var(--line); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--ink); background: var(--card); }
.mk-okin::placeholder { color: var(--soft); }
.mk-okin:focus { outline: none; border-style: solid; border-color: var(--c); }
@media (prefers-color-scheme: dark) { .mk-okin { background: transparent; } }

/* ---------- what players see ---------- */
.mk-prev { margin-top: 16px; border-radius: 18px; background: var(--tint); padding: 12px 14px 14px; }
.mk-prev > .mk-lab { margin: 0 0 8px; }
.mk-phone { max-width: 330px; margin: 0 auto; background: var(--bg); border-radius: 18px; padding: 12px 12px 14px; }
.mk-pq { font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1.16; letter-spacing: -0.02em; margin: 2px 2px 10px; overflow-wrap: anywhere; }
.mk-pch { display: grid; gap: 7px; }
.mk-pch span { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; min-width: 0; }
.mk-pch i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--tint); color: var(--c); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-family: var(--display); }
.mk-pch.mk-ptf { grid-template-columns: 1fr 1fr; }
.mk-pch.mk-ptf span { justify-content: center; padding: 14px 8px; }
.mk-ptype { border: 2px solid var(--c); border-radius: 14px; padding: 11px 14px; font-weight: 700; color: var(--soft); background: var(--card); }
.mk-psure-l { margin-top: 12px; text-align: center; font-weight: 800; font-size: .85rem; color: var(--soft); }
.mk-psure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 6px; }
.mk-psure > span { border: 2px solid var(--line); border-radius: 16px; padding: 8px 3px 7px; text-align: center; background: var(--card); min-width: 0; }
.mk-psure b { display: block; font-size: .88rem; line-height: 1.15; }
.mk-psure small { display: block; font-size: .76rem; color: var(--soft); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mk-dots { display: inline-flex; gap: 3px; margin-bottom: 4px; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.mk-dots i.mk-off { background: color-mix(in srgb, var(--c) 18%, var(--card)); }
@media (prefers-color-scheme: dark) { .mk-phone { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); } .mk-pch span, .mk-psure > span, .mk-ptype { background: rgba(255, 255, 255, .05); } }

/* a number: the slider with the answer marked and the three nets around it */
.mk-numprev { padding: 4px 2px 0; }
.mk-nets { position: relative; height: 66px; margin: 30px 10px 0; }
.mk-netrow { position: absolute; left: 0; right: 0; height: 12px; }
.mk-net { --mesh: color-mix(in srgb, var(--c) 42%, transparent); position: absolute; top: 0; bottom: 0; border: 1.5px solid var(--c); border-radius: 5px;
  background: repeating-linear-gradient(45deg, var(--mesh) 0 1.4px, transparent 1.4px 7px), repeating-linear-gradient(-45deg, var(--mesh) 0 1.4px, transparent 1.4px 7px), color-mix(in srgb, var(--c) 9%, transparent); }
.mk-track { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 24%, var(--card)); }
.mk-ansline { position: absolute; top: -6px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.mk-anstag { position: absolute; top: -30px; transform: translateX(-50%); padding: 1px 10px; border-radius: 999px; background: var(--ink); color: var(--card); font-family: var(--display); font-weight: 800; font-size: .92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-ends { display: flex; justify-content: space-between; gap: 10px; margin: 7px 10px 0; color: var(--soft); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-netkey { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.mk-netkey li { display: inline-flex; align-items: center; gap: 7px; }
.mk-netkey .mk-netic { position: relative; display: inline-block; height: 12px; flex: none; }
.mk-netkey b { font-weight: 800; }
.mk-numempty { position: relative; height: 40px; margin: 10px 10px 0; }

/* ---------- the settings: who can use the code ---------- */
.mk-who { display: grid; gap: 8px; }
.mk-who button { appearance: none; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 11px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mk-who button i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); margin-top: 1px; }
.mk-who button b { font-size: .95rem; line-height: 1.25; }
.mk-who button small { grid-column: 2; color: var(--soft); font-size: .84rem; line-height: 1.3; }
.mk-who button[aria-checked="true"] { border-color: var(--c); background: var(--tint); }
.mk-who button[aria-checked="true"] i { border: 7px solid var(--c); }
@media (prefers-color-scheme: dark) { .mk-who button { background: transparent; } .mk-who button[aria-checked="true"] { background: var(--tint); } }

/* ---------- the saved sheet ---------- */
dialog.mk-dlg-wide { width: min(100% - 24px, 36rem); }
.mk-sheet h2 { margin-bottom: 4px; }
.mk-svtop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 6px; }
.mk-svcode .mk-lab { margin-top: 4px; }
.mk-code { display: flex; gap: 5px; flex-wrap: nowrap; }
.mk-code i { flex: 1 1 0; max-width: 46px; min-width: 0; height: 56px; border-radius: 12px; background: var(--tint); color: var(--c); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 1.75rem; }
.mk-link { margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; color: var(--soft); overflow-wrap: anywhere; }
.mk-qr svg { width: 132px; height: 132px; border-radius: 10px; background: #fff; padding: 4px; display: block; }
.mk-wide { width: 100%; margin-top: 14px; min-height: 52px; }
.mk-keyrow { display: flex; gap: 8px; align-items: center; }
.mk-keyrow .mk-in { flex: 1; min-width: 0; }
.mk-keyrow .chip { flex: none; }
.mk-eyebtn { width: 42px; padding: 0; justify-content: center; }
.mk-eyebtn svg { width: 20px; height: 20px; }
.mk-keep { border-bottom: 0; margin-top: 8px; }
.mk-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mk-btnrow .chip, .mk-btnrow .btn { gap: 8px; }
.mk-btnrow .btn { min-height: 46px; font-size: 1rem; padding: 0 18px; }
.mk-del { appearance: none; border: 0; background: none; margin-top: 14px; padding: 8px 0; font: inherit; font-weight: 700; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mk-del.mk-armed { color: var(--ink); text-decoration-thickness: 2px; }
.mk-sheet .mk-small { margin-top: 6px; }
.mk-sheet ol.mk-colstrip { margin: 0; padding: 0; }      /* the site's .sheet ol and li are for numbered text */
.mk-sheet li { margin-top: 0; }
.mk-sheet .actions .btn { min-height: 52px; }

/* ---------- paste from a spreadsheet ---------- */
.mk-seg4 button { font-size: .84rem; padding: 8px 4px; }
.mk-colstrip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: col; }
.mk-colstrip li { counter-increment: col; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--bg); font-size: .84rem; font-weight: 700; }
.mk-colstrip li::before { content: counter(col, upper-alpha); width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--c); font-family: var(--display); font-weight: 800; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; }
.mk-pastebox { min-height: 120px; font-size: .9rem; white-space: pre; overflow: auto; field-sizing: fixed; }
.mk-psprev { margin-top: 6px; max-height: 260px; overflow: auto; border-radius: 12px; }
.mk-psprev:empty { display: none; }
.mk-pst { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mk-pst td { padding: 7px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.mk-pst tr:first-child td { border-top: 0; }
.mk-pst td.mk-n { color: var(--soft); font-weight: 700; width: 28px; font-variant-numeric: tabular-nums; }
.mk-pst td.mk-t { font-weight: 600; overflow-wrap: anywhere; }
.mk-pst td.mk-a { color: var(--soft); overflow-wrap: anywhere; }
.mk-pst .mk-err { margin-top: 3px; }

/* ---------- your games ---------- */
.mk-glist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.mk-glist li { display: flex; align-items: stretch; gap: 6px; }
.mk-gitem { appearance: none; flex: 1; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: center; text-align: left; padding: 10px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.mk-gitem .mk-gdot { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sw, var(--c)); color: #fff; font-family: var(--display); font-weight: 800; font-size: .9rem; letter-spacing: .03em; }
@media (prefers-color-scheme: dark) { .mk-gitem .mk-gdot { color: #0A0C1A; } }
.mk-gitem b { font-family: var(--display); font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-gitem small { color: var(--soft); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-gitem[aria-current="true"] { border-color: var(--c); }
.mk-gforget { appearance: none; flex: none; width: 40px; border: 0; border-radius: 12px; background: none; color: var(--soft); font-size: 1.3rem; cursor: pointer; }
.mk-warnline { margin-top: 10px; padding: 9px 12px; border-radius: 12px; border: 2px solid var(--ink); font-weight: 700; font-size: .92rem; }
.mk-iconbtn { gap: 8px; }
@media (prefers-color-scheme: dark) { .mk-gitem { background: transparent; } }

/* ---------- the start ---------- */
.mk-start { max-width: 720px; margin: 0 auto; padding: 4px var(--pad) 48px; }
.mk-hero { padding: 18px 4px 6px; }
.mk-h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; color: var(--c); margin-top: 6px; }
.mk-sub { margin-top: 10px; font-size: 1.1rem; color: var(--soft); font-weight: 600; line-height: 1.35; }
.mk-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; max-width: 520px; }
.mk-tiles span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); color: var(--c); font-weight: 700; font-size: .86rem; text-align: center; line-height: 1.15; }
.mk-tiles span b { color: var(--ink); font-weight: 700; }
.mk-tiles svg { width: 36px; height: 24px; }
.mk-card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 18px; margin-top: 14px; }
.mk-h2 { font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1.12; letter-spacing: -0.03em; }
.mk-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mk-lang { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 14px; border: 2px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; }
.mk-lang b { width: 58px; height: 58px; border-radius: 50%; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; }
.mk-lang b .mk-flag { width: 36px; height: 24px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(21, 23, 43, .12), 0 2px 5px rgba(21, 23, 43, .16); }
.mk-lang span { font-weight: 800; font-size: 1.08rem; }
.mk-lang small { font-size: .74rem; font-weight: 700; color: var(--soft); line-height: 1.15; text-align: center; min-height: 1.15em; }
.mk-lang.mk-mine { border-color: var(--c); background: var(--tint); }
/* the three languages in the soft colours (Khayyam, 15 Oct 2026), the one of this browser marked by its border */
.mk-lang[data-lang="en"] { --soft-bg: var(--lav); --soft-ink: var(--lav-ink); }
.mk-lang[data-lang="it"] { --soft-bg: var(--mint); --soft-ink: var(--mint-ink); }
.mk-lang[data-lang="tr"] { --soft-bg: var(--peach); --soft-ink: var(--peach-ink); }
.mk-langs .mk-lang { background: var(--soft-bg); border-color: transparent; }
.mk-langs .mk-lang b { background: var(--card); }
.mk-langs .mk-lang.mk-mine { border-color: var(--soft-ink); background: var(--soft-bg); }
.mk-langs .mk-lang.mk-mine b { box-shadow: 0 0 0 2px var(--soft-ink); }
.mk-langs .mk-lang small { color: var(--soft-ink); }
@media (hover: hover) { .mk-langs .mk-lang:hover { border-color: color-mix(in srgb, var(--soft-ink) 45%, transparent); } .mk-langs .mk-lang.mk-mine:hover { border-color: var(--soft-ink); } }
.mk-lang.mk-mine b { background: var(--card); box-shadow: 0 0 0 2px var(--c); }
.mk-lang:active { transform: scale(.98); }
@media (hover: hover) { .mk-lang:hover { border-color: var(--c); } }
@media (prefers-color-scheme: dark) { .mk-card { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px var(--line); } .mk-lang { background: transparent; } .mk-lang.mk-mine { background: var(--tint); } .mk-tiles span { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px var(--line); } }
.mk-foot { margin-top: 18px; padding: 0 6px; }
.mk-foot a, .mk-terms a { color: inherit; text-underline-offset: 3px; }
.mk-loading { min-height: 50vh; display: flex; align-items: center; justify-content: center; }
.mk-wait { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--soft); }
.mk-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--c) 25%, transparent); border-top-color: var(--c); animation: mk-spin .8s linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
.mk-stopcard .mk-h1 { font-size: 2rem; color: var(--ink); }
.mk-why { margin-top: 2px; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.mk-noscript { padding: 18px; }

/* ---------- results ---------- */
.mk-rhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 1480px; margin: 0 auto; padding: 10px 28px 0; }
.mk-rhead .chip { gap: 8px; }
.mk-rgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; max-width: 1480px; margin: 0 auto; padding: 12px 28px 48px; }
.mk-rt { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: .97rem; }
.mk-rt th { text-align: left; font-size: .76rem; font-weight: 800; color: var(--soft); padding: 4px 6px 6px; }
.mk-rt td { padding: 9px 6px; border-top: 1px solid var(--line); font-weight: 600; }
.mk-rt .mk-pl { font-family: var(--display); font-weight: 800; color: var(--c); width: 40px; font-variant-numeric: tabular-nums; }
.mk-rt .mk-nm { overflow-wrap: anywhere; }
.mk-rt .mk-pt { text-align: right; font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-rt .mk-ro { text-align: right; color: var(--soft); font-variant-numeric: tabular-nums; }
.mk-rt .mk-wh { text-align: right; color: var(--soft); font-size: .86rem; white-space: nowrap; }
.mk-rt th.mk-r { text-align: right; }
.mk-tq { font-weight: 800; font-size: 1.05rem; line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
.mk-gr { margin-top: 8px; }
.mk-gr > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 46px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.mk-gr > div:first-child { border-top: 0; }
.mk-gr .mk-ga { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.mk-gr .mk-gn { color: var(--soft); font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; text-align: right; }
.mk-tick { appearance: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.mk-tick svg { width: 20px; height: 20px; }
.mk-tick[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--on-c); }
.mk-tick[disabled] { cursor: default; }
.mk-showbtn { appearance: none; border: 0; background: var(--bg); color: var(--ink); border-radius: 999px; padding: 3px 10px; margin-left: 8px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.mk-tblock + .mk-tblock { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--line); }
.mk-empty-state { text-align: center; padding: 10px 4px; }
.mk-empty-state .mk-code { justify-content: center; margin-top: 10px; }
.mk-empty-state .mk-qr { display: flex; justify-content: center; margin-top: 12px; }
@media (prefers-color-scheme: dark) { .mk-tick { background: transparent; } .mk-tick[aria-pressed="true"] { background: var(--c); } }

/* ---------- toast and dock ---------- */
.mk-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 10px 10px 10px 18px; border-radius: 16px; background: #15172B; color: #fff; font-weight: 600; box-shadow: 0 12px 30px rgba(21, 23, 43, .3); }
.mk-toast button { appearance: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #fff; color: #15172B; font: inherit; font-weight: 800; cursor: pointer; }
.mk-toast.mk-solo { padding-right: 18px; }
@media (prefers-color-scheme: dark) { .mk-toast { background: #23264A; box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .1); } }
.mk-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: none; gap: 10px; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card); box-shadow: 0 -1px 0 var(--line), 0 -8px 26px rgba(21, 23, 43, .1); }
.mk-dock .btn { min-height: 50px; font-size: 1.02rem; padding: 0 18px; }
.mk-dock .btn.ghost { flex: 0 0 auto; }
@media (prefers-color-scheme: dark) { .mk-dock { background: #12152A; } }

/* ---------- a laptop with a mouse: the mock-up's tighter rows (a finger keeps the 44 px fields) ---------- */
@media (min-width: 1100px) and (pointer: fine) {
  .mk-in { min-height: 40px; padding: 7px 11px; }
  textarea.mk-in { min-height: 40px; }
  .mk-lab { margin: 11px 0 5px; }
  .mk-ty button { padding: 8px 4px 6px; }
  .mk-opts { gap: 6px; }
  .mk-mark { width: 30px; height: 30px; }
  .mk-prev { margin-top: 14px; }
  .mk-row { padding: 8px 0; }
}

/* ---------- a tablet: two columns (the list and the settings | the question) ---------- */
@media (max-width: 1099px) {
  .mk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "c1 c2" "c3 c2"; }
  .mk-c1 { grid-area: c1; }
  /* one page that scrolls as a whole: no column with a scroll of its own to get stuck in (make.js brings a newly
     opened question's top into view) */
  .mk-c2 { grid-area: c2; position: static; max-height: none; overflow: visible; }
  .mk-c3 { grid-area: c3; position: static; max-height: none; overflow: visible; }
  .mk-gamesw { display: none; }
  .mk-gamesbtn { width: 44px; padding: 0; justify-content: center; }
  .mk-gtitle { display: none; }
}

/* ---------- a phone: one column; a tap on a question opens it full width ---------- */
@media (max-width: 759px) {
  .mk-top { padding: 12px var(--pad) 2px; gap: 10px; }
  .mk-where { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mk-top .mk-tb { display: none; }
  .mk-top-r { gap: 8px; }
  .mk-top-r .chip { height: 40px; }
  .mk-gamesbtn { width: 40px; }
  .mk-codechip { padding: 0 12px; letter-spacing: .08em; font-size: .9rem; }
  .mk-msgwrap { padding: 0 var(--pad); }
  .mk-grid { display: block; padding: 6px var(--pad) 112px; }
  .mk-col { margin-top: 12px; padding: 14px; border-radius: 20px; }
  .mk-c2, .mk-c3 { position: static; max-height: none; overflow: visible; }
  .mk-grid[data-pane="list"] .mk-c2 { display: none; }
  .mk-grid[data-pane="q"] .mk-c1, .mk-grid[data-pane="q"] .mk-c3 { display: none; }
  .mk-phonenav { display: flex; }
  .mk-dock:not([hidden]) { display: flex; }
  .mk-dock .btn.solid { flex: 1 1 auto; }
  .mk-ty button { font-size: .8rem; padding: 9px 2px 7px; }
  .mk-ty button svg { width: 30px; height: 20px; }
  .mk-two, .mk-three { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mk-rhead { padding: 6px var(--pad) 0; }
  .mk-rgrid { grid-template-columns: minmax(0, 1fr); padding: 6px var(--pad) 40px; gap: 12px; }
  .mk-svtop { grid-template-columns: minmax(0, 1fr); }
  .mk-qr { display: flex; justify-content: center; }
  .mk-code i { height: 50px; font-size: 1.55rem; }
  .mk-sheet { padding: 22px 18px 22px; }
  .mk-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.mk-nodock .mk-toast { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .mk-start { padding-top: 0; }
  .mk-lang { padding: 14px 4px 12px; border-radius: 18px; }
  .mk-lang b { width: 50px; height: 50px; }
  .mk-lang b .mk-flag { width: 31px; height: 21px; }
  .mk-lang span { font-size: 1rem; }
}
@media (max-width: 380px) {
  .mk-tiles span { font-size: .78rem; padding: 10px 2px 8px; }
  .mk-seg button { font-size: .82rem; padding: 8px 3px; }
  .mk-seg4 button { font-size: .76rem; }
  .mk-code { gap: 4px; }
  .mk-code i { font-size: 1.4rem; height: 46px; border-radius: 10px; }
  .mk-dock .btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-spin { animation-duration: 2.4s; }
  .mk-lang:active { transform: none; }
  .mk-switch, .mk-switch::after { transition: none; }
}

/* ---------- flags (Khayyam, 15 Oct 2026: "for the language sections: small flags are important") ---------- */
.mk-flag { display: inline-block; flex: none; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(21, 23, 43, .14); vertical-align: -3px; }
.mk-seglang button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mk-seglang .mk-flag { width: 18px; height: 12px; border-radius: 2px; }
.mk-gitem .mk-gdot .mk-flag { width: 24px; height: 16px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92); }
@media (max-width: 380px) { .mk-seglang .mk-flag { display: none; } }

/* ---------- the soft colours of the keep screen and the key part of the saved sheet (Khayyam, 15 Oct 2026:
   "light purple, light green kind of nice colours, warm colours"); never yellow, which means a wrong answer ---------- */
body.mk-page { --lav: #EEE8FF; --lav-ink: #5B3FC4; --mint: #DDF5E7; --mint-ink: #1E7A4C; --peach: #FFE7D6; --peach-ink: #9A4416; }
@media (prefers-color-scheme: dark) {
  body.mk-page { --lav: #241D3F; --lav-ink: #C7B8FF; --mint: #13291F; --mint-ink: #8FE3B5; --peach: #2E1F16; --peach-ink: #FFB98A; }
}
.mk-lav { --soft-bg: var(--lav); --soft-ink: var(--lav-ink); }
.mk-mint { --soft-bg: var(--mint); --soft-ink: var(--mint-ink); }
.mk-peach { --soft-bg: var(--peach); --soft-ink: var(--peach-ink); }

/* ---------- the ? buttons: the details, for whoever asks ---------- */
.mk-help { appearance: none; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; margin: 0 0 0 4px; background: var(--lav); color: var(--lav-ink); font: inherit; font-family: var(--display); font-weight: 800; font-size: .92rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; -webkit-tap-highlight-color: transparent; }
.mk-help[aria-expanded="true"] { background: var(--lav-ink); color: var(--card); }
.mk-sheet .mk-helptext, .mk-helptext { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--lav); color: var(--ink); font-size: .88rem; line-height: 1.42; text-align: left; font-weight: 500; }
.mk-helptext[hidden] { display: none; }

/* ---------- keep your edit link: after the first save ---------- */
dialog.mk-kpdlg { width: min(100% - 24px, 31rem); }
.mk-kphero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mk-kpkey { width: 66px; height: 66px; border-radius: 22px; background: var(--lav); color: var(--lav-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.mk-kpkey svg { width: 38px; height: 38px; }
.mk-sheet.mk-kp h2 { padding-right: 0; text-align: center; font-size: 1.7rem; }
.mk-sheet.mk-kp h2:focus { outline: none; }
.mk-sheet .mk-kplead { margin-top: 6px; font-size: 1.06rem; color: var(--ink); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; }
.mk-kphero .mk-helptext { align-self: stretch; }
.mk-kpstep { margin-top: 18px; }
.mk-sheet .mk-kpsh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.mk-kpn { width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: var(--on-c); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: .9rem; flex: none; }
.mk-kpopt { font-weight: 600; color: var(--soft); font-size: .84rem; }
.mk-kpsh .mk-help { margin-left: auto; }
.mk-kptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-kptile { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 12px; min-height: 112px; border: 2px solid transparent; border-radius: 18px; background: var(--soft-bg); color: var(--ink); font: inherit; text-decoration: none; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, transform .1s; }
.mk-kptile b { font-weight: 800; font-size: .93rem; line-height: 1.2; text-wrap: balance; }
.mk-kptile small { margin-top: -3px; font-size: .76rem; font-weight: 700; color: var(--soft-ink); line-height: 1.15; }
.mk-kpic { width: 46px; height: 46px; border-radius: 15px; background: var(--card); color: var(--soft-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 1px 3px rgba(21, 23, 43, .08); }
.mk-kpic svg { width: 25px; height: 25px; }
.mk-kptick { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%; background: var(--soft-ink); color: #fff; display: none; align-items: center; justify-content: center; }
.mk-kptick svg { width: 15px; height: 15px; }
.mk-kptile.mk-done { border-color: var(--soft-ink); }
.mk-kptile.mk-done .mk-kptick { display: inline-flex; }
.mk-kptile:active { transform: scale(.97); }
.mk-kptile:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .mk-kptile:hover { border-color: color-mix(in srgb, var(--soft-ink) 40%, transparent); } .mk-kptile.mk-done:hover { border-color: var(--soft-ink); } }
.mk-kplink { margin-top: 8px; }
.mk-kpway { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 18px; background: var(--soft-bg); cursor: text; }
.mk-kpway .mk-kpic { width: 40px; height: 40px; border-radius: 13px; }
.mk-kpway .mk-in { flex: 1; min-width: 0; border-color: transparent; }
.mk-kp #kp-done { margin-top: 20px; gap: 8px; }
.mk-kp #kp-done .mk-ic { width: 20px; height: 20px; }
.mk-sheet .mk-kpfoot { text-align: center; min-height: 1.3em; margin-top: 8px; }
@media (prefers-color-scheme: dark) { .mk-kptick { color: #0A0C1A; } .mk-kpic { background: rgba(255, 255, 255, .08); box-shadow: none; } }

/* ---------- the key part of the saved sheet: the edit link, an email to oneself, this computer, the way back ---------- */
.mk-svkey { margin-top: 18px; }
.mk-labic { display: flex; align-items: center; gap: 6px; }
.mk-labic .mk-ic { width: 20px; height: 20px; color: var(--lav-ink); }
.mk-svways { margin-top: 8px; }
.mk-tintchip { background: var(--soft-bg); color: var(--soft-ink); box-shadow: none; text-decoration: none; gap: 8px; font-weight: 800; }
.mk-rowsub { display: block; margin-top: 2px; color: var(--soft); font-weight: 500; font-size: .84rem; }
.mk-svway { margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: var(--soft-bg); }
.mk-svway[hidden] { display: none; }
.mk-sheet .mk-svwayh { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; font-size: .95rem; color: var(--ink); }
.mk-svwayh .mk-ic { color: var(--soft-ink); }
.mk-svwaystate { margin-left: auto; color: var(--soft-ink); font-size: .84rem; font-weight: 800; }
.mk-svwaystate[hidden] + .mk-help { margin-left: auto; }
.mk-svwayacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.mk-svwayacts .chip { gap: 6px; }
.mk-svwayacts [hidden] { display: none; }
.mk-textbtn { appearance: none; border: 0; background: none; padding: 6px 2px; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mk-svway .mk-keyrow { margin-top: 8px; }
.mk-svway .mk-status:empty { display: none; }

/* the feedback tick (15 Oct 2026, evening; Khayyam: "very important"): never ticked for anyone, and its state
   with Stop in the saved sheet */
.mk-fbrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mk-fbrow[hidden] { display: none; }
.mk-fb { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; font-size: .92rem; color: var(--ink); cursor: pointer; }
.mk-fbbox { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }
.mk-fbbox::after { content: ""; width: 11px; height: 6px; border: solid var(--on-c); border-width: 0 0 3px 3px; transform: translate(0, -1px) rotate(-45deg); opacity: 0; }
.mk-fbbox:checked { border-color: var(--c); background: var(--c); }
.mk-fbbox:checked::after { opacity: 1; }
.mk-fbbox:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mk-fbstate { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--soft-ink); font-weight: 800; font-size: .88rem; }
.mk-fbstate[hidden] { display: none; }
.mk-fbstate .mk-textbtn { margin-left: auto; }