/* The exercise-book page: a book on a school desk, tools in an open zip pencil case.
   Phone first: book on top, a compact bar of pens/colours/undo directly under it (both on the first screen),
   everything else below, reached by scrolling the page. Wide screens: book left, pencil case right. */
:root {
  --desk: #d9d4c8;
  --ink: #23211c;
  --case: #2b3446;
  --case-dark: #1f2634;
  --lining: #38435a;
  --chip: #f4f0e4;
  --chip-ink: #23211c;
  --text: #f3efe4;
  --text-dim: rgba(243, 239, 228, .72);
  --focus: #ffcf5a;
  --bar-h: 158px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* laminex desk top: a faint speckle, a soft light from above */
  background-color: var(--desk);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(120, 105, 80, .16), transparent 55%);
  background-attachment: scroll, fixed, fixed;
}

/* ---- layout: phone first ---- */
.app { display: block; }
.stage {
  display: flex; align-items: center; justify-content: center;
  /* No taller than the book needs at full width (so the bar sits right under it), and no taller than the
     space above the bar. 1.2857 = BOOK_ASPECT; 24px = the padding. */
  height: min(calc(100vh - var(--bar-h)), calc((100vw - 24px) * 1.2857 + 24px));
  height: min(calc(100dvh - var(--bar-h)), calc((100vw - 24px) * 1.2857 + 24px));
  min-height: 300px; min-width: 0; padding: 12px; overflow: hidden;
}
.book-wrap {
  position: relative; flex: none; background: #888; border-radius: 2px 4px 4px 2px;
  /* soft, slightly offset: the light is up and to the left */
  box-shadow: 1px 2px 2px rgba(40, 32, 16, .3), 6px 10px 18px rgba(40, 32, 16, .28), 14px 22px 40px rgba(40, 32, 16, .16);
}
.book-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#book { touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; border-radius: inherit; }
#book.armed { cursor: copy; }
#overlay { pointer-events: none; }
#book:focus-visible { outline: 3px solid #1f3a93; outline-offset: 4px; }

/* ---- the pencil case ---- */
.case {
  position: relative; color: var(--text);
  background: var(--case);
  /* zip along the top edge: dark track, light teeth */
  background-image:
    repeating-linear-gradient(90deg, #dfe2e8 0 3px, #566078 3px 6px),
    linear-gradient(#6e7790, #6e7790),
    linear-gradient(rgba(255, 255, 255, .05), transparent 30%);
  background-size: 100% 7px, 100% 12px, 100% 100%;
  background-position: 0 3px, 0 0, 0 0;
  background-repeat: no-repeat;
  padding: 20px 10px 10px; border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 14px rgba(40, 32, 16, .25);
}
.lining {
  background: var(--lining); border-radius: 12px; padding: 4px 12px 14px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px);
}
.case h2 {
  margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.hint { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); }

/* the bar: pens, colours, undo/redo. On the phone it is two scrollable rows and always on the first screen. */
.bar { height: calc(var(--bar-h) - 38px); display: flex; flex-direction: column; gap: 0; }
.bar h2 { display: none; }
.bar .pens { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bar section { min-width: 0; }
.bar .edit .row { flex-wrap: nowrap; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bar .row, .bar .swatches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 12px; margin: -6px -12px; }
.bar .row::-webkit-scrollbar { display: none; }
.bar { position: relative; }
.bar .edit { position: absolute; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, var(--lining) 14px); padding-left: 18px; }
.bar .swatches { padding-right: 150px; }
/* the four pens share the phone's width, labels wrapping, so none is cut off at the edge (S1 carry-over, S6e) */
.bar .tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 6px 0; margin: -6px 0; }
.bar .tools .chip { min-width: 0; padding: 6px 4px 14px; font-size: 14px; line-height: 1.15; }

button, input[type="text"] { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* chips: chunky off-white buttons */
.chip {
  position: relative; flex: none; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 14px;
  background: var(--chip); color: var(--chip-ink); font-weight: 600;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.chip:hover:not(:disabled) { background: #fff; }
.chip:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.chip[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--focus), 0 2px 0 3px rgba(0, 0, 0, .35); }
/* pen chips carry a band in the current colour */
.tools .chip { padding-bottom: 14px; }
.tools .chip::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 5px; border-radius: 3px;
  background: var(--tip, #999); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}

/* colour caps */
.swatches button {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .25), inset 0 4px 5px rgba(255, 255, 255, .25), 0 2px 0 rgba(0, 0, 0, .35);
}
.swatches button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--case), 0 0 0 6px var(--focus), 0 2px 0 6px rgba(0, 0, 0, .35); margin: 0 3px; }
.swatches { padding: 6px 4px; }

/* the stuff below the bar */
.more { padding-top: 6px; }
.more .row { margin-bottom: 10px; }
.elements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.elements li {
  background: var(--chip); color: var(--chip-ink); border-radius: 12px; padding: 2px 6px 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 2px;
}
.elements li.armed { box-shadow: 0 0 0 3px var(--focus), 0 2px 0 3px rgba(0, 0, 0, .35); }
.elements .el-btn {
  min-height: 44px; padding: 6px 6px; border: 0; background: transparent; color: inherit; font-weight: 600; text-align: left;
  border-radius: 8px; -webkit-user-select: none; user-select: none;
}
.elements .el-btn:hover { background: rgba(0, 0, 0, .06); }
.elements label { display: block; font-size: 12px; color: #4d4a41; padding: 0 6px; }
.elements input[type="text"] {
  display: block; width: 100%; margin-top: 2px; min-height: 44px; padding: 4px 8px;
  border: 1px solid #9c9684; border-radius: 8px; background: #fff; color: var(--ink);
}
.elements li:has(label) { grid-column: 1 / -1; }

.link-field { width: 100%; margin-top: 6px; padding: 8px; border: 1px solid #9c9684; border-radius: 8px; min-height: 44px; }

/* messages: in the case on wide screens; a toast over the top of the page on the phone */
.messages { position: fixed; z-index: 20; top: 8px; left: 8px; right: 8px; display: grid; gap: 8px; pointer-events: none; }
.messages > * { pointer-events: auto; }
.notice, .toast {
  padding: 10px 12px; border-radius: 12px; background: #fff7d6; color: var(--ink); border: 1px solid #d9c56a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3); max-width: 520px; margin: 0 auto; width: 100%;
}
.toast { background: var(--chip); border-color: #b9b29c; }
.toast .status { margin: 0; }
.notice .row, .toast .row { margin-top: 8px; }
.notice .row .chip, .toast .row .chip { box-shadow: 0 0 0 1px #9c9684; }
.notice .dismiss { float: right; margin: -4px -4px 0 8px; min-height: 44px; min-width: 44px; padding: 0; background: transparent; border: 0; font-size: 22px; line-height: 1; border-radius: 10px; }
[hidden] { display: none !important; }
.noscript { padding: 16px; }

/* ---- wide: book left, pencil case right ---- */
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
  .app { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: 100vh; height: 100dvh; }
  .stage { height: auto; min-height: 0; padding: 20px; }
  .case {
    margin: 16px 16px 16px 0; padding: 14px 12px 12px 30px; overflow-y: auto; min-height: 0; border-radius: 22px;
    /* zip down the left edge */
    background-image:
      repeating-linear-gradient(180deg, #dfe2e8 0 3px, #566078 3px 6px),
      linear-gradient(#6e7790, #6e7790),
      linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 30%);
    background-size: 7px 100%, 12px 100%, 100% 100%;
    background-position: 8px 0, 5px 0, 0 0;
    box-shadow: 4px 8px 22px rgba(40, 32, 16, .35), 1px 2px 2px rgba(40, 32, 16, .3);
  }
  .lining { padding-top: 0; }
  .bar { height: auto; display: block; overflow: visible; }
  .bar h2 { display: block; }
  .bar .pens { gap: 6px; }
  .bar .tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bar .tools .chip { padding: 8px 16px 14px; font-size: inherit; line-height: inherit; }
  .bar section { margin-bottom: 4px; }
  .bar .row, .bar .swatches { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; }
  .bar .swatches { padding: 6px 4px; }
  .bar .edit { position: static; background: none; padding: 0; }
  .messages { position: sticky; top: 0; left: auto; right: auto; margin: 0 0 10px; }
}
@media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
  .case { scrollbar-width: thin; scrollbar-color: #6e7790 transparent; }
}
@media (prefers-reduced-motion: no-preference) {
  .chip, .swatches button { transition: transform .08s, box-shadow .1s; }
}

/* Long-presses and drags across the case shouldn't select button labels (seen in the phone clip). */
.case button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---- in the room (S6e, D-41): /exercise-book/?embed=room. The room shows through, blurred by its overlay; the
   book lifts from where it lay (embed.js) and the pencil case comes in beside it. ---- */
html[data-embed="room"], html[data-embed="room"] body { background: transparent; }
html[data-embed="room"] .stage { padding-top: 16px; }
html[data-embed="room"]:not(.handoff) .case { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html[data-embed="room"].handoff .case { animation: case-in-below 420ms 120ms cubic-bezier(.25, .7, .25, 1) both; }
  @keyframes case-in-below { from { transform: translateY(60px); opacity: 0; } }
  @media (min-width: 900px), (min-width: 640px) and (orientation: landscape) {
    html[data-embed="room"].handoff .case { animation-name: case-in-right; }
    @keyframes case-in-right { from { transform: translateX(120px); opacity: 0; } }
  }
}
/* The room's light on the book: the room draws the cover at ~70% of the editor's brightness, a little cool (measured
   at the stop, S6e). Half of that, lighter towards the louvres (upper left at the stop), keeps the jump small when
   the editor fades in without dulling the thing being drawn on. Multiply, so ink and cover darken alike. */
html[data-embed="room"] .book-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(150deg, rgb(238, 234, 236) 0%, rgb(214, 210, 220) 55%, rgb(194, 190, 206) 100%);
  mix-blend-mode: multiply;
}

/* S8a: a heading for screen readers; the editor has no visible title */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }