/* community.wovin.tv — the public store and pool gallery.
   Every colour is a token from tokens.css; there is no hex literal in this
   file and a Go test says so. Geometry follows the design language: 12px
   cards on hairlines with no shadow, 8px controls, mono eyebrows.

   No JavaScript is served by this site at all, so every state visible here is
   a state the server rendered. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* ── family law ─────────────────────────────────────────────────────────
   One attribute sets the accent an element and its children wear. The map
   is the spec's: universes are ruby, rule packs teal, channel templates
   gold, people sky, the pool sand. */
[data-family='universe'] {
  --dom: var(--am);
  --dom-line: var(--am-line);
}

[data-family='rules'] {
  --dom: var(--sa);
  --dom-line: var(--sa-line);
}

[data-family='channel_template'] {
  --dom: var(--ci);
  --dom-line: var(--ci-line);
}

[data-family='author'] {
  --dom: var(--lp);
  --dom-line: var(--lp-line);
}

[data-family='pool'] {
  --dom: var(--cn);
  --dom-line: var(--cn-line);
}

/* ── shell ──────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

@media (max-width: 720px) {
  .shell {
    padding-inline: 20px;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--panel);
  color: var(--ink-hi);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-ctl);
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
}

/* ── masthead ───────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--bg1);
}

.masthead .bar {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--strip-h);
  padding-block: 10px;
  flex-wrap: wrap;
}

.masthead .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-hi);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* The wordmark carries the ruby as a MARK, not as ink. Ruby on the masthead
   field is 3.9:1 -- fine for a rule, under the floor for 16px text -- so the
   letters are ink and the accent is the underline beneath them. */
.masthead .brand .mark {
  color: var(--ink-hi);
  border-bottom: 2px solid var(--am);
  padding-bottom: 1px;
}

.masthead .brand .sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.masthead nav {
  margin-inline-start: auto;
}

.masthead nav ul {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}

/* The three kind links each carry their own data-family, so --dom resolves
   per link; a link with no family (About, sign-in, the handle) falls back to
   ruby. Only the border reads the family colour -- the text stays ink-hi. */
.masthead nav a:hover {
  color: var(--ink-hi);
  border-bottom-color: var(--dom-line, var(--am-line));
}

.masthead nav a[aria-current='page'] {
  color: var(--ink-hi);
  border-bottom-color: var(--dom, var(--am));
}

.masthead .who {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
}

/* ── page furniture ─────────────────────────────────────────────────── */
main {
  display: block;
  padding-block: 34px 64px;
}

.page-title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-hi);
}

.page-title .here {
  color: var(--am);
}

.lede {
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--ink);
  font-size: 15px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 12px;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-hi);
  margin: 0 0 12px;
}

h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-hi);
  margin: 0 0 6px;
}

section {
  margin-block: 40px;
}

.prose p,
.prose li {
  max-width: 68ch;
  color: var(--ink);
}

.prose h2 {
  margin-top: 32px;
  font-size: 17px;
}

/* Links in running text are underlined, never colour alone: colour is not a
   signal for everyone, and ruby on slate is under 4.5:1 for small text. */
.prose a,
.footlinks a,
.empty a,
.wall a {
  color: var(--ink-hi);
  text-decoration: underline;
  text-decoration-color: var(--am);
  text-underline-offset: 3px;
}

/* ── panels and cards ───────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
}

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pack-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
}

.pack-card .title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.pack-card .title a {
  color: var(--ink-hi);
  text-decoration: none;
}

.pack-card .title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--dom, var(--am));
  text-underline-offset: 3px;
}

.pack-card .summary {
  margin: 0;
  color: var(--ink-dim);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pack-card .foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* ── chips ──────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid var(--dom-line, var(--rule-strong));
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Ink, not the family hue: ruby at 10px is under the contrast floor. The
     family reads from the dot and the border instead. */
  color: var(--ink-hi);
  white-space: nowrap;
}

.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--dom, var(--am));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-hi);
  border-bottom: 1px solid var(--ci);
  padding-bottom: 1px;
}

.byline {
  font-size: 12.5px;
  color: var(--ink-dim);
}

.byline a {
  color: var(--ink-hi);
  text-decoration: underline;
  text-decoration-color: var(--lp);
  text-underline-offset: 3px;
}

.counts {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.counts b {
  font-weight: 600;
  color: var(--ink);
}

/* ── tabs / filters ─────────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.filters .set {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filters ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.filters a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
  background: var(--control-well);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
}

.filters a:hover {
  color: var(--ink-hi);
  border-color: var(--rule-strong);
}

.filters a[aria-current='true'] {
  background: var(--raise);
  border-color: var(--am-line);
  color: var(--ink-hi);
}

/* ── staff health strip ─────────────────────────────────────────────── */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
  background: var(--panel);
}

.strip > div {
  padding: 18px 20px;
  border-inline-start: 1px solid var(--rule);
}

.strip > div:first-child {
  border-inline-start: 0;
}

.strip dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.strip dd {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-hi);
}

/* ── tiles ──────────────────────────────────────────────────────────── */
.tiles {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.tiles a {
  display: block;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--dom, var(--am));
  border-radius: var(--radius-tile);
  text-decoration: none;
  color: var(--ink);
}

.tiles a:hover {
  border-color: var(--rule-strong);
  border-inline-start-color: var(--dom, var(--am));
}

.tiles strong {
  display: block;
  color: var(--ink-hi);
  font-size: 14.5px;
  margin-bottom: 4px;
}

.tiles span {
  font-size: 12.5px;
  color: var(--ink-dim);
}

/* ── tables ─────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

caption {
  text-align: start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 10px;
}

th {
  text-align: start;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 14px 8px 0;
}

td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: top;
}

td.num,
th.num {
  font-family: var(--mono);
  text-align: end;
  padding-inline-end: 0;
}

/* ── detail page ────────────────────────────────────────────────────── */
.detail-head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.detail-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}

.columns {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  align-items: start;
}

@media (max-width: 860px) {
  .columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wall {
  background: var(--panel);
  border: 1px solid var(--am-line);
  border-radius: var(--radius);
  padding: 20px;
}

.wall h2 {
  margin-bottom: 8px;
}

.wall p {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 13px;
}

.wall p:last-child {
  margin-bottom: 0;
}

.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--am);
  background: var(--am);
  color: var(--ink-on-am);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.btn:hover {
  background: var(--am-hover);
  border-color: var(--am-hover);
}

/* A button in the wall panel is a button, not a link in running text. The
   underline rule above is more specific than .btn, so it takes BOTH the
   decoration and the colour with it -- and ink-hi on a ruby fill is 2.9:1. */
.wall .btn {
  color: var(--ink-on-am);
  text-decoration: none;
}

/* ── empty states ───────────────────────────────────────────────────── */
.empty {
  background: var(--panel);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
}

.empty p {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--ink);
}

.empty p + p {
  margin-top: 8px;
  color: var(--ink-dim);
  font-size: 13px;
}

.empty .eyebrow {
  margin-bottom: 10px;
}

/* ── pager ──────────────────────────────────────────────────────────── */
.pager {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.pager a {
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-ctl);
  background: var(--control-well);
  color: var(--ink-hi);
  text-decoration: none;
  font-size: 13px;
}

.pager a:hover {
  border-color: var(--am-line);
}

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--bg1);
  padding-block: 24px;
}

.site-foot .bar {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.footlinks {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.site-foot .note {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-dim);
}

/* ── focus ──────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--am);
  outline-offset: 2px;
  border-radius: var(--radius-inner);
}

/* ── walled surface ─────────────────────────────────────────────────────
   Forms, banners, the console. Same rules as everything above: colours are
   tokens, cards are --radius on a hairline, controls are --radius-ctl, and
   there is no script behind any state here. */
.narrow {
  max-width: 620px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── banners ────────────────────────────────────────────────────────────
   Never colour alone: each carries a left rule AND its own words, because a
   green bar and a red bar look the same to a lot of people. */
.banner {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--rule-strong);
  border-radius: var(--radius-ctl);
  font-size: 13.5px;
  color: var(--ink-hi);
}

.banner.ok {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  border-inline-start-color: var(--ok);
}

.banner.bad {
  background: var(--err-bg);
  border-color: var(--err-border);
  border-inline-start-color: var(--ga);
}

/* ── forms ──────────────────────────────────────────────────────────────
   Labels are always visible and always above the control: a placeholder is
   not a label, and it disappears exactly when somebody needs it. */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 24px;
}

.form.panel {
  padding: 24px;
}

.form.inline {
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field.grow {
  flex: 1 1 220px;
}

.form .row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

input[type='text'],
input[type='email'],
input[type='password'],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--control-well);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-ctl);
  color: var(--ink-hi);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

textarea {
  resize: vertical;
  min-height: 84px;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-dim);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--am-line);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-dim);
  max-width: 60ch;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── buttons ────────────────────────────────────────────────────────────
   .btn is already the ruby fill above. These are its variants: ghost for a
   secondary act, danger for one that removes something, small for a row. */
button.btn {
  font-family: inherit;
  cursor: pointer;
}

.btn.small {
  padding: 6px 12px;
  font-size: 12.5px;
}

.btn.ghost,
.btn.ghost:hover {
  background: var(--control-well);
  border-color: var(--rule-strong);
  color: var(--ink-hi);
}

.btn.ghost:hover {
  border-color: var(--am-line);
}

.btn.danger,
.btn.danger:hover {
  background: var(--control-well);
  border-color: var(--ga-line);
  color: var(--ink-hi);
}

.btn.danger:hover {
  border-color: var(--ga);
}

/* A button that has to read as a link: the sign-out control in the masthead,
   which is a form because signing out is a POST. */
.linkish {
  padding: 6px 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.linkish:hover {
  color: var(--ink-hi);
  border-bottom-color: var(--am-line);
}

.masthead .signout {
  display: flex;
  margin: 0;
}

.masthead .who {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-block: 6px;
}

.masthead .who:hover,
.masthead .who[aria-current='page'] {
  color: var(--ink-hi);
  border-bottom-color: var(--am);
}

/* ── rows of actions inside a table ─────────────────────────────────── */
.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.row-actions form {
  margin: 0;
}

.sub-id {
  display: block;
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

.alt {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-dim);
}

.alt a {
  color: var(--ink-hi);
  text-decoration: underline;
  text-decoration-color: var(--am);
  text-underline-offset: 3px;
}

details > summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-hi);
  padding-block: 8px;
}

.report {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.wall form {
  margin: 0 0 12px;
}

/* ── the console ────────────────────────────────────────────────────── */
.mod-group {
  margin-block: 20px;
}

.mod-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.mod-actions form {
  margin: 0;
}

.lookup-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.lookup-row p {
  margin: 0 0 6px;
}

code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  word-break: break-all;
}