/* ==========================================================================
   Feshar.tv — shared styles
   Everything is driven by the variables in the theme blocks below, so a whole
   new look is a matter of swapping colours, corners, shadows and fonts.
   ========================================================================== */

/* ---------------- Theme 1: Popcorn (dark, the default) ---------------- */
:root, :root[data-theme="popcorn"] {
  --bg: #171522;
  --panel: #262336;
  --panel-2: #322e46;
  --panel-3: #423d5c;
  --ink: #17131f;
  --text: #f7f2e8;
  --muted: #a49dbb;
  --strong-bg: #f7f2e8;
  --strong-fg: #17131f;

  --paper: #ffffff;
  --edge: #ece4d2;
  --edge-2: #d3c9b2;

  --yellow: #ffd23f;
  --pink: #ff4d9d;
  --cyan: #34d1e0;
  --green: #2ee08a;
  --red: #ff4757;
  --on-pink: #ffffff;
  --on-green: #17131f;

  --scrim: rgba(12,10,18,.80);
  --tv-bg: #0d0b13;

  --bw: 3px;
  --bw-sm: 2px;
  --r-panel: 20px;
  --r-btn: 14px;
  --r-chip: 999px;
  --sh-lg: 0 6px 0 var(--ink);
  --sh-md: 0 4px 0 var(--ink);
  --sh-sm: 0 3px 0 var(--ink);
  --press: 4px;
  --tilt: -2deg;

  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --wt-body: 700;
  --wt-strong: 800;
}

/* ---------------- Theme 2: Cozy (warm, hand drawn) ---------------- */
:root[data-theme="cozy"] {
  --bg: #d8a44b;
  --panel: #f7ecd2;
  --panel-2: #efdfba;
  --panel-3: #e3cd9d;
  --ink: #4a3524;
  --text: #4a3524;
  --muted: #957a56;
  --strong-bg: #4a3524;
  --strong-fg: #fdf7e8;

  --paper: #fffdf4;
  --edge: #efe4cb;
  --edge-2: #dccca9;

  --yellow: #f6c445;
  --pink: #e8798b;
  --cyan: #7bb8ad;
  --green: #92c274;
  --red: #d96a5e;
  --on-pink: #40202a;
  --on-green: #2c3a20;

  --scrim: rgba(74,53,36,.72);
  --tv-bg: #c98f3a;

  --bw: 3px;
  --bw-sm: 2px;
  --r-panel: 22px 26px 20px 28px / 26px 20px 28px 22px;
  --r-btn: 14px 10px 16px 12px / 12px 16px 10px 14px;
  --r-chip: 999px;
  --sh-lg: 0 5px 0 var(--ink);
  --sh-md: 0 3px 0 var(--ink);
  --sh-sm: 0 2px 0 var(--ink);
  --press: 3px;
  --tilt: -3deg;

  --font-body: "Patrick Hand", "Nunito", system-ui, "Noto Sans Arabic", sans-serif;
  --font-display: "Patrick Hand", "Nunito", system-ui, sans-serif;
  --wt-body: 400;
  --wt-strong: 400;
}

/* ---------------- Theme 3: Paint Chat (pastel, retro window) ---------------- */
:root[data-theme="paintchat"] {
  --bg: #fdefe6;
  --panel: #ffffff;
  --panel-2: #f1eefb;
  --panel-3: #ded8f4;
  --ink: #575279;
  --text: #46425e;
  --muted: #918cad;
  --strong-bg: #a9a4e0;
  --strong-fg: #ffffff;

  --paper: #ffffff;
  --edge: #eee9f7;
  --edge-2: #d8d1ea;

  --yellow: #ffd772;
  --pink: #ff9fb4;
  --cyan: #93d6ea;
  --green: #a9dfa4;
  --red: #f08b8b;
  --on-pink: #5b2a38;
  --on-green: #2f4a2c;

  --scrim: rgba(70,66,94,.62);
  --tv-bg: #f9e6da;

  --bw: 2px;
  --bw-sm: 2px;
  --r-panel: 6px;
  --r-btn: 5px;
  --r-chip: 5px;
  --sh-lg: 3px 3px 0 var(--ink);
  --sh-md: 2px 2px 0 var(--ink);
  --sh-sm: 2px 2px 0 var(--ink);
  --press: 2px;
  --tilt: 0deg;

  --font-body: "Gaegu", "Nunito", system-ui, "Noto Sans Arabic", sans-serif;
  --font-display: "Gaegu", "Nunito", system-ui, sans-serif;
  --wt-body: 700;
  --wt-strong: 700;
}

