/* =====================================================================
   Saboten member system — design tokens and shared components.
   Every page pulls this. Nothing page-specific belongs here.
   ===================================================================== */

:root {
  /* Palette, taken from the marketing site */
  --bg:        #0d0d0d;
  --panel:     #151515;
  --panel-alt: #1b1b1b;
  --border:    #262626;
  --gold:      #d4af6a;
  --gold-dim:  #8f7541;
  --text:      #f2efe9;
  --muted:     rgba(242, 239, 233, 0.55);
  --faint:     rgba(242, 239, 233, 0.3);

  --danger:    #b43c3c;
  --danger-bg: rgba(180, 60, 60, 0.12);
  --ok:        #4a8f5c;
  --ok-bg:     rgba(74, 143, 92, 0.12);

  --radius:    0.5rem;
  --radius-lg: 0.75rem;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { margin: 0; }

body {
  margin: 0;
  /* dvh, not vh: on mobile vh includes the area behind the collapsing
     address bar, which pushes centred content off-centre. */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

/* --- layout ------------------------------------------------------- */

/* Centred single panel. Sign-in, errors, anything standalone.
   
   A COLUMN, NOT A ROW. As a row, a page with a panel and anything after it —
   a link back to the site, a footer — put them side by side, which is how the
   confirmation ended up squashed left with "back to sabotenkenjutsu.com"
   floating beside it.
   
   align-items: center on a row also centred short pages vertically and left
   tall ones at the top, so switching between tabs moved the content up and
   down the screen. Centring horizontally and letting the page start at the
   top is the behaviour somebody expects. */
.layout-centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1.25rem;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%,
                    rgba(212, 175, 106, 0.07), transparent 70%);
}

/* Normal admin page: header bar, then content. */
.layout-app {
  display: flex;
  flex-direction: column;
}

.appbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.appbar .mon-sm {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.appbar .wordmark {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.appbar nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
  font-size: 0.88rem;
}

.appbar nav a {
  color: var(--muted);
  text-decoration: none;
}

.appbar nav a:hover,
.appbar nav a[aria-current="page"] {
  color: var(--gold);
}

.content {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* --- panels ------------------------------------------------------- */

.card {
  width: 100%;
  max-width: 25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2.25rem 2.5rem;
  text-align: center;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.panel + .panel { margin-top: 1.25rem; }

/* --- type --------------------------------------------------------- */

h1 { margin: 0 0 0.75rem; font-size: 1.35rem; font-weight: 700; }
h2 { margin: 0 0 0.6rem;  font-size: 1.05rem; font-weight: 700; }

.wordmark-lg {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.subtitle { margin: 0 0 2.5rem; font-size: 0.85rem; color: var(--muted); }
.muted    { color: var(--muted); }
.note     { margin: 1.75rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--muted); }
.footer   { margin: 2.25rem 0 0; font-size: 0.72rem; color: var(--faint); }
.mono     { font-family: var(--mono); font-size: 0.85em; }

/* --- messages ----------------------------------------------------- */

.msg {
  margin: 0 0 1.75rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
}

.msg-error { background: var(--danger-bg); border: 1px solid rgba(180, 60, 60, 0.35); }
.msg-ok    { background: var(--ok-bg);     border: 1px solid rgba(74, 143, 92, 0.35); }

/* --- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  background: transparent;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover { background: rgba(212, 175, 106, 0.09); border-color: var(--gold); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #14100a;
}

.btn-primary:hover { background: #e0bd7a; border-color: #e0bd7a; }

/* Google's brand guidelines require their mark unmodified on a white or
   dark surface, with this wording. Recognisability beats matching the
   page palette, so this button deliberately does not use --gold. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.btn-google:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-google svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* --- links -------------------------------------------------------- */

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

a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- tables ------------------------------------------------------- */

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

.table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--panel-alt); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- forms -------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
}

.field .hint { margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--faint); }

/* A locked field must not look editable. Without this, a disabled input
   is indistinguishable from a live one on a dark theme. */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
  color: var(--muted);
  cursor: not-allowed;
}

/* Errored fields get a border so they are findable by scanning rather
   than by reading every hint. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}

.field .hint-error { color: var(--danger); }

/* --- misc -------------------------------------------------------- */

.mon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.75rem;
  display: block;
}

.stack > * + * { margin-top: 1rem; }

.row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.spacer { margin-left: auto; }

@media (max-width: 26rem) {
  .card { padding: 2.25rem 1.5rem 2rem; }
  .content { padding: 1.5rem 1rem 3rem; }
  .appbar { padding: 0.75rem 1rem; }
}