/* Design tokens and fonts from the laugh.town design system (laugh.town/DESIGN.md),
   by way of question.town's src/app.css. send's own accent is a green. */

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: block;
  font-weight: 200 800;
  src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: block;
  font-weight: 200 800;
  src: url('/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Parkinsans Variable';
  font-style: normal;
  font-display: block;
  font-weight: 300 800;
  src: url('/fonts/parkinsans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Parkinsans Variable';
  font-style: normal;
  font-display: block;
  font-weight: 300 800;
  src: url('/fonts/parkinsans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Londrina Sketch';
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url('/fonts/londrina-sketch-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Londrina Solid';
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url('/fonts/londrina-solid-latin-400-normal.woff2') format('woff2');
}

:root {
  --color-bg-page: oklch(100% 0 0);
  --color-bg-surface: oklch(100% 0 0);
  --color-bg-raised: oklch(96% 0.005 80);
  --color-bg-hover: oklch(94% 0.007 80);
  --color-bg-active: oklch(91% 0.009 80);
  --color-bg-subtle: oklch(97.5% 0.004 80);
  --color-text: oklch(20% 0.01 80);
  --color-text-secondary: oklch(35% 0.008 80);
  --color-text-muted: oklch(55% 0.005 80);
  --color-text-on-primary: oklch(100% 0 0);
  --color-primary: oklch(58% 0.22 25);
  --color-danger: oklch(45% 0.18 30);
  --color-danger-bg: oklch(95% 0.04 30);
  --color-warning: oklch(58% 0.13 75);
  --color-border: oklch(82% 0.005 80);
  --color-border-strong: oklch(20% 0.01 80);
  --color-border-subtle: oklch(90% 0.005 80);

  --control-h: 30px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --font-body: 'Parkinsans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque Variable', 'Parkinsans Variable', sans-serif;
  --font-masthead: 'Londrina Sketch', 'Chalkboard', cursive;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.375rem;
  --text-xl: 1.875rem;

  --content-max: 600px;
  --safe-bottom: max(calc(env(safe-area-inset-bottom) - 10px), 6px);

  /* send's accent */
  --accent: #157a52;
  --accent-hover: #0e6141;
  --accent-wash: #e5f5ed;
  --on-accent: #ffffff;
  color-scheme: light;
}

/* Dark mode, late-edition press: deep ink paper, bright newsprint type.
   Follows the system setting; there is no in-page toggle. */
@media (prefers-color-scheme: dark) {
:root {
  --color-bg-page: oklch(16% 0.005 80);
  --color-bg-surface: oklch(19% 0.005 80);
  --color-bg-raised: oklch(23% 0.006 80);
  --color-bg-hover: oklch(27% 0.007 80);
  --color-bg-active: oklch(30% 0.01 80);
  --color-bg-subtle: oklch(21% 0.005 80);
  --color-text: oklch(92% 0.005 80);
  --color-text-secondary: oklch(78% 0.005 80);
  --color-text-muted: oklch(65% 0.005 80);
  --color-text-on-primary: oklch(98% 0.005 80);
  --color-primary: oklch(70% 0.2 25);
  --color-danger: oklch(62% 0.2 30);
  --color-danger-bg: oklch(28% 0.06 30);
  --color-warning: oklch(82% 0.14 80);
  --color-border: oklch(35% 0.008 80);
  --color-border-strong: oklch(42% 0.006 80);
  --color-border-subtle: oklch(28% 0.008 80);
  /* Sketch outline goes faint as white-on-dark; use the filled cut instead. */
  --font-masthead: 'Londrina Solid', 'Chalkboard', cursive;

  --accent: #4cc493;
  --accent-hover: #6fd6ac;
  --accent-wash: #0b2a1e;
  --on-accent: #14130f;
  color-scheme: dark;
}
}

@media (pointer: coarse) {
  :root { --control-h: 40px; }
}

/* ===== Reset & base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
*:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
::selection { background: var(--color-primary); color: var(--color-text-on-primary); }

html { scrollbar-gutter: stable; background: var(--color-bg-page); }

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg-page);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.08s;
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--accent); }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-sm);
}
h1 { font-size: var(--text-xl); font-weight: 700; }
h2 { font-size: var(--text-md); }

code { font-size: 0.92em; }

/* ===== Page frame ===== */
#app {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 602px) {
  #app { border-inline: 1px solid var(--color-border-subtle); }
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 2px solid var(--color-border-strong);
}

.wordmark {
  font-family: var(--font-masthead);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  user-select: none;
}

.who {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  min-width: 0;
}
.who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content {
  flex: 1;
  padding: var(--space-lg) var(--space-md) calc(var(--space-xl) + var(--safe-bottom));
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.foot p { max-width: 34em; }

.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.muted { font-size: var(--text-sm); color: var(--color-text-secondary); }
.error-text { font-size: var(--text-sm); color: var(--color-danger); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ===== Controls ===== */
.btn {
  font: inherit;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-h);
  padding: 0 var(--space-md);
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.btn.ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn.danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn.small { min-height: 26px; padding: 0 10px; font-size: var(--text-sm); }
.btn:disabled { opacity: 0.5; cursor: default; }
@media (pointer: coarse) {
  .btn { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn.ghost:hover:not(:disabled) { background: var(--color-bg-hover); border-color: var(--color-border-strong); }
  .btn.danger:hover:not(:disabled) { background: var(--color-danger-bg); border-color: var(--color-danger); }
}

.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field > label, .label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.input {
  font: inherit;
  font-size: 16px;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-xs) var(--space-sm);
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg-surface);
  color: var(--color-text);
  border-radius: 0;
}
textarea.input {
  resize: vertical;
  min-height: 9em;
  padding: var(--space-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
}
/* Select and number fields look the same: square, no native chrome. The
   select's chevron is two gradient strokes in currentColor, so it follows the theme. */
select.input,
input.input[type='number'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  height: 40px;
  line-height: 1.2;
}
select.input {
  padding-right: 32px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
input.input[type='number']::-webkit-inner-spin-button,
input.input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

/* Tabs: agate-ish labels, accent underline on the active one */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-strong);
  margin-bottom: var(--space-lg);
}
.tabs button {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px 6px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.tabs button[aria-selected='true'] { color: var(--color-text); border-bottom-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .tabs button:hover { color: var(--color-text); }
}

/* Drop zone */
.drop {
  border: 2px dashed var(--color-border-strong);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: var(--color-bg-surface);
}
.drop.over { border-color: var(--accent); background: var(--accent-wash); }
.drop .title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-sm); }

/* Lists */
.files { list-style: none; max-height: 16rem; overflow: auto; }
.files li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}
.files li .num { flex: none; color: var(--color-text-secondary); font-size: var(--text-sm); }

.card {
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg-surface);
  padding: var(--space-md);
}
.card.done { border-color: var(--accent); background: var(--accent-wash); }
.link-row { display: flex; gap: var(--space-sm); }
.link-row .input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }

progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg-surface);
}
progress::-webkit-progress-bar { background: var(--color-bg-surface); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: var(--space-xs);
  border-bottom: 3px double var(--color-border-strong);
  margin: var(--space-2xl) 0 0;
}

.shares { list-style: none; }
.shares li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.shares .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shares .kind {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--color-border-strong);
  padding: 0 4px;
  margin-right: 6px;
  vertical-align: 1px;
}
.shares .meta { grid-column: 1; font-size: var(--text-sm); color: var(--color-text-secondary); }
.shares .actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--space-xs); }
.shares .empty { display: block; color: var(--color-text-secondary); font-size: var(--text-sm); }

.secret-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.center { justify-content: center; }
.note { margin-top: var(--space-sm); }