/* Ismano Events — one stylesheet, no build step. */

/* Brand typefaces, self-hosted from the family's own web-font files. Atkinson
   Hyperlegible was designed so lookalike characters stay distinct (1 l I, 0 O),
   which is worth more than style when a cue time is read off a phone in a dark
   room. font-display: swap means text shows immediately in the fallback. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Ismano Creative 2026 palette. Navy carries buttons, headings and the top
   bar; Light Blue underlines links and tints a crew member's own sub-cues;
   Cream is text on navy. The grays keep the roles the guide gives them:
   Charcoal body text, Slate captions and labels, Mist secondary text on navy,
   Line borders, Fog backgrounds and stripes. Orange is reserved for the live
   cue and the wordmark's dot, so it stays meaningful. Garnet, emerald and
   amethyst are not brand colours: they are the functional states that must
   read instantly (destructive, saved, "inside another company"). */
:root {
  --bg: #edf0f3;                         /* brand Fog */
  --surface: #ffffff;
  --surface-2: #edf0f3;                  /* brand Fog: stripes and hovers */
  --border: #d5dae1;                     /* brand Line */
  --border-strong: #9aa4b1;              /* brand Mist */
  --text: #3a4556;                       /* brand Charcoal */
  --heading: #14283f;                    /* brand Navy */
  --muted: #5e6a7a;                      /* brand Slate: captions and labels */
  --faint: #7c8796;                      /* Mist deepened to stay legible on white */
  --accent: #14283f;                     /* brand Navy */
  --accent-text: #f4f0e7;                /* brand Cream */
  --accent-soft: #e5f1f9;                /* brand Light Blue, tinted */
  --link-line: #a9d1ea;                  /* brand Light Blue */
  --ring: rgba(169, 209, 234, .75);
  --topbar: #14283f;                     /* brand Navy */
  --topbar-line: #14283f;
  --on-navy: #f4f0e7;                    /* brand Cream */
  --on-navy-muted: #9aa4b1;              /* brand Mist */
  --on-navy-line: rgba(244, 240, 231, .26);
  --on-navy-hover: rgba(244, 240, 231, .1);
  --live: #f7941d;                       /* brand Orange -- the live moment only */
  --live-on: #14283f;                    /* navy on orange */
  --live-soft: #fef0dd;
  --live-ink: #9a5200;                   /* orange deepened, readable on its tint */
  --live-pulse: rgba(247, 148, 29, .6);
  --live-pulse-0: rgba(247, 148, 29, 0);
  --danger: #884657;
  --danger-soft: #f7ecef;
  --success: #356653;
  --success-soft: #e9f1ed;
  --amethyst: #705477;
  --amethyst-soft: #f1ecf2;
  --warn-soft: #f4f0e7;                  /* brand Cream: private notes */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 40, 63, .06), 0 1px 3px rgba(20, 40, 63, .06);
  --shadow-float: 0 6px 20px rgba(20, 40, 63, .13);
  --font: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, "SF Mono",
          Menlo, Consolas, monospace;
}

/* Dark mode is the brand's navy ground, with cream text. */
:root[data-theme="dark"] {
  --bg: #0b1522;
  --surface: #14283f;                    /* brand Navy */
  --surface-2: #1c3350;
  --border: #26405f;
  --border-strong: #3a5677;
  --text: #f4f0e7;                       /* brand Cream */
  --heading: #f4f0e7;
  --muted: #9aa4b1;                      /* brand Mist: secondary text on navy */
  --faint: #7f8b9b;
  --accent: #a9d1ea;                     /* brand Light Blue */
  --accent-text: #14283f;
  --accent-soft: #1d3a57;
  --link-line: #3f6687;
  --ring: rgba(169, 209, 234, .35);
  --topbar: #0f1f33;
  --topbar-line: #26405f;
  --live: #f7941d;
  --live-on: #14283f;
  --live-soft: #3b2d1e;
  --live-ink: #f7941d;
  --danger: #e0a0ad;
  --danger-soft: #33222e;
  --success: #86c7a8;
  --success-soft: #15302b;
  --amethyst: #c0a6c6;
  --amethyst-soft: #2a2440;
  --warn-soft: #1c3350;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-float: 0 6px 20px rgba(0, 0, 0, .4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1522;
    --surface: #14283f;                    /* brand Navy */
    --surface-2: #1c3350;
    --border: #26405f;
    --border-strong: #3a5677;
    --text: #f4f0e7;                       /* brand Cream */
    --heading: #f4f0e7;
    --muted: #9aa4b1;                      /* brand Mist: secondary text on navy */
    --faint: #7f8b9b;
    --accent: #a9d1ea;                     /* brand Light Blue */
    --accent-text: #14283f;
    --accent-soft: #1d3a57;
    --link-line: #3f6687;
    --ring: rgba(169, 209, 234, .35);
    --topbar: #0f1f33;
    --topbar-line: #26405f;
    --live: #f7941d;
    --live-on: #14283f;
    --live-soft: #3b2d1e;
    --live-ink: #f7941d;
    --danger: #e0a0ad;
    --danger-soft: #33222e;
    --success: #86c7a8;
    --success-soft: #15302b;
    --amethyst: #c0a6c6;
    --amethyst-soft: #2a2440;
    --warn-soft: #1c3350;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-float: 0 6px 20px rgba(0, 0, 0, .4);
  }
}

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

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

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

h1 { color: var(--heading); font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lede { margin-top: .5rem; }
[hidden] { display: none !important; }   /* .btn's inline-flex beats the UA rule */

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

/* --------------------------------------------------------------- shell --- */

.topbar { background: var(--topbar); }
.topbar-inner {
  position: relative; max-width: 40rem; margin: 0 auto; padding: .85rem 1rem;
  display: flex; align-items: center;
}
.brand { display: flex; line-height: 0; }
.brand-logo { display: block; height: 2rem; width: auto; }

/* The brand sheet's accent triangle, hung off the bar as a notch. Anchored to
   the centred inner column so it stays under the logo at any width. */
.topbar-inner::after {
  content: ""; position: absolute; left: 1.6rem; top: 100%;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 11px solid var(--topbar);
}

main { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem;
}

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

.field { margin-top: 1.5rem; }
.field label { display: block; font-weight: 600; color: var(--heading); margin-bottom: .2rem; }
.field .help { display: block; color: var(--muted); font-size: .875rem; margin-bottom: .45rem; }

input[type=text], textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: .6rem .7rem;
}
textarea { min-height: 5.5rem; resize: vertical; }
input[type=text]:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: .6rem 1.15rem; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--accent); background: var(--surface); color: var(--accent);
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; align-items: center; gap: .85rem; margin-top: 1.5rem; }

.linklike {
  font: inherit; font-weight: 600; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
}

.error {
  background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger);
  border-radius: 8px; padding: .6rem .8rem; font-size: .9rem;
}

/* ----------------------------------------------------------- drop zone --- */

.drop {
  margin-top: 1.75rem; padding: 2rem 1.25rem; text-align: center;
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); transition: border-color .15s, background .15s;
}
.drop-mark { width: 2rem; height: 2rem; color: var(--accent); }
.drop-main { margin-top: .5rem; color: var(--heading); }
.drop-or { margin-top: .15rem; color: var(--muted); font-size: .9375rem; }
.drop-note { margin-top: .9rem; }
.drop-lock { display: none; margin-top: .5rem; color: var(--muted); font-weight: 600; }

/* Locked until there is a name: the fields come first, on purpose. */
.drop.is-locked { opacity: .55; }
.drop.is-locked .drop-main, .drop.is-locked .drop-or { display: none; }
.drop.is-locked .drop-lock { display: block; }

/* Orange only while a file is actually over the target -- a live moment. */
.drop.is-over {
  border-color: var(--live); background: var(--live-soft);
  border-style: solid;
}
.drop.is-over .drop-mark { color: var(--live-ink); }

/* ----------------------------------------------------------- file list --- */

.summary { margin-top: 1.5rem; font-weight: 600; color: var(--heading); }
.summary.is-done { color: var(--success); }

.filelist { list-style: none; margin: 1rem 0 0; padding: 0; }
.filelist .f { padding: .85rem 0; border-top: 1px solid var(--border); }
.f-top { display: flex; align-items: baseline; gap: 1rem; }
.f-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.f-size { color: var(--muted); font-size: .875rem; white-space: nowrap; }
.f-bar {
  height: 6px; margin: .5rem 0 .35rem; overflow: hidden;
  background: var(--surface-2); border-radius: 999px;
}
.f-fill { height: 100%; width: 0; background: var(--live); border-radius: 999px;
          transition: width .2s linear; }
.f-status { color: var(--muted); font-variant-numeric: tabular-nums; }
.is-done .f-fill { background: var(--success); }
.is-done .f-status { color: var(--success); font-weight: 600; }
.is-failed .f-fill { background: var(--danger); }
.is-failed .f-status { color: var(--danger); }

/* ---------------------------------------------------------------- done --- */

.done-panel { text-align: center; padding: 2.5rem 1.5rem; }
.done-tick {
  width: 3rem; height: 3rem; margin: 0 auto 1rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--success-soft); color: var(--success);
  font-size: 1.5rem; font-weight: 700;
}

.turnstile { margin-top: 1.5rem; }

/* --------------------------------------------------------------- admin --- */

.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.admin-head h1 { font-size: 1.4rem; }

.flash {
  background: var(--success-soft); border: 1px solid var(--success);
  color: var(--success); border-radius: 8px;
  padding: .6rem .8rem; margin-bottom: 1rem; font-size: .9rem; font-weight: 600;
}
.warn { color: var(--live-ink); font-weight: 600; }

.sub { margin-bottom: 1rem; padding: 1.25rem; }
.sub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sub-head h2 { font-size: 1.05rem; font-weight: 700; color: var(--heading); }
.sub-message {
  margin-top: .75rem; padding: .6rem .8rem; white-space: pre-wrap;
  background: var(--warn-soft); border-radius: 8px; font-size: .9375rem;
}

.adminfiles { list-style: none; margin: 1rem 0 0; padding: 0; }
.adminfiles li {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem 0; border-top: 1px solid var(--border);
}
.adminfiles .f-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.adminfiles .f-size { color: var(--muted); font-size: .875rem; white-space: nowrap; }
.adminfiles .f-actions { display: flex; align-items: center; gap: .4rem; }
.adminfiles .is-pending .f-name { color: var(--muted); }

.btn-small { padding: .3rem .7rem; font-size: .8125rem; border-radius: 6px; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.btn-danger:hover { background: var(--danger-soft); }

@media (max-width: 34rem) {
  .adminfiles li { flex-wrap: wrap; }
  .adminfiles .f-actions { width: 100%; justify-content: flex-end; }
}