/* ==========================================================================
   Nixie — studio management for dance
   Shared design system for every screen in the application.

   World: warm cream ground, dusty rose primary, sage secondary, soft radii.
   Deliberately the inverse of Pylon's hard-edged white/turquoise grid.
   ========================================================================== */

:root {
  --rose:        #d9a3ab;
  --rose-deep:   #94505d;   /* text-safe rose: 5.89:1 white, 5.66 cream, 5.31 faint, 4.77 wash.
                               The original #b8737f was only 3.62:1 on white and failed AA. */
  --rose-on-wash: #94505d;  /* same value; kept so existing references resolve. */
  --rose-wash:   #f2e4e6;
  --rose-faint:  #faf1f2;

  --sage:        #9db8a4;
  --sage-deep:   #4f6d58;   /* text-safe sage: 5.74:1 white, 5.52 cream, 4.90 wash.
                               The original #4f6d58 was 4.39:1 on white and failed AA. */
  --sage-on-wash: #4a6553; /* 5.47:1 on sage-wash; --sage-deep is 3.75:1 there. */
  --sage-wash:   #e7efe9;

  --gold:        #e8cf9a;
  --gold-deep:   #7d612c;   /* 5.03:1 on the gold wash; #9a7c3f measured 3.41 and failed. */

  --cream:       #fdfaf7;
  --paper:       #ffffff;
  --linen:       #f6f0ec;

  --ink:         #4a3f42;   /* 8.9:1 on cream */
  --ink-soft:    #6b5d61;   /* 5.9:1 on cream */
  --muted:       #6f6368;   /* 5.52:1 on cream, 4.97:1 on rose-tinted rows. Earlier #7d7176 (4.49) and #786c71 (4.35 on tint) both failed AA. */

  --line:        #ebe0dd;
  --line-strong: #dccfcb;

  --ok:          #4f6d58;
  --warn:        #8a5f26;   /* 5.61:1 on white; #b07f3e was 3.53:1 and failed. */
  --late:        #9c4a55;   /* 5.96:1 white, 5.73 cream, 4.83 on its own wash. the previous #b3606a was 4.38 and failed. */
  --late-on-wash: #9c4a55; /* 4.83:1 on the late wash; --late is 3.55:1 there. */

  /* Small radii. The product is a book of record for a business; the
     surfaces are rectangles with the corners taken off, not pills. */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 10px;
  /* Not a pill any more. The name is kept so every existing reference
     resolves without touching seventeen files. */
  --r-pill: 6px;

  /* Tight and nearly colourless. The old shadows were wide tinted glows
     that made every card hover off the page. */
  --shadow-sm: 0 1px 1px rgba(47, 40, 42, 0.04);
  --shadow:    0 1px 2px rgba(47, 40, 42, 0.06);
  --shadow-lg: 0 2px 6px rgba(47, 40, 42, 0.10);

  /* A plain ease-out. The old curve overshot and gave everything a bounce. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---------- base ---------- */

/* Without this every width:100% input overflows its container by its own
   padding, which showed up as the bank fields bleeding out of the secure
   region on the sign-up form. */
.nx, .nx *, .nx *::before, .nx *::after { box-sizing: border-box; }

.nx {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

.nx .num { font-variant-numeric: tabular-nums; }

.nx-mark { display: block; }

/* Section label. Not an eyebrow above a heading — used only to title
   a control group or a data column where the heading itself is the data. */
.nx-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- app chrome (shared by every screen) ---------- */

.nx-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

.nx-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.nx-bar .brand { display: flex; align-items: center; gap: 10px; flex: none; }
.nx-bar .brand img { height: 19px; width: auto; display: block; }
.nx-bar .studio {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
}

.nx-nav { display: flex; gap: 4px; margin-left: 12px; }
.nx-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nx-nav a:hover { background: var(--linen); color: var(--ink); }
.nx-nav a[aria-current="page"] { background: var(--rose-wash); color: var(--rose-on-wash); }

.nx-bar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.nx-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sage-wash);
  color: var(--sage-on-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.nx-avatar.rose { background: var(--rose-wash); color: var(--rose-on-wash); }
.nx-avatar.gold { background: #f7eed9; color: var(--gold-deep); }

.nx-main { flex: 1; padding: 24px 22px 40px; }
.nx-wrap { max-width: 1240px; margin: 0 auto; }

/* ---------- page heading ---------- */

.nx-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.nx-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.nx-head h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.nx-head p { font-size: 14px; color: var(--muted); margin: 5px 0 0; }
.nx-head .actions {
  margin-left: auto;
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  flex: none;
}

/* ---------- cards ---------- */

.nx-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.nx-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.nx-card-h h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.nx-card-h .sub { font-size: 12.5px; color: var(--muted); }
.nx-card-b { padding: 18px; }

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

.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rose-deep);
  background: var(--rose-deep);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.nx-btn:hover { background: #a45d69; border-color: #a45d69; }
.nx-btn:active { transform: translateY(1px); }
.nx-btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.nx-btn.ghost:hover { background: var(--linen); }
.nx-btn.sage { background: var(--sage-deep); border-color: var(--sage-deep); }
.nx-btn.sage:hover { background: #4f6d58; border-color: #4f6d58; }
.nx-btn.sm { font-size: 12.5px; padding: 6px 13px; }
.nx-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.nx-btn:focus-visible,
.nx-nav a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 2px;
}

/* ---------- pills / chips ---------- */

.nx-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--linen);
  color: var(--ink-soft);
  white-space: nowrap;
}
.nx-pill.rose { background: var(--rose-wash); color: var(--rose-on-wash); }
.nx-pill.sage { background: var(--sage-wash); color: var(--sage-on-wash); }
.nx-pill.gold { background: #f7eed9; color: var(--gold-deep); }
.nx-pill.late { background: #f6e3e5; color: var(--late-on-wash); }

.nx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

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

/* A wide table on a phone scrolls inside its own card rather than widening
   the page. Hiding columns would hide the ledger, which is the content. */
.nx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.nx-card-b > .nx-table, .nx-card > .nx-table { min-width: 0; }
@media (max-width: 720px) {
  .nx-card-b:has(> .nx-table), .nx-card > .nx-table { overflow-x: auto; display: block; }
  .nx-table { min-width: 620px; }
}

.nx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nx-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.nx-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle; }
.nx-table tr:last-child td { border-bottom: 0; }
.nx-table td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.nx-table th.n { text-align: right; }
.nx-table tbody tr:hover { background: var(--rose-faint); }
.nx-table .who { display: flex; align-items: center; gap: 10px; }
.nx-table .who b { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.nx-table .who span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

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

.nx-field { display: block; margin-bottom: 14px; }
.nx-field > span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.nx-input, .nx-select, .nx-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.nx-input:focus, .nx-select:focus, .nx-textarea:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-wash);
  outline: none;
}
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--muted); }
.nx-textarea { resize: vertical; min-height: 84px; line-height: 1.55; }

/* ---------- utility ---------- */

.nx-muted { color: var(--muted); }
.nx-fine { font-size: 12px; color: var(--muted); line-height: 1.55; }
.nx-hr { height: 1px; background: var(--line); border: 0; margin: 18px 0; }
.nx-grid { display: grid; gap: 16px; min-width: 0; }
/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content and pushes the page wider than the viewport on a
   phone. Every screen here is embedded and also read at 390px, so the
   floor is removed globally rather than patched per screen. */
.nx-grid > *, .nx-card, .nx-card-b, .nx-card-h, .nx-main, .nx-wrap { min-width: 0; }
.nx-card-h { flex-wrap: wrap; }

html, body { max-width: 100%; overflow-x: hidden; }

/* Screens are also embedded inside fixed-size iframes on the Devices page.
   They must look composed at an exact size, so they do not rely on the
   viewport being any particular height. */
.nx-embed-note { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}