/* Rise Theatre Arts | admin pages (/admin shows, /venues) */
/* The palette, radii, spacing, families and the motion curve come from
   rise-tokens.css, generated from DESIGN.md. Link it before this file. */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  [hidden] { display: none !important; }
  b, strong { font-weight: 600; }  /* DM Sans 700 is not loaded */
  body { background: var(--cream); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  button, input, select { font: inherit; color: inherit; }
  a { color: var(--teal); font-weight: 600; text-underline-offset: 2px; }   /* inline links: Teal 600 (DESIGN.md 1.0) */

  /* ------------------------------ header ------------------------------ */
  header { background: var(--deep-indigo); color: var(--cream); padding: 18px 22px; }
  .header-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
  .header-logo { height: 46px; width: auto; display: block; }
  header h1 { font-family: 'Playfair Display', Georgia, serif; font-variant-numeric: lining-nums; font-weight: 600; font-size: 32px; line-height: 1.1; letter-spacing: .01em; flex: 1; }
  .header-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
  .header-links [data-site-nav] { display: contents; }
  /* site links on the Deep Indigo bar (DESIGN.md 1.0 navigation) */
  .site-link {
    display: inline-flex; align-items: center; background: transparent; border: 0; border-radius: 4px;
    padding: 7px 10px; color: rgba(240,250,251,.85); font: 500 12.8px 'DM Sans', system-ui, sans-serif;
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .site-link:hover { color: #F0FAFB; background: rgba(255,255,255,.1); }
  .site-link[aria-current="page"] { color: var(--light-teal); }
  .site-link:focus-visible { outline: 2px solid var(--light-teal); outline-offset: 2px; }
  /* Phones: the bar used to wrap seven links onto two rows and eat 144 px of
     an 812 px screen before the tool began. It now keeps one row that scrolls
     sideways, the way DESIGN.md's sub-nav does, with a fade at the edge so it
     reads as scrollable. Height drops to about 92 px. */
  @media (max-width: 640px) {
    header { padding: 12px 0 8px; }
    .header-inner { flex-wrap: wrap; row-gap: 8px; padding: 0 16px; }
    .header-logo { height: 30px; }
    header h1 { font-size: 26px; }
    .header-links {
      width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 0;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      margin: 0 -16px; padding: 0 16px;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    }
    .header-links::-webkit-scrollbar { display: none; }
    .site-link { padding: 8px 9px; font-size: 12px; }
  }

  main { max-width: 1080px; margin: 0 auto; padding: 22px 18px 80px; }

  /* login */
  .login-card { max-width: 380px; margin: 40px auto; background: #fff; border: 1px solid var(--cream-dark); border-radius: var(--rounded-panel); padding: 28px 26px; text-align: center; }
  .login-card h2 { font-family: 'Playfair Display', Georgia, serif; font-variant-numeric: lining-nums; font-weight: 400; color: var(--deep-indigo); font-size: 22px; margin-bottom: 6px; }
  .login-card p { font-size: 14px; opacity: .8; margin-bottom: 20px; }
  .login-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--cream-dark); border-radius: var(--rounded-field); margin-bottom: 12px; font-size: 16px; }
  .login-card input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
  .login-err { color: var(--deep-rose); font-size: 14px; min-height: 20px; margin-top: 4px; }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
    background: var(--teal); color: #fff; border: 2px solid var(--teal); border-radius: var(--rounded-control);
    padding: 10px 18px; font: 600 14px 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .btn:hover { background: var(--deep-indigo); border-color: var(--deep-indigo); }
  /* O5: a button gives way under the press. Transform only, 120 ms, ease-out. */
  .btn, .icon-btn { transition: transform 120ms var(--ease-out); }
  .btn:active, .icon-btn:active { transform: scale(.97); }
  .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .btn:disabled, .btn:disabled:hover { opacity: .6; cursor: default; background: var(--teal); border-color: var(--teal); color: #fff; }
  .btn.secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
  .btn.secondary:hover { background: var(--teal); color: #fff; }
  .btn.secondary:disabled, .btn.secondary:disabled:hover { background: transparent; color: var(--teal); }
  .btn.small { min-height: 34px; padding: 5px 11px; font-size: 12.5px; }
  .btn.danger { background: transparent; color: var(--deep-rose); border-color: var(--deep-rose); }
  .btn.danger:hover { background: var(--deep-rose); color: #fff; }
  .btn.danger:disabled, .btn.danger:disabled:hover { background: transparent; color: var(--deep-rose); border-color: var(--deep-rose); }
  /* Armed: the second tap acts. DESIGN.md asks for this instead of a dialog. */
  .btn.armed, .btn.armed:hover { background: var(--deep-rose); border-color: var(--deep-rose); color: #fff; }
  .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line-teal); border-radius: var(--rounded-control); width: 32px; height: 32px; cursor: pointer; color: var(--deep-indigo); line-height: 1; }
  .icon-btn:hover { background: var(--cream-dark); }
  .icon-btn:disabled { opacity: .35; cursor: default; }
  .icon-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  .icon-btn svg { width: 15px; height: 15px; display: block; }

  /* toolbar */
  .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
  .toolbar .grow { flex: 1; }
  .status { font-size: 13px; color: var(--ink-muted); }
  /* Coral is 2.96:1 as text on Cream, which DESIGN.md forbids. It marks the
     state as a dot instead and the words stay Ink. */
  .status.dirty { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
  .status.dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none; }
  .status.saved { color: var(--teal); }
  /* R31: the save status fades in when it changes. */
  @keyframes status-in { from { opacity: 0; } to { opacity: 1; } }
  .status.flash { animation: status-in 150ms var(--ease-out); }

  .intro { font-size: 16px; color: var(--ink-soft); margin-bottom: 14px; max-width: 70ch; }

  /* Read once, folded away after; remembered per device. Reservations uses the
     same disclosure, so the tools teach themselves the same way. */
  .tips { margin: 0 0 18px; }
  .tips > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    font: 600 13px 'DM Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); padding: 4px 0; }
  .tips > summary::-webkit-details-marker { display: none; }
  .tips > summary::before { content: "+"; font-size: 14px; line-height: 1; width: 13px; text-align: center; }
  .tips[open] > summary::before { content: "\2013"; }
  .tips > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--rounded-control); }
  .howto { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); max-width: 70ch; }
  .howto li { margin-bottom: 5px; }
  .howto b { color: var(--deep-indigo); font-weight: 600; }
  .notice { background: var(--tint-yellow); border: 1px solid var(--yellow); border-radius: var(--rounded-card); padding: 12px 14px; font-size: 16px; margin-bottom: 16px; }
  .errors { background: var(--tint-rose); color: var(--deep-rose); border: 1px solid var(--pink); border-radius: var(--rounded-card); padding: 12px 14px; font-size: 16px; margin-bottom: 16px; }
  .errors ul { margin: 6px 0 0 18px; }
  .error { background: var(--tint-rose); color: var(--deep-rose); border: 1px solid var(--pink); border-radius: var(--rounded-card); padding: 12px 14px; font-size: 16px; }


  /* DESIGN.md group panel: a 4 px Teal top stripe. Drawn as a bar rather
     than a thick border, which mitred into the hairline at the corners. */
  .production, .venue { position: relative; }
  .production::before, .venue::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--teal); border-radius: calc(var(--rounded-panel) - 2px) calc(var(--rounded-panel) - 2px) 0 0;
  }
  /* production cards */
  /* A show is a tinted container; its performances are white cards inside it,
     so the grouping reads at a glance instead of as loose fields. */
  .production { background: var(--cream-dark); border: 1.5px solid var(--line-teal); border-radius: var(--rounded-panel); padding: 0 0 14px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(37,42,88,.06); }
  .prod-head { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; align-items: end; padding: 16px 18px 14px; border-bottom: 1px solid var(--line-teal); margin-bottom: 14px; background: var(--cream); border-radius: calc(var(--rounded-panel) - 2px) calc(var(--rounded-panel) - 2px) 0 0; }
  .prod-settings { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1.2fr; gap: 12px; align-items: start; }
  .production > .perf-list, .production > .perf-foot, .production > .warn-label { margin-left: 18px; margin-right: 18px; }
  @media (max-width: 560px) { .prod-settings { grid-template-columns: 1fr; } }
  .field label, .field .grouplabel { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
  .field input, .field select { width: 100%; padding: 8px 10px; border: 1px solid var(--cream-dark); border-radius: var(--rounded-field); background: #fff; }
  .field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
  .field input.title { font-family: 'Playfair Display', Georgia, serif; font-variant-numeric: lining-nums; font-size: 22px; line-height: 1.2; color: var(--deep-indigo); padding: 6px 10px; }
  @media (max-width: 640px) { .field input.title { font-size: 20px; } }
  .field .hint { font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
  /* This used to be <a href="#">: announced as a link, going nowhere. */
  .field .hint button { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .field .hint button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--rounded-control); }
  /* What went wrong in one performance, said next to that performance. */
  .perf-msg { grid-column: 1 / -1; font-size: 13px; color: var(--deep-rose); }
  .errors .reload { margin-top: 10px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  .perf-list { display: grid; gap: 10px; }
  .perf { border: 1px solid var(--line-teal); border-radius: var(--rounded-card); padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; background: #fff; }
  .perf-order { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
  /* Remove used to be a third glyph under the two move buttons, a mis-tap away
     from them. It now ends the row, where a destructive action belongs. */
  .rates-row { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-end; }
  .rates-row .rates { flex: 1; min-width: 0; }
  @media (max-width: 480px) { .rates-row { flex-direction: column; align-items: stretch; } }
  .perf-grid { display: grid; grid-template-columns: 2fr 1.25fr .6fr auto; gap: 10px 14px; align-items: end; }
  @media (max-width: 760px) { .perf-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .perf-grid { grid-template-columns: 1fr; } }
  .perf-grid .rates { grid-column: 1 / -1; }
  .label-row { display: flex; gap: 6px; }
  .label-row input { flex: 1; }
  .check { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 16px; white-space: nowrap; }
  .check input { width: 18px; height: 18px; accent-color: var(--teal); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--cream-dark); color: var(--deep-indigo); border-radius: var(--rounded-pill); padding: 4px 6px 4px 10px; font-size: 13px; }
  .chip code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--teal); }
  .chip button { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: var(--deep-rose); width: 22px; height: 22px; padding: 0; }
  .chip button svg { width: 11px; height: 11px; display: block; }
  .chip button:hover { background: var(--tint-rose); }
  .chip button:focus-visible { outline: 2px solid var(--deep-rose); outline-offset: 1px; }
  .chip-add { display: inline-flex; gap: 6px; align-items: center; }
  .chip-add select, .chip-add input { padding: 5px 8px; border: 1px solid var(--cream-dark); border-radius: var(--rounded-field); font-size: 13px; background: #fff; max-width: 260px; }
  .empty-rates { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
  .perf-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
  .warn-label { font-size: 13px; color: var(--ink-muted); margin-top: 8px; }

  /* Zeffy panel */
  .zeffy { background: #fff; border: 1px solid var(--cream-dark); border-radius: var(--rounded-panel); padding: 18px; margin-top: 28px; }
  .zeffy h2, .section-title { font-family: 'Playfair Display', Georgia, serif; font-variant-numeric: lining-nums; color: var(--deep-indigo); font-weight: 400; font-size: 22px; line-height: 1.2; }
  .zeffy .sub { font-size: 13px; color: var(--ink-muted); margin: 4px 0 14px; }
  .campaign { border-top: 1px solid var(--cream-dark); padding: 14px 0; }
  .campaign-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .campaign-head h3 { font-size: 17px; line-height: 1.3; color: var(--deep-indigo); flex: 1; }
  .campaign-meta { font-size: 13px; color: var(--ink-muted); }
  table.rates { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 16px; }
  table.rates th { text-align: left; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream-dark); padding: 8px; border-bottom: 1px solid var(--line-teal); }
  table.rates th:first-child { border-radius: var(--rounded-field) 0 0 0; }
  table.rates th:last-child { border-radius: 0 var(--rounded-field) 0 0; }
  table.rates td { padding: 9px 8px; border-bottom: 1px solid var(--cream-dark); vertical-align: top; }
  table.rates tbody tr:hover td { background: var(--cream); }
  table.rates .num { text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
  table.rates code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--teal); word-break: break-all; }
  .tag { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: var(--rounded-pill); background: var(--cream-dark); color: var(--deep-indigo); }
  .tag.unmapped { background: var(--tint-coral); color: var(--ink); }
  .table-wrap { overflow-x: auto; }

  /* venues */
  .venues { background: #fff; border: 1px solid var(--cream-dark); border-radius: var(--rounded-panel); padding: 18px; margin-top: 28px; }
  .venues .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
  .venues .head h2 { flex: 1; }
  .venues .sub { font-size: 13px; color: var(--ink-muted); margin: 0 0 12px; }
  /* Same container pattern as a show: a tinted, teal-edged card per venue,
     with the details form as a white card inside it. */
  .venue { background: var(--cream-dark); border: 1.5px solid var(--line-teal); border-radius: var(--rounded-panel); padding: 14px 16px; margin: 12px 0; box-shadow: 0 1px 3px rgba(37,42,88,.06); }
  .venue-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .venue-row .name { font-family: 'Playfair Display', Georgia, serif; font-variant-numeric: lining-nums; font-weight: 400; font-size: 18px; color: var(--deep-indigo); }
  .venue-row .meta { font-size: 13px; color: var(--ink-muted); flex: 1; min-width: 200px; }
  .venue-row .acts { display: flex; gap: 6px; flex-wrap: wrap; }
  .venue-row .acts a { text-decoration: none; }
  .pill { display: inline-block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--rounded-pill); background: var(--cream-dark); color: var(--deep-indigo); }
  .pill.confirmed { background: var(--tint-teal); color: var(--teal); }
  .pill.estimated { background: var(--tint-coral); color: var(--ink); }
  .pill.planned { background: var(--tint-yellow); color: var(--ink); }
  .details { margin-top: 12px; padding: 14px; border: 1px solid var(--line-teal); border-radius: var(--rounded-card); background: #fff; }
  /* The shared entrance: a panel's contents fade and slide in, never its
     height. Venues R25, Shows R29 and R30, Reservations R12 and R16, and
     Access R34, R35 and R36 are all this one moment, so they are all this one
     keyframe. Page-specific selectors point at it from their own files. */
  @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .details > *, .panel-in { animation: panel-in 200ms var(--ease-out); }
  .venues > .head, .venues > .sub { margin-left: 0; }
  .venues .venue-row .acts .btn.secondary { background: #fff; }
  .details h4 { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 10px 0 8px; }
  .details h4:first-child { margin-top: 0; }
  .dgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (max-width: 760px) { .dgrid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .dgrid { grid-template-columns: 1fr; } }
  .dgrid .wide { grid-column: 1 / -1; }
  .field textarea { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--cream-dark); border-radius: var(--rounded-field); background: #fff; font: inherit; font-size: 13.5px; resize: vertical; }
  .details .foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
  .newvenue { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; padding: 12px 0 4px; border-top: 1px solid var(--cream-dark); }
  .newvenue .field { min-width: 200px; }
  /* DESIGN.md asks for 44 px targets on a touch surface; Venues is listed as
     "phone to view" and its three room links per venue were 34 px. */
  @media (hover: none) and (pointer: coarse) {
    .btn.small { min-height: 44px; padding: 10px 14px; }
    .icon-btn { width: 44px; height: 44px; }
    .chip button { width: 32px; height: 32px; }
    .chip-add select, .chip-add input { min-height: 44px; }
    /* The label is the target, so it carries the height, not the 18 px box. */
    .check { min-height: 44px; }
    /* Decided 2026-09-18: the nav links meet the 44 px target on a touch
       device. It costs about 12 px of the phone header on every admin page,
       and Reservations is the one people really use on a phone. */
    .site-link { min-height: 44px; }
    .codewrap .peek { min-width: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn, .icon-btn { transition: none; }
    .btn:active, .icon-btn:active { transform: none; }
    .details > *, .panel-in, .status.flash { animation: none !important; }
  }

  /* DESIGN.md empty state: one short sentence someone reads, then one action. */
  .empty { text-align: center; padding: 34px 20px; }
  .empty p { font-family: Lora, Georgia, serif; font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 16px; }

  /* DESIGN.md loading state: a Teal bar at the top of the content, with the
     sentence under it. It does not move: no motion row approves a loader. */
  .loadbar { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); }
  .loadbar-track { display: block; height: 3px; border-radius: 2px; background: var(--teal); margin-bottom: 6px; }

  .loading { color: var(--ink-muted); font-style: italic; padding: 20px 0; }
  footer { text-align: center; color: var(--ink-muted); font-size: 13px; padding: 30px 0 10px; }