/* board-mc — one screen, near-monochrome, no chrome.
   Everything that is not a bubble or the launcher is deliberately invisible until needed.

   The ONLY difference from the day-to-day board is this palette and the icon: dark stone
   instead of near-black, grass green instead of gold. That is on purpose: the two apps sit
   side by side on the same home screen and the same taskbar, and they must never be
   confused for one another. Nothing about the layout or the gestures changes. */

:root {
  --ink: #16181a;                       /* dark stone */
  --cream: #eef1ec;
  --dim: rgba(238, 241, 236, 0.42);
  --line: rgba(238, 241, 236, 0.12);
  --fill: rgba(238, 241, 236, 0.06);
  --grass: #79c05a;                     /* grass block green, the accent everywhere */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Nothing on this board is text to be selected: holding a finger down should feel like
   holding an object, not like highlighting a word. Kills the blue selection and the iOS
   copy/paste callout everywhere — except inside the bubble he is actually typing in, which
   needs a real caret and a real selection. */
html, body, .board, .item, .bubble, .bar, .toast {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.item.is-editing,
[contenteditable='true'],
[contenteditable='plaintext-only'] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* The app and the toast are shown and hidden with the `hidden` attribute, and both carry
   an author `display` rule below. An author rule beats the UA stylesheet's
   [hidden]{display:none}, so without this line a hidden element sits on screen anyway. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  /* The page itself never scrolls: the board is a fixed canvas, and a scrolling page is
     exactly what makes a phone jump around when the keyboard opens. */
  overflow: hidden;
  position: fixed; inset: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; }

/* ── frame ────────────────────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; height: 100%; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + 12px) 18px 4px;
  position: relative; z-index: 5;
}
.bar__view {
  min-width: 34px; padding: 4px 2px;
  font: inherit; font-size: 15px; color: var(--dim);
  background: none; border: 0;
}
.bar__view.is-history { color: var(--grass); }
.bar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background .3s;
}
.bar__dot.is-pending { background: var(--grass); }
.bar__dot.is-off { background: #e06c5a; }

/* ── the board: a free canvas, bubbles live where he puts them ────────────── */
.board {
  position: relative;
  /* Only ever set while he is typing, and only if the keyboard would cover the bubble. */
  transition: transform .18s cubic-bezier(.2,.8,.3,1);
  flex: 1 1 auto;
  margin: 4px 14px calc(var(--safe-b) + 108px);
  overflow: visible;
  touch-action: none;          /* the bubbles own every gesture on this surface */
}

/* History is a list, not a canvas: past items have no place on the board. */
.board--flow {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px;
  overflow-y: auto; touch-action: pan-y;
}

.item {
  --s: 1;                       /* pinch scale, set per bubble from JS */
  position: absolute;
  padding: calc(12px * var(--s)) calc(16px * var(--s));
  font-size: calc(17px * var(--s));
  line-height: 1.3;
  min-width: calc(34px * var(--s));
  max-width: min(92%, calc(260px * var(--s)));
  background: var(--fill); border: 1px solid var(--line);
  border-radius: calc(20px * var(--s));
  white-space: pre-wrap; overflow-wrap: anywhere;
  touch-action: none;
  outline: none;                /* it is contenteditable: no browser focus ring */
  will-change: transform, left, top;
  animation: land .22s ease-out;
}
@keyframes land { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.item.is-dragging {
  transition: none; z-index: 3;
  border-color: rgba(238, 241, 236, .3);
  transform: scale(1.04);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.item.is-settling { transition: transform .18s cubic-bezier(.2,.8,.3,1), opacity .18s; }

/* Tapped: it pops out of the board so he can see which one he has hold of. */
.item.is-selected {
  border-color: var(--grass);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(121,192,90,.35);
  transform: scale(1.05);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s;
  z-index: 2;
}

/* Held between two fingers: no transition, or it would lag behind them. */
.item.is-pinching {
  transition: none;
  transform: none;
  z-index: 6;
  border-color: var(--grass);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

/* Being typed into. Same bubble, no writing screen: the caret is simply in it. */
.item.is-editing {
  border-color: var(--grass);
  background: rgba(238,241,236,.09);
  caret-color: var(--grass);
  transform: none;
  z-index: 4;
}
.item.is-editing:empty::before {
  content: '';
  display: inline-block;
  width: 1px; height: calc(17px * var(--s));
}
.item.is-gone { transition: transform .26s ease-in, opacity .26s ease-in; opacity: 0; }

/* Past items read as past tense: dimmed, done struck through, dropped just faded. */
.board--flow .item { position: static; animation: none; max-width: 100%; }
.item.is-past { background: none; border-color: rgba(238,241,236,.07); color: var(--dim); }
.item.is-past.is-done { text-decoration: line-through; text-decoration-color: rgba(238,241,236,.3); }

.empty {
  position: fixed; left: 0; right: 0; top: 42%;
  margin: 0; text-align: center; font-size: 15px; color: rgba(238,241,236,.25);
  pointer-events: none;
}

/* ── launcher ─────────────────────────────────────────────────────────────── */
.bubble {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 26px);
  width: 64px; height: 64px; margin-left: -32px;
  display: grid; place-items: center;
  font: 300 30px/1 system-ui; color: rgba(11,11,12,.75);
  background: var(--grass); border: 0; border-radius: 50%;
  box-shadow: 0 8px 30px rgba(121,192,90,.28);
  touch-action: none; z-index: 20;
}
.bubble.is-settling { transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.bubble.is-carrying { box-shadow: 0 14px 44px rgba(121,192,90,.45); }

/* ── toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 104px); z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; font-size: 14px; color: var(--dim);
  background: #1c1f21; border: 1px solid var(--line); border-radius: 999px;
}
.toast__undo { font: inherit; color: var(--grass); background: none; border: 0; padding: 0; }

/* A mouse has to be told what it can pick up, and a touch screen has no cursor at all, so
   this is gated on a real pointer and changes nothing on the phone. The PC is the main
   surface for this board, which is why it earns the rule. */
@media (hover: hover) and (pointer: fine) {
  .item { cursor: grab; }
  .item.is-dragging, .item.is-pinching { cursor: grabbing; }
  .item.is-editing { cursor: text; }
  .board--flow .item { cursor: pointer; }
  .bubble, .bar__view, .toast__undo { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  .item { animation: none; }
}

/* ── portrait lock ────────────────────────────────────────────────────────
   The board never rotates. Bubbles are stored as fractions of the board, so a rotation
   reshapes the canvas under all of them at once and the ones low down land past the short
   landscape edge — which is exactly how they went missing. Android takes the manifest's
   `orientation: portrait`; iOS gives a web app no orientation lock at all, so the page is
   counter-rotated instead. The layout box below is the SAME portrait box either way
   (width = viewport height, height = viewport width), so nothing reflows and no bubble
   moves a pixel: only the direction the board faces changes. */
html.is-spun body {
  inset: auto; left: 0; top: 0;
  width: var(--vh); height: var(--vw);
  transform-origin: 0 0;
}
html.is-spun-cw body { transform: translateX(var(--vw)) rotate(90deg); }
html.is-spun-ccw body { transform: translateY(var(--vh)) rotate(-90deg); }