/* ---------------- Theme 4: Newsprint (quiet, black and white) ---------------- */
:root[data-theme="newsprint"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f3f3;
  --panel-3: #e4e4e4;
  --ink: #000000;
  --text: #000000;
  --muted: #6b6b6b;
  --strong-bg: #000000;
  --strong-fg: #ffffff;

  --paper: #ffffff;
  --edge: #dcdcdc;
  --edge-2: #b8b8b8;

  --yellow: #ffffff;
  --pink: #000000;
  --cyan: #ffffff;
  --green: #000000;
  --red: #000000;
  --on-pink: #ffffff;
  --on-green: #ffffff;

  --scrim: rgba(255,255,255,.92);
  --tv-bg: #ffffff;

  --bw: 1px;
  --bw-sm: 1px;
  --r-panel: 0px;
  --r-btn: 0px;
  --r-chip: 0px;
  --sh-lg: none;
  --sh-md: none;
  --sh-sm: none;
  --press: 0px;
  --tilt: 0deg;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wt-body: 500;
  --wt-strong: 700;
}
/* Newsprint keeps its two "accent" fills readable */
:root[data-theme="newsprint"] .panel-tag,
:root[data-theme="newsprint"] .frame-label { background: #fff; color: #000; }
:root[data-theme="newsprint"] .tool.active,
:root[data-theme="newsprint"] .shape.active,
:root[data-theme="newsprint"] .segmented button.active,
:root[data-theme="newsprint"] .size-btn.active,
:root[data-theme="newsprint"] .chan-chip.on,
:root[data-theme="newsprint"] .pill-btn.accent { background: #000; color: #fff; }
:root[data-theme="newsprint"] .size-btn.active span { background: #fff; }
:root[data-theme="newsprint"] .mode.active { background: #000; color: #fff; }
:root[data-theme="newsprint"] .tool.active { transform: none; }
:root[data-theme="newsprint"] .logo { filter: grayscale(1) contrast(1.4); }

/* ==========================================================================
   Shared
   ========================================================================== */

/* Width of the visible paper edges beside the sheet. Small screens reclaim it.
   The sizes live near the bottom of this file, beside the other breakpoints. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font: var(--wt-body) 15px/1.4 var(--font-body);
}

button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { opacity: .35; cursor: default; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------- Header ---------------- */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; padding: 9px 22px; max-width: 100%;
}
.top > * { min-width: 0; }
.top .brand { justify-self: start; }
.head-mid { justify-self: center; }
.head-right { justify-self: end; }
.head-extras { display: flex; align-items: center; gap: 8px; }
/* Reaching the TV from the drawing page. It rides with the look and language
   controls, which live in the header on a desk and in the sheet on a phone —
   and it is only of use in the sheet. */
.sheet-tv { display: none; }
.sheet-body .sheet-tv {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; border-radius: var(--r-btn); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 15px;
  background: var(--cyan); color: var(--ink);
  border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-sm);
}
.sheet-body .sheet-tv:active { transform: translateY(var(--press)); box-shadow: none; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.logo { width: 40px; height: 40px; transform: rotate(-6deg); }
.wordmark { font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 23px; display: flex; align-items: center; gap: 6px; }
.tv {
  font-size: 12px; font-weight: var(--wt-strong); background: var(--pink); color: var(--on-pink);
  border: var(--bw-sm) solid var(--ink); border-radius: 6px; padding: 1px 5px; line-height: 15px;
  transform: rotate(4deg);
}

.head-mid { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.head-right { display: flex; align-items: center; gap: 8px; }
.timer-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: var(--bw-sm) solid var(--ink); border-radius: 999px; padding: 5px 15px 5px 11px;
  font-variant-numeric: tabular-nums; font-weight: var(--wt-strong); font-size: 16px;
  box-shadow: var(--sh-sm);
}
.timer-pill .ico { width: 18px; height: 18px; color: var(--yellow); }
:root[data-theme="newsprint"] .timer-pill .ico { color: var(--text); }
.timer.over { color: var(--red); font-style: italic; }

.tv-link {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap;
  background: var(--cyan); color: var(--ink); font-weight: var(--wt-strong);
  border: var(--bw-sm) solid var(--ink); border-radius: 999px; padding: 7px 16px;
  box-shadow: var(--sh-sm);
}
:root[data-theme="newsprint"] .tv-link { background: #000; color: #fff; }
.tv-link:hover { filter: brightness(1.08); }
.tv-link:active { transform: translateY(var(--press)); box-shadow: none; }
/* Sign-in widget. Hidden entirely when the site is running without a cloud. */
.auth-slot:empty { display: none; }
.auth-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--panel); color: var(--text); font-weight: var(--wt-strong);
  border: var(--bw-sm) solid var(--ink); border-radius: 999px; padding: 6px 15px;
  box-shadow: var(--sh-sm);
}
.auth-btn:hover:not(:disabled) { background: var(--panel-2); }
.auth-btn:active:not(:disabled) { transform: translateY(var(--press)); box-shadow: none; }
/* Your face, at the far end of the header. Tapping it opens the drawer. */
.auth-face {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden;
  border: var(--bw-sm) solid var(--ink); background: var(--panel-2);
  color: var(--text); font-weight: var(--wt-strong); font-size: 17px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: var(--sh-sm);
}
.auth-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-face:hover { filter: brightness(1.1); }
.auth-face:active { transform: translateY(var(--press)); box-shadow: none; }

/* ---------------- The account menu ---------------- */
.auth-slot { position: relative; }
.acct-menu {
  position: absolute; z-index: 60; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 232px; max-width: min(280px, 88vw);
  background: var(--panel); border: var(--bw) solid var(--ink);
  border-radius: var(--r-panel); box-shadow: var(--sh-lg);
  padding: 7px; display: flex; flex-direction: column; gap: 2px;
}
.acct-who {
  padding: 8px 11px 10px; display: flex; flex-direction: column; gap: 2px;
  border-bottom: var(--bw-sm) solid var(--ink); margin-bottom: 5px;
}
.acct-who strong { font-family: var(--font-display); font-size: 16px; }
.acct-who span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.acct-item {
  display: block; padding: 10px 11px; border-radius: var(--r-btn);
  color: var(--text); text-decoration: none; font-weight: var(--wt-strong);
  font-size: 14px; text-align: start; width: 100%;
}
.acct-item:hover { background: var(--panel-2); }
.acct-out { color: var(--muted); }
/* Signed in, the language moves into the account menu and out of the header. */
body.signed-in #lang { display: none; }
.acct-out:hover { background: var(--red); color: var(--strong-fg); }

.text-btn { color: var(--muted); font-weight: var(--wt-strong); padding: 6px 10px; border-radius: 8px; }
.text-btn:hover { color: var(--text); background: var(--panel-2); }

/* ---------------- Theme picker ---------------- */
.theme-pick { position: relative; }
.theme-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: var(--bw-sm) solid var(--ink); border-radius: 999px;
  padding: 5px 13px 5px 7px; font-weight: var(--wt-strong); color: var(--text);
  box-shadow: var(--sh-sm);
}
.theme-btn:active { transform: translateY(var(--press)); box-shadow: none; }
.dots { display: flex; }
.dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink); display: block; }
.dots i + i { margin-inline-start: -5px; }
.theme-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 30;
  background: var(--panel); border: var(--bw) solid var(--ink); border-radius: var(--r-panel);
  padding: 8px; display: flex; flex-direction: column; gap: 5px; min-width: 190px;
  box-shadow: var(--sh-lg);
}
.theme-opt {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r-btn); color: var(--text); font-weight: var(--wt-strong); text-align: start;
}
.theme-opt:hover { background: var(--panel-2); }
.theme-opt.on { background: var(--yellow); color: var(--ink); }
:root[data-theme="newsprint"] .theme-opt.on { background: #000; color: #fff; }
:root[data-theme="newsprint"] .theme-opt.on .dots i { border-color: #fff; }

/* ---------------- Switches ---------------- */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-weight: var(--wt-body); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 38px; height: 21px; border-radius: 999px; background: var(--panel-3);
  border: var(--bw-sm) solid var(--ink); position: relative; transition: background .15s; flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--muted); transition: transform .15s;
}
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(15px); background: var(--ink); }
:root[data-theme="newsprint"] .switch input:checked + .track::after { background: #fff; }
[dir=rtl] .switch .track::after { left: auto; right: 2px; }
[dir=rtl] .switch input:checked + .track::after { transform: translateX(-15px); }

/* ---------------- Layout ---------------- */
.workspace { display: flex; align-items: flex-start; justify-content: center; gap: 20px; padding: 2px 16px 0; }
.panel {
  background: var(--panel); border: var(--bw) solid var(--ink); border-radius: var(--r-panel); padding: 12px;
  display: flex; flex-direction: column; gap: 9px; width: 172px; flex: none;
  box-shadow: var(--sh-lg);
}
.panel-tag {
  align-self: flex-start; font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); border: var(--bw-sm) solid var(--ink);
  border-radius: 6px; padding: 1px 8px; transform: rotate(var(--tilt));
}
.tag-cyan { background: var(--cyan); }
.tag-pink { background: var(--pink); color: var(--on-pink); }
.tag-green { background: var(--green); color: var(--on-green); }

/* Colours */
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.swatch { aspect-ratio: 1; border-radius: 8px; border: var(--bw-sm) solid var(--ink); transition: transform .08s; }
.swatch:hover { transform: scale(1.14) rotate(-4deg); }
.swatch.active { outline: 3px solid var(--text); outline-offset: 2px; }

.custom-row { display: flex; align-items: center; gap: 6px; }
.wheel-btn {
  width: 30px; height: 30px; flex: none; border-radius: 50%; border: var(--bw-sm) solid var(--ink);
  background: conic-gradient(#ff4757, #ffd23f, #2ee08a, #34d1e0, #4d7bff, #b14dff, #ff4d9d, #ff4757);
  position: relative;
}
.wheel-btn::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--panel); border: var(--bw-sm) solid var(--ink);
}
.wheel-btn:hover { transform: scale(1.1) rotate(20deg); }
.customs { display: flex; gap: 5px; flex-wrap: wrap; }
.customs .swatch { width: 22px; height: 22px; aspect-ratio: auto; border-radius: 6px; }
#colorInput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.current-color { height: 38px; border-radius: 10px; border: var(--bw) solid var(--ink); }

.sizes { display: flex; justify-content: space-between; gap: 3px; }
.size-btn {
  width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: var(--bw-sm) solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.size-btn span { display: block; border-radius: 50%; background: var(--text); }
.size-btn.active { background: var(--yellow); }
.size-btn.active span { background: var(--ink); }
input[type=range] { width: 100%; height: 22px; margin: 0; accent-color: var(--text); cursor: pointer; }

/* Tools */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool {
  height: 46px; border-radius: var(--r-btn); background: var(--panel-2); color: var(--text);
  border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-md);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.tool:hover:not(:disabled) { background: var(--panel-3); }
.tool:active:not(:disabled) { transform: translateY(var(--press)); box-shadow: none; }
.tool.active { background: var(--yellow); color: var(--ink); transform: rotate(var(--tilt)); }
.tool.wide { grid-column: 1 / -1; height: 42px; font-weight: var(--wt-strong); font-size: 13px; }
.tool .ico { width: 24px; height: 24px; }

/* Paper shapes */
.shape-row { display: flex; gap: 6px; }
.shape {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 6px; border-radius: var(--r-btn); background: var(--panel-2);
  border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-sm); font-size: 10px; font-weight: var(--wt-strong);
}
.shape i { display: block; background: var(--text); border: var(--bw-sm) solid var(--ink); border-radius: 3px; }
.sq-square { width: 20px; height: 20px; }
.sq-wide { width: 26px; height: 17px; }
.sq-tall { width: 15px; height: 24px; }
.shape.active { background: var(--cyan); color: var(--ink); }
.shape.active i { background: var(--paper); }
.shape:active { transform: translateY(var(--press)); box-shadow: none; }

/* Length modes */
.mode-row { display: flex; flex-direction: column; gap: 6px; }
.mode {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-btn);
  background: var(--panel-2); border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-sm);
  font-weight: var(--wt-strong); font-size: 13px; text-align: start;
}
.mode.active { background: var(--pink); color: var(--on-pink); }
.mode:active { transform: translateY(var(--press)); box-shadow: none; }

.settings { display: flex; flex-direction: column; gap: 10px; }
.setting { display: flex; flex-direction: column; gap: 5px; }
.setting-label { font-weight: var(--wt-strong); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.segmented { display: flex; min-width: 130px; background: var(--panel-2); border: var(--bw-sm) solid var(--ink); border-radius: var(--r-btn); padding: 3px; gap: 3px; }
.segmented button { flex: 1; border-radius: calc(var(--r-btn) / 2); padding: 4px 0; font-weight: var(--wt-strong); color: var(--muted); }
.segmented button.active { background: var(--yellow); color: var(--ink); }

.done {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--green); color: var(--on-green); font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 19px;
  height: 48px; border-radius: var(--r-btn); text-decoration: none;
  border: var(--bw) solid var(--ink); box-shadow: var(--sh-lg);
}
.done:hover { filter: brightness(1.06); }
.done:active { transform: translateY(calc(var(--press) + 1px)); box-shadow: none; }
.done.dl { padding: 0 22px; }

/* ---------------- The notepad ---------------- */
.book-col { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 0; }
.book-outer { flex: none; }
.book { width: max-content; transform-origin: top left; }
[dir=rtl] .book { transform-origin: top right; }

.pad {
  background: var(--panel); border: var(--bw) solid var(--ink); border-radius: var(--r-panel);
  padding: 0 10px 14px; box-shadow: var(--sh-lg);
}
.pad-head { position: relative; height: 50px; display: flex; align-items: center; justify-content: center; }

/* Two staples through the top of the paper, the way a flipbook is held
   together. Only for looks: they sit above the drawing, let the pen through,
   and are never part of the GIF. */
.staple {
  position: absolute; top: 9px; z-index: 3; width: 30px; height: 5px; pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(to bottom, #f1f0f5, #a9a7b6 60%, #7c7a8c);
  box-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.staple-l { left: 14%; }
.staple-r { right: 14%; }
.frame-label {
  font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 18px; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; color: var(--ink);
  background: var(--yellow); border: var(--bw-sm) solid var(--ink); padding: 3px 16px; border-radius: 999px;
  box-shadow: var(--sh-sm);
}

.stage { display: flex; align-items: center; }

.sheet-wrap { position: relative; flex: none; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 8px; }
#canvas {
  display: block; width: 100%; height: 100%; border-radius: 5px;
  cursor: none; touch-action: none;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.page-block {
  position: absolute; left: 6px; right: 6px; bottom: -11px; height: 11px;
  background: repeating-linear-gradient(to bottom, var(--edge) 0 2px, var(--edge-2) 2px 3px);
  border: var(--bw) solid var(--ink); border-top: 0; border-radius: 0 0 7px 7px;
}

.flip-layer { position: absolute; inset: 0; perspective: 4000px; pointer-events: none; overflow: visible; }
.flip-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--paper); border-radius: 5px; }
#flip-sheet { outline: var(--bw-sm) solid var(--ink); backface-visibility: hidden; will-change: transform; }

.cursor { position: absolute; pointer-events: none; border: 1.5px solid #fff; border-radius: 50%; transform: translate(-50%,-50%); mix-blend-mode: difference; }
.cursor.square { border-radius: 2px; }

.top, .workspace, .dock, .tool-sheet, .rail, .onion-panel {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.top input, .workspace input, .dock input, .tool-sheet input { user-select: auto; -webkit-user-select: auto; }
.book, .sheet-wrap { touch-action: none; }
#canvas { -webkit-user-drag: none; }

/* ---------------- Today's keyword ---------------- */
.kw-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 280px;
  padding: 3px 5px 3px 11px; border-radius: 999px; color: var(--ink);
  background: var(--pink); border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-sm);
  text-align: start;
}
[dir=rtl] .kw-pill { padding: 3px 11px 3px 5px; }
.kw-pill:active { transform: translateY(var(--press)); box-shadow: none; }
.kw-spark { color: var(--yellow); font-size: 16px; line-height: 1; text-shadow: 0 0 0 var(--ink); -webkit-text-stroke: 1px var(--ink); }
.kw-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; color: var(--on-pink); }
.kw-text small { font-size: 9px; font-weight: var(--wt-strong); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.kw-text b {
  font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 17px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kw-state {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--panel); color: var(--text); border: var(--bw-sm) solid var(--ink);
  font-weight: var(--wt-strong); font-size: 15px;
}
.kw-pill.on .kw-state { background: var(--green); color: var(--on-green); }
.kw-back {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--panel-2); color: var(--text); border: var(--bw-sm) solid var(--ink);
  font-weight: var(--wt-strong); font-size: 14px; line-height: 1; cursor: pointer;
}
.kw-back:hover { background: var(--red); color: var(--strong-fg); }
:root[data-theme="newsprint"] .kw-pill { background: #000; }
:root[data-theme="newsprint"] .kw-text { color: #fff; }

.kw-slot { display: flex; justify-content: center; padding: 0 10px 6px; }
.kw-slot:empty { display: none; }
.kw-slot .kw-pill { width: 100%; max-width: 420px; }
.kw-slot .kw-text b { font-size: 18px; }

.kw-choice {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 9px 12px; border-radius: 12px; font-weight: var(--wt-strong); font-size: 14px;
  background: var(--panel); color: var(--text); border: var(--bw-sm) dashed var(--ink);
}
.kw-choice b { font-family: var(--font-display); }
.kw-box {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  border: var(--bw-sm) solid var(--ink); background: var(--panel-2);
  display: grid; place-items: center; font-size: 14px; line-height: 1;
}
.kw-choice.on { background: var(--pink); color: var(--on-pink); border-style: solid; }
.kw-choice.on .kw-box { background: var(--green); color: var(--on-green); }
.kw-choice.on .kw-box::after { content: "✓"; }
.tag.kw { background: var(--pink); color: var(--on-pink); }
:root[data-theme="newsprint"] .kw-choice.on, :root[data-theme="newsprint"] .tag.kw { background: #000; color: #fff; }

/* ---------------- The Animate button ---------------- */
.animate-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 16px;
  color: var(--ink); background: var(--yellow);
  border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-sm);
  transform: rotate(-2deg); transition: transform .15s;
}
.animate-btn .ico { width: 19px; height: 19px; }
.animate-btn:hover { transform: rotate(2deg) scale(1.05); }
.animate-btn:hover .ico { animation: pen-wiggle .5s ease-in-out infinite alternate; }
.animate-btn:active { transform: translateY(var(--press)); box-shadow: none; }
@keyframes pen-wiggle { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .animate-btn:hover .ico { animation: none; } }
:root[data-theme="newsprint"] .animate-btn { background: #000; color: #fff; }

/* ---------------- Drafts ---------------- */
.done-row { display: flex; gap: 8px; align-items: stretch; }
.done-row .done { flex: 1; min-width: 0; }
.save-draft {
  position: relative; flex: none; width: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: var(--r-btn); background: var(--panel-2); color: var(--text);
  border: var(--bw) solid var(--ink); box-shadow: var(--sh-md);
  font-size: 10px; font-weight: var(--wt-strong); line-height: 1.05; text-align: center;
}
.save-draft .ico { width: 24px; height: 24px; }
.save-draft-word { display: none; }
.sheet-body .save-draft-word { display: inline; }
.save-draft:hover { background: var(--panel-3); }
.save-draft:active { transform: translateY(var(--press)); box-shadow: none; }
.save-draft.saving { opacity: .6; }
.save-draft.flash { background: var(--green); color: var(--on-green); }
.draft-dot {
  position: absolute; top: -5px; inset-inline-end: -5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--pink); border: var(--bw-sm) solid var(--ink);
}
/* In the phone and tablet sheet there is room to say it in full. */
.sheet-body .save-draft { width: 100%; flex-direction: row; gap: 8px; height: 46px; font-size: 14px; }
/* GIF, MP4 and the draft: three equal buttons in a row. */
.modal-actions.out-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.out-row .done.out-btn { width: 100%; min-width: 0; height: 52px; padding: 0 8px; font-size: 16px; white-space: nowrap; }
.out-btn span { overflow: hidden; text-overflow: ellipsis; }
.out-btn.mp4 { background: var(--cyan); color: var(--ink); }
.out-btn.draft { background: var(--panel-2); color: var(--text); }
@media (max-width: 480px) {
  .out-row .done.out-btn { flex-direction: column; gap: 2px; height: 60px; font-size: 13px; padding: 0 4px; }
}
.out-btn:disabled { opacity: .6; }
.replace-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px;
  background: var(--panel); border: var(--bw-sm) dashed var(--ink); font-size: 13px; font-weight: var(--wt-strong);
  cursor: pointer;
}
.replace-row input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--pink); flex: none; }
.draft-loading {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: var(--scrim); color: #fff; font-family: var(--font-display); font-size: 22px;
}

/* ---------------- Copy and paste a page ---------------- */
#dup, #copy, #paste { background: var(--panel-2); border: var(--bw-sm) solid var(--ink); }
#dup:hover:not(:disabled), #copy:hover:not(:disabled), #paste:hover:not(:disabled) { background: var(--yellow); color: var(--ink); }
#copy.flash { background: var(--green); color: var(--on-green); }
.paste-wrap { position: relative; display: flex; }
#paste { position: relative; }
.clip-no {
  position: absolute; top: -5px; inset-inline-end: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--yellow); color: var(--ink); border: var(--bw-sm) solid var(--ink);
  font-size: 10px; font-weight: var(--wt-strong); line-height: 14px; text-align: center;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.paste-menu {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 210px;
  background: var(--panel); border: var(--bw) solid var(--ink); border-radius: var(--r-panel);
  box-shadow: var(--sh-lg);
}
.paste-menu button {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-btn);
  font-weight: var(--wt-strong); font-size: 14px; color: var(--text); text-align: start; white-space: nowrap;
}
.paste-menu button:hover { background: var(--panel-2); }
.paste-menu .ico { width: 20px; height: 20px; }

/* ---------------- Onion skin settings ---------------- */
.onion-row { position: relative; display: flex; align-items: center; gap: 4px; }
.onion-row .switch { flex: 1; white-space: nowrap; min-width: 0; font-size: 13px; }
.onion-more {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 9px; border: var(--bw-sm) solid var(--ink);
  background: var(--panel-2); color: var(--text); box-shadow: var(--sh-sm);
}
.onion-more .ico { width: 17px; height: 17px; }
.onion-more.on { background: var(--yellow); color: var(--ink); }
.onion-more:active { transform: translateY(var(--press)); box-shadow: none; }

/* Floats above everything so a long panel never stretches the tool column. */
.onion-panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0; width: 224px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: var(--r-panel);
  background: var(--panel); border: var(--bw) solid var(--ink); box-shadow: var(--sh-lg);
}
.onion-line { display: flex; flex-direction: column; gap: 5px; }
.onion-label { font-size: 12px; font-weight: var(--wt-strong); color: var(--muted); }
.onion-count button { flex: 1; padding: 5px 0; font-size: 13px; }
.onion-tints { display: flex; gap: 6px; }
.onion-tint {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px; border-radius: 10px; font-size: 11px; font-weight: var(--wt-strong);
  border: var(--bw-sm) solid var(--ink); background: var(--panel-2); color: var(--text);
}
.onion-tint.on { background: var(--yellow); color: var(--ink); }
.onion-dots { display: flex; }
.onion-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); }
.onion-dots i + i { margin-inline-start: -4px; }

/* On a touch screen the panel sits in the bottom sheet, where a floating box
   would be clipped, so there it simply opens in place. */
@media (max-width: 1100px) {
  .onion-row { flex-wrap: wrap; }
  .onion-panel { position: static; width: 100%; box-shadow: none; }
}

/* ---------------- Floating control bar ---------------- */
.controls {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: var(--bw) solid var(--ink); border-radius: 999px;
  padding: 9px 13px; margin: 14px auto 0; width: 100%; max-width: 100%;
  box-shadow: var(--sh-lg);
}
.transport, .page-ops { display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; color: var(--text); display: flex; align-items: center; justify-content: center; }
.icon-btn:hover:not(:disabled) { background: var(--panel-3); }
.icon-btn.play { background: var(--strong-bg); color: var(--strong-fg); width: 48px; height: 48px; border: var(--bw-sm) solid var(--ink); }
.icon-btn.play:hover { filter: brightness(1.1); }
.icon-btn.danger:hover:not(:disabled) { background: var(--red); color: var(--strong-fg); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: 999px; background: var(--panel-2); color: var(--text); font-weight: var(--wt-strong);
  border: var(--bw-sm) solid var(--ink);
}
.pill-btn:hover:not(:disabled) { background: var(--panel-3); }
.pill-btn.accent { background: var(--yellow); color: var(--ink); box-shadow: var(--sh-md); }
.pill-btn.accent:hover:not(:disabled) { filter: brightness(1.06); }
.pill-btn.accent:active:not(:disabled) { transform: translateY(var(--press)); box-shadow: none; }
/* The wheel: a strip of paper edges you drag to riffle. Lying under the
   thickness controls, or across the dock on a phone; upright in the rail on
   a tablet. */
.roller {
  display: block; width: 100%; height: 26px; flex: none;
  border-radius: 999px; border: var(--bw-sm) solid var(--ink);
  cursor: ew-resize; touch-action: none; user-select: none;
}

/* The strip of pages. */
.film-wrap {
  flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.film-wrap::-webkit-scrollbar { display: none; }
.film { display: flex; gap: 6px; padding: 3px 4px; width: max-content; }
.thumb {
  position: relative; flex: none; height: 44px; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--ink); background: #fff; opacity: .7;
  transition: opacity .12s, box-shadow .12s;
}
.thumb canvas { display: block; height: 100%; width: auto; }
.thumb i {
  position: absolute; bottom: 1px; inset-inline-end: 2px; font-style: normal;
  font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 6px;
  background: var(--ink); color: var(--strong-bg); font-weight: var(--wt-strong);
  direction: ltr;
}
.thumb:hover { opacity: .9; }
.thumb.on { opacity: 1; border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
:root[data-theme="newsprint"] .thumb.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

.foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  padding: 6px 12px 8px; color: var(--muted); font-size: 12px;
}
.foot-legal a { color: var(--muted); }
.foot-legal a:hover { color: var(--text); }

/* The footer that appears on every page */
.site-foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; padding: 14px 18px 18px; color: var(--muted); font-size: 12px;
}
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }
.foot-dot { opacity: .5; }

/* ---------------- Finish dialog ---------------- */
.modal {
  position: fixed; inset: 0; z-index: 50; padding: 20px; overflow: auto;
  background: var(--scrim); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--panel); border: var(--bw) solid var(--ink); border-radius: var(--r-panel); padding: 22px;
  width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: var(--sh-lg);
}
.enc { margin: 0; font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 18px; font-variant-numeric: tabular-nums; }
#result-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
#result-img { display: block; max-width: 260px; max-height: 260px; border: var(--bw) solid var(--ink); border-radius: 8px; background: #fff; }
.meta { margin: 0; color: var(--muted); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.encode-error { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.encode-error .hint { font-size: 14px; }

.publish { width: 100%; background: var(--panel-2); border: var(--bw-sm) solid var(--ink); border-radius: var(--r-btn); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.publish-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: var(--wt-strong); font-size: 16px; }
.publish-head .ico { color: var(--text); }
.hint { margin: 0; font-size: 12px; color: var(--muted); }
.fields { display: flex; gap: 8px; flex-wrap: wrap; }
.fields input {
  flex: 1; min-width: 130px; background: var(--panel); color: var(--text);
  border: var(--bw-sm) solid var(--ink); border-radius: 10px; padding: 9px 12px; font-weight: var(--wt-body);
}
.fields input::placeholder { color: var(--muted); }
.offline-warn {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--red); color: var(--strong-fg);
  border: var(--bw-sm) solid var(--ink); border-radius: var(--r-btn);
  padding: 10px 12px; font-size: 13px;
}
.offline-warn strong { font-size: 14px; }

.tag-block { display: flex; flex-direction: column; gap: 8px; }
.tag-block { display: flex; flex-direction: column; gap: 8px; }
.tag-pick { display: flex; flex-wrap: wrap; gap: 6px; }
#tag-input {
  background: var(--panel); color: var(--text);
  border: var(--bw-sm) solid var(--ink); border-radius: 10px;
  padding: 8px 12px; font-weight: var(--wt-body); font-size: 13px;
}
#tag-input::placeholder { color: var(--muted); }
.tag:disabled { opacity: .3; }
#tag-input {
  background: var(--panel); color: var(--text);
  border: var(--bw-sm) solid var(--ink); border-radius: 10px;
  padding: 8px 12px; font-weight: var(--wt-body); font-size: 13px;
}
#tag-input::placeholder { color: var(--muted); }
.tag:disabled { opacity: .3; }
.tag {
  padding: 4px 11px; border-radius: 999px; background: var(--panel); border: var(--bw-sm) solid var(--ink);
  font-size: 12px; font-weight: var(--wt-strong); color: var(--muted);
}
.tag.on { background: var(--cyan); color: var(--ink); }
:root[data-theme="newsprint"] .tag.on { background: #000; color: #fff; }
.publish-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pink); color: var(--on-pink); font-weight: var(--wt-strong); font-size: 15px;
  height: 46px; border-radius: var(--r-btn); border: var(--bw) solid var(--ink); box-shadow: var(--sh-md);
}
.publish-btn:active:not(:disabled) { transform: translateY(var(--press)); box-shadow: none; }
.publish-btn:disabled { filter: grayscale(.4); }
/* When signing in is on offer, keeping it in this browser is the quieter choice. */
.publish-btn.second {
  background: var(--panel); color: var(--text); font-size: 14px; height: 40px;
  border-width: var(--bw-sm); box-shadow: var(--sh-sm);
}
.saved { margin: 0; font-weight: var(--wt-strong); color: var(--text); text-align: center; }
.terms-line { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.terms-line a { color: var(--text); }

/* ---------------- Narrow screens ---------------- */
@media (max-width: 1100px) {
  .workspace { flex-wrap: wrap; gap: 14px; }
  .panel { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
  .colours { order: 1; } .book-col { order: 2; } .tools { order: 3; }
  .panel-tag { display: none; }
  .palette { grid-template-columns: repeat(10, 30px); }
  .current-color { width: 54px; }
  .mode-row { flex-direction: row; }
  input[type=range] { width: 150px; }
  .tool-grid { display: flex; }
  .tool { width: 56px; }
  .tool.wide { width: 56px; }
  .tool.wide span { display: none; }
  .settings { flex-direction: row; align-items: center; gap: 16px; }
  .done { min-width: 150px; }
}
@media (max-width: 1240px) {
  .theme-btn .theme-name { display: none; }
}


/* ==========================================================================
   Phones
   ==========================================================================
   The pad keeps the middle of the screen. Everything else is pinned to the
   bottom at a size a thumb can actually hit, and the panels live in a sheet
   that slides up over the drawing rather than pushing it off the screen.
   ========================================================================== */

.dock { width: 0; min-width: 100%; }
.done-slot:empty { display: none; }
.quick {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 6px;
  background: var(--panel); border: var(--bw) solid var(--ink); border-radius: 999px;
  box-shadow: var(--sh-lg);
}
.quick-tools { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 0; min-width: 0; scrollbar-width: none; }
.quick-tools::-webkit-scrollbar { display: none; }
.quick-tools .tool-grid { display: flex; gap: 6px; }
.quick-tools .tool { width: 46px; height: 46px; flex: none; }
.quick-tools .tool.wide { width: 46px; }
.quick-tools .tool.wide span { display: none; }
.quick-btn {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--panel-2); border: var(--bw-sm) solid var(--ink);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-sm);
}
.quick-btn:active { transform: translateY(var(--press)); box-shadow: none; }
.quick-swatch { width: 24px; height: 24px; border-radius: 50%; border: var(--bw-sm) solid var(--ink); display: block; }

.sheet-back { position: fixed; inset: 0; z-index: 30; background: var(--scrim); }
.tool-sheet {
  position: fixed; z-index: 31; inset-inline: 0; bottom: 0;
  max-height: 78dvh; overflow-y: auto;
  background: var(--panel); border-top: var(--bw) solid var(--ink);
  border-radius: 22px 22px 0 0;
  padding: 6px 12px calc(18px + env(safe-area-inset-bottom));
}
.sheet-grip {
  display: block; width: 54px; height: 6px; margin: 8px auto 12px;
  border-radius: 99px; background: var(--panel-3); border: 0;
}
.sheet-body .panel {
  width: 100%; border: 0; box-shadow: none; background: none; padding: 0;
  flex-direction: column; align-items: stretch;
}
.sheet-body .panel-tag { display: inline-block; }
.sheet-body .palette { grid-template-columns: repeat(5, 1fr); }
.sheet-body .settings { flex-direction: column; align-items: stretch; }
.sheet-body .mode-row { flex-direction: column; }
.sheet-body input[type=range] { width: 100%; }

@media (max-width: 1100px) {
  body.on-phone .foot,
  body.on-phone .site-foot { display: none; }

  /* A few stray pixels of width are enough to make the whole page pannable,
     which is why it used to open zoomed out. Nothing here needs to scroll
     sideways, so nothing is allowed to. */
  html:has(body.on-phone), body.on-phone { overflow-x: hidden; max-width: 100%; }
  body.on-phone { touch-action: manipulation; }

  /* Fill the space between the header and the dock, and sit the pad in the
     middle of it rather than at the top with a void underneath. */
  body.on-phone { display: flex; flex-direction: column; min-height: 100dvh; }
  body.on-phone .workspace {
    flex: 1; flex-wrap: nowrap; gap: 0; min-height: 0;
    align-items: center; justify-content: center;
    padding: 2px 8px calc(var(--dock-h, 150px) + 8px);
  }
  body.on-phone .workspace .panel { display: none; }
  body.on-phone #phone-park { display: none; }

  body.on-phone .dock {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
    padding: 0 8px calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 72%, transparent);
  }
  /* Two rows, because one would be wider than a phone: the roller gets the
     full width, which also makes it a far better thing to drag. */
  body.on-phone .controls {
    width: 100%; gap: 6px; padding: 7px 10px; flex-wrap: wrap;
    border-radius: 24px; justify-content: space-between; margin: 0;
  }
  body.on-phone .film-wrap, body.on-phone .roller { order: -1; flex: 1 0 100%; }
  body.on-phone .roller { width: 100%; height: 26px; align-self: auto; cursor: ew-resize; }
  /* In the rail it stands up; the phone rule above must not stretch it. */
  body.studio .rail .roller { width: 30px; height: 150px; flex: none; order: 0; cursor: ns-resize; }
  body.on-phone .film { padding: 2px 2px; }

  /* Bare paper on a dark ground, the way a drawing app has it. The page count
     has moved up beside the timer. */
  body.on-phone .pad { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
  body.on-phone .pad-head, body.on-phone .page-block { display: none; }
  body.on-phone .head-mid .frame-label { font-size: 15px; padding: 3px 12px; }
  body.on-phone .controls .pill-btn span { display: none; }
  body.on-phone .controls .pill-btn { padding: 0 14px; }
  body.on-phone .transport, body.on-phone .page-ops { gap: 4px; }
  /* Play, the page tools and copy/paste all share one row on a phone. */
  body.on-phone .controls .icon-btn { width: 36px; height: 36px; }
  body.on-phone .controls .icon-btn.play { width: 44px; height: 44px; }
  body.on-phone .controls .icon-btn .ico { width: 20px; height: 20px; }

  /* The header keeps only the things you need while drawing. */
  body.on-phone .top { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; }
  body.on-phone .wordmark, body.on-phone .tv-link, body.on-phone .top .switch { display: none; }
  body.on-phone .head-mid, body.on-phone .head-right { min-width: 0; }
  body.on-phone .auth-btn, body.on-phone .auth-who { max-width: 40vw; }
  body.on-phone .auth-name { max-width: 70px; }

  /* The pad takes the whole space between the header and the dock, and sits in
     the middle of it, instead of clinging to the top with a void underneath. */
  body.on-phone .book-col { justify-content: center; }
  body.on-phone .head-mid { gap: 8px; }
  body.on-phone .done { height: 42px; font-size: 16px; padding: 0 18px; width: auto; min-width: 0; }
  /* Three columns of fixed thirds cannot hold a timer, Done and Sign in on a
     phone; a plain row that lets the middle shrink can. */
  body.on-phone:not(.studio) .top { display: flex; justify-content: space-between; }
  body.on-phone:not(.studio) .head-mid { flex: 1 1 auto; justify-content: center; overflow: hidden; }
  body.on-phone .logo { width: 34px; height: 34px; }
}

/* ---------------- Tablet studio ----------------
   Tools top right, colour beside them, thickness and undo down the left edge,
   pages along the bottom. Familiar to anyone who has drawn on an iPad. */
.studio-left, .studio-tools { display: none; }
.rail { display: none; }

body.studio .top { display: flex; gap: 8px; padding: 6px 10px; }
body.studio .head-mid { flex: 1; justify-content: center; gap: 10px; }
body.studio .studio-left, body.studio .studio-tools { display: flex; align-items: center; gap: 5px; }
body.studio .studio-left { margin-inline-start: 2px; }
body.studio .studio-tools .tool, body.studio .studio-tools .quick-btn {
  width: 40px; height: 40px; border-radius: 12px; box-shadow: none;
}
body.studio .studio-tools .quick-btn { border-radius: 50%; margin-inline-start: 4px; }
body.studio .studio-left .quick-btn { width: 38px; height: 38px; box-shadow: none; }
body.studio .done { height: 40px; font-size: 15px; padding: 0 16px; margin-inline-start: 6px; box-shadow: var(--sh-sm); }
body.studio .logo { width: 36px; height: 36px; }
body.studio .auth-face { width: 36px; height: 36px; }

body.studio .rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: fixed; inset-inline-start: 8px; top: 50%; transform: translateY(-50%); z-index: 15;
  padding: 10px 4px; border-radius: 999px;
  background: var(--panel); border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-sm);
}
body.studio .rail .tool { width: 38px; height: 38px; border-radius: 50%; box-shadow: none; }
.rail-slider { position: relative; width: 38px; height: 170px; }
.rail-slider input[type=range] {
  position: absolute; left: 50%; top: 50%; width: 170px; height: 30px; margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
[dir=rtl] .rail-slider input[type=range] { transform: translate(-50%, -50%) rotate(90deg); }
body.studio .workspace { padding-inline-start: 64px; }

/* Very small screens: give the drawing every pixel going. */
@media (max-width: 400px) {
  body.on-phone .quick { gap: 6px; padding: 6px 8px; }
  body.on-phone .timer-pill { padding: 4px 10px; font-size: 14px; }
}


/* ==========================================================================
   Roomy screens
   ==========================================================================
   A big monitor was showing the same small panels as a laptop with half the
   space around them. Everything grows; the pad grows too, in fitBook.
   ========================================================================== */
@media (min-width: 1500px) {
  .panel { width: 210px; padding: 15px; gap: 12px; }
  .palette { gap: 8px; }
  .tool { height: 60px; }
  .tool .ico { width: 28px; height: 28px; }
  .tool.wide { height: 50px; font-size: 14px; }
  .current-color { height: 46px; }
  .size-btn { width: 30px; height: 30px; }
  .shape { padding: 10px 2px 8px; font-size: 11px; }
  .mode { padding: 11px 14px; font-size: 14px; }
  .segmented button { padding: 6px 0; font-size: 15px; }
  .done { height: 60px; font-size: 21px; }
  .panel-tag { font-size: 12px; }
  .switch .track { width: 42px; height: 23px; }
  .switch .track::after { width: 15px; height: 15px; }
  .switch input:checked + .track::after { transform: translateX(17px); }
  [dir=rtl] .switch input:checked + .track::after { transform: translateX(-17px); }

  .icon-btn { width: 48px; height: 48px; }
  .icon-btn.play { width: 56px; height: 56px; }
  .icon-btn .ico, .pill-btn .ico { width: 25px; height: 25px; }
  .pill-btn { height: 48px; font-size: 15px; }
  .controls { gap: 18px; padding: 11px 16px; }
  .roller { height: 30px; }
  .frame-label { font-size: 21px; padding: 4px 20px; }
  .wordmark { font-size: 26px; }
  .logo { width: 46px; height: 46px; }
  .timer-pill { font-size: 18px; padding: 7px 18px 7px 13px; }
}