/* tinypad's one stylesheet: the Satz tokens it uses (owner: tinymedia-2.0/editor/src/lib/styles/tokens.css, copied
   by value) and the rules the pages need: page frame, overview, forms, notices, pad bar, save status, rescue notice,
   who is here, the sheet (textarea over its mirror layer), others' cursors, the guest switch. Text inputs keep 16px
   so iOS Safari does not zoom in on focus. */
.app {
  color-scheme: light dark;
  --paper: light-dark(#eff1f5, #2e3440);
  --surface: light-dark(#ffffff, #3b4252);
  --ink: light-dark(#2e3440, #eceff4);
  --muted: light-dark(#4c566a, #b4bccb);
  --line: light-dark(#c4cbd6, #4c566a);
  --accent: #1f5a97;
  --accent-ink: #ffffff;
  --signal: #ebcb8b;
  --ok: light-dark(#2f6b3a, #a3be8c);
  --danger: light-dark(#b0362d, #f2a79e);
  --danger-soft: light-dark(#f6e1de, #4a3236);
  --focus-color: light-dark(#1f5a97, #ebcb8b);
  --sans: 'Helvetica Neue', Helvetica, Arial, Roboto, 'Liberation Sans', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --small: 14px; --body: 16px; --title: 32px;
  --bold: 700; --leading: 1.5;
  --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --radius: 2px; --hairline: 1px; --focus: 3px; --focus-offset: 2px; --target: 44px;
  --form-width: 720px; --main-width: 1040px;
  /* The twelve colours of other people's cursors (mirror.ts: the hue of a tab's client id). */
  --peer0: hsl(0 70% 42%); --peer1: hsl(30 80% 38%); --peer2: hsl(60 90% 30%); --peer3: hsl(90 60% 32%);
  --peer4: hsl(120 55% 32%); --peer5: hsl(150 60% 32%); --peer6: hsl(180 70% 30%); --peer7: hsl(210 70% 42%);
  --peer8: hsl(240 55% 52%); --peer9: hsl(270 50% 48%); --peer10: hsl(300 50% 42%); --peer11: hsl(330 65% 44%);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--body) / var(--leading) var(--sans); }
a { color: inherit; }
:focus-visible { outline: var(--focus) solid var(--focus-color); outline-offset: var(--focus-offset); }

button {
  min-height: var(--target); padding: 0 var(--s4); border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: var(--bold); cursor: pointer;
}
button.quiet { background: transparent; color: var(--ink); border: var(--hairline) solid var(--line); font-weight: normal; }
button.danger { background: var(--danger); color: var(--accent-ink); }
a.button {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s4); border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font-weight: var(--bold); text-decoration: none;
}
input {
  min-height: var(--target); padding: 0 var(--s3); border: var(--hairline) solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--body);
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.row input { flex: 1; min-width: 12em; }

.page { max-width: var(--form-width); margin: 0 auto; padding: var(--s6) var(--s4); }
.page h1 { font-size: var(--title); line-height: 1.1; margin: 0 0 var(--s4); }
.who { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.create { display: grid; gap: var(--s2); margin: 0 0 var(--s6); }
.pads { list-style: none; margin: 0; padding: 0; }
.pads li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s4); padding: var(--s2) 0; border-bottom: var(--hairline) solid var(--line); }
.meta, .empty { color: var(--muted); font-size: var(--small); }

.bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  max-width: var(--main-width); margin: 0 auto; padding: var(--s2) var(--s4); border-bottom: var(--hairline) solid var(--line);
}
.home { font-weight: var(--bold); text-decoration: none; }

/* The save status: green = saved, yellow = waiting for the server, red = not connected. */
.status { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--small); color: var(--muted); white-space: nowrap; }
.status::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.status[data-state='saved']::before { background: var(--ok); }
.status[data-state='saving']::before { background: var(--signal); }
.status[data-state='offline'] { color: var(--danger); font-weight: var(--bold); }
.status[data-state='offline']::before { background: var(--danger); }

.rescue {
  max-width: var(--main-width); margin: var(--s3) auto 0; padding: var(--s3) var(--s4);
  background: var(--danger-soft); border-left: var(--focus) solid var(--danger);
}
.rescue p { margin: 0 0 var(--s2); }
.rescue p:last-child { margin: 0; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Who else is here: names with their tab's colour. */
.here { flex: 1; display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; font-size: var(--small); }
.here li { display: inline-flex; align-items: center; gap: 6px; }
.here li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--peer); }
.guest-name { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--small); }
.guest-name input { width: 12em; }

.pad { max-width: var(--main-width); margin: 0 auto; padding: var(--s4); }
.guests { display: grid; gap: var(--s2); margin-top: var(--s4); font-size: var(--small); }
.more summary { cursor: pointer; color: var(--muted); }
.more form { margin-top: var(--s2); }

/* The sheet: the mirror layer and the textarea share one grid cell. The mirror holds a copy of the text and gives the
   cell its height (one line more than the text, so the textarea never scrolls inside); the textarea lies on top with a
   transparent background. Both must lay out text identically: same font, size, padding, wrapping, no ligatures. */
.sheet {
  position: relative; display: grid; min-height: 60vh;
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius);
}
.sheet:focus-within { outline: var(--focus) solid var(--focus-color); outline-offset: var(--focus-offset); }
.sheet > .mirror, .sheet > textarea {
  grid-area: 1 / 1; margin: 0; border: 0; padding: var(--s4);
  font: var(--body) / var(--leading) var(--mono); font-kerning: none; font-variant-ligatures: none; letter-spacing: normal;
  tab-size: 4; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; text-align: start;
}
.sheet > .mirror { color: transparent; padding-bottom: calc(var(--s4) + 1lh); pointer-events: none; user-select: none; }
.sheet > textarea {
  display: block; width: 100%; height: 100%; min-height: 0; resize: none; overflow: hidden; outline: none; appearance: none;
  background: transparent; color: var(--ink); caret-color: var(--ink);
}

/* Others' cursors: a caret in their colour with their name above it, their selection behind the text (highlights take
   no custom properties in every engine, so their colours are written out). */
.peer { position: absolute; width: 2px; margin-left: -1px; background: var(--peer); pointer-events: none; }
.peer-name {
  position: absolute; bottom: 100%; left: 0; padding: 0 4px; border-radius: var(--radius); background: var(--peer);
  color: #ffffff; font: 12px / 1.4 var(--sans); white-space: nowrap; user-select: none;
}
::highlight(peer0) { background-color: hsl(0 70% 42% / 0.25); }
::highlight(peer1) { background-color: hsl(30 80% 38% / 0.25); }
::highlight(peer2) { background-color: hsl(60 90% 30% / 0.25); }
::highlight(peer3) { background-color: hsl(90 60% 32% / 0.25); }
::highlight(peer4) { background-color: hsl(120 55% 32% / 0.25); }
::highlight(peer5) { background-color: hsl(150 60% 32% / 0.25); }
::highlight(peer6) { background-color: hsl(180 70% 30% / 0.25); }
::highlight(peer7) { background-color: hsl(210 70% 42% / 0.25); }
::highlight(peer8) { background-color: hsl(240 55% 52% / 0.25); }
::highlight(peer9) { background-color: hsl(270 50% 48% / 0.25); }
::highlight(peer10) { background-color: hsl(300 50% 42% / 0.25); }
::highlight(peer11) { background-color: hsl(330 65% 44% / 0.25); }