:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1c2330;
  --muted: #67707f;
  --accent: #3457d5;
  --accent-hover: #2a46ad;
  --border: #d4d9e2;
  --error: #b3261e;
  --warn-bg: #fff4e0;
  --warn-border: #e0a63c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --surface: #1d222a;
    --text: #e6e9ee;
    --muted: #9aa3b0;
    --accent: #6a8dff;
    --accent-hover: #85a2ff;
    --border: #333b47;
    --error: #ff8a80;
    --warn-bg: #33290f;
    --warn-border: #c79a3a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

main {
  max-width: 46rem;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

main.narrow { max-width: 24rem; }

h1 { margin-top: 0; font-size: 1.5rem; }
h2 { font-size: 1.15rem; }

.muted { color: var(--muted); font-size: 0.9rem; }
.muted a { color: var(--accent); }

label { display: block; margin: 1rem 0 0.25rem; font-weight: 600; font-size: 0.9rem; }

textarea, input[type="text"], input[type="password"], input[type="date"], input[type="time"], select {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  /* Fields sit inside a label, whose 0.9rem they would otherwise inherit.
     Below 16px, Safari iOS zooms the page in on focus and never zooms back
     out. */
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* rows="10" is measured for a desktop screen; on a phone held sideways it
   pushes the submit button out of sight. */
textarea { resize: vertical; max-height: 50vh; font-family: ui-monospace, monospace; }

textarea:focus, input:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1.25rem;
  align-items: end;
}

label.checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
label.checkbox input { width: auto; margin: 0; }

button, .btn {
  padding: 0.6rem 1.2rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button { margin-top: 1.25rem; color: #fff; background: var(--accent); }

/* Navigation that looks like a button but stays a link: quiet, so that it
   never competes with the action the page is there for. */
.btn, button.quiet {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  text-decoration: none;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* A tap leaves the hovered shade stuck on the button until something else is
   touched: there is no pointer to move away. */
@media (hover: hover) {
  button:hover { background: var(--accent-hover); }
  .btn:hover, button.quiet:hover { background: var(--bg); }
}
button:disabled { opacity: 0.6; cursor: wait; }

/* A field and its button on one line. min-width: 0 because a flex item takes
   the field's intrinsic width as its floor otherwise, which overflows a
   phone-sized screen instead of shrinking. */
.copy-row, .field-row { display: flex; gap: 0.5rem; align-items: center; }
.copy-row input, .field-row input { flex: 1; min-width: 0; }
.copy-row button, .field-row button { margin-top: 0.35rem; white-space: nowrap; }

/* An icon button: the padding of a worded one would eat the field it sits
   next to. It stretches instead of being padded to size, so that it keeps the
   field's height whatever that height becomes. Which glyph shows is read off
   aria-pressed, so the state is declared once, where assistive technology
   already looks for it. */
.reveal { align-self: stretch; padding: 0.55rem; line-height: 0; }
.reveal svg { display: block; }
.reveal[aria-pressed="false"] .icon-hide,
.reveal[aria-pressed="true"] .icon-show { display: none; }

pre {
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
}

.error { color: var(--error); font-weight: 600; }

.warn {
  padding: 0.75rem 1rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 8px;
}

.hidden { display: none; }

/* --- The creator's inventory ---------------------------------------------- */

.secret {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* A secret that is no longer readable stays in the list, and reads as settled
   rather than as one more live entry. */
.secret.gone { background: var(--bg); }

/* The identifier names the entry: it is what appears in the link handed out,
   and the only handle a creator has on a secret the server cannot describe. */
.secret h2 {
  margin: 0;
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.secret form { margin: 0; }
.secret button { margin-top: 0.9rem; }

.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }

.badge {
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.badge.state { color: var(--accent); border-color: var(--accent); }
.secret.gone .badge.state { color: var(--muted); border-color: var(--border); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.facts code { font-family: ui-monospace, monospace; }

details { margin-top: 0.8rem; }
summary { cursor: pointer; font-size: 0.9rem; color: var(--accent); }
summary + p { margin: 0.5rem 0 0; }

/* The access log is the one table here, and a phone screen is narrower than
   its four columns: it scrolls inside its own box rather than widening the
   page. */
.scroller { overflow-x: auto; margin-top: 0.6rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

th, td {
  padding: 0.4rem 0.7rem 0.4rem 0;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

th { color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.stamp { font-family: ui-monospace, monospace; }
td.agent { min-width: 16rem; white-space: normal; color: var(--muted); }

/* The sweep sits above the list, where what it clears is in view. */
.sweep { margin: 0; }
.sweep button { margin-top: 0; }

/* Below its max-width the card spans the whole screen: the horizontal "auto"
   margin collapses to zero and 2rem of padding on each side eats a fifth of a
   360px screen. */
@media (max-width: 48rem) {
  main { margin: 0.75rem; padding: 1.25rem; }
}

/* A fingertip needs about 44px. The width condition is there for the browsers
   that report a fine pointer while being driven by touch. */
@media (pointer: coarse), (max-width: 30rem) {
  button, .btn { min-height: 44px; }
  label.checkbox { min-height: 44px; }
  /* An icon button is as narrow as it is tall: the height rule alone would
     leave a target no thumb can aim at. */
  .reveal { min-width: 44px; }
  /* Padding rather than a height: a flex summary loses its disclosure marker
     on WebKit and Blink. */
  summary { padding-block: 0.8rem; }
  .muted a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
  }
}