/* ==========================================================================
   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 ---------- */
/* Was `max-width:1100px`, which never applied: `section.block` is a type +
   class selector and outranks a bare class, so this page has always been
   1200px like every other. Removed rather than made to work — every page
   lining up at the same width is the behaviour we want. */
.admin-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;flex-wrap:wrap;margin-bottom:32px;
}
/* 48px here was overridden by the 40px rule further down and never shipped. */
.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, so Publish stays reachable however far down a tab you have
   scrolled. */
.admin-status{
  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, amber while there is something to publish. */
.status-dot{
  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, and the people are plain rows. Nothing is boxed
   inside a box inside a box. */
.sg{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, and each line is one award. */
.editor-field textarea.award-lines{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, sitting in the row. */
.tab-group + .tab-group{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, out of the way of the sticky publish bar on the right. */
.desk-cat{
  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, inside it. Click to let it go; a small mark is
   left behind to call it back. */
.cat-corner{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, not a coloured callout. */
.admin-status{
  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, matching Add person. */
.sg-add-group{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 ----------
   Nothing is outlined at rest.

   Every editable string used to carry a dashed box the whole time editing was
   on. On the staff page that was sixteen boxes, next to fifteen full-width add
   bars and forty-two item buttons — seventy-three marks at once, all the same
   grey dash, so deleting a person looked exactly like fixing a typo. The page
   stopped reading as the site and started reading as a form.

   So the marks come to the cursor instead. The page looks exactly like the
   live site until you point at something, which is also the only way to see
   what you are actually publishing while you edit it.

   Discoverability is carried by the pointer: `cursor:text` changes over every
   editable string before any outline appears, and the dock says editing is on.
   `width:fit-content` keeps the box on the words rather than running the full
   width of a heading. */
body.is-inline-editing [data-text],
body.is-inline-editing [data-edit]{
  outline:1px dashed transparent;
  outline-offset:4px;
  border-radius:2px;
  cursor:text;
  width:fit-content;
  max-width:100%;
  transition:outline-color .14s ease,background-color .14s ease;
}

/* The mark appears under the cursor, and only there. Grey rather than red at
   this stage: red on a string reads as an error, and the accent is spent on
   the thing being changed, not on everything that could be. */
body.is-inline-editing [data-text]:hover,
body.is-inline-editing [data-edit]:hover{
  outline-color:var(--line-strong);
  background:rgba(255,255,255,.03);
}

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. */
/* One strip, not three buttons. The container carries the border and the
   background; the glyphs inside carry nothing, so the whole control is the
   size of one small button instead of three. */
.ed-item-tools{
  position:absolute;
  top:6px;
  right:6px;
  display:flex;
  z-index:6;
  opacity:0;
  transition:opacity .14s ease;
  pointer-events:none;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}

.ed-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink-dim);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .12s,color .12s;
}
/* Hairlines between the glyphs instead of a border around each one. */
.ed-icon + .ed-icon{ box-shadow:-1px 0 0 var(--line) }
.ed-icon svg{
  width:13px;height:13px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.ed-icon:hover{ background:var(--bg-3); color:var(--ink) }
.ed-icon.is-danger:hover{ background:rgba(157,19,19,.18); color:var(--accent-text) }
.ed-icon:focus-visible{ outline:1px solid var(--accent-text); outline-offset:-1px }
[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. */
/* Tight to the list it adds to, clear of the next heading. At 4px below, the
   button sat 21px from the following section title and read as belonging to
   it rather than to the list above. */
.ed-list-tools{ margin:12px 0 30px }

/* A full-width dashed slab under every list was the other half of the mess:
   fifteen of them on the staff page, each as heavy as the content above it,
   and each one pushing the sections apart so the page never looked like
   itself. Now it is an ordinary small button that sits quietly until the list
   it belongs to is pointed at. */
.ed-btn.ed-add{
  display:inline-block;
  width:auto;
  padding:7px 14px;
  border-style:dashed;
  border-color:var(--line);
  background:transparent;
  color:var(--ink-dim);
  opacity:.45;
  transition:opacity .14s ease,border-color .12s,color .12s;
}
[data-list]:hover + .ed-list-tools .ed-btn.ed-add,
.ed-list-tools:hover .ed-btn.ed-add,
.ed-list-tools:focus-within .ed-btn.ed-add{ opacity:1 }
.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}
}


/* ===================== THE NAV WHILE EDITING =====================
   On the public site the current page is a hairline under the word, and that
   stays — this is only for someone who is signed in and editing.

   While editing you are moving between nine pages and changing them, so which
   one you are on stops being a detail and becomes the thing you need to see
   without looking for it. The links become tabs: no gaps, hairline divisions,
   each one filling the bar from top to bottom, and the page you are on filled
   solid red. */

/* Padding moves off the bar and onto the items, so a tab can reach the full
   height of the bar while the bar keeps exactly the height it had. */
body.is-inline-editing .nav-inner{
  padding-top:0;
  padding-bottom:0;
  align-items:stretch;
}
body.is-inline-editing .logo{ padding:14px 0 }

body.is-inline-editing .nav-links{
  gap:0;
  align-items:stretch;
  /* The outer edges of the strip, so the first and last tab are closed off
     rather than running into the bar. */
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
body.is-inline-editing .nav-links li{ display:flex }

body.is-inline-editing .nav-links a{
  display:flex;
  align-items:center;
  padding:0 13px;
  border-radius:0;
  /* One hairline between neighbours rather than a border on each box. */
  border-right:1px solid var(--line);
  transition:background-color .12s,color .12s;
}
body.is-inline-editing .nav-links li:last-child a{ border-right:0 }
body.is-inline-editing .nav-links a:hover{ background:var(--bg-3); color:#fff }

/* The page you are on, filled top to bottom. */
body.is-inline-editing .nav-links a.active{
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
body.is-inline-editing .nav-links a.active:hover{ background:var(--accent) }
/* The underline belongs to the public header; inside a filled tab it is a
   second marker for the same fact. */
body.is-inline-editing .nav-links a.active::after{ display:none }

@media (max-width:900px){
  /* The mobile nav is a stacked drawer, not a strip of tabs. */
  body.is-inline-editing .nav-inner{ padding-top:14px; padding-bottom:14px; align-items:center }
  body.is-inline-editing .logo{ padding:0 }
  body.is-inline-editing .nav-links{ border:0 }
  body.is-inline-editing .nav-links a{ border-right:0 }
}


/* ---------- Adding a show ----------
   The new show goes at the front of the season, so the control is the first
   cell of that grid: an empty frame exactly where the card will appear,
   rather than a button underneath that gives no clue where the thing lands.

   No fixed height: the grid stretches every cell to the row, so letting it
   stretch makes it exactly as tall as the real cards beside it. Forcing the
   thumbnail's 16/9 made it taller than a whole card and pushed the row out. */
.ed-add-card{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:120px;
  padding:0;
  background:transparent;
  border:1px dashed var(--line-strong);
  border-radius:0;
  color:var(--ink-dim);
  cursor:pointer;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .14s,color .14s,background-color .14s;
  /* The grid places it first; this keeps it there if the browser reorders. */
  order:-1;
}
.ed-add-card svg{
  width:28px;height:28px;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
}
.ed-add-card:hover{
  border-style:solid;
  border-color:var(--accent);
  color:var(--accent-text);
  background:rgba(157,19,19,.06);
}
.ed-add-card:focus-visible{ outline:1px solid var(--accent-text); outline-offset:2px }


/* ---------- The portrait, while editing ----------
   The obvious thing to press to change a photo is the photo. */
.person-photo.is-uploadable{ cursor:pointer }
.person-photo-hint{
  position:absolute;left:0;right:0;bottom:0;
  padding:7px 0;
  font-family:var(--font-body);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;text-align:center;
  color:var(--ink);background:rgba(10,10,10,.82);
  border-top:1px solid var(--line-strong);
  opacity:0;transition:opacity .14s ease;
}
.person-photo.is-uploadable:hover .person-photo-hint,
.person-photo.is-uploadable:focus-visible .person-photo-hint{ opacity:1 }
.person-photo.is-uploadable:hover{ border-color:var(--accent) }
.person-photo.is-uploadable:focus-visible{ outline:1px solid var(--accent-text); outline-offset:2px }


/* A form opened from a card is a cell of that card's grid, spanning every
   column, so it unfolds under the row you clicked rather than after the whole
   list. Without the span it is an ordinary cell: it sits beside the card and
   stretches that card to its own height — 508px next to a 250px neighbour. */
.ep-grid > .ep-form,
.work-list > .ep-form{ grid-column:1 / -1; margin:4px 0 8px }

/* Cards keep their own height instead of stretching to the tallest in the row. */
.work-list{ align-items:start }


/* ---------- Form width ----------
   The panel spans the whole row because it belongs to that row, but its
   fields do not have to. A title input stretched to 1094px for the words
   "Show 4" reads as a form that was never laid out — the eye travels the full
   width to find a caret sitting in the first inch of it.

   So the panel stays wide and the form sits in a column inside it, at a width
   the longest real value actually needs. Kind and Date share a line because
   both are short; everything else gets the column. */
.ep-form > .field,
.ep-form > .form-grid,
.ep-form > .form-actions,
.ep-form > .pf-check,
.ep-form > .ed-panel-title{ max-width:620px }

/* Was `120px 1fr 1fr`, which gave Kind a 95px box next to a 473px Date.
   Sized to what each one holds instead. */
.ep-form .form-grid{ grid-template-columns:minmax(120px,1fr) minmax(150px,1fr); }
.ep-form .form-grid.pf-grid{ grid-template-columns:repeat(3,1fr) }

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