/* Every colour is a light/dark pair; `color-scheme` below picks the side. */
:root {
  color-scheme: light dark;
  /* Light matches the cream background baked into logo.png so the mark blends in. */
  --bg: light-dark(#fcf9ee, #15191d);
  --panel: light-dark(#fffdf8, #1e242a);
  --panel-2: light-dark(#f8f1de, #272e35);
  --text: light-dark(#2a5473, #e6edf3);
  --text-soft: light-dark(#4a5f70, #c3ccd5);
  --muted: light-dark(#8b8377, #97a2ac);
  --accent: light-dark(#f9c33c, #f9c33c);
  --accent-hover: light-dark(#f2a81c, #ffd25f);
  --on-accent: light-dark(#40300a, #40300a);
  --link: light-dark(#c2661a, #f0a05a);
  --danger: light-dark(#c0392b, #ff8a7a);
  --border: light-dark(#ecdfc4, #333b43);
  --input-bg: light-dark(#fff, #12171b);
  --accent-soft: light-dark(#fff6db, #3a3117);
  --accent-soft-text: light-dark(#8a6203, #f5cf72);
  --row-highlight: light-dark(#fff8e3, #2b3138);
  --success-bg: light-dark(#eef8f1, #16301f);
  --success-border: light-dark(#bfe2cc, #2f6b46);
  --success-text: light-dark(#226644, #8fe0ae);
  --danger-bg: light-dark(#fdeeec, #331b19);
  --danger-border: light-dark(#eec4bf, #7a3b34);
  --danger-text: light-dark(#8c2b20, #ffb3a7);
  --shadow-color: light-dark(rgba(90, 70, 30, 0.06), rgba(0, 0, 0, 0.38));
  --shadow: 0 1px 2px var(--shadow-color), 0 8px 20px var(--shadow-color);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font: 16px/1.55 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Taps get their feedback from the :active rules below instead of iOS's grey flash. */
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--link); text-decoration: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  /* The env() insets keep clear of the notch, status bar, and home indicator when the
     page runs edge to edge as an installed iOS app; they are 0 everywhere else. */
  padding: calc(0.85rem + env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
    0.85rem max(1.25rem, env(safe-area-inset-left));
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand img { display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.tagline { color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0; }
.topbar nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.topbar nav a, .topbar nav button { white-space: nowrap; }

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; border-radius: 50%; }
.menu .avatar {
  display: block;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px solid var(--border);
}
.menu[open] .avatar { border-color: var(--accent-hover); }
.menu-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 11rem;
  padding: 0.85rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.menu-user {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
  color: var(--muted);
  font-size: 0.85rem;
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem max(1.25rem, env(safe-area-inset-right))
    calc(4rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

h1, h2 { color: var(--text); }
h1 { font-size: 1.6rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
/* Free text typed by a user, so keep their line breaks. */
.description { white-space: pre-wrap; margin: 0 0 1rem; }

.page-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.page-head > h1 { margin-bottom: 0; }
header.page-head { margin-bottom: 0.75rem; }
.page-head > .button-link, .page-head > .actions { margin-left: auto; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.card.narrow { max-width: 420px; margin-inline: auto; }
.card.highlight { border-color: var(--accent-hover); }

.hero-logo {
  display: block;
  width: min(340px, 78vw);
  height: auto;
  margin: 1rem auto 0.5rem;
  /* The artwork has a cream square baked in; round it so it reads as a tile in dark mode. */
  border-radius: 24px;
}

.hero-text {
  margin: 0 auto 1.5rem;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

/* Keep the `hidden` attribute winning over the `display` rules below. */
[hidden] { display: none !important; }

label { display: block; margin-bottom: 0.9rem; font-size: 0.9rem; color: var(--muted); }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.65rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}
textarea { font-family: inherit; resize: vertical; }
.competition-description small { display: block; }
.competition-description textarea { max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-hover); }

button {
  padding: 0.55rem 1.1rem;
  min-height: 2.75rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
button.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
button.link { background: none; color: var(--link); padding: 0; min-height: 0; font-weight: 400; }
button.danger, a.button-link.danger { color: var(--danger); }

/* Anchors that need to sit next to real buttons. */
.button-link {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  min-height: 2.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.95rem;
  font-weight: 700;
}
.button-link.secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.subnav { display: flex; gap: 1rem; margin: 0 0 1.25rem; }
.subnav a { color: var(--muted); font-weight: 600; }
.subnav a.current { color: var(--text); text-decoration: underline; }

label.checkbox { display: flex; align-items: center; gap: 0.5rem; color: var(--text); }
label.checkbox input { width: auto; margin-top: 0; }

.avatar-picker { margin: 0 0 0.9rem; padding: 0; border: 0; }
.avatar-picker legend { margin-bottom: 0.45rem; padding: 0; font-size: 0.9rem; color: var(--muted); }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 0.5rem; }
.avatar-option { margin: 0; cursor: pointer; }
/* The radio stays focusable but invisible; the image is the control. */
.avatar-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-option img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.3rem;
  background: var(--panel-2);
  border: 2px solid transparent;
  border-radius: 12px;
}
.avatar-option input:checked + img { background: var(--accent-soft); border-color: var(--accent-hover); }
.avatar-option input:focus-visible + img { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* Grouped fields that should still stack like plain labels. */
fieldset.stack { margin: 0 0 0.9rem; padding: 0; border: 0; }
fieldset.stack legend { margin-bottom: 0.45rem; padding: 0; font-size: 0.9rem; color: var(--muted); }
fieldset.stack label.checkbox { margin-bottom: 0.4rem; }

form.inline { display: inline; }
.visibility-toggle { font: inherit; }
.browse-form { margin-bottom: 1rem; }
.browse-form .checkbox { margin-top: 0.6rem; }
.inline-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.inline-form input { flex: 1 1 8rem; width: auto; min-width: 0; margin-top: 0; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { border-top: 1px solid var(--border); }
.list li:first-child { border-top: 0; }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  color: var(--text);
}
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row strong { color: var(--text); }

.badge {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-in-progress, .badge-accepted {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-soft-text);
}
.badge-declined { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }

.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-head h1 { margin: 0; }
.profile-head p { margin: 0.15rem 0 0; }
.profile-head img { border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); }
.profile-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; margin: 0 0 1rem; }
.profile-facts dt { color: var(--muted); font-size: 0.85rem; }
.profile-facts dd { margin: 0; }
.profile-facts dd.break { overflow-wrap: anywhere; }

a.user-chip { color: inherit; }
.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.user-chip img {
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
td small { display: block; }
.entry-table td:first-child { white-space: nowrap; }
.entry-table td:first-child small { white-space: normal; }
.entry-table .inline-form { flex-wrap: nowrap; }
.entry-table .inline-form input { flex: 0 1 6rem; }
.entry-table button { padding: 0.5rem 0.9rem; }
.entry-view { display: inline-flex; align-items: center; }
/* Bare pencil and X icons: narrow so they sit close, but still full height to tap. */
.entry-table button.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; padding: 0; background: none; color: var(--muted);
}
.entry-table button.icon-button.save { color: var(--link); }
.entry-table .entry-edit { gap: 0.25rem; }
/* Long emails break so the trailing action column stays on screen; dates never do. */
.admin-table td { overflow-wrap: break-word; }
.admin-table td.break { overflow-wrap: anywhere; }
.admin-table td.nowrap { white-space: nowrap; }
.admin-table td:last-child { text-align: right; white-space: nowrap; }
tr.me { background: var(--row-highlight); }

.progress { height: 12px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); }
.progress-summary { margin: 0 0 0.5rem; }

.flash {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  margin: 0 0 1rem;
}
.flash-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.flash-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.flash ul, ul.flash { margin: 0; padding-left: 1.1rem; }

[hidden] { display: none !important; }

/* Competition comments */
.comment-form { margin-top: 1.1rem; }
.comment-form textarea { width: 100%; max-width: 100%; }
.comment-form button { margin-top: 0.85rem; }
.comments li { padding: 0.8rem 0.6rem; }
.comments li.me { background: var(--row-highlight); }
.comment-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.comment-head small { white-space: nowrap; }
.comment-body { white-space: pre-wrap; margin: 0.45rem 0 0; }
.comment-deleted { margin: 0.45rem 0 0; font-style: italic; }
.comment-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0 auto; }
/* Link-styled, so pad them into something a finger can hit without growing the text. */
.comment-actions button { padding: 0.5rem 0.2rem; font-size: 0.85rem; }
.reactions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; }
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.1rem;
  padding: 0.1rem 0.6rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}
.reaction.mine { background: var(--accent-soft); color: var(--accent-soft-text); border-color: var(--accent-hover); }
.reaction-picker { position: relative; }
.reaction-picker summary { list-style: none; cursor: pointer; color: var(--muted); }
.reaction-picker summary::-webkit-details-marker { display: none; }
.reaction-picker[open] summary {
  color: var(--text);
  border-color: var(--accent-hover);
}
.reaction-picker summary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.reaction-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.35rem);
  left: 0;
  display: flex;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.reaction-menu button {
  min-height: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.1s;
}
.reaction-menu button:focus-visible {
  background: var(--panel-2);
  transform: scale(1.15);
}
.reaction-menu button.mine { background: var(--accent-soft); }
.comment-edit { margin-top: 0.45rem; }
.comment-edit textarea { width: 100%; max-width: 100%; }
.comment-edit .actions { margin-top: 0.5rem; }
.comment-edit button { padding: 0.4rem 0.9rem; font-size: 0.9rem; }

/* Hover styles only where there is a real pointer: iOS keeps :hover applied after a tap,
   leaving links underlined and buttons highlighted until you tap somewhere else. */
@media (hover: hover) {
  a:hover { text-decoration: underline; }
  .brand:hover { color: var(--link); text-decoration: none; }
  .menu summary:hover .avatar { border-color: var(--accent-hover); }
  button:not(.secondary):hover { background: var(--accent-hover); }
  button.link:hover { background: none; text-decoration: underline; }
  .button-link:hover { text-decoration: none; }
  .button-link:not(.secondary):hover { background: var(--accent-hover); }
  a.row:hover { text-decoration: none; color: var(--link); }
  a.user-chip:hover span { text-decoration: underline; }
  button.reaction:hover { background: var(--accent-soft); border-color: var(--accent-hover); }
  .reaction-picker summary:hover { color: var(--text); border-color: var(--accent-hover); }
  .reaction-menu button:hover { background: var(--panel-2); transform: scale(1.15); }
  .entry-table button.icon-button:hover { background: none; color: var(--link); }
}

/* Touch feedback while a finger is down. */
button:active, .button-link:active { background: var(--accent-hover); }
button.secondary:active, .button-link.secondary:active { background: var(--border); }
button.link:active { background: none; }
button.link:active, a:not(.button-link):active { opacity: 0.6; }
button.reaction:active { background: var(--accent-soft); border-color: var(--accent-hover); }
.reaction-menu button:active { background: var(--panel-2); }
.entry-table button.icon-button:active { background: none; color: var(--link); }

@media (max-width: 600px) {
  main {
    padding: 1.1rem max(0.85rem, env(safe-area-inset-right))
      calc(3rem + env(safe-area-inset-bottom)) max(0.85rem, env(safe-area-inset-left));
  }
  h1 { font-size: 1.35rem; }
  .card { padding: 1rem; border-radius: 12px; }
  .card.narrow { max-width: none; }
  table { font-size: 0.92rem; }
  th, td { padding: 0.45rem 0.4rem 0.45rem 0; }
  .hero-logo { margin-top: 0.25rem; }
  .hero-text { font-size: 1.3rem; }
  /* Competition links: let the title use the full width and drop the badge below. */
  a.row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

@media (max-width: 460px) {
  .topbar {
    padding: calc(0.7rem + env(safe-area-inset-top)) max(0.85rem, env(safe-area-inset-right))
      0.7rem max(0.85rem, env(safe-area-inset-left));
    column-gap: 0.75rem;
  }
  .brand { font-size: 1.1rem; gap: 0.45rem; }
  .brand img { width: 34px; height: 34px; }
  .tagline { font-size: 0.68rem; }
  .topbar nav { gap: 0.7rem; }
}

/* iOS 26 blurs the top of an installed web app just below its status bar, which smeared
   the logo and avatar. Extra room in the installed app keeps them below the blur, over
   plain top-bar colour; browser tabs keep the tighter bar. */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(1.5rem + env(safe-area-inset-top)); }
}