/* Default page styles.
 *
 * The Go layout ships a small inline base style; this file is the operator-
 * editable layer. A brand copies templates/default/ to templates/<base-domain>/
 * and edits these variables (and the CSS below) to restyle the site. The same
 * folder is duplicated onto the Hugo site, so both render identically.
 */

:root {
  color-scheme: light;
  --ls-brand: #6366f1;
  --ls-text: #1f2937;
  --ls-muted: #6b7280;
  --ls-surface: #ffffff;
  --ls-border: #d1d5db;
  --ls-radius: 8px;
  --ls-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body {
  background: var(--ls-surface);
  color: var(--ls-text);
}

body {
  font-family: var(--ls-font);
  overflow-wrap: anywhere;
}

input, select, textarea, button {
  color: inherit;
  font: inherit;
  background: var(--ls-surface);
}

/* Tables and long values (emails, ids, keys) must wrap, not overflow. */
table { width: 100%; border-collapse: collapse; }
th, td { overflow-wrap: anywhere; vertical-align: top; }
code, textarea, pre { word-break: break-word; }

a {
  color: var(--ls-brand);
}

/* Site header brand: logo with the brand name sized up and vertically centred
   against the logo, and no link underline. */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}
.site-header .brand:hover { text-decoration: none; }
.site-header .brand .brand-logo { display: block; }
.site-header .brand .brand-text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.badge {
  background: color-mix(in srgb, var(--ls-brand) 15%, transparent);
  border-color: color-mix(in srgb, var(--ls-brand) 40%, transparent);
}

/* Equal-length visibility buttons (Public/Direct/Hidden); the applied option is
   shown in the brand colour. */
.btn-vis { min-width: 5.5rem; text-align: center; }
.btn-active {
  background: var(--ls-brand);
  border-color: var(--ls-brand);
  color: #fff;
  cursor: default;
}

/* Gold star marking the most-popular price. */
.star-gold { color: #eab308; }

/* Keep short table cells (e.g. type, amount) on one line. */
td.nowrap, th.nowrap { white-space: nowrap; overflow-wrap: normal; }

/* Visibility buttons stack vertically with a small, even gap. */
.vis-btns { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }

/* Centre a cell's content: text, badges and stacked controls line up on the
   column. Badges/text above or below a badge are centred with it. */
td.cell-center, th.cell-center { text-align: center; }
td.cell-center .vis-btns { align-items: center; }
td.cell-center form { display: inline-block; }