/* ==========================================================================
   Director dashboard. Only loaded styles for the #admin route — kept separate
   from components.css so the public site's styling stays easy to reason about.
   ========================================================================== */

/* ---------- Login ---------- */
.login-card{
  max-width:440px;padding:36px 32px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:6px;margin-top:24px;
}
.login-error{color:var(--accent-text);font-size:13px;min-height:18px;margin:-8px 0 8px}

/* ---------- Dashboard shell ---------- */
.admin-section{max-width:1100px}
.admin-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;flex-wrap:wrap;margin-bottom:32px;
}
.admin-header .section-title{font-size:48px;margin-bottom:0}
.adm-tab.on{color:var(--accent-text);border-bottom-color:var(--accent)}
.adm-pane.on{display:block}
.adm-toolbar .push{margin-left:auto}
.adm-toolbar .hint{font-size:13px;color:var(--ink-dim);flex:1;margin:0}

/* ---------- Publish status ----------
   Replaces a coloured callout that explained the difference between saving and
   publishing. Edits now save themselves, so this reports which of two states
   the content is in and offers the one action that remains.

   Sticky{
  position:sticky;top:64px;z-index:20;
  display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
  padding:14px 18px;margin-bottom:28px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:4px;
}

/* Green when everything is live{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;
  background:#5aa469;
}
.admin-status.is-dirty{border-color:var(--line-strong)}
.admin-status.is-dirty .status-dot{background:var(--accent-2)}/* ---------- Episode rows ---------- */

.ep-row .num{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--accent-text);text-align:center}
.ep-row .body h4{font-size:15px;font-weight:600;margin-bottom:4px}
.ep-row .body p{font-size:12px;color:var(--ink-dim)}
.ep-row .body .flag{
  color:var(--accent-text);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;margin-left:6px;
}
.ep-row .actions{display:flex;gap:6px}
.ep-row .actions button{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:6px 12px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;border-radius:2px;transition:all .2s;
}
.ep-row .actions button:hover{border-color:var(--accent);color:var(--accent-text)}
.ep-row .actions .del:hover{border-color:var(--danger);color:var(--danger);background:rgba(157,19,19,.12)}
.ep-form .form-grid .field{margin:0}
.ep-form .field.wide{margin-bottom:14px}

/* ---------- Staff editor ----------
   A flat list of groups. The title is the only loud thing; the controls under
   it are plain text links{padding:26px 0;border-top:1px solid var(--line)}
.sg-link.is-danger:hover{color:var(--danger);border-bottom-color:var(--danger)}

/* Section reordering */
.reorder{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.reorder .move{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  width:26px;height:17px;line-height:1;font-size:11px;cursor:pointer;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
}
.reorder .move:hover:not(:disabled){border-color:var(--accent);color:var(--accent-text)}
.reorder .move:disabled{opacity:.3;cursor:default}

/* Small delete buttons, shared by every editor. */
.del-btn{
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  padding:6px 10px;font-size:11px;cursor:pointer;border-radius:2px;
}
.del-btn:hover{border-color:var(--danger);color:var(--danger)}/* ---------- Photo upload widget ---------- */

.photo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* ---------- Generic editor sections (achievements / advertising / contact / text) ---------- */
.editor-section{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:20px;margin-bottom:16px}
.editor-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.editor-section-head h4{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--accent-text)}
.editor-section-head .year-input{
  flex:1;background:var(--bg-3);border:1px solid var(--line);color:var(--accent-text);
  padding:10px 14px;font-family:var(--font-display);font-weight:600;font-size:18px;border-radius:2px;
}
.editor-section .row{display:grid;grid-template-columns:1fr 1fr 120px auto;gap:8px;margin-bottom:6px;align-items:center}
.editor-section .row.director-row{grid-template-columns:60px 1fr 1fr 1fr auto}
.editor-section .row input{
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;font-size:12px;border-radius:2px;width:100%;
}
.editor-field.inline{display:flex;gap:8px;align-items:flex-start}
.editor-field.inline textarea{flex:1}
/* Award lists run long{min-height:220px;font-size:12px;line-height:1.7}
.editor-card .checkbox{
  font-size:12px;color:var(--ink-dim);display:flex;gap:8px;align-items:center;
}/* ---------- Settings pane ---------- */

.danger-zone .editor-section-head h4{color:var(--accent-text)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ep-form .form-grid{grid-template-columns:1fr}
  .editor-section .row,
  .editor-section .row.director-row{grid-template-columns:1fr}
}

/* ==========================================================================
   Equipment checkout
   ========================================================================== */

/* ---------- Which console you are signing in to ---------- */
.login-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:520px;margin:0 0 18px}
.login-mode{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:14px 16px;cursor:pointer;border-radius:4px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-dim);
  font:inherit;transition:border-color .15s,color .15s;
}
.login-mode strong{font-size:14px;font-weight:600;color:var(--ink)}
.login-mode span{font-size:12px;line-height:1.4}
.login-mode:hover{border-color:var(--line-strong)}
.login-mode.on{border-color:var(--accent);color:var(--ink)}

/* ---------- Duties ---------- */
/* ---------- Duties ----------
   A dropdown on the Check out heading. Open, it floats over the form rather
   than pushing it down the page, so reading rule 4 does not lose your place. */
.eq-block-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:16px;
}
.eq-block-head h3{margin-bottom:0}

.eq-duties{position:relative}
.eq-duties summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;padding:4px 2px;
  -webkit-tap-highlight-color:transparent;
}
.eq-duties summary::-webkit-details-marker{display:none}
.eq-duties-label{
  font-size:13px;font-weight:500;color:var(--ink-dim);
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
}
.eq-duties summary::after{
  content:"";width:5px;height:5px;margin-bottom:2px;
  border-right:1.5px solid var(--ink-dim);border-bottom:1.5px solid var(--ink-dim);
  transform:rotate(45deg);
}
.eq-duties summary:hover .eq-duties-label{color:var(--ink);border-bottom-color:var(--ink-dim)}
.eq-duties[open] summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.eq-duties[open] .eq-duties-label{color:var(--ink)}

.eq-duties ol{
  position:absolute;z-index:30;right:0;top:calc(100% + 8px);width:min(520px,86vw);
  margin:0;padding:18px 20px 18px 40px;color:var(--ink-body);
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  max-height:min(60vh,520px);overflow-y:auto;
}
.eq-duties li{margin-bottom:10px;font-size:13.5px;line-height:1.55}
.eq-duties li:last-child{margin-bottom:0}

@media (max-width:700px){
  .eq-block-head{align-items:flex-start}
  .eq-duties{position:static}
  .eq-duties ol{position:static;width:auto;margin-top:12px;box-shadow:none}
}

/* ---------- Blocks ---------- */
.eq-block{margin-bottom:40px}
.eq-block h3{
  font-family:var(--font-display);font-size:19px;font-weight:600;
  margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.eq-count{
  margin-left:auto;
  font-size:11px;font-weight:600;color:var(--ink-dim);
  background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:2px 10px;min-width:34px;text-align:center;
}
.eq-section[open] .eq-count{color:var(--accent-text);border-color:var(--line-strong)}

/* Just the student now — the period is worked out and the return time is a
   row of chips underneath, so the old three-column row has one thing in it. */
.eq-form-top{margin-bottom:10px}

/* ---------- Period, inferred ---------- */
.eq-when-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.eq-when-note{font-size:13px;color:var(--ink-body)}
.eq-link{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink-dim);
  border-bottom:1px solid var(--line-strong);
}
.eq-link:hover{color:var(--accent-text);border-bottom-color:var(--accent)}
.eq-when-select{
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;font-family:var(--font-body);font-size:13px;border-radius:2px;
}
.eq-when-select[hidden]{display:none}

/* ---------- Back by ---------- */
.eq-when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.eq-when-label{
  font-size:12px;letter-spacing:.06em;color:var(--ink-dim);font-weight:500;
}
.eq-when .eq-chips{padding:0;gap:8px}
.eq-when .eq-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 14px;line-height:1.25;
}
.eq-when .eq-chip strong{font-size:13.5px;font-weight:600}
.eq-when .eq-chip small{font-size:11px;color:var(--ink-dim)}
.eq-when .eq-chip.on small{color:rgba(255,255,255,.75)}
.eq-when .eq-chip.is-other{justify-content:center;font-size:13px;color:var(--ink-dim)}
.eq-when .eq-chip.is-other.on{background:var(--accent);border-color:var(--accent);color:#fff}

@media(max-width:700px){
  .eq-when{align-items:flex-start;flex-direction:column;gap:8px}
}

/* ---------- Section pickers ---------- */
.eq-sections{
  display:flex;flex-direction:column;gap:1px;margin-bottom:22px;
  background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;
}
.eq-section{background:var(--bg-2)}
.eq-section summary{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;cursor:pointer;font-size:14px;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.eq-section summary::-webkit-details-marker{display:none}
.eq-section summary:hover{background:var(--bg-3)}
.eq-section[open]{background:var(--bg-3)}
.eq-section[open] summary{border-bottom:1px solid var(--line)}
.eq-col{
  font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--accent-text);
  min-width:52px;
}
.eq-name{font-weight:500}
.eq-search{
  width:calc(100% - 36px);margin:14px 18px 0;
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;font-family:var(--font-body);font-size:13px;border-radius:2px;
}
.eq-chips{display:flex;flex-wrap:wrap;gap:7px;padding:14px 18px}
.eq-chip{
  background:var(--bg-2);border:1px solid var(--line-strong);color:var(--ink);
  padding:9px 13px;font:inherit;font-size:13px;border-radius:4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.eq-chip:hover:not(:disabled){border-color:var(--ink-dim)}
.eq-chip:active:not(:disabled){transform:translateY(1px)}
.eq-chip.on{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
}
.eq-chip.out{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.eq-section .empty-note{padding:0 18px 16px;font-size:13px}

/* ---------- Selection summary ---------- */
.eq-summary{
  display:flex;flex-direction:column;gap:7px;
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:5px;
  padding:14px 18px;margin-bottom:18px;font-size:13.5px;
}
.eq-summary .eq-sum{display:flex;gap:10px;align-items:baseline}
.eq-sum b{color:var(--accent-text);font-size:10.5px;letter-spacing:.1em;min-width:52px;flex-shrink:0}
.eq-actions{align-items:center}
.eq-approver{font-size:12px;color:var(--ink-dim);margin-left:auto}

/* ---------- Out now ---------- */
.eq-row{
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:0 4px 4px 0;margin-bottom:8px;overflow:hidden;
  transition:border-color .15s;
}
.eq-row.is-open{border-color:var(--line-strong)}
.eq-row-head{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  width:100%;padding:12px 16px;text-align:left;cursor:pointer;
  background:transparent;border:none;color:inherit;font:inherit;
}
.eq-row-head:hover{background:var(--bg-3)}
.eq-due{
  display:flex;flex-direction:column;gap:2px;text-align:right;flex-shrink:0;min-width:96px;
}
.eq-due-label{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
}
.eq-due-time{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.eq-due.is-late .eq-due-label,.eq-due.is-late .eq-due-time{color:var(--accent-text)}
.eq-due.is-none .eq-due-label{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:400}

.eq-row-cue{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-text);flex-shrink:0;
}
.eq-row.overdue{border-left-color:var(--accent)}
.eq-row-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.eq-row-meta{font-size:12px;color:var(--ink-dim)}
.eq-row.overdue .eq-row-meta{color:var(--accent-text)}
.eq-row-items{font-size:13px;color:var(--ink-body);word-break:break-word}

/* ---------- Recently returned ----------
   A list of what happened rather than a spreadsheet: the time down the left,
   the person and their gear in the middle, the count and who signed it out on
   the right. Stacks cleanly on a phone because nothing is a table cell. */
.eq-backs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.eq-back{
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:baseline;gap:16px;
  padding:13px 4px;border-bottom:1px solid var(--line);
}
.eq-back-when{display:flex;flex-direction:column;min-width:70px}
.eq-back-time{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.eq-back-date{font-size:11px;color:var(--ink-dim)}
.eq-back-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.eq-back-who{font-size:14px;font-weight:600;color:var(--ink)}
.eq-back-period{
  font-size:10.5px;font-weight:600;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:8px;padding:1px 6px;margin-left:7px;
}
.eq-back-items{font-size:12.5px;color:var(--ink-body);line-height:1.45;word-break:break-word}
.eq-back-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.eq-back-by{font-size:11.5px;color:var(--ink-dim);white-space:nowrap}
.eq-back-del{align-self:center}

@media (max-width:720px){
  .eq-back{grid-template-columns:auto 1fr;gap:8px 14px}
  .eq-back-side{grid-column:2;flex-direction:row;align-items:baseline;gap:10px;text-align:left}
  .eq-back-del{grid-column:2;justify-self:start}
}

@media (max-width:900px){
  .login-modes{grid-template-columns:1fr}
  .eq-form-top{grid-template-columns:1fr}
  .eq-row{flex-direction:column;align-items:flex-start}
  .eq-approver{margin-left:0}
}

.admin-header-actions{display:flex;gap:8px;flex-wrap:wrap}
.eq-form-top select:disabled{opacity:.45;cursor:not-allowed}
.eq-note{font-size:12px;color:var(--ink-dim);align-self:center}

/* ---------- Exec housekeeping ---------- */
.eq-admin{border-top:1px solid var(--line);padding-top:24px}
.eq-admin-note{font-size:13px;color:var(--ink-dim);margin:-6px 0 14px;max-width:60ch}
.eq-danger{color:var(--accent-text)}
.eq-danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(157,19,19,.12)}
.eq-backs .del-btn{padding:4px 9px;font-size:11px}

/* ---------- Exec equipment, behind a code ---------- */
.eq-restricted{border-color:var(--line-strong)}
.eq-unlock{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 16px 14px;font-size:13px;color:var(--ink-dim);
}
.eq-unlock span{flex:1;min-width:220px}
.eq-unlock.is-open{color:var(--ink-body)}
.eq-code{
  width:120px;background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;font-family:var(--font-body);font-size:13px;
  border-radius:2px;letter-spacing:.25em;
}

/* ---------- Checking part of a checkout back in ---------- */
.eq-return{padding:0 16px 14px;border-top:1px solid var(--line)}
.eq-return-hint{font-size:12.5px;color:var(--ink-dim);margin:12px 0 10px}
.eq-return .eq-chips{padding:0 0 12px}

/* ---------- Password resets ---------- */
.eq-accounts{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line);
}
.eq-accounts label{font-size:13px;color:var(--ink-dim)}
.eq-accounts select{
  flex:1;min-width:220px;background:var(--bg-3);border:1px solid var(--line);
  color:var(--ink);padding:9px 12px;font-family:var(--font-body);font-size:13px;border-radius:2px;
}

/* ---------- Mobile ----------
   Native selects on iOS shrink to their content and can end up too small to
   hit. Full width, and 16px so Safari stops zooming the page on focus. */
@media (max-width:900px){
  .eq-form-top select,
  .eq-form-top input,
  .eq-accounts select{width:100%;font-size:16px}
  .eq-row-head{flex-wrap:wrap;gap:10px}
  .eq-row-main{flex:1 1 100%;order:1}
  .eq-due{order:2;text-align:left;align-items:flex-start;min-width:0}
  .eq-row-cue{order:3;margin-left:auto}
}

/* ---------- Loading, and what happens when the wifi is bad ---------- */
.eq-loading{
  font-size:14px;color:var(--ink-dim);padding:28px 0;
}
.eq-loading-note{
  font-size:12.5px;color:var(--ink-dim);margin-bottom:14px;
  padding:8px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:3px;
}
.eq-loading-note.is-warn{border-color:var(--accent);color:var(--accent-text)}
.eq-failed{
  background:var(--bg-2);border:1px solid var(--line);border-radius:4px;
  padding:24px;max-width:480px;
}
.eq-failed p{font-size:14px;color:var(--ink-body);margin-bottom:16px}

/* ---------- The shared guest account ---------- */
.eq-guest{
  font-size:13px;color:var(--ink-body);line-height:1.5;
  background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:4px;padding:12px 16px;margin-bottom:20px;max-width:70ch;
}

/* ---------- iPad and touch ----------
   Safari repaints the whole console when a long list animates, so transitions
   and hover styling are dropped where there is no pointer to hover with.
   Tap targets go up to 44px, which is the size a finger actually hits. */
@media (hover:none){
  .eq-chip,.eq-row-head,.eq-section summary{transition:none}
  .eq-chip:hover:not(:disabled){border-color:var(--line-strong)}
  .eq-section summary:hover,.eq-row-head:hover{background:inherit}
  .eq-chip{padding:11px 14px}
  .eq-section summary{padding:16px 18px}
  .btn{padding:14px 20px}
  .btn.small{padding:11px 16px}
}

/* Long chip lists get their own scroll box rather than pushing the page down,
   which keeps the check-out button reachable without a long scroll back. */
.eq-chips{max-height:none}
@media (max-width:1100px){
  .eq-section[open] .eq-chips{max-height:46vh;overflow-y:auto}
}/* ---------- Tab groups ----------
   Shows and people get edited weekly; page wording almost never. Splitting
   them stops the eight tabs reading as one undifferentiated row. */

/* A short rule between the weekly tabs and the rest{position:relative;margin-left:12px;padding-left:12px}

/* Where the row no longer fits it scrolls, and on an iPad the scrollbar stays
   hidden until you touch it — so the last few tabs would simply seem not to
   exist. Fading the right edge is the hint that there is more to swipe to. */
@media (max-width:1180px){
  .admin-tabs{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);
    padding-right:40px;
  }
}/* ---------- Booster board editor ---------- */

/* ---------- The cat ----------
   Bottom-left{
  position:fixed;left:18px;bottom:18px;z-index:15;
  line-height:0;opacity:.85;transition:opacity .2s;
  pointer-events:auto;
}

@media (max-width:900px){/* No room for a cat on a phone. */

}

/* ==========================================================================
   Site editor — second pass
   ========================================================================== */

/* ---------- The cat ----------
   Top-right of the dashboard{position:absolute;top:-18px;right:0;z-index:5;line-height:0}
.cat-nap,.cat-call{
  background:none;border:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cat-nap img{
  image-rendering:pixelated;width:112px;height:112px;display:block;
  opacity:.9;transition:opacity .2s,transform .2s;
}
.cat-nap:hover img{opacity:1;transform:translateY(-2px)}
.cat-call{
  padding:5px 12px;border-radius:14px;
  border:1px dashed var(--line-strong);color:var(--ink-dim);
  font-family:var(--font-body);font-size:12px;line-height:1;
  transition:border-color .2s,color .2s;
}
.cat-call:hover{border-color:var(--accent);color:var(--accent-text)}

.admin-section{position:relative}

/* ---------- Header ---------- */
.admin-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:26px;padding-right:130px;
}
.admin-header .section-title{font-size:40px;margin-bottom:0;line-height:1.1}

/* ---------- Publish bar ----------
   Reads as a status line{
  top:70px;padding:15px 20px;border-radius:5px;margin-bottom:30px;
  background:var(--bg-2);border:1px solid var(--line);
}
.admin-status.is-dirty{border-color:var(--accent);background:rgba(157,19,19,.07)}/* ---------- Panes and sections ---------- */

@keyframes paneIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.adm-tab.on{background:var(--bg-2);color:var(--ink);border-bottom-color:var(--accent)}

.editor-section{
  background:var(--bg-2);border:1px solid var(--line);border-radius:5px;
  padding:22px;margin-bottom:14px;
}
.editor-section-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.editor-section-head h4{
  font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);
}
.adm-toolbar .hint{font-size:13px;line-height:1.5}/* ---------- Announcement bar editor ---------- */

/* An iPad is under 900px, so hiding the cat there hid it from most of the
   people who have one. It just gets smaller. */
@media (max-width:900px){
  .admin-header{padding-right:86px}
  .cat-nap img{width:76px;height:76px}
}
@media (max-width:520px){
  .admin-header{padding-right:60px}
  .cat-nap img{width:54px;height:54px}
}

/* The heading's bottom margin belongs to the block, not to the row it shares
   with the duties dropdown — it was pushing the two out of line by 8px. */
.eq-block .eq-block-head h3{margin-bottom:0}

/* Add group sits at the end of the staff list{margin-top:8px}

/* ---------- Saved rigs ---------- */
.eq-presets .eq-body{padding:0}
.eq-rigs{gap:8px}
.eq-rig{display:inline-flex;align-items:stretch}
.eq-rig-pick{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:10px 14px;text-align:left;
}
.eq-rig-pick em{
  font-style:normal;font-size:11px;color:var(--ink-dim);letter-spacing:.02em;
}
.eq-rig-pick:hover em{color:var(--ink-body)}
.eq-rig.has-out .eq-rig-pick{border-color:var(--accent)}
.eq-rig-del{
  background:var(--bg-2);border:1px solid var(--line-strong);border-left:none;
  color:var(--ink-dim);width:30px;cursor:pointer;font-size:15px;line-height:1;
  border-radius:0 4px 4px 0;
}
.eq-rig-pick{border-radius:4px 0 0 4px}
.eq-rig-del:hover{color:var(--danger);border-color:var(--danger)}

.eq-rig-save{display:flex;gap:10px;flex-wrap:wrap;padding:0 18px}
.eq-rig-save input{
  flex:1;min-width:160px;background:var(--bg-2);border:1px solid var(--line-strong);
  color:var(--ink);padding:9px 12px;font-family:var(--font-body);font-size:13px;border-radius:4px;
}
.eq-rig-save input:disabled{opacity:.5}
.eq-rig-hint{font-size:12px;color:var(--ink-dim);padding:10px 18px 16px;margin:0}

@media (max-width:900px){
  .eq-rig,.eq-rig-pick{width:100%}
  .eq-rig-save input{width:100%}
}

/* ---------- Intro video ---------- */
.intro-now{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:20px;align-items:start}
.intro-preview{
  width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;
  border:1px solid var(--line);border-radius:4px;
}
.intro-status{font-size:13.5px;color:var(--ink-body);margin-bottom:14px;line-height:1.5}
.intro-pick{position:relative;cursor:pointer;margin-bottom:14px}
.intro-file{font-size:13.5px;color:var(--ink-body);margin:0 0 10px}
.intro-file span{color:var(--ink-dim);margin-left:8px}
.intro-warn{
  font-size:12.5px;color:var(--accent-2);margin:0 0 10px;max-width:62ch;line-height:1.5;
}
.intro-actions{align-items:center;margin-top:6px}
.intro-progress{font-size:13px;color:var(--ink-dim)}

@media (max-width:900px){
  .intro-now{grid-template-columns:1fr}
}

/* ==========================================================================
   Editing on the page

   Everything here is active only under `.is-inline-editing` on <body>, set
   when a director presses Director Login and cleared on Sign out.

   The rule this follows: editing furniture is quieter than the site. The page
   keeps its own hierarchy — a heading still reads as the heading, not as a
   form field — and the controls stay at the edge of attention until they are
   wanted. Everything borrows the site's own vocabulary: Archivo in small caps
   for labels, --accent to fill, --accent-text to write, the same 1px --line
   borders and small radii used everywhere else.
   ========================================================================== */

/* ---------- Fields ----------
   The box hugs its words. Block elements are full-width by default, so an
   outline on a heading ran the entire page and two stacked fields looked like
   one. fit-content makes each box exactly as wide as the thing it edits. */
body.is-inline-editing [data-text],
body.is-inline-editing [data-edit]{
  outline:1px dashed var(--line-strong);
  outline-offset:4px;
  border-radius:2px;
  cursor:text;
  width:fit-content;
  max-width:100%;
  transition:outline-color .14s ease,background-color .14s ease;
}

/* Resting state is deliberately grey, not red. Red on every string at once
   read as an error state and fought the accent the site uses for emphasis. */
body.is-inline-editing [data-text]:hover,
body.is-inline-editing [data-edit]:hover{
  outline-color:var(--accent-text);
  background:rgba(218,68,68,.05);
}

body.is-inline-editing [data-text]:focus,
body.is-inline-editing [data-edit]:focus{
  outline:1px solid var(--accent-text);
  outline-offset:4px;
  background:rgba(218,68,68,.08);
}

/* Cells in a table-like layout should not shrink-wrap away from their column. */
body.is-inline-editing .kv [data-edit],
body.is-inline-editing .contact-block [data-edit]{ width:auto }

body.is-inline-editing [data-item]{ position:relative }

/* ---------- Item controls ----------
   Out of the way until the item is hovered or something in it has focus.
   Sixty delete buttons all shouting at once was most of why the page looked
   busy. */
/* Inside the item, not hanging off it. Negative offsets put the button over
   whatever sat above and to the right — a neighbouring card, or nothing at
   all at the edge of a grid, where it looked like it had fallen out. */
.ed-item-tools{
  position:absolute;
  top:6px;
  right:6px;
  display:flex;
  gap:4px;
  z-index:6;
  opacity:0;
  transition:opacity .14s ease;
  pointer-events:none;
}
[data-item]:hover > .ed-item-tools,
[data-item]:focus-within > .ed-item-tools{ opacity:1; pointer-events:auto }

/* Copied from the row actions the dashboard's episode list already used, so
   the editor's small buttons are the same button the site has always had:
   Inter, 11px, 600, .05em, uppercase, 2px radius. The earlier version of this
   invented its own — Archivo in tighter caps — which is why the controls read
   as bolted on. */
.ed-btn{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1;
  padding:6px 12px;
  border-radius:2px;
  border:1px solid var(--line);
  background:var(--bg-3);
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .12s,border-color .12s,color .12s;
}
.ed-btn:hover{ border-color:var(--accent); color:var(--accent-text) }
.ed-btn.is-danger:hover{
  border-color:var(--danger);
  color:var(--danger);
  background:rgba(157,19,19,.12);
}

/* ---------- Add ----------
   A row of its own under the list, the width of the list, so it reads as an
   action belonging to all of it. */
.ed-list-tools{ margin:14px 0 4px }

.ed-btn.ed-add{
  display:block;
  width:100%;
  padding:12px;
  border-style:dashed;
  border-color:var(--line-strong);
  background:transparent;
  color:var(--ink-dim);
}
.ed-btn.ed-add:hover{
  border-style:solid;
  border-color:var(--accent);
  color:var(--accent-text);
  background:transparent;
}

/* The season button belongs to the row of season pills, so it is one. */
.ed-season-add{
  font-family:var(--font-body);
  font-size:12.5px;
  padding:7px 15px;
  border-radius:20px;
  border:1px dashed var(--line-strong);
  background:transparent;
  color:var(--ink-dim);
  cursor:pointer;
  transition:border-color .14s,color .14s;
}
.ed-season-add:hover{ border-style:solid; border-color:var(--accent); color:var(--accent-text) }

/* ---------- Edit-only fields ---------- */
.ed-extras{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.ed-extra{ flex:1 1 190px; min-width:0 }
/* Inside a narrow card an extra field has no room beside anything, so it
   takes the full width rather than squeezing the card's own content. */
.director .ed-extra,
.staff-card .ed-extra,
.member-card .ed-extra{ flex:1 1 100% }
/* Same label and input as every other form on the site — see .field in
   components.css. */
.ed-extra span{
  display:block;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink-dim);
  font-weight:500;
  margin-bottom:6px;
}
.ed-extra input{
  width:100%;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:2px;
  padding:11px 13px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  transition:border-color .15s;
}
.ed-extra input::placeholder{ color:#4f4f4f }
.ed-extra input:focus{ outline:none; border-color:var(--accent) }

.ed-photo{
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .14s;
}
.staff-card:hover .ed-photo,
.member-card:hover .ed-photo{ opacity:1 }

/* ---------- Panels ----------
   For the two things with no words on the page to click: the intro video and
   the top bar's messages. Built like a section of the site, not like a dialog
   dropped on top of it. */
.ed-panel{
  max-width:var(--max);
  margin:0 auto;
  padding:24px var(--gutter);
  border-bottom:1px solid var(--line);
}
.ed-panel-title{
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-weight:600;
  margin-bottom:14px;
}

/* Wrapping rather than stacked: ticker messages are short, and a column of
   full-width rows for four of them took the whole top of every page. */
.ed-rows{ list-style:none; display:flex; flex-wrap:wrap; gap:7px }
.ed-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 13px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:3px;
  font-size:12.5px;
  color:var(--ink-body);
}

/* The panel sits above the nav, so it stays as short as it can. */
#tickerPanel{ padding-top:16px; padding-bottom:16px }
#tickerPanel .ed-list-tools{ margin:12px 0 0; max-width:260px }

/* ---------- The dock ---------- */
body.is-inline-editing,
body:has(.edit-dock:not([hidden])){ padding-bottom:80px }

.edit-dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:11px var(--gutter);
  background:var(--bg-2);
  border-top:1px solid var(--line-strong);
}
.edit-dock[hidden]{ display:none }

.edit-dock-state{ display:flex; align-items:center; gap:12px; min-width:0 }
.edit-dock-state strong{
  display:block;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.edit-dock-detail{
  display:block;
  font-size:12px;
  color:var(--ink-dim);
  line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.edit-dock-dot{
  width:8px; height:8px; border-radius:50%;
  background:#3f9e5a;
  box-shadow:0 0 0 3px rgba(63,158,90,.15);
  flex-shrink:0;
}
.edit-dock.is-dirty .edit-dock-dot{ background:var(--accent-2); box-shadow:0 0 0 3px rgba(255,183,3,.14) }
.edit-dock.is-viewing .edit-dock-dot{ background:var(--ink-dim); box-shadow:0 0 0 3px rgba(138,138,138,.12) }

/* Two boxed groups, spaced apart: the left changes what you are looking at,
   the right changes what the public sees. Sign out and Publish are different
   kinds of irreversible and should not sit shoulder to shoulder. */
.edit-dock-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0 }

.ed-group{
  display:flex;
  border:1px solid var(--line-strong);
  border-radius:2px;
  overflow:hidden;
  background:var(--bg);
}

.ed-tab{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:9px 14px;
  border:none;
  border-right:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink-dim);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .14s,color .14s;
}
.ed-tab:last-child{ border-right:none }
.ed-tab:hover{ background:var(--bg-3); color:var(--ink) }
.ed-tab[hidden]{ display:none }

.ed-tab.is-primary{ background:var(--accent); color:#fff }
.ed-tab.is-primary:hover{ background:#b81818; color:#fff }
.ed-tab.is-primary:disabled{ opacity:.35; cursor:default; background:var(--accent) }
.ed-tab.is-danger:hover{ background:rgba(157,19,19,.22); color:var(--accent-text) }

/* ---------- The cat ----------
   It belonged to the dashboard and moved with the editor. Above the dock, out
   of the reading column, and gone on a narrow screen where there is no room
   for it. */
.cat-corner{ position:fixed; right:var(--gutter); bottom:70px; z-index:59; line-height:0 }
.cat-corner[hidden]{ display:none }
.cat-nap,.cat-call{
  background:none;border:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cat-nap img{
  image-rendering:pixelated;width:88px;height:88px;display:block;
  opacity:.75;transition:opacity .2s,transform .2s;
}
.cat-nap:hover img{ opacity:1;transform:translateY(-2px) }
.cat-call{
  padding:5px 12px;border-radius:14px;
  border:1px dashed var(--line-strong);color:var(--ink-dim);
  font-family:var(--font-body);font-size:12px;line-height:1;
  transition:border-color .2s,color .2s;
}
.cat-call:hover{ border-color:var(--accent);color:var(--accent-text) }

@media(max-width:900px){
  .cat-corner{ display:none }
  .edit-dock{ flex-wrap:wrap; gap:10px; padding:10px var(--gutter-sm) }
  .edit-dock-detail{ white-space:normal }
  .edit-dock-actions{ gap:10px; width:100%; justify-content:space-between }
  .ed-tab{ padding:8px 10px; font-size:9.5px; letter-spacing:.06em }
  body.is-inline-editing,
  body:has(.edit-dock:not([hidden])){ padding-bottom:126px }
}

/* ---------- One show, opened from its card ----------
   The dashboard's episode form, brought over intact: the same surface, the
   same accent border marking the thing being edited, the same three-column
   grid. It sits under the season's grid on the Episodes page now instead of
   behind a tab. See scripts/admin/episode-panel.js. */
.ep-form{
  background:var(--bg-2);
  border:1px solid var(--accent);
  border-radius:4px;
  padding:24px;
  margin:16px 0 8px;
}
.ep-form .form-grid{
  display:grid;
  grid-template-columns:120px 1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
.ep-form .form-grid .field{ margin:0 }
.ep-form .field.wide{ margin-bottom:14px }
.ep-form .form-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap }
.ep-form .btn.ghost.is-danger{ color:var(--ink-dim) }
.ep-form .btn.ghost.is-danger:hover{
  border-color:var(--danger);
  color:var(--accent-text);
  background:rgba(157,19,19,.12);
}

/* The card whose form is open. Marked the way the site marks a current
   season pill: filled with the accent rather than outlined in it. */
body.is-inline-editing .ep-card{ cursor:pointer }
body.is-inline-editing .ep-card.is-editing{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media(max-width:700px){
  .ep-form{ padding:18px }
  .ep-form .form-grid{ grid-template-columns:1fr; gap:12px }
}

/* ---------- Editing the equipment list ----------
   Only the editor account and exec ever see this; see canEditInventory() in
   eq/console.js. Collapsed by default because it is used a few times a year
   and should not be the biggest thing on the page. */
.eq-inv summary{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.eq-inv summary::-webkit-details-marker{display:none}
.eq-inv summary h3{display:inline-block;margin:0}
.eq-inv summary::after{content:' ▸';color:var(--ink-dim)}
.eq-inv[open] summary::after{content:' ▾'}

.eq-inv-section{border-top:1px solid var(--line);padding:14px 0}
.eq-inv-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.eq-inv-count{font-size:12px;color:var(--ink-dim)}
.eq-link.is-danger{margin-left:auto;color:var(--ink-dim)}
.eq-link.is-danger:hover{color:var(--accent-text);border-bottom-color:var(--accent)}

.eq-inv-items{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.eq-inv-item{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bg-3);border:1px solid var(--line);border-radius:3px;
  padding:5px 8px 5px 11px;font-size:13px;
}
.eq-inv-item button{
  background:none;border:none;color:var(--ink-dim);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px;
}
.eq-inv-item button:hover{color:var(--accent-text)}
.eq-inv-empty{font-size:13px;color:var(--ink-dim)}

.eq-inv-add,.eq-inv-newsection{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eq-inv-add .eq-search,.eq-inv-newsection .eq-search{flex:1;min-width:220px;margin:0;width:auto}
.eq-inv-newsection{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.eq-inv-actions{margin-top:18px;align-items:center}


/* ---------- One person, opened from their card ----------
   Same panel as a show's, so the two read as one editor. The card whose form
   is open is marked the way an open episode is. */
.ep-form .ed-panel-title{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-weight:600;
  margin-bottom:16px;
}
.ep-form .staff-form-grid{grid-template-columns:1fr 1fr}

body.is-inline-editing .staff-card,
body.is-inline-editing .member-card{cursor:pointer}
body.is-inline-editing .staff-card.is-editing,
body.is-inline-editing .member-card.is-editing{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* A name inside a card is edited through the form now, so it should not also
   advertise itself as a field — the whole card is the target. */
body.is-inline-editing .staff-card [data-edit],
body.is-inline-editing .member-card [data-edit]{
  outline:none;
  cursor:pointer;
}
body.is-inline-editing .staff-card [data-edit]:hover,
body.is-inline-editing .member-card [data-edit]:hover{background:transparent}

@media(max-width:700px){
  .ep-form .staff-form-grid{grid-template-columns:1fr}
}


/* ====================== EDITING YOUR OWN PAGE ======================
   The profile fields are a form rather than contenteditable text, because
   almost every one of them starts empty and there is nothing to click on an
   empty field. Same panel treatment as a show's form, so the two read as
   the same kind of thing. */

.pf-fields,.pf-add{
  background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:4px;padding:22px;margin-bottom:26px;
}
.pf-add{margin:30px 0 0}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.pf-grid .field{margin:0}
.pf-fields textarea{
  width:100%;background:var(--bg-3);border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-body);font-size:14px;padding:9px 11px;border-radius:3px;
  resize:vertical;line-height:1.6;
}
.pf-fields textarea:focus{outline:none;border-color:var(--accent)}
.pf-add-row{display:flex;gap:8px;flex-wrap:wrap}

.pf-check{display:flex;align-items:center;gap:9px;margin:4px 0 16px;cursor:pointer;font-size:14px}
.pf-check input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

/* A saved item opens its form when clicked, so it has to look clickable. */
body.is-inline-editing .work-item.is-editable{
  cursor:pointer;padding-left:12px;margin-left:-12px;
  border-left:2px solid transparent;transition:border-color .15s,background .15s;
}
body.is-inline-editing .work-item.is-editable:hover{background:rgba(255,255,255,.02);border-left-color:var(--line-strong)}
body.is-inline-editing .work-item.is-editing{border-left-color:var(--accent);background:rgba(157,19,19,.06)}

@media (max-width:760px){
  .pf-grid{grid-template-columns:1fr}
}