/* ==========================================================================
   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.
   ========================================================================== */

/* Phones inflate text inside wide blocks when read in portrait, rendering
   type larger than the size set here and pushing layouts off the screen.
   The application is measured at 320px, so that inflation is held off. */
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

: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;
  }
}

/* ---------------------------------------------------------------- legal bar
   Appended to every app screen by shell.js, matching the public site's
   footer. Skipped inside an embedded frame. */
.nx-legal {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 18px 22px 24px;
  font-size: 12.5px;
  color: var(--muted);
}
.nx-legal-in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}
.nx-legal p { margin: 0; }
.nx-legal nav { display: flex; flex-wrap: wrap; gap: 16px; margin-inline-start: auto; }
.nx-legal a { color: var(--ink-soft); text-decoration: none; }
.nx-legal a:hover { color: var(--rose-deep); text-decoration: underline; }

@media (max-width: 560px) {
  .nx-legal nav { margin-inline-start: 0; }
}

/* ---------------------------------------------------------- small phones
   At 320px a 22px gutter on both sides spends 44px, which is 14% of the
   screen. Tables and cards need those pixels more than the margin does, so
   the gutter tightens and cards give back a little of their inner padding.
   Touch targets are untouched: they stay at 44px. */
@media (max-width: 380px) {
  .nx-main { padding: 18px 14px 32px; }
  .nx-card, .nx-card-b { padding-inline: 14px; }
  .nx-head { gap: 12px; margin-bottom: 16px; }
  .nx-legal { padding: 16px 14px 22px; }

  /* a wide table keeps its own scroll, and runs to the edge while it does,
     so the columns have every pixel available before scrolling starts */
  .nx-scroll {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}