/* ============================================================
   GeorgeTutor Admin Portal — blank-canvas overrides
   Applies only to page id 3865 (slug: gt-admin)
   ============================================================ */

/* Hide all theme chrome on the admin page */
body.page-id-3865 #masthead,
body.page-id-3865 #colophon,
body.page-id-3865 .site-header,
body.page-id-3865 .site-footer,
body.page-id-3865 #secondary,
body.page-id-3865 .sidebar,
body.page-id-3865 .main-navigation,
body.page-id-3865 #st-topbar-cta,
body.page-id-3865 .st-topbar-cta-message,
body.page-id-3865 .st-topbar-cta-btn,
body.page-id-3865 .st-topbar-cta-collapse-open {
  display: none !important;
}

/* Reset the page wrapper so content uses the full viewport */
body.page-id-3865 {
  background: #f5f0e3;          /* same cream as portal */
  margin: 0;
  padding: 0;
}
body.page-id-3865 #page,
body.page-id-3865 #content,
body.page-id-3865 #main,
body.page-id-3865 #primary,
body.page-id-3865 .content-area {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Keep the WordPress entry-header visible on the admin page so that
   portal.css's eyebrow + title chrome (GEORGETUTOR eyebrow, dk-blue UPPERCASE
   serif H1) renders here the same way it does on the user portal pages.
   Only the entry-meta (post date, author, etc.) is suppressed. */
body.page-id-3865 .entry-meta {
  display: none !important;
}

/* On case-page views (gt_admin.js sets [data-case] on #gt-admin-root) the
   in-content header carries the family-specific title (e.g. "Cohen") plus
   its own "GeorgeTutor \00B7 Case file" eyebrow. Suppress the WP entry-
   header there so the page does not show two GEORGETUTOR eyebrows. */
body.page-id-3865:has(#gt-admin-root[data-case]) .entry-header {
  display: none !important;
}

/* Frame the WP entry-header on the admin page: a little breathing room above
   the purple GEORGETUTOR eyebrow, and the bottom margin pulled in tight so
   the 3-link row (Students index \00B7 Families index \00B7 Neither) sits
   close under the ADMIN PORTAL title. */
body.page-id-3865 .entry-header {
  margin-top: 18px !important;
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  /* Reserve room on both sides for the floating purple admin-quickbar
     buttons that gt_admin.js absolutely-positions inside .entry-header
     (← Admin hub on the left when on a case file, View bookings as
     admin → on the right). On the bare hub view the left button does
     not exist, but we keep symmetric reservation (200px both sides) so
     the eyebrow + title centre truly to the page midline rather than
     shifting left because of asymmetric padding. */
  position: relative !important;
  padding-left: 200px !important;
  padding-right: 200px !important;
  text-align: center !important;
}
body.page-id-3865 .entry-title {
  margin-bottom: 0 !important;
  text-align: center !important;
}
/* Centre the GEORGETUTOR eyebrow that portal.css renders via
   .entry-header::before. The pseudo-element is positioned by
   portal.css; force left:0 / right:0 / text-align:center so it sits
   centrally above the title at every viewport, not just on phones. */
body.page-id-3865 .entry-header::before {
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
}
/* Case-file views restore the 130px left reservation so the floating
   ← Admin hub button has room without distorting the centred title.
   The body keeps text-align:center; the asymmetric padding shifts the
   centred text slightly right of the geometric page centre, which
   matches the visual weight of the two buttons. */
body.page-id-3865:has(#gt-admin-root[data-case]) .entry-header {
  padding-left: 130px !important;
}
body.page-id-3865 .entry-header::after {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
body.page-id-3865 .entry-content {
  padding-top: 0 !important;
}
body.page-id-3865 #gt-admin-root {
  margin-top: 0;
}
body.page-id-3865 #gt-admin-root > .gt-case-back--center:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------
   Show-archived toggle (Families + Students indexes).
   The toggle is a <button class="gt-link-btn"> embedded in the
   ledger meta line ("17 active \u00b7 4 archived \u00b7 Show 4 archived").
   The base .gt-link-btn reset has no white-space rule, so on narrow
   viewports the label "Show 4 archived" can wrap across two lines.
   Force it to stay on one line; the rest of the meta line can still
   wrap normally above/below.
   -------------------------------------------------------------- */
body.page-id-3865 #gt-families-toggle-archived,
body.page-id-3865 #gt-students-toggle-archived {
  white-space: nowrap;
}

/* --------------------------------------------------------------
   Admin Hub levers \u2014 two-span label scheme (May-30 2026).
   Each of the 5 hub-lever buttons (#gt-admin-hub-levers .gt-case-actions
   .gt-case-panel__cta) carries an inner structure of
     <span class="gt-hub-lever__line gt-hub-lever__verb">verb</span>
     <span class="gt-hub-lever__line gt-hub-lever__rest">rest</span>
   so the label can render either as two stacked lines (desktop / tablet /
   landscape phone variants where vertical pile is wanted) or as a single
   flowing line (portrait phone vertical pile; landscape phone 2-abreast
   grid). The verb (Message / Edit / Set / Visit / See) sits on the top
   line. Mirrors the .gt-case-action__line pattern already used by the
   7 case-file levers, but uses a dedicated class so the hub-lever and
   case-file selectors stay independent and one can be restyled without
   the other.

   Base rule (applies everywhere unless overridden): block stack, nowrap,
   centred. The button itself centres text via .gt-case-actions context;
   we set text-align here for safety. .gt-hub-lever__rest--long is hidden
   by default \u2014 it only appears in the phone variants where the
   wording switches to the long form ("registration forms" vs "Reg forms").
   -------------------------------------------------------------- */
body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__line {
  display: block;
  white-space: nowrap;
  line-height: 1.18;
  text-align: center;
}
body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__rest--long {
  display: none;
}

/* --------------------------------------------------------------
   Desktop / tablet widescreen: equalize the 5 hub-lever button
   widths so every button hosts the same generous frame regardless
   of label length. Without this, each button's width is content-
   driven and the short-verb / long-rest pairs ("Visit / Zoom Room",
   "Edit / parameters") read optically asymmetric because the verb
   line's whitespace differs from the rest line's whitespace on a
   narrow frame. Distributing width evenly via flex:1 removes that
   confounder; every label now centres inside an identical box.
   Scoped OUT of the landscape-phone (\u2264900px landscape) and
   portrait-phone media blocks below, which have their own layouts.
   -------------------------------------------------------------- */
@media (min-width: 901px), (min-width: 601px) and (orientation: portrait) {
  body.page-id-3865 #gt-admin-hub-levers .gt-case-actions > .gt-case-panel__cta {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* --------------------------------------------------------------
   Landscape-phone adaptation for the 5 hub levers.
   Per George (May-30 2026): in landscape phone view the 5 buttons
   should be laid out 2-abreast with the 5th ("See registration
   forms") centred on the bottom row, OR a vertical pile. The
   2-abreast layout is chosen as the ideal. Each button shows the
   long single-line label ("Message all families", "See registration
   forms", etc.) on one line \u2014 no internal stacking.

   Implementation:
     \u2022 Switch .gt-case-actions inside #gt-admin-hub-levers from
       its desktop flex-wrap to a 2-column grid.
     \u2022 The 5th button (last-child of 5) spans both columns and
       justifies itself centred so it sits centred on row 3.
     \u2022 Inside each button, flatten the two .gt-hub-lever__line
       spans to inline so the verb and rest read on one line with a
       single space between them. (The HTML carries a literal space
       between the spans, so a space is already there \u2014 no need
       for a ::before injector. But add one anyway for safety in case
       the page HTML is ever rewritten without the literal space.)
     \u2022 Swap short label for long on the 5th button (hide "Reg
       forms", show "registration forms").
   This block is intentionally scoped to landscape phones (width
   <=900px AND orientation:landscape). Portrait phone keeps its
   existing vertical-pile rules; desktop / tablet are untouched.
   -------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  body.page-id-3865 #gt-admin-hub-levers .gt-case-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 8px;
    align-items: stretch;
  }
  body.page-id-3865 #gt-admin-hub-levers .gt-case-actions > .gt-case-panel__cta {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 5th and final lever (See registration forms) \u2014 span both grid
     columns and centre itself horizontally. max-width keeps it from
     stretching edge-to-edge so it visually anchors the bottom row. */
  body.page-id-3865 #gt-admin-hub-levers .gt-case-actions > .gt-case-panel__cta:nth-child(5) {
    grid-column: 1 / span 2;
    justify-self: center;
    width: auto;
    min-width: 60%;
    max-width: 80%;
  }
  /* Flatten the two-span layout into one line per button. */
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__line {
    display: inline;
    line-height: inherit;
  }
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__verb + .gt-hub-lever__rest::before,
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__rest--short + .gt-hub-lever__rest--long::before {
    content: " ";
    white-space: pre;
  }
  /* Switch the 5th button to the long wording ("registration forms"). */
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__rest--short {
    display: none;
  }
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__rest--long {
    display: inline;
  }

  /* Landscape-phone adaptation for the CASE-FILE's 7 Administrator-levers
     row (`.gt-case-action.gt-case-action--live`). On landscape phones the
     row continues to read as ONE row of 7 buttons -- George's directive is
     that landscape preserves the original two-line layout per button (verb
     on top, rest underneath) but with smaller text so the labels actually
     fit. The desktop rules at lines 1916-1976 already supply the flex
     layout (`.gt-case-actions { display:flex; gap:10px; }`, each child
     `flex:1 1 0; min-width:0;`) and the two-line stack (`.gt-case-action__
     line { display:block; white-space:nowrap; }`). All we need to do here
     is shrink font + padding so a 7-up row fits the ~800-900px viewport
     of a typical phone in landscape, AND defeat the portrait block above
     which would otherwise stack the buttons vertically (since the portrait
     selector `body.page-id-3865 .gt-case-actions` is unscoped and would
     fire on landscape phones too if its media query matched -- which it
     does not at orientation:landscape, so we're only adjusting the
     desktop fallback that lands here). June 2026, George. */
  body.page-id-3865 .gt-case-panel--admin .gt-case-actions {
    gap: 6px;
  }
  body.page-id-3865 .entry-content button.gt-case-action,
  body.page-id-3865 .gt-case-action,
  body.page-id-3865 .gt-case-panel--admin .gt-case-actions > .gt-case-action {
    padding: 8px 8px;
    font-size: 0.72rem;
    line-height: 1.18;
    letter-spacing: 0;
  }
  /* Two-line spans stay block-stacked at this size; explicit block here is
     belt-and-braces in case some other rule flattens them. */
  body.page-id-3865 .entry-content button.gt-case-action .gt-case-action__line,
  body.page-id-3865 .gt-case-action .gt-case-action__line {
    display: block;
    white-space: nowrap;
    line-height: 1.15;
  }
}

/* Default: hide the portrait-only inline replacement chips on every
   viewport that isn't portrait phone. JS unconditionally appends them
   so the media-query rule has something to flip on. Without this
   default-hide they would render as plain text links on desktop /
   tablet / landscape, visually duplicating the floating top-left and
   top-right buttons. The portrait media block re-flips both classes
   back to display:block. (Hub link added June 2026 alongside the
   existing View link, May 2026.) */
.gt-admin-portrait-hublink,
.gt-admin-portrait-viewlink {
  display: none !important;
}

/* --------------------------------------------------------------
   Portrait-phone adaptation for the admin portal header.
   Only applies on narrow portrait viewports (phones held upright).
   Does NOT affect tablets, landscape, or desktop.

   Goals (May 2026, George):
     1. Center the GEORGETUTOR eyebrow + ADMIN PORTAL title.
     2. Hide the floating top-right "View bookings as admin →"
        button so it stops crowding/decentering the eyebrow.
     3. Surface a clean centered text-link replacement for
        "View bookings as admin" *under* the title so the
        capability is still one tap away.
   The bare-hub case uses .entry-header; the case-file uses
   .gt-admin-head. Both are handled below.
   -------------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  /* Bare-hub WP entry-header */
  body.page-id-3865 .entry-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
  /* Round 9h (revised): the case-file panels were boxed in by the
     Twenty Seventeen .wrap chain, NOT .entry-content. The page nests
     four .wrap divs (wrapper > wrap > site-content > wrap > primary >
     site-main > wrap > entry-content); each .wrap carries the theme's
     mobile horizontal gutter. Zero out every theme wrapper on the
     case-file page in portrait so the panels (Subscription, Schedule,
     Administrative levers, Teaching notes, Audit trail, Outliers)
     extend to within 4px of the phone bezel. The 4px floor comes from
     .entry-content; everything else is forced to zero with !important
     so the Twenty Seventeen mobile rules can't win on specificity.
     (George round 9h, June 6 2026: \"those panels don't come anywhere
     near the outer edge of my phone\".) */
  body.page-id-3865 .wrapper,
  body.page-id-3865 .wrap,
  body.page-id-3865 .site-content,
  body.page-id-3865 .site-content-contain,
  body.page-id-3865 .site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  body.page-id-3865 .entry-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  body.page-id-3865 .entry-header .entry-title {
    text-align: center !important;
  }
  /* Center the GEORGETUTOR eyebrow that portal.css renders
     via .entry-header::before. */
  body.page-id-3865 .entry-header::before {
    text-align: center !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* Hide the floating top-right View-bookings quickbar button on
     both the bare hub and the case-file header. JS replaces it
     with an inline centered link (see .gt-admin-portrait-viewlink). */
  body.page-id-3865 .entry-header   .gt-admin-quickbar__btn[href*="portal-bookings"],
  body.page-id-3865 .gt-admin-head  .gt-admin-quickbar__btn[href*="portal-bookings"] {
    display: none !important;
  }
  /* Also hide the floating top-LEFT ← Admin hub button on the case-
     file header in portrait. George's portrait layout (June 2026)
     replaces it with an inline chip (.gt-admin-portrait-hublink)
     that sits centred under the eyebrow, above the View-bookings
     chip. The .entry-header (bare hub) doesn't show a hub button to
     begin with (you're already on the hub), so the bare hub case is
     a no-op -- but the selector is harmless there. */
  body.page-id-3865 .gt-admin-head .gt-admin-quickbar__btn[href="/gt-admin/"] {
    display: none !important;
  }
  /* Case-file in-content header: drop reserved horizontal padding
     so the centered eyebrow + title aren't pushed off-center. */
  body.page-id-3865 .gt-admin-head {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
  /* Portrait-only inline replacements for the floating top-left and
     top-right quickbar buttons. JS appends both into the header
     (Admin hub chip + View bookings chip). Each chip renders as a
     centred BLOCK so the two land on their own lines in the order
     George requested: eyebrow ▸ Admin hub chip ▸ View bookings chip
     ▸ title ▸ student row. The chip itself is a max-content block
     centred via margin:auto so it hugs its label and sits on the
     header's centre axis.

     Notes on cascade:
       • Both selectors live OUTSIDE any other rule (no later top-
         level override touches them), so !important isn't required
         for the box model, only for color (matches existing
         .gt-admin-portrait-viewlink convention so it survives any
         theme link-color rule).
       • display gating to portrait phone only is via the surrounding
         @media query AND the default-hide rule at line ~265 that
         sets `display:none !important` on both classes outside this
         media block. */
  .gt-admin-portrait-hublink,
  .gt-admin-portrait-viewlink {
    display: block !important;
    width: -moz-fit-content;
    width: fit-content;
    margin: 8px auto 0;
    padding: 6px 14px;
    background: #5e4a8c;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  /* A touch more breathing room above the title once both chips have
     stacked under the eyebrow -- otherwise the View chip touches the
     family-name h1 directly below it. */
  .gt-admin-portrait-viewlink {
    margin-bottom: 10px;
  }

  /* Administrator-levers on portrait phones — applies to BOTH:
       (a) the Hub view: 5 buttons inside #gt-admin-hub-levers using
           class .gt-case-panel__cta (Message all families, Edit
           parameters, Set availability, Personal Zoom Room,
           See Registration Form).
       (b) the Case-file view: 7 buttons using class .gt-case-action
           (Post to family, Manage bookings, View as family,
           Issue flex or voucher, Manage connection, Inspect record,
           Registration form).
     The horizontal flex-wrap that works on desktop crams these
     buttons into clipped rows on phone width. On portrait phones
     we stack them vertically — one full-width button per row,
     single-line centered label, no wrap, comfortable tap target. */
  body.page-id-3865 .gt-case-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }
  /* Buttons themselves: full width, single line, centered, no wrap.
     Padding bumped to 14px vertical (June 2026, George) so the buttons
     are visibly deeper than the previous 11px -- they now read as a
     proper tap target rather than a thin pill. Font ticks down to
     0.86rem so the longest case-file label ("Issue flex or voucher",
     21 chars on one inline line) fits inside the button on a 360px
     phone with comfortable side padding rather than ellipsising.

     !important on every property here is mandatory, not stylistic:
     two top-level rules at lines ~1972 and ~5298 (outside any media
     query) set the base button padding/font and force the .__line
     spans to display:block; width:fit-content. Both rules use the
     IDENTICAL selector string this block uses, so specificity ties.
     With a tied specificity the LATER rule in source order wins --
     and those rules sit thousands of lines BELOW this portrait block.
     Without !important the portrait overrides are silently dropped.
     Discovered when George reported "buttons have not changed size
     and... no effort to get the text onto one line" after the
     first attempt -- the cascade had eaten every change. */
  body.page-id-3865 .entry-content button.gt-case-action,
  body.page-id-3865 .gt-case-action,
  body.page-id-3865 #gt-admin-hub-levers .entry-content button.gt-case-panel__cta,
  body.page-id-3865 #gt-admin-hub-levers .gt-case-panel__cta,
  body.page-id-3865 #gt-admin-hub-levers .gt-case-actions .gt-case-panel__cta {
    /* flex centering puts the single-line label on the button's exact
       vertical midline regardless of font ascender/descender metrics.
       block + padding alone leaves the label sitting on the text
       baseline, which on most fonts reads as slightly above centre.
       (June 2026, George) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 14px !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Flatten the two-line span layout in the case-file levers so each
     label reads as one centred line. Inject a space between phrases
     so "Issueflexor voucher" doesn't happen. !important is mandatory
     here too -- the rule at line ~5298 below forces display:block on
     these spans with identical specificity to this one. */
  body.page-id-3865 .entry-content button.gt-case-action .gt-case-action__line,
  body.page-id-3865 .gt-case-action .gt-case-action__line {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  body.page-id-3865 .gt-case-action .gt-case-action__line + .gt-case-action__line::before {
    content: " " !important;
    white-space: pre !important;
  }
  /* Same flatten treatment for the 5 hub-lever buttons' two-span
     labels: in portrait the buttons stack vertically (one per row)
     and each label reads on one centred line with the long wording
     ("See registration forms", not "See / Reg forms"). The HTML
     carries a literal space between the spans; the ::before is
     belt-and-braces in case the HTML is ever regenerated without it. */
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__line {
    display: inline;
    width: auto;
    margin: 0;
    white-space: nowrap;
    line-height: inherit;
  }
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__verb + .gt-hub-lever__rest::before,
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__rest--short + .gt-hub-lever__rest--long::before {
    content: " ";
    white-space: pre;
  }
  /* Switch the 5th button to the long wording ("registration forms")
     in portrait \u2014 matches the landscape phone view. Desktop keeps
     the short "Reg forms" two-line label. */
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__rest--short {
    display: none;
  }
  body.page-id-3865 #gt-admin-hub-levers .gt-hub-lever__rest--long {
    display: inline;
  }

  /* ------------------------------------------------------------
     Hub index tables — Students, Families, Registrations, Pending
     payments. On desktop these are fixed-layout tables with hard
     percentage column widths and 20-22px ledger padding. On a phone
     screen that combination clips columns and forces text-overflow.
     Portrait fix: drop the ledger padding, drop fixed layout, let
     columns auto-size to content, tighten typography, and allow
     horizontal scroll inside the ledger as a safety net so a wide
     table never blows out the page. Card-style stacking would be
     prettier but would require JS-side data-label attributes that
     don't exist; this approach is generic and works for all four
     tables without touching the JS that builds them.
     ------------------------------------------------------------ */
  body.page-id-3865 .entry-content {
    padding: 14px !important;
  }
  body.page-id-3865 .gt-admin-ledger {
    padding: 10px 10px;
    /* Let the ledger scroll horizontally if a wide table can't
       shrink any further (Registrations + Pending each have 6
       columns including dates and amounts). */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.page-id-3865 .gt-admin-table {
    table-layout: auto;
    font-size: 0.78rem;
  }
  body.page-id-3865 .gt-admin-table thead th {
    font-size: 0.60rem;
    letter-spacing: 0.06em;
    padding: 6px 6px;
    white-space: normal;
    line-height: 1.15;
  }
  body.page-id-3865 .gt-admin-table tbody td {
    padding: 6px 6px;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Reset the fixed percentage widths declared on .col-* classes so
     auto-layout can do its job. Use auto for everything; the right-
     aligned numeric column keeps its alignment via its own rule. */
  body.page-id-3865 .gt-admin-table .col-family,
  body.page-id-3865 .gt-admin-table .col-student,
  body.page-id-3865 .gt-admin-table .col-students,
  body.page-id-3865 .gt-admin-table .col-entitlements,
  body.page-id-3865 .gt-admin-table .col-entit-pills,
  body.page-id-3865 .gt-admin-table .col-status,
  body.page-id-3865 .gt-admin-table .col-renewal,
  body.page-id-3865 .gt-admin-table .col-combined {
    width: auto;
  }
  /* Status + entitlement pills shrink to keep rows narrow. */
  body.page-id-3865 .gt-admin-status {
    font-size: 0.62rem;
    padding: 1px 6px;
  }
  body.page-id-3865 .col-entit-pills .gt-admin-pill {
    font-size: 0.58rem;
    padding: 1px 6px;
    min-width: 0;
    margin-right: 2px;
  }
  /* Pending payments tray uses its own inline-styled <table> built
     in JS, not .gt-admin-table. Apply the same portrait tightening. */
  body.page-id-3865 #gt-admin-pending-tray {
    padding: 10px 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.page-id-3865 #gt-admin-pending-tray table {
    font-size: 0.76rem !important;
  }
  body.page-id-3865 #gt-admin-pending-tray th,
  body.page-id-3865 #gt-admin-pending-tray td {
    padding: 6px 6px !important;
    font-size: 0.62rem !important;
  }
  body.page-id-3865 #gt-admin-pending-tray td {
    font-size: 0.76rem !important;
  }

  /* ----------------------------------------------------------
     Schedule-window pills (Case file ▸ Forward schedule) —
     PORTRAIT-ONLY compact labels.
     George (June 6 2026): in portrait, swap each pill's text
     label for a short arrow-symbol form so all eight pills fit
     elegantly in the narrow viewport. Landscape, tablet, and
     desktop are untouched.

     Implementation: hide the original button text via
     font-size:0 (collapses the text node without removing it,
     preserves screen-reader/aria via aria-label if present and
     the DOM still carries the human label) and inject the
     symbol via ::before with a normal font-size. data-win
     attribute is the source of truth (set by JS PILL_SPEC).
     ---------------------------------------------------------- */
  /* Pill is flipped to a centering flex container so the injected
     ::before glyph sits dead-centre regardless of native text-align,
     inherited padding asymmetry, or the parent flex distribution.
     min-width raised to 56px (was 92px desktop, 0 in previous portrait
     attempt) so all eight chips share the row width evenly while
     still hugging their tiny glyph. */
  /* Portrait paging pills (George June 6 2026 \u2014 round 6):
     Replace the unicode \u2190 / \u2192 glyphs with the same SVG arrow
     used in the Add-Session Prev/Next pills. Unicode arrows render at
     wildly different sizes across mobile font stacks; SVGs are pixel-
     identical and weight-matched to the navbtn pair.

     Implementation:
       - ::before  = label text ("All", "60", "7", "AY", "Cust").
       - background-image carries the SVG arrow; padding-left/right
         opens room for it so the label stays centred.
       - Past pills get a left arrow; Next pills get the same arrow
         mirrored via background-image (separate data URI, mirrored
         path). */
  body.page-id-3865 .gt-case-winpill {
    font-size: 0 !important;
    min-width: 56px !important;
    padding: 4px 4px !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background-repeat: no-repeat !important;
    background-position: center left 8px !important;
    background-size: 14px 14px !important;
  }
  body.page-id-3865 .gt-case-winpill::before {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.35;
    display: block;
    text-align: center;
    width: 100%;
  }
  /* SVG arrow (currentColor) \u2014 same path as gt-addsess__navbtn-arrow.
     Left-pointing variant. Encoded as a data URI. The stroke colour is
     baked to deep-purple ink (#2b1f3d) because background-image cannot
     inherit currentColor; the navbtn uses currentColor via inline SVG. */
  body.page-id-3865 .gt-case-winpill[data-win="all-past"],
  body.page-id-3865 .gt-case-winpill[data-win="past-60"],
  body.page-id-3865 .gt-case-winpill[data-win="past-week"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 12 H5 M10 7 L5 12 L10 17' fill='none' stroke='%232b1f3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-position: center left 6px !important;
    padding-left: 22px !important;
  }
  /* Right-pointing variant: same path mirrored horizontally (translate +
     scaleX(-1)) so weight and length match exactly. */
  body.page-id-3865 .gt-case-winpill[data-win="next-week"],
  body.page-id-3865 .gt-case-winpill[data-win="next-60"],
  body.page-id-3865 .gt-case-winpill[data-win="all-next"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(24 0) scale(-1 1)'><path d='M20 12 H5 M10 7 L5 12 L10 17' fill='none' stroke='%232b1f3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></g></svg>") !important;
    background-position: center right 6px !important;
    padding-right: 22px !important;
  }
  /* When a pill is active (filled purple), recolour the SVG to white
     so it reads against the dark fill. Same path, white stroke. */
  body.page-id-3865 .gt-case-winpill--active[data-win="all-past"],
  body.page-id-3865 .gt-case-winpill--active[data-win="past-60"],
  body.page-id-3865 .gt-case-winpill--active[data-win="past-week"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 12 H5 M10 7 L5 12 L10 17' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  }
  body.page-id-3865 .gt-case-winpill--active[data-win="next-week"],
  body.page-id-3865 .gt-case-winpill--active[data-win="next-60"],
  body.page-id-3865 .gt-case-winpill--active[data-win="all-next"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(24 0) scale(-1 1)'><path d='M20 12 H5 M10 7 L5 12 L10 17' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></g></svg>") !important;
  }
  body.page-id-3865 .gt-case-winpill[data-win="all-past"]::before      { content: "All"; }
  body.page-id-3865 .gt-case-winpill[data-win="past-60"]::before       { content: "60"; }
  body.page-id-3865 .gt-case-winpill[data-win="past-week"]::before     { content: "7"; }
  body.page-id-3865 .gt-case-winpill[data-win="academic-year"]::before { content: "AY"; }
  body.page-id-3865 .gt-case-winpill[data-win="next-week"]::before     { content: "7"; }
  body.page-id-3865 .gt-case-winpill[data-win="next-60"]::before       { content: "60"; }
  body.page-id-3865 .gt-case-winpill[data-win="all-next"]::before      { content: "All"; }
  body.page-id-3865 .gt-case-winpill[data-win="custom"]::before        { content: "Cust"; }

  /* ----------------------------------------------------------
     Manage-bookings calendar — PORTRAIT-ONLY 4-day layout.
     George (June 6 2026 — final form): the admin's case-file calendar
     in portrait mirrors the family-portal 4-day view, and pages by
     four days at a time so the admin can reach every weekday in two
     clicks. Nav row reflows so:
       Row A (centred): [Clear forward (family)]
       Row B (centred):   [\u2190]   [This week]   [\u2192]
       Row C (centred):   May 31 \u2013 Jun 3   (range caption)
     Prev/Next are arrow-only in portrait — the " Prev week" / "Next week "
     spans live behind .gt-addsess__navbtn-wk which is hidden here.
     The navtop’s This-week twin is hidden; the nav row’s This-week
     twin is shown between the arrows.
     ---------------------------------------------------------- */
  /* Navtop in portrait: Clear-forward only (This-week moves into the
     nav row between the arrows). */
  body.page-id-3865 .gt-addsess__navtop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 2px 0 6px;
  }
  body.page-id-3865 .gt-addsess__navtop-today { display: none; }
  body.page-id-3865 .gt-addsess__navtop-clear { display: inline-flex; align-items: center; }
  /* Hide the trailing " Prev week" / "Next week " text spans so the
     Prev / Next pills render as bare arrows in portrait. */
  body.page-id-3865 .gt-addsess__navbtn-wk { display: none; }
  /* Nav row in portrait: arrow | This-week | arrow | range. Use a
     two-row grid so the range caption sits on its own line under the
     three pills, centred, with no comma + year. */
  body.page-id-3865 .gt-addsess__nav {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    gap: 6px 10px;
    align-items: center;
  }
  body.page-id-3865 .gt-addsess__nav [data-addsess-prev],
  body.page-id-3865 .gt-addsess__nav .gt-addsess__nav-today,
  body.page-id-3865 .gt-addsess__nav [data-addsess-next] {
    grid-row: 1;
    justify-self: center;
  }
  body.page-id-3865 .gt-addsess__nav .gt-addsess__nav-today { display: inline-flex; }
  body.page-id-3865 .gt-addsess__nav [data-addsess-prev],
  body.page-id-3865 .gt-addsess__nav [data-addsess-next] {
    min-width: 44px;
    padding: 4px 10px;
    font-size: 1rem;
    line-height: 1;
  }
  /* Arrow sizing inside the portrait nav pills: slightly larger than
     the wide-view baseline so the icon reads cleanly at phone DPR. */
  body.page-id-3865 .gt-addsess__navbtn-arrow {
    width: 18px;
    height: 18px;
  }
  body.page-id-3865 .gt-addsess__range {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 600;
    color: #4a3c20;
    padding-top: 2px;
  }
  /* Cell sizing for the 4-day portrait grid. Hour rail thinner so the
     four data columns each get a usable width; cell padding tightened.
     The grid container itself is repainted in the admin purple wash so
     the gutters and corner read as a calendar inside the purple admin
     chrome rather than the legacy warm-cream sheet (George June 6 2026). */
  body.page-id-3865 .gt-addsess__grid[data-days="4"] {
    font-size: 0.7rem;
    background: #f3edf9;       /* gutters between cells — admin pale lavender wash */
    border-color: #d7cae3;     /* match — admin lavender border */
  }
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__corner,
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__head,
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__hour {
    background: #f3edf9;       /* rail / head / corner blocks also lavender */
    color: #4d3270;            /* darker purple ink for legibility on lavender */
  }
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__head-d,
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__head-n {
    color: #4d3270;
  }
  /* Hour rail in portrait: stack "4" over "AM", centred, every row.
     The two spans switch from inline to block + text-align centre. The
     hour cell itself becomes a vertical flex column. */
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__hour {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 2px 0;
    line-height: 1.05;
  }
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__hour-n {
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 0.78rem;
  }
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__hour-ap {
    display: block;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    opacity: 0.85;
  }
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__cell {
    min-height: 28px;
    padding: 2px 2px;
    font-size: 0.66rem;
  }
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__hour {
    font-size: 0.66rem;
    padding: 2px 2px;
  }
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__head-d,
  body.page-id-3865 .gt-addsess__grid[data-days="4"] .gt-addsess__head-n {
    font-size: 0.72rem;
  }

  /* ----------------------------------------------------------
     Subscription / Schedule panel header CTAs ("Manage",
     "Adjust") — PORTRAIT-ONLY fit.
     George (June 6 2026): these two buttons share class
     .gt-case-panel__cta and sit on the right edge of each
     panel's flex header (.gt-case-panel__head uses
     justify-content:space-between). On phone portrait the
     default 6px/14px padding plus the inherited 0.82rem size
     made the labels feel cramped — the centre of the glyph
     drifted off-button. Bump horizontal padding, forbid
     wrap, give a touch more height so "Manage" / "Adjust"
     sit perfectly centred. The header's flex behaviour keeps
     the button on the right; we don't touch alignment. */
  body.page-id-3865 .entry-content .gt-case-panel__head button.gt-case-panel__cta,
  body.page-id-3865 .gt-case-panel__head .gt-case-panel__cta {
    padding: 7px 18px !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    min-width: 76px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ------------------------------------------------------------
   Registrations table — phone adaptations (BOTH portrait AND
   landscape). The other three hub tables (Students, Families,
   Pending) render acceptably with the generic portrait rules
   above plus the desktop landscape layout. Registrations is the
   only table with:
     • 6 explicit-pixel column widths declared inline on each
       <th> (Submitted 115, Family 110, Student 135, Start 95,
       Status 105, Action 75) totalling ~635 px + the elastic
       Entitlement column. On phone widths this overflows.
     • A stacked Action column whose labels ("Inspect",
       "Instantiate", "Accept", "Dismiss") fail to fit in 75 px
       and split a letter to a second line.
   Fix scope is intentionally narrow: only when the viewport is
   <=900 px (covers both portrait phones and landscape phones)
   we override the inline widths with auto, force button labels
   to one line, and give the Action column a touch of right
   breathing room so its labels do not touch the edge. Tablet
   (>=901 px) and desktop are unaffected. The selector targets
   `.gt-admin-registrations` specifically so the other three
   hub tables are not disturbed.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Internal horizontal scroll on the Registrations ledger.
     Same approach the portrait media query already takes for all
     four hub ledgers — if the table is still wider than the
     viewport after auto-sizing columns, scroll inside the ledger
     instead of pushing the page wide. The pane carries both ids
     (#registrations is the <section>, #gt-admin-registrations is
     the inner ledger div that JS rewrites). Both get the rule so
     it works regardless of which layer is the scrolling element. */
  body.page-id-3865 #registrations,
  body.page-id-3865 #gt-admin-registrations,
  body.page-id-3865 #registrations.gt-admin-ledger,
  body.page-id-3865 #gt-admin-registrations.gt-admin-ledger {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Critical for landscape phones: the base .gt-admin-table sets
     `table-layout: fixed`, which means the browser honours the
     inline `width: 115px` declarations on each <th> even after we
     override them to `auto` below \u2014 fixed layout distributes
     columns from the first row regardless of content width and can
     leave Entitlement and Start Date overlapping when the total is
     wider than the viewport. Switching this table to `auto` lets
     the browser size columns by their actual content and lets the
     overall table shrink so the pane's overflow-x:auto can engage
     when content still exceeds the viewport. Portrait already gets
     auto-layout from the generic `.gt-admin-table` rule in the
     portrait block; this rule extends the fix to landscape. */
  body.page-id-3865 .gt-admin-table.gt-admin-registrations {
    table-layout: auto !important;
  }
  /* Drop the inline pixel widths on Registrations columns. Inline
     style="width:115px" needs !important to defeat. */
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-submitted,
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-surname,
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-student,
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-entitlement,
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-start,
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-status,
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-action {
    width: auto !important;
  }
  /* Tighten typography & padding for the registrations table at
     landscape phone widths. The portrait block applies this to all
     .gt-admin-table; landscape (orientation:landscape) doesn't fire
     that block, so registrations was left with desktop sizing in a
     ~740-844 px viewport. Scoped to .gt-admin-registrations so the
     other ledgers (which already render fine in landscape) are not
     touched. */
  body.page-id-3865 .gt-admin-table.gt-admin-registrations {
    font-size: 0.78rem;
  }
  body.page-id-3865 .gt-admin-table.gt-admin-registrations thead th {
    font-size: 0.60rem;
    letter-spacing: 0.06em;
    padding: 6px 6px;
    line-height: 1.15;
  }
  body.page-id-3865 .gt-admin-table.gt-admin-registrations tbody td {
    padding: 6px 6px;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Action column — keep its stacked buttons (Inspect / Accept /
     Dismiss, or Instantiate / Deny, etc.) each on a single line
     and give the column a little right-side padding so the labels
     do not sit flush against the table edge. The .gt-reg-action-stack
     div and its inner buttons are inline-styled by JS; override
     with !important so labels never wrap a widowed letter. */
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-action {
    white-space: nowrap !important;
    padding-right: 4px !important;
  }
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .gt-reg-action-stack,
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .gt-reg-action-stack .gt-link-btn {
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0;
  }
  /* Submitted column had padding-left:0 inline to nudge headers
     left on desktop. On phone widths that nudge fights the
     auto-layout, so restore a normal cell padding. */
  body.page-id-3865 .gt-admin-table.gt-admin-registrations .col-submitted {
    padding-left: 6px !important;
  }
}

/* Give the entry-content room to breathe edge-to-edge */
body.page-id-3865 .entry-content {
  margin: 0 !important;
  padding: 24px !important;
  max-width: none !important;
}

/* Base typography on the admin canvas */
body.page-id-3865 .entry-content {
  font-family: "Source Sans Pro","Helvetica Neue",Arial,sans-serif;
  color: #2b2b2b;
  font-size: 14px;
  line-height: 1.45;
}

/* ============================================================
   Admin Portal — page scaffold
   ============================================================ */
#gt-admin-root {
  max-width: 1280px;
  margin: 0 auto;
}

.gt-admin-head {
  padding: 8px 0 24px;
  border-bottom: 1px solid #d9c4a6;
  margin-bottom: 24px;
}
.gt-admin-eyebrow {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8b6f3a;
  /* Center the "GeorgeTutor · Case file" eyebrow horizontally on case-file
     views — the case-file header is the only place this eyebrow appears,
     and George wants it centered in the field of view (May 2026). */
  text-align: center;
}
.gt-admin-title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #3d2f15;
  letter-spacing: 0.01em;
}
.gt-admin-sub {
  margin: 0;
  font-size: 0.85rem;
  color: #6b5836;
}

/* Tabs */
.gt-admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  border-bottom: 1px solid #d9c4a6;
}
.gt-admin-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 9px 18px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: #8b6f3a;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  letter-spacing: 0.02em;
}
.gt-admin-tab:hover {
  color: #3d2f15;
  background: #faf5e7;
}
.gt-admin-tab[aria-selected="true"] {
  background: #ffffff;
  border-color: #d9c4a6;
  color: #3d2f15;
}
.gt-admin-pane {
  margin-top: 0;
}
.gt-admin-pane[hidden] {
  display: none;
}

.gt-admin-ledger {
  background: #ffffff;
  border: 1px solid #d9c4a6;
  border-top: none;
  border-radius: 0 10px 10px 10px;
  padding: 20px 22px;
  min-height: 160px;
  box-shadow: 0 1px 2px rgba(110,80,20,0.06);
}
.gt-admin-ledger__loading {
  margin: 0;
  color: #8b6f3a;
  font-style: italic;
  font-size: 0.9rem;
}
.gt-admin-ledger__error {
  margin: 0;
  color: #a8552c;
  font-weight: 600;
}
.gt-admin-ledger__meta {
  font-size: 0.78rem;
  color: #6b5836;
  margin-bottom: 12px;
}

/* Families Index totals bar. Four clickable text totals (count + label)
   separated by middle dots. The active total is bold non-link text; the
   others are underlined links. No pills, no boxes -- just text. */
.gt-families-filterbar {
  display: block;
  font-size: 0.9rem;
  color: inherit;
  line-height: 1.6;
}
body.page-id-3865 a.gt-families-total,
body.page-id-3865 a.gt-families-total:link,
body.page-id-3865 a.gt-families-total:visited {
  color: #6b5836;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
body.page-id-3865 a.gt-families-total:hover {
  color: #4a3a1f;
  text-decoration: underline;
}
body.page-id-3865 a.gt-families-total:focus-visible {
  outline: 2px solid #b89b48;
  outline-offset: 2px;
}
body.page-id-3865 strong.gt-families-total.is-active {
  color: #4a3a1f;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.gt-families-sep {
  color: #b89b48;
  margin: 0 2px;
}

/* Ledger table */
.gt-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  table-layout: fixed;
}
.gt-admin-table thead th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  color: #8b6f3a;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid #ece3cd;
}
.gt-admin-table tbody td {
  padding: 10px;
  border-bottom: 1px solid #f3ead7;
  vertical-align: top;
}
/* Zebra-stripe + row hover: cool lavender tints matching the purple eyebrow
   used to denote admin pages (replaces the earlier warm-honey palette). */
.gt-admin-table tbody tr:nth-child(even) {
  background: #f4f0fa;
}
.gt-admin-table tbody tr:hover {
  background: #e8defb;
}
.gt-admin-table .col-family {
  width: 30%;
}
.gt-admin-table .col-students {
  width: 28%;
  color: #3d2f15;
}
.gt-admin-table .col-entitlements {
  width: 44%;
}
.gt-admin-table .col-combined {
  width: 16%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Index-mode columns (Families index) */
.gt-admin-index .col-family    { width: 22%; }
.gt-admin-index .col-student   { width: 22%; }
.gt-admin-index .col-students  { width: 20%; }
.gt-admin-index .col-entit-pills { width: 22%; }
.gt-admin-index .col-status    { width: 18%; text-align: center; }
.gt-admin-index .col-renewal   { width: 18%; font-variant-numeric: tabular-nums; }

.col-entit-pills .gt-admin-pill {
  margin-right: 4px;
  font-size: 0.70rem;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  min-width: 44px;
}
.gt-admin-pill--a {
  background: #8e6a1f; color: #fff8db;
}
.gt-admin-pill--v {
  background: #6a4a8e; color: #f4ebff;
}
.gt-admin-pill--n {
  background: #6b5836; color: #f5ede0;
}

/* Lite portal marker pill \u2014 shown in the Title column of the
   Families and Students indexes for rows whose only entitlement is
   the synthetic kind='lite' row. The palette echoes the Lite portal
   identity used in portal.css (deep-plum / wine-violet family) so
   the Title column reads "Lite" in a colour that's instantly
   recognisable as a Lite portal without being loud. Added
   2026-07-18 alongside the change that merges Lite portals into the
   default families index. */
.gt-admin-pill--lite {
  background: #4b2a63; color: #f0e6f7;
}

/* ------------------------------------------------------------------
   Link styling — override the active theme aggressively so visited
   and hover states stay in the warm-fawn family used in the user
   portal (rust #a8552c on warm-sand #fbf6ee). No theme blue, no
   visited purple, no harsh black.
   ------------------------------------------------------------------ */
body.page-id-3865 .entry-content a,
body.page-id-3865 .entry-content a:link,
body.page-id-3865 .entry-content a:visited,
body.page-id-3865 .entry-content .gt-admin-index__row a {
  color: #3d2f15;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s ease, border-bottom-color 0.12s ease;
}
body.page-id-3865 .entry-content a:hover,
body.page-id-3865 .entry-content a:focus,
body.page-id-3865 .entry-content .gt-admin-index__row a:hover,
body.page-id-3865 .entry-content .gt-admin-index__row a:focus {
  color: #a8552c;
  border-bottom-color: #a8552c;
  background: transparent;
}
body.page-id-3865 .entry-content a:active {
  color: #a8552c;
}

/* Row-level hover: lavender wash tonally matched to the purple eyebrow that
   denotes admin pages (replaces the earlier warm-sand portal hover). The
   text colour is darkened to a deep aubergine so it stays readable on the
   lavender background. */
body.page-id-3865 .gt-admin-table tbody tr:hover {
  background: #efe9f7;
}
body.page-id-3865 .gt-admin-table tbody tr:hover td {
  color: #2c1f4a;
}

/* Make the whole row feel clickable when we add JS click-to-navigate. */
.gt-admin-index__row[data-href] {
  cursor: pointer;
}
.gt-admin-renewal {
  color: #3d2f15;
}

/* Status pills */
.gt-admin-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.gt-admin-status--healthy {
  background: #e8f0e3;
  color: #2f5a3a;
  border-color: #cfe0c3;
}
/* 'lite' — newly minted lite-portal family with no entitlement.
   Soft slate-blue so it reads as a distinct "introductory" state,
   not confused with archived (grey) or active/healthy (green). */
.gt-admin-status--lite {
  background: #e6edf5;
  color: #3a5172;
  border-color: #c8d4e3;
}
.gt-admin-status--soon {
  background: #fff0d6;
  color: #8a5a18;
  border-color: #f0d8a6;
}
.gt-admin-status--empty {
  background: #f4ece0;
  color: #6b5836;
  border-color: #e0d3b5;
}
/* 'delivered' — past confirmed sessions; warm-brown family, never confused
   with the green of forward-confirmed nor the rust of canceled. */
.gt-admin-status--delivered {
  background: #ece1c8;
  color: #5a4423;
  border-color: #d9c089;
  font-weight: 600;
}
/* 'deleted' — administrative cancel (invoice voided as part of the cancel).
   Cooler grey-stone palette so it reads as clearly distinct from a plain
   customer-initiated 'canceled' (warm beige) and from 'delivered' (warm tan). */
.gt-admin-status--deleted {
  background: #e6e3dc;
  color: #5a544a;
  border-color: #c9c3b6;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: #8a8276;
}
/* Late-cancel taxonomy pills. Hue intensifies as the cancellation slides
   closer to the session start: late (soft rose) → very-late (deeper rose)
   → last-minute (rust) → no-show (slate). All distinct from the warm beige
   of an ordinary 'canceled' and the warm tan of 'delivered'. */
.gt-admin-status--late {
  background: #f7e2dc;
  color: #8a4634;
  border-color: #e8c3b6;
  font-weight: 600;
}
.gt-admin-status--very-late {
  background: #f1cfc4;
  color: #7a3a26;
  border-color: #dca896;
  font-weight: 600;
}
.gt-admin-status--last-minute {
  background: #e9b8a5;
  color: #6b2e18;
  border-color: #c98a6e;
  font-weight: 600;
}
/* No Show: vivid (not violent) crimson so it stands apart from the rust
   ladder of late/very-late/last-minute. The user asked for 'a more vivid
   red, nothing too violent' — we land on a saturated coral-red against
   a deep maroon foreground so the chip reads as 'serious' but stays in
   the warm palette family of the rest of the cancellation chips. */
.gt-admin-status--no-show {
  background: #e85d4a;
  color: #4a0a02;
  border-color: #c2362a;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.gt-admin-cid {
  font-size: 0.7rem;
  color: #8b6f3a;
  font-weight: 500;
  margin-top: 2px;
}
.muted {
  color: #b8a585;
}

/* Entitlement line: pill + label + seed + optional until */
.gt-admin-entit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  flex-wrap: wrap;
}
.gt-admin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #8e6a1f;
  color: #fff8db;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  min-width: 50px;
  text-align: center;
}
.gt-admin-suite {
  font-size: 0.78rem;
  font-weight: 600;
  color: #3d2f15;
  min-width: 64px;
}
.gt-admin-seed {
  font-size: 0.86rem;
  font-weight: 600;
  color: #2f7a3a;
  font-variant-numeric: tabular-nums;
}
.gt-admin-seed small {
  font-size: 0.66rem;
  color: #6b5836;
  font-weight: 500;
}
.gt-admin-until {
  font-size: 0.7rem;
  color: #8b6f3a;
  font-style: italic;
}
.gt-admin-num {
  font-size: 0.96rem;
  font-weight: 700;
  color: #2f7a3a;
}
.gt-admin-num small {
  font-size: 0.66rem;
  color: #6b5836;
  font-weight: 500;
}
.gt-admin-cap {
  font-size: 0.74rem;
  color: #6b5836;
}

/* ============================================================
   Case page
   ============================================================ */

/* Header */
.gt-case-head {
  border-bottom: 1px solid #d9c4a6;
  padding-bottom: 16px;
}
.gt-case-cid {
  font-size: 0.78rem;
  color: #8b6f3a;
  font-weight: 500;
}
/* Demoted timezone note — small, low-weight, sits in the back row */
.gt-case-tz-footnote {
  font-size: 0.74rem;
  color: #9a8b6b;
  font-style: italic;
  cursor: help;
  border-bottom: 1px dotted #c9b890;
}
.gt-case-tz-footnote:hover {
  color: #6b5836;
}
.gt-case-back {
  margin: 0;
  font-size: 0.82rem;
}
.gt-case-back--center {
  text-align: center;
}

/* Student sub-row: name(s) flush-left, Active Time Zone flush-right.
   On very narrow screens the two halves stack and the tz left-aligns
   so the line stays scannable rather than spinning off into ellipsis. */
.gt-case-subrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.gt-case-subrow__students {
  flex: 1 1 auto;
  min-width: 0;
}
.gt-case-subrow__tz {
  flex: 0 0 auto;
  text-align: right;
  font-size: 0.78rem;
  color: #6b5836;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .gt-case-subrow {
    flex-direction: column;
    align-items: flex-start;
  }
  .gt-case-subrow__tz {
    text-align: left;
  }
}

/* Outlier banner */
.gt-case-flags {
  margin: 18px 0;
  background: #fbf6ee;
  border: 1px solid #d9c4a6;
  border-left: 4px solid #a8552c;
  border-radius: 8px;
  padding: 14px 18px;
}
.gt-case-flags__eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8552c;
}
.gt-case-flags ul {
  margin: 0;
  padding-left: 18px;
  color: #3d2f15;
  font-size: 0.88rem;
}
.gt-case-flags li {
  margin: 2px 0;
}
.gt-case-flags li strong {
  color: #6a4327;
}

/* Panels */
.gt-case-panel {
  background: #ffffff;
  border: 1px solid #d9c4a6;
  border-radius: 10px;
  margin: 14px 0;
  box-shadow: 0 1px 2px rgba(110,80,20,0.06);
}
.gt-case-panel--mirror {
  border-left: 4px solid #8e6a1f;
  background: #fffdf5;
}
.gt-case-panel--admin {
  border-left: 4px solid #6a4a8e;
  background: #fbfafd;
}
.gt-case-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #ece3cd;
}
.gt-case-panel__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b5836;
}
.gt-case-panel--mirror .gt-case-panel__eyebrow { color: #8e6a1f; }
/* Administrator-levers eyebrow is scaled up to 0.95rem so it matches
   the PENDING PAYMENTS / REGISTRATIONS INBOX headings in the two
   sibling trays directly above it. Other eyebrow surfaces keep the
   compact 0.72rem because they sit inside denser panels. */
.gt-case-panel--admin  .gt-case-panel__eyebrow { color: #6a4a8e; font-size: 0.95rem; }
.gt-case-panel__body {
  padding: 16px 18px;
}

/* ============================================================
   Admin navigation-button identity — mirrors the warm-rust ghost
   buttons on the family hub (Get a session / Manage subscription /
   See all messages), but recoloured into the administrator-purple
   family so the admin portal reads as its own world. The eyebrow
   purple (#6a4a8e) anchors the language; the button-grade tone
   below is slightly richer so it carries weight as a button label
   rather than a heading colour.

     bg:           #ffffff      (calm white, like hub ghost btns)
     text/border:  #5e3e87      (button-grade purple)
     soft border:  #d7cae3      (lavender-cream)
     hover bg:     #f3edf9      (lightest lavender)
     active fill:  #5e3e87      (purple solid, white text)

   Applied to:
     .gt-case-panel__cta      (Subscription's Manage, Schedule's Add a session)
     .gt-case-action /
       .gt-case-action--live  (the five Administrator-levers buttons)
     .gt-lever-sub__btn       (the four Manage-bookings sub-pills)
   ============================================================ */
body.page-id-3865 .entry-content button.gt-case-panel__cta,
.gt-case-panel__cta {
  background: #ffffff;
  border: 1px solid #d7cae3;
  color: #5e3e87;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: not-allowed;
  opacity: 0.6;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body.page-id-3865 .entry-content button.gt-case-panel__cta:not([disabled]),
.gt-case-panel__cta:not([disabled]) { cursor: pointer; opacity: 1; }
body.page-id-3865 .entry-content button.gt-case-panel__cta:not([disabled]):hover,
body.page-id-3865 .entry-content button.gt-case-panel__cta:not([disabled]):focus-visible,
.gt-case-panel__cta:not([disabled]):hover,
.gt-case-panel__cta:not([disabled]):focus-visible {
  background: #f3edf9;
  border-color: #5e3e87;
  color: #5e3e87;
  outline: none;
}

/* REVERTED round-9: the hub-lever sizing rule that lived here forced
   white-space:nowrap on every #gt-admin-hub-levers .gt-case-panel__cta,
   which broke the verb "+ rest" two-row layout used by the 5 hand-
   authored levers (Message / all families, Edit / parameters, See /
   bookings, Run / report, See / registration forms). The 2 JS-injected
   Mint Lite Portal / View log lever heights will be matched a
   different way next round — NOT by stripping the working layout off
   the 5 good levers. (George round-9 June 7 2026.) */

/* Combined seed/cap line for multi-subscription families */
.gt-case-combined {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #ece3cd;
  font-size: 0.86rem;
  color: #3d2f15;
}

/* ------------------------------------------------------------------
   Window-bar pills. Eight options in two semantic groups of four:
   past-group (left) and future-group (right). One line on widescreen;
   neat 4+4 grid on narrow screens.

   Palette is tuned to the warm-sand site theme — rust accent on cream,
   not the heavy dark-brown of the earlier version.
   ------------------------------------------------------------------ */
/* ---- Clear-forward action strip --------------------------------------
   Sits at the very top of the Manage Bookings calendar view, above the
   window pills. Left-aligned chunky red button. Distinct from the pill
   strip so it never looks like a window choice. */
.gt-case-action-strip {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
}
/* Clear-forward: re-dressed in admin purple (George June 6 2026) so it
   matches the rest of the admin button language. The hue is the same
   deep purple #5e3e87 used on the Save Now button and the Revoke chip. */
body.page-id-3865 .gt-clear-forward-btn,
body.page-id-3865 .entry-content button.gt-clear-forward-btn {
  background: #5e3e87;
  color: #fff;
  border: 1px solid #4d3270;
  border-radius: 6px;
  padding: 9px 18px;
  font: 600 0.95rem/1.2 "Source Sans Pro", system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), inset 0 -2px 0 rgba(0,0,0,0.10);
  transition: background 120ms ease, transform 80ms ease;
}
body.page-id-3865 .gt-clear-forward-btn:hover,
body.page-id-3865 .entry-content button.gt-clear-forward-btn:hover {
  background: #4d3270;
}
body.page-id-3865 .gt-clear-forward-btn:active,
body.page-id-3865 .entry-content button.gt-clear-forward-btn:active {
  transform: translateY(1px);
  background: #3a2456;
}
body.page-id-3865 .gt-clear-forward-btn:disabled,
body.page-id-3865 .entry-content button.gt-clear-forward-btn:disabled {
  background: #a899c4;
  border-color: #8b7aa3;
  cursor: wait;
  box-shadow: none;
}
/* Inline variant: lives inside the Add Session calendar nav row, to
   the LEFT of the date range. Absolutely positioned relative to the
   range wrapper so the range itself stays centered between Prev and
   Next (and therefore directly under the "This week" pill above).
   Two lines ("Clear forward" / "(family)") so the button is
   shallow-wide rather than tall-square, vertically centered. */
body.page-id-3865 .gt-clear-forward-btn--inline,
body.page-id-3865 .entry-content button.gt-clear-forward-btn--inline {
  position: absolute;
  right: calc(100% + 12px);    /* sit 12px to the left of the range */
  top: 50%;
  transform: translateY(-50%);
  /* Symmetric horizontal padding so "Clear forward" / "(family)" sit
     visually centred inside the button. Pinned with !important so the
     WordPress theme's `.entry-content button` defaults (2em right pad)
     cannot reintroduce the right-bias George reported June 6 2026. */
  padding: 4px 14px !important;
  font-size: 0.82rem;
  line-height: 1.15;
  text-align: center !important;
  flex: 0 0 auto;
  min-width: 110px !important;
  white-space: nowrap;
  box-sizing: border-box !important;
}

.gt-case-windowbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px 0 10px;
  border-bottom: 1px dashed #ece3cd;
  flex-wrap: wrap;
}
.gt-case-winpills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
}
/* IMPORTANT: prefix with body.page-id-3865 to out-specify the parent
   theme's aggressive base button rules (TwentySeventeen paints buttons
   black with white text by default). Using !important is avoided —
   higher-specificity body-scoped selectors are sufficient. */
/* Resting pill: administrative-purple palette so the schedule's window
   controls read as admin chrome, not as family-beige content. Pale
   lavender wash, lavender border, deep purple text. */
body.page-id-3865 .gt-case-winpill,
body.page-id-3865 .entry-content button.gt-case-winpill {
  background: #f3edf9;
  border: 1px solid #d7cae3;
  color: #5e3e87;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease,
              border-color 0.12s ease, box-shadow 0.12s ease;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-shadow: none;
  box-shadow: none;
  line-height: 1.35;
  /* Compact widescreen layout: let pills share remaining width so all eight
     sit on one line without crowding. min-width keeps each readable. */
  flex: 1 1 auto;
  /* min-width raised from 78px to 92px so 'Academic Year' (the longest
     non-custom label) fits inside the border at 0.72rem with the
     horizontal padding above. Below this width the trailing 'r' was
     getting clipped. */
  min-width: 92px;
  text-align: center;
  white-space: nowrap;
}
/* Hover: lift to white fill, deepen the border, hold the purple text. */
body.page-id-3865 .gt-case-winpill:hover,
body.page-id-3865 .gt-case-winpill:focus-visible,
body.page-id-3865 .entry-content button.gt-case-winpill:hover,
body.page-id-3865 .entry-content button.gt-case-winpill:focus-visible {
  background: #ffffff;
  border-color: #5e3e87;
  color: #4d3270;
  outline: none;
}
/* Active: solid administrative-purple fill with a soft halo so the
   selected window is unmistakable at a glance. Slightly heavier weight
   pushes it visually forward of its siblings. !important is used here
   because the resting rule (#f3edf9 lavender wash) keeps tying on
   specificity and overriding the purple via cascade order in some
   render paths. */
body.page-id-3865 .gt-case-winpill--active,
body.page-id-3865 .entry-content button.gt-case-winpill--active,
body.page-id-3865 .gt-case-winpill.gt-case-winpill--active,
body.page-id-3865 .entry-content button.gt-case-winpill.gt-case-winpill--active {
  /* background-color (not the `background` shorthand) so the per-pill
     SVG background-image declared in the portrait media block above
     survives. The shorthand resets background-image to none and was
     wiping out the arrow on active pills (George June 6 2026, round 7). */
  background-color: #5e3e87 !important;
  border-color: #4d3270 !important;
  color: #ffffff !important;
  font-weight: 700;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28),
              0 0 0 3px rgba(94, 62, 135, 0.22);
}
body.page-id-3865 .gt-case-winpill--active:hover,
body.page-id-3865 .gt-case-winpill--active:focus-visible,
body.page-id-3865 .entry-content button.gt-case-winpill--active:hover,
body.page-id-3865 .entry-content button.gt-case-winpill--active:focus-visible {
  background-color: #5e3e87;
  color: #ffffff;
  border-color: #4d3270;
}
/* Custom-range pill: 'open' state (date row is expanded but not yet applied).
   White fill + purple outline, clearly distinct from --active solid fill. */
body.page-id-3865 .gt-case-winpill--open,
body.page-id-3865 .entry-content button.gt-case-winpill--open {
  background: #ffffff;
  border-color: #5e3e87;
  color: #5e3e87;
}
/* Skeleton pre-hydration paint: the pill row is rendered before the
   case fetch resolves, with every button disabled to prevent racy
   clicks. Browser/theme defaults grey out [disabled] buttons, which
   was muting the --active pill at first paint. These rules restore
   full saturation so the default window (Next Week) lands clearly lit
   from the very first frame; non-active disabled pills are kept calm
   but still readable. */
body.page-id-3865 .gt-case-winpill:disabled,
body.page-id-3865 .entry-content button.gt-case-winpill:disabled {
  opacity: 1;
  cursor: progress;
}
body.page-id-3865 .gt-case-winpill--active:disabled,
body.page-id-3865 .entry-content button.gt-case-winpill--active:disabled {
  background-color: #5e3e87;
  border-color: #4d3270;
  color: #ffffff;
  opacity: 1;
}

/* Narrow screens: lock to a 4-column grid so the row splits cleanly into
   past-group (top) and future-group (bottom). Below 560px pill widths
   would otherwise wrap unevenly. */
@media (max-width: 560px) {
  body.page-id-3865 .gt-case-winpills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  body.page-id-3865 .gt-case-winpill,
  body.page-id-3865 .entry-content button.gt-case-winpill {
    flex: initial;
    min-width: 0;
    padding: 4px 4px;
    font-size: 0.68rem;
  }
}

/* Custom-range From/To row (revealed when Custom pill is clicked) */
.gt-case-customrow-host {
  flex-basis: 100%;
  width: 100%;
}
.gt-case-customrow-host:empty { display: none; }
.gt-case-customrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #fbf6ee;
  border: 1px solid #ece3cd;
  border-radius: 8px;
}
.gt-case-customrow__field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #5a4a28;
}
.gt-case-customrow__lbl {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8b6f3a;
}
.gt-case-customrow input[type="date"] {
  font: inherit;
  font-size: 0.8rem;
  padding: 3px 6px;
  border: 1px solid #d9c4a6;
  border-radius: 4px;
  background: #ffffff;
  color: #3d2f15;
  /* iOS Safari hardening: keep the control at the same height as our buttons
     and avoid the chunky native styling. */
  -webkit-appearance: none;
  appearance: none;
  min-height: 26px;
  line-height: 1.2;
}
.gt-case-customrow input[type="date"]:focus {
  outline: none;
  border-color: #a8552c;
  box-shadow: 0 0 0 2px rgba(168, 85, 44, 0.15);
}
.gt-case-customrow__apply,
.gt-case-customrow__clear {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.page-id-3865 .gt-case-customrow__apply,
body.page-id-3865 .entry-content button.gt-case-customrow__apply {
  background: #a8552c;
  border: 1px solid #a8552c;
  color: #fff7ea;
  text-shadow: none;
  box-shadow: none;
}
body.page-id-3865 .gt-case-customrow__apply:hover,
body.page-id-3865 .gt-case-customrow__apply:focus-visible,
body.page-id-3865 .entry-content button.gt-case-customrow__apply:hover,
body.page-id-3865 .entry-content button.gt-case-customrow__apply:focus-visible {
  background: #8b4421;
  border-color: #8b4421;
  color: #fff7ea;
  outline: none;
}
body.page-id-3865 .gt-case-customrow__clear,
body.page-id-3865 .entry-content button.gt-case-customrow__clear {
  background: #ffffff;
  border: 1px solid #d9c4a6;
  color: #3d2f15;
  text-shadow: none;
  box-shadow: none;
}
body.page-id-3865 .gt-case-customrow__clear:hover,
body.page-id-3865 .gt-case-customrow__clear:focus-visible,
body.page-id-3865 .entry-content button.gt-case-customrow__clear:hover,
body.page-id-3865 .entry-content button.gt-case-customrow__clear:focus-visible {
  border-color: #a8552c;
  color: #a8552c;
  background: #fbf6ee;
  outline: none;
}

/* Loading shimmer while a new window is being fetched */
#gt-case-schedule[aria-busy="true"] .gt-case-panel__body {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.gt-case-summary {
  margin: 0 0 6px;
  font-size: 0.88rem;
  color: #3d2f15;
}
.gt-case-cadence {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #6b5836;
}
.gt-status--ok   { color: #2f5a3a; font-weight: 600; }
.gt-status--canc { color: #a8552c; font-weight: 600; }

/* Forward schedule table */
.gt-case-bookings {
  margin-top: 6px;
}
/* Round 9j (June 6 2026): rebalance \u2014 When was visually pinched
   against Slot in round 9i because the date string is only ~12 chars
   yet held 44% of the row. Trim When down to 36%, push Slot leftwards
   to fill the space (its column grows to 34%), and give Status a touch
   more room too (30%). Net: 36 / 34 / 30 == 100. */
.gt-case-bookings .col-when    { width: 22%; font-variant-numeric: tabular-nums; }
/* Slot column carries the California Code (e.g. MO07P) plus a lowercase
   nature word (e.g. slot, summer, consult). Width trimmed since the
   payload is now a compact two-token string instead of "Mon 17:00 slot". */
.gt-case-bookings .col-service { width: 22%; }
.gt-case-bookings .col-status  { width: 22%; }
/* Ledger column (Jun 8 2026) \u2014 right-aligned accounting cell that
   reports clock-in/out + duration for delivered sessions, or cancel /
   no-show telemetry for past rows. Reserve the largest single column;
   the payload runs ~24 chars (e.g. 'Cxl 06/07 4:13p \u00b7 \u221249h'). */
.gt-case-bookings .col-ledger  {
  width: 34%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Inner ledger token. Reads like a small accounting line item: monospaced
   figures, tightly packed, dimmed except for the status tag at the front
   (Cxl / NS / clock-in). The three variant classes recolour the leading
   tag without changing the overall geometry. */
.gt-case-bookings .gt-ledger {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #2c3a55;
}
.gt-case-bookings .gt-ledger__tag   { color: #2c3a55; }
.gt-case-bookings .gt-ledger__arrow { color: #8896b3; font-weight: 400; }
.gt-case-bookings .gt-ledger__dot   { color: #8896b3; }
.gt-case-bookings .gt-ledger__dur   { color: #385228; font-weight: 600; }
.gt-case-bookings .gt-ledger__delta { color: #6f3540; font-weight: 600; }
.gt-case-bookings .gt-ledger--delivered .gt-ledger__tag { color: #385228; font-weight: 600; }
.gt-case-bookings .gt-ledger--cancel .gt-ledger__tag    { color: #8b6f3a; font-weight: 600; }
.gt-case-bookings .gt-ledger--noshow .gt-ledger__tag    { color: #a85518; font-weight: 700; }
.gt-case-bookings .gt-ledger-empty {
  color: #b8c0d0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}
/* Cancelled rows strikethrough the whole tr; explicitly disable it for
   the ledger cell so the accounting payload stays legible. */
.gt-case-bookings tbody tr.gt-case-booking--canceled .col-ledger,
.gt-case-bookings tbody tr.gt-case-booking--canceled .gt-ledger,
.gt-case-bookings tbody tr.gt-case-booking--canceled .gt-ledger * {
  text-decoration: none;
}
/* .col-actions intentionally absent \u2014 column removed in round 9i. */
/* California Code — a stable identifier, so render it in a slightly
   monospaced face with tabular figures. Letter-spacing tightened so
   the five characters read as one token. */
.gt-case-bookings .gt-slot-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2c3a55;
}
/* Nature word — lowercase, secondary weight, picks up its own colour
   from the per-nature palette below. The default (untyped) tone matches
   the slot-blue so legacy rows without a recognisable nature still read
   cleanly. */
.gt-case-bookings .gt-slot-nat {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #2c3a55;
  margin-left: 4px;
}
body.page-id-3865 .gt-case-bookings .gt-slot-nat--slot    { color: #2c3a55; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--extra   { color: #a85518; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--makeup  { color: #3d6b69; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--intro   { color: #880e4f; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--series  { color: #2b2b2b; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--floater { color: #605a85; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--consult { color: #6f3540; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--premium { color: #4a2860; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--summer  { color: #6d8019; }
body.page-id-3865 .gt-case-bookings .gt-slot-nat--single  { color: #000000; }
/* When a row is canceled the parent <td> picks up the strikethrough
   tone via the existing rule below; we want the line-through to ride
   over the code+nature spans without bleaching the per-nature colour
   to muddy beige, so we leave inheritance alone here. */
/* Right-align the actions column header too. */
/* (Round 9i: thead th.col-actions rule no longer needed \u2014 column removed.) */
.gt-case-bookings tbody tr.gt-case-booking--canceled td {
  color: #8b6f3a;
  text-decoration: line-through;
  text-decoration-color: rgba(168,85,44,0.3);
}
.gt-case-bookings tbody tr.gt-case-booking--canceled .gt-admin-status {
  text-decoration: none;
}

/* Statistics row above the schedule table.
   Compact, evenly-spaced cards — placeholder shape, refined later. */
.gt-case-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 12px;
  padding: 10px 12px;
  background: #fbf6ee;
  border: 1px dashed #ece3cd;
  border-radius: 8px;
}
.gt-case-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 2px 18px;
  border-right: 1px solid #ece3cd;
  min-width: 96px;
}
.gt-case-stat:first-child { padding-left: 4px; }
.gt-case-stat:last-child { border-right: 0; padding-right: 4px; }
.gt-case-stat__n {
  font-size: 1.15rem;
  font-weight: 700;
  color: #3d2f15;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.gt-case-stat__n--ok   { color: #2f5a3a; }
.gt-case-stat__n--canc { color: #a8552c; }
.gt-case-stat__l {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b6f3a;
  margin-top: 1px;
}
.gt-case-stat--placeholder { opacity: 0.5; }
.gt-case-stat--placeholder .gt-case-stat__n { font-size: 1rem; color: #b8a585; }

/* Total chip — read-only first item; sits to the left of the toggleable
   status pills. Keeps the vertical-divider visual rhythm of .gt-case-stat. */
.gt-case-stat--total {
  border-right: 1px solid #ece3cd;
  padding-right: 18px;
  margin-right: 4px;
}

/* Status filter pills. Each pill is a button that mirrors the colour of
   the corresponding in-table status chip (.gt-admin-status--<cls>); the
   colour family is shared so a 'Late' pill above the table and a 'Lcnc'
   chip inside a row both read as the same status at a glance.

   All rules are scoped under body.page-id-3865 .entry-content so the
   WordPress theme's generic button rules (which set background, colour,
   padding, border) lose the specificity race — otherwise the pills end
   up wearing the theme's button skin and the colour cues vanish.

   Anatomy: a numeric count on top, the label underneath, on a coloured
   pill base. Default state is aria-pressed=true (= filter on, rows of
   this status are visible). Toggling to aria-pressed=false greys the
   pill and hides those rows from the table (see .gt-filter-off--<key>
   rules below). */
/* Widescreen layout: one row, no scrollbar. The 1 total chip + 7 toggle
   pills must all fit inside the container width. We use flex with the
   pills allowed to shrink (flex: 1 1 auto with a small min-width) so
   the row self-balances rather than overflowing horizontally. */
body.page-id-3865 .entry-content .gt-case-stats {
  flex-wrap: nowrap;
  overflow-x: visible;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px;
}
/* Total chip — keep slightly larger than the toggle pills but trim
   horizontal padding so the row fits on widescreen without scrolling. */
body.page-id-3865 .entry-content .gt-case-stat--total {
  padding: 2px 10px 2px 4px;
  margin-right: 2px;
  min-width: 54px;
  flex: 0 0 auto;
}
body.page-id-3865 .entry-content .gt-case-stat--total .gt-case-stat__n {
  font-size: 1rem;
  line-height: 1;
}
body.page-id-3865 .entry-content .gt-case-stat--total .gt-case-stat__l {
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}
body.page-id-3865 .entry-content button.gt-case-statpill {
  appearance: none;
  -webkit-appearance: none;
  background: #f6efe1;
  border: 1px solid #e0d3b5;
  border-radius: 999px;
  padding: 2px 6px;
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  font-family: inherit;
  color: #3d2f15;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: opacity 120ms ease, filter 120ms ease, transform 80ms ease, background 120ms ease;
  line-height: 1.05;
  flex: 1 1 auto;
}
body.page-id-3865 .entry-content button.gt-case-statpill:hover {
  transform: translateY(-1px);
}
body.page-id-3865 .entry-content button.gt-case-statpill:focus-visible {
  outline: 2px solid #5e4a8c;
  outline-offset: 2px;
}
body.page-id-3865 .entry-content button.gt-case-statpill .gt-case-statpill__n {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: inherit;
  line-height: 1;
}
body.page-id-3865 .entry-content button.gt-case-statpill .gt-case-statpill__l {
  font-size: 0.52rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 1px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

/* Per-colour pill backgrounds — mirror the in-table chip palette so the
   admin can pattern-match ‘Late pill’ ↔ ‘Lcnc chip’ visually. Each rule
   carries the body.page-id-3865 prefix so the theme's hover/active
   button rules can't overwrite the background or the foreground colour
   on mouseover. */
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--healthy,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--healthy:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--healthy:focus-visible {
  background: #e8f0e3; border-color: #cfe0c3; color: #2f5a3a;
}
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--delivered,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--delivered:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--delivered:focus-visible {
  background: #ece1c8; border-color: #d9c089; color: #5a4423;
}
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--empty,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--empty:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--empty:focus-visible {
  background: #f4ece0; border-color: #e0d3b5; color: #6b5836;
}
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--late,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--late:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--late:focus-visible {
  background: #f7e2dc; border-color: #e8c3b6; color: #8a4634;
}
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--very-late,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--very-late:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--very-late:focus-visible {
  background: #f1cfc4; border-color: #dca896; color: #7a3a26;
}
/* All Late (Academic Year only): one pill that subsumes both Late and
   V-Late counts and hides both row types when toggled off. The palette
   is a deliberate midpoint between the Late and V-Late chips so the
   visual weight reads as 'these two combined'. */
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--late-all,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--late-all:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--late-all:focus-visible {
  background: #f4d8d0; border-color: #e2b5a6; color: #823f2d;
}
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--last-minute,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--last-minute:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--last-minute:focus-visible {
  background: #e9b8a5; border-color: #c98a6e; color: #6b2e18;
}
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--no-show,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--no-show:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--no-show:focus-visible {
  background: #e85d4a; border-color: #c2362a; color: #4a0a02;
}
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--deleted,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--deleted:hover,
body.page-id-3865 .entry-content button.gt-case-statpill.gt-case-statpill--deleted:focus-visible {
  background: #e6e3dc; border-color: #c9c3b6; color: #5a544a;
}
/* Mirror the in-table chip's strike-through so the Deleted pill above and
   the deleted chips inside the table read as the same visual idea. The
   strike sits only on the label — not the count — so the number stays
   easy to read. */
body.page-id-3865 .entry-content button.gt-case-statpill--deleted .gt-case-statpill__l {
  text-decoration: line-through;
  text-decoration-color: #8a8276;
}

/* Zero-count pill — always rendered (zero is information: 'this family
   has never no-showed' is worth knowing at a glance). Kept in full
   colour so the category is still identifiable, just softened a touch
   so non-zero pills carry the eye first. The button stays clickable
   so the toggle UX is uniform even though there's nothing to filter. */
body.page-id-3865 .entry-content button.gt-case-statpill--zero {
  opacity: 0.7;
}
body.page-id-3865 .entry-content button.gt-case-statpill--zero .gt-case-statpill__n {
  color: #b8a585;
  font-weight: 600;
}
body.page-id-3865 .entry-content button.gt-case-statpill--zero:hover { opacity: 0.85; }

/* Off state — fade the pill back so it reads “this filter is off”. The
   colour is preserved (subtle, not pure grey) so the admin can still
   tell what category each pill represents. */
body.page-id-3865 .entry-content button.gt-case-statpill[aria-pressed="false"] {
  opacity: 0.35;
  filter: grayscale(0.6);
}
body.page-id-3865 .entry-content button.gt-case-statpill[aria-pressed="false"]:hover {
  opacity: 0.55;
}

/* Narrow screens — strict 2×4 grid (8 cells = total chip + 7 toggle
   pills). Switching from flex to CSS grid forces deterministic layout:
   row 1 = total + 3 pills, row 2 = 4 pills, regardless of how wide each
   label happens to be. */
@media (max-width: 720px) {
  body.page-id-3865 .entry-content .gt-case-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    overflow-x: visible;
    flex-wrap: initial;
  }
  body.page-id-3865 .entry-content .gt-case-stat--total {
    border-right: none;
    margin-right: 0;
    padding: 2px 4px;
    min-width: 0;
  }
  body.page-id-3865 .entry-content button.gt-case-statpill {
    min-width: 0;
    padding: 2px 4px;
    width: 100%;
  }
  body.page-id-3865 .entry-content button.gt-case-statpill .gt-case-statpill__n {
    font-size: 0.82rem;
  }
  body.page-id-3865 .entry-content button.gt-case-statpill .gt-case-statpill__l {
    font-size: 0.5rem;
  }
}

/* Hide table rows whose status matches a filter that has been toggled
   off. The class names track the same st.key value produced by
   effectiveStatus(), which the table row also stamps as a modifier
   (gt-case-booking--<key>) — so the two stay in lockstep. */
#gt-case-schedule.gt-filter-off--confirmed   .gt-case-booking--confirmed,
#gt-case-schedule.gt-filter-off--delivered   .gt-case-booking--delivered,
#gt-case-schedule.gt-filter-off--canceled    .gt-case-booking--canceled,
#gt-case-schedule.gt-filter-off--late        .gt-case-booking--late,
#gt-case-schedule.gt-filter-off--very-late   .gt-case-booking--very-late,
#gt-case-schedule.gt-filter-off--last-minute .gt-case-booking--last-minute,
#gt-case-schedule.gt-filter-off--no-show     .gt-case-booking--no-show,
#gt-case-schedule.gt-filter-off--deleted     .gt-case-booking--deleted {
  display: none;
}

/* Per-row actions menu (⋯ button + small disabled menu) */
.gt-rowmenu {
  display: inline-block;
  position: relative;
}
body.page-id-3865 .gt-rowmenu__trigger,
body.page-id-3865 .entry-content .gt-rowmenu__trigger {
  /* <summary> styled to look like a tidy round button. */
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  font-size: 1rem;
  line-height: 1;
  color: #5a4423;
  background: #f5ebd6;
  border: 1px solid #d9c089;
  border-radius: 999px;
  user-select: none;
  text-shadow: none;
  box-shadow: none;
  font-weight: 700;
  padding: 0;
  letter-spacing: 0.04em;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body.page-id-3865 .gt-rowmenu__trigger:hover,
body.page-id-3865 .gt-rowmenu__trigger:focus-visible {
  background: #fbf6ee;
  border-color: #a8552c;
  color: #a8552c;
  outline: none;
}
.gt-rowmenu__trigger::-webkit-details-marker { display: none; }
.gt-rowmenu[open] .gt-rowmenu__trigger {
  background: #a8552c;
  border-color: #a8552c;
  color: #fff7ea;
}
.gt-rowmenu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 200px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #d9c089;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(60, 40, 10, 0.12);
}
.gt-rowmenu__list li { margin: 0; padding: 0; }
body.page-id-3865 .gt-rowmenu__item,
body.page-id-3865 .entry-content button.gt-rowmenu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.78rem;
  color: #5a4423;
  cursor: not-allowed;
  opacity: 0.55;
  text-shadow: none;
  box-shadow: none;
  border-radius: 4px;
}
body.page-id-3865 .gt-rowmenu__item:hover,
body.page-id-3865 .gt-rowmenu__item:focus-visible {
  background: #fbf6ee;
  color: #5a4423;
  outline: none;
}

/* Title trail: 'name — GeorgeTutor case file' — secondary weight after the name. */
.gt-case-title-trail {
  font-weight: 400;
  color: #6b5836;
  font-size: 0.85em;
  letter-spacing: 0.01em;
}

/* The new tz line replaces the old footnote span. Subtle but readable. */
.gt-case-tz-line {
  color: #6b5836;
  font-size: 0.78rem;
}
.gt-case-tz-line strong {
  color: #3d2f15;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Administrator levers — same navigation-button identity as the
   panel CTAs above, in the administrator-purple family. Disabled
   placeholders share the language at lower opacity per spec.
   ============================================================ */
.gt-case-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
}
/* Distribute the 7 administrator-lever buttons evenly across one
   row. flex:1 1 0 with min-width:0 lets each button claim an equal
   share of the row width regardless of label length, restoring the
   single-line symmetric tray the user expects. */
.gt-case-actions > .gt-case-action {
  flex: 1 1 0;
  min-width: 0;
}
body.page-id-3865 .entry-content button.gt-case-action,
.gt-case-action {
  background: #ffffff;
  border: 1px solid #d7cae3;
  color: #5e3e87;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px 18px;
  border-radius: 3px;
  cursor: not-allowed;
  opacity: 0.55;
  /* Center label horizontally so two-line buttons ("Send portal /
     invite", "Inspect / record", "Issue flex / or voucher") read as a
     single centred block instead of left-aligned. */
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-id-3865 .entry-content button.gt-case-action:not([disabled]),
.gt-case-action:not([disabled]) { cursor: pointer; opacity: 1; }
body.page-id-3865 .entry-content button.gt-case-action:not([disabled]):hover,
body.page-id-3865 .entry-content button.gt-case-action:not([disabled]):focus-visible,
.gt-case-action:not([disabled]):hover,
.gt-case-action:not([disabled]):focus-visible {
  background: #f3edf9;
  border-color: #5e3e87;
  color: #5e3e87;
  outline: none;
}
body.page-id-3865 .entry-content button.gt-case-action--live,
.gt-case-action--live {
  /* Live lever — same identity, fully opaque, weighted heavier. */
  font-weight: 600;
  cursor: pointer;
  opacity: 1;
}
/* Per-line spans inside an action button. Used only by labels that need
   to be exactly two lines (Issue flex / or voucher; Send portal /
   invite). Each span is a block so the phrases stack vertically, and
   nowrap on the span keeps each phrase intact without forcing the
   parent button to be no-wrap (which would overflow wider labels). */
.gt-case-action__line {
  display: block;
  white-space: nowrap;
  line-height: 1.18;
}
body.page-id-3865 .entry-content button.gt-case-action--live[aria-expanded="true"],
.gt-case-action--live[aria-expanded="true"] {
  /* When its inline panel is open, the lever takes the purple fill
     so it's clearly the active workspace anchor. */
  background: #5e3e87;
  border-color: #5e3e87;
  color: #ffffff;
}
body.page-id-3865 .entry-content button.gt-case-action--live[aria-expanded="true"]:hover,
body.page-id-3865 .entry-content button.gt-case-action--live[aria-expanded="true"]:focus-visible,
.gt-case-action--live[aria-expanded="true"]:hover,
.gt-case-action--live[aria-expanded="true"]:focus-visible {
  background: #4d3270;
  border-color: #4d3270;
  color: #ffffff;
}

/* ------------------------------------------------------------
   PC-VIEW lever-button label correction (June 2026).
   Issue: with 7 admin-lever buttons sharing a single row via
   .gt-case-actions (flex: 1 1 0), each button is only ~140px
   wide on a 1100–1280px workspace. The two-line span labels
   ("Send portal / invitation", "Inspect / record", etc.) at
   0.9rem/1.18 leading were extending vertically beyond the
   button's padded box, so the second line appeared to "float
   off" the button \u2014 visually detached from the purple
   border.

   SCOPING NOTE: this override targets ONLY the 7-button tray
   (.gt-case-actions > .gt-case-action). The Inspect-record
   action row (.gt-inspect__actions) reuses .gt-case-action
   for its Delete / Archive / Edit portal-holder buttons, but
   those carry their own inline padding/font-size and were
   designed to size to their fixed labels \u2014 they must NOT
   inherit this override (overlap reported June 15 2026).

   This block is min-width: 901px so it never engages on the
   adapted (landscape-phone ≤900px or portrait-phone ≤600px)
   layouts; those keep their existing dedicated overrides.

   Two adjustments together produce the centered, contained
   label the user asked for:
     • font-size 0.82rem (down from 0.9rem) shrinks the
       label so two lines fit comfortably inside the button's
       vertical padding.
     • flex column + center alignment on the button itself
       guarantees that whether the label is one or two
       lines, the block is vertically and horizontally
       centered \u2014 not pushed against an edge by
       baseline drift.
   line-height is tightened to 1.15 for the same reason. The
   label — not the button — carries the override, so the
   purple identity / hover / aria-expanded states (above) keep
   working unchanged. */
@media (min-width: 901px) {
  body.page-id-3865 .entry-content .gt-case-actions > button.gt-case-action,
  .gt-case-actions > .gt-case-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    line-height: 1.15;
    padding: 9px 10px;
  }
  body.page-id-3865 .entry-content .gt-case-actions > button.gt-case-action .gt-case-action__line,
  .gt-case-actions > .gt-case-action .gt-case-action__line {
    line-height: 1.15;
    text-align: center;
  }
}

/* ============================================================
   Inline submenu for the Manage-bookings lever. Shares the calm
   warm-cream surface with the Post-a-notice composer so the two
   inline panels read as siblings. Renders four sub-buttons (Add a
   session, Cancel a session, Add a series, Cancel a series) in a
   2-up grid that collapses to one column on phones. All four are
   disabled in this step — they get wired one at a time.
   ============================================================ */
.gt-lever-sub {
  margin-top: 14px;
  padding: 14px 16px 16px;
  /* Deeper-than-grid purple wash so the sub-lever container sits one
     elevation above the (paler) inner content. The inner Manage Bookings
     calendar grid uses #f3edf9 (pale lavender); this container is the
     darker #e3d4f2 sibling so the calendar reads as nested inside it
     rather than swimming in cream (George June 6 2026). */
  border: 1px solid #c7b6dc;
  border-radius: 10px;
  background: #e3d4f2;
}
.gt-lever-sub[hidden] { display: none; }

/* Issue flex / Issue voucher two-card grid. Wide layout puts the two
   cards side-by-side; portrait stacks them vertically so each gets the
   full container width (George June 6 2026 \u2014 "give each room to
   achieve its potential and to be readable"). gap shrinks slightly in
   portrait because vertical gutter reads larger than horizontal at the
   same pixel value. */
.gt-issue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
/* Voucher-kind picker tile (round-5 rewrite, George June 6 2026).
   The WordPress theme (Twenty Seventeen) sets aggressive
   `.entry-content button` defaults: dark grey background, white text,
   1em/2em padding, min-width. Inline styles repeatedly lost the
   cascade. We pin every property with body.page-id-3865 specificity
   and !important so tiles paint identically regardless of theme
   updates or stray CSS load order. */
body.page-id-3865 .entry-content button.gt-vk-tile,
.gt-vk-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 4px !important;
  margin: 0 !important;
  background: #ffffff !important;
  color: #2b1f3d !important;
  border: 2px solid #d8d9de !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.page-id-3865 .entry-content button.gt-vk-tile:hover,
.gt-vk-tile:hover {
  background: #f3edf9 !important;
  border-color: #c7b6dc !important;
  color: #2b1f3d !important;
}
body.page-id-3865 .entry-content button.gt-vk-tile.gt-vk-tile--on,
.gt-vk-tile.gt-vk-tile--on {
  background: #f3edf9 !important;
  border-color: #5e3e87 !important;
  color: #2b1f3d !important;
}
.gt-vk-tile__img {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
  flex: 0 0 auto !important;
}
.gt-vk-tile__img--ph {
  background: #ece6f5 !important;
  border: 1px dashed #c7b6dc !important;
}
.gt-vk-tile__label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #2b1f3d !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  margin: 0 !important;
}
@media (max-width: 600px) and (orientation: portrait) {
  .gt-issue-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Portrait phone polish (George June 6 2026):
     - Trim Issue-card inner padding so 2-per-row voucher tiles get
       enough width that names like "Summer Option A Part 1" don't
       break mid-word.
     - Shrink the tile label and the kind-grid gap so the names sit
       comfortably on one or two lines.
     - Center the Apply-flex and Issue-voucher submit buttons inside
       their own panels (was align-self:flex-start).
     - Also trim the outer .gt-lever-sub padding a touch on phones so
       the cards reclaim a few precious pixels of width. */
  /* Reclaim every pixel of horizontal room so each voucher tile gets
     just under half the panel width and can hold its single-word kind
     name ("Introductory", "Summer", "Trial") on ONE line inside the
     rounded rectangle (George June 6 2026, third pass). */
  .gt-lever-sub {
    padding: 8px 2px 10px;
  }
  .gt-lever-sub .gt-issue-card {
    padding: 8px 4px !important;
    box-sizing: border-box !important;
  }
  .gt-lever-sub [data-issue-kind-grid] {
    gap: 6px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Portrait tile width: "just under half" the panel. Trim padding so
     two tiles + 6px gap = 100% width, label fits one line. (round-5) */
  body.page-id-3865 .entry-content button.gt-vk-tile,
  .gt-vk-tile {
    padding: 6px 2px !important;
    min-width: 0 !important;
  }
  body.page-id-3865 .entry-content button.gt-vk-tile .gt-vk-tile__label,
  .gt-vk-tile .gt-vk-tile__label {
    font-size: 0.72rem !important;
    line-height: 1.18 !important;
  }
  .gt-issue-flex-submit,
  .gt-issue-voucher-submit {
    align-self: center !important;
  }
  /* Manage Connection portrait polish (George June 6 2026):
     - Recipient rows wrap onto multiple lines so the label pill +
       Silence/Delete buttons never overrun the right-hand edge of the
       panel; the email collapses to ellipsis on the first line and the
       controls flow underneath at the right margin.
     - The Add (+) button is already centred via min-width; we centre
       its containing div as well so it sits dead-centre on phones.
     - The Generate / Revoke portal-invite buttons stack vertically and
       centre over one another. */
  /* Portrait recipient row (round-5 stack rewrite, George June 6 2026):
     - Row flex-direction column so each row spans full panel width.
     - Line 1: email (with ellipsis if long).
     - Line 2: label pill input followed by Silence + Delete buttons,
       side-by-side, comfortably wide so the words always fit. */
  .gt-conn-panel [data-conn-list-rows] > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 8px !important;
  }
  .gt-conn-panel [data-conn-list-rows] > div > span:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }
  .gt-conn-panel [data-conn-list-rows] > div > input[data-conn-label-edit] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* Second-line action group: label input on the left, Silence + Delete
     side-by-side on the right. */
  .gt-conn-panel [data-conn-list-rows] > div > span:last-child {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    align-self: stretch !important;
    justify-content: flex-end !important;
  }
  /* Buttons themselves: give them comfortable min-width so the words
     "Silence" and "Delete" never wrap or get cropped. */
  .gt-conn-panel [data-conn-list-rows] .gt-conn-row-btn {
    min-width: 88px !important;
    flex: 0 0 auto !important;
  }
  /* Wrap the label-input + action-button group onto its own second line
     by promoting both onto a flex row underneath the email. We do this
     by giving the row CSS a synthetic second-line container via
     flex-wrap on a sibling row \u2014 done with a small inline display
     reset above. */
  .gt-conn-panel [data-conn-blank-row] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 8px !important;
  }
  .gt-conn-panel [data-conn-blank-row] > input[data-conn-blank-email] {
    width: 100% !important;
  }
  .gt-conn-panel [data-conn-blank-row] > span:last-child {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }
  .gt-conn-panel .gt-conn-add-btn {
    display: flex !important;
    margin: 0 auto !important;
  }
  .gt-conn-invite-btns {
    flex-direction: column !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .gt-conn-invite-btn {
    width: 80% !important;
    max-width: 280px !important;
  }
  /* Registration Change Request overlay header (round-5, George June 6 2026):
     - Bar wraps onto two lines so title + Close \u00d7 occupy the top row,
       and the 4 action buttons array across the second row near the top.
     - Button rail loses absolute positioning so it flows in normal order
       and wraps; buttons shrink so all four fit comfortably on the row.
     - Overall avoids the portrait collision where rail buttons stack on
       top of the title and Close \u00d7. */
  #gt-arf-overlay__bar {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
  }
  #gt-arf-overlay__title {
    font-size: 1.05rem !important;
    flex: 1 1 auto !important;
  }
  /* Title sits on the LEFT (left-justified), "\u00d7 Close" sits on
     the RIGHT (right-justified) on the same row. Both stay on one
     line; the close button uses white-space:nowrap so "\u00d7 Close"
     never breaks across lines. (George round-8 June 7 2026.) */
  #gt-arf-overlay__title { order: 0 !important; text-align: left !important; }
  #gt-arf-overlay__close {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 4px 10px !important;
    order: 2 !important;
    white-space: nowrap !important;
  }
  /* Hide every non-essential header widget on portrait: the legacy
     flex-spacer span, the hidden sub-line, AND the "\u2713 saved"
     flash indicator. The "\u2713 saved" span has opacity:0 by default
     but still occupies layout width (flex item), which George
     correctly identified as a "mystery object" pushing the row.
     (George round-8 June 7 2026.) */
  #gt-arf-overlay__bar > span[style*="flex:1 1 auto"],
  #gt-arf-overlay__bar > span:not([id]),
  #gt-arf-overlay__saved,
  #gt-arf-overlay__sub {
    display: none !important;
  }
  #gt-arf-overlay__btnrail {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin: 0 !important;
    order: 3 !important;
  }
  #gt-arf-overlay__btnrail > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: 0.78rem !important;
    height: 30px !important;
  }
}

/* Registration Change Request overlay header — landscape-phone
   adaptation (round-7, George June 7 2026). Mirror the portrait
   layout fix: title + Close on row 1, the 4 action buttons drop
   onto row 2 underneath. Without this rule the rail is
   position:absolute (set inline) and overlaps the title + Close.
   Buttons keep their fixed 140px min-width on landscape so they
   read like proper desktop-grade actions — 4 \u00d7 140 = 560px,
   which fits inside a landscape phone (>= 600px viewport). */
@media (max-width: 900px) and (orientation: landscape) {
  /* Row 1: "Change Request" left-justified, "\u00d7 Close" right-
     justified, sitting directly above the row of 4 buttons.
     Row 2: 4 buttons span the FULL width with space-between so
     "Clear Input" sits at the left edge (under the title) and
     "Email Admin" sits at the right edge (under \u00d7 Close).
     This is exactly what George asked for in round-9:
     title \u2194 Clear Input column, \u00d7 Close \u2194 Email
     Admin column. (George round-9 June 7 2026.) */
  #gt-arf-overlay__bar {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 6px !important;
    padding: 6px 10px !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  #gt-arf-overlay__title {
    font-size: 1.0rem !important;
    flex: 0 1 auto !important;
    order: 0 !important;
    text-align: left !important;
  }
  #gt-arf-overlay__close {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 4px 8px !important;
    order: 2 !important;
    white-space: nowrap !important;
  }
  /* Hide the same flex-spacer + saved-flash + hidden sub-line that
     would otherwise consume layout width on landscape too. */
  #gt-arf-overlay__bar > span[style*="flex:1 1 auto"],
  #gt-arf-overlay__bar > span:not([id]),
  #gt-arf-overlay__saved,
  #gt-arf-overlay__sub {
    display: none !important;
  }
  #gt-arf-overlay__btnrail {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    order: 3 !important;
  }
  #gt-arf-overlay__btnrail > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    height: 32px !important;
  }
}
/* Registration twin-form footer (.gt-arf-foot) carries the legacy
   "Email changes to george@tattersfield.net" / "Email this blank
   form to george@tattersfield.net" submit button rendered by PHP.
   The overlay header bar already provides "Email admin" at the
   top, so the footer is a redundant second control surface.
   Hide universally on BOTH twin panels (LEFT scratchpad +
   RIGHT canonical), in every viewport (portrait, landscape,
   desktop). The PHP renderer is the source of truth for the
   form HTML, so we hide via CSS rather than edit two PHP files.
   (George round-8 June 7 2026.) */
#gt-arf-overlay .gt-arf-foot,
#gt-arf-overlay #gt-arf-form .gt-arf-foot,
#gt-arf-overlay #gt-arf-form--b .gt-arf-foot,
#gt-arf-overlay .gt-arf-submit {
  display: none !important;
}

/* Hover states for the new purple Manage-Connection buttons \u2014 keep
   them in the same hover language as Save Now / Clear-forward. */
body.page-id-3865 .entry-content button.gt-conn-add-btn:hover,
.gt-conn-add-btn:hover,
body.page-id-3865 .entry-content button.gt-conn-invite-btn:hover,
.gt-conn-invite-btn:hover {
  background: #4d3270 !important;
  border-color: #3a2456 !important;
  color: #ffffff !important;
}

/* Revoke voucher button: admin-purple chrome to match the rest of the
   admin button language (George June 6 2026). Solid purple fill, white
   text, hover darkens. Sized small so it fits at the right edge of each
   voucher row without dominating it. */
body.page-id-3865 .entry-content button.gt-issue-revoke-btn,
.gt-issue-revoke-btn {
  /* Widened so "Revoke" never wraps or gets squeezed by the row
     contents (George June 6 2026). min-width gives the button a
     comfortable footprint regardless of flex squeeze. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 7px 20px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #5e3e87;
  color: #ffffff;
  border: 1px solid #4d3270;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, transform .04s;
}
body.page-id-3865 .entry-content button.gt-issue-revoke-btn:hover,
.gt-issue-revoke-btn:hover {
  background: #4d3270;
  border-color: #3a2456;
  color: #ffffff;
}
body.page-id-3865 .entry-content button.gt-issue-revoke-btn:active,
.gt-issue-revoke-btn:active {
  transform: translateY(1px);
}
.gt-lever-sub__title {
  /* Small left/right indent so the heading text doesn't sit flush
     against the lavender container edge (George June 6 2026). */
  margin: 0 0 10px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Deep purple title ink to live with the new lavender container. */
  color: #4d3270;
}
/* Sub-actions inside Manage-bookings — four pills in the same admin-purple
   navigation language as the parent lever. Sizing rule: all four pills are
   exactly the same width, and that width is governed by the widest label
   ("Cancel session") plus the pill's own padding. We achieve that with
   grid-template-columns: repeat(4, minmax(max-content, 1fr)) so each cell
   has the natural width of its widest sibling as a floor, and stretches
   equally above that as available space allows. white-space:nowrap on the
   pills themselves is a belt-and-braces guard against single-pill wrap.

   Responsiveness: when the parent panel is too narrow for four columns of
   max-content, the grid collapses to two columns, then one. The pills stay
   equal-width within whatever column count is active. */
.gt-lever-sub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(max-content, 1fr));
  gap: 6px;
}
@media (max-width: 720px) {
  .gt-lever-sub__grid { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
}
@media (max-width: 380px) {
  .gt-lever-sub__grid { grid-template-columns: 1fr; }
}
body.page-id-3865 .entry-content button.gt-lever-sub__btn,
.gt-lever-sub__btn {
  background: #ffffff;
  color: #5e3e87;
  border: 1px solid #d7cae3;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  min-width: 0;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body.page-id-3865 .entry-content button.gt-lever-sub__btn:hover:not(:disabled),
.gt-lever-sub__btn:hover:not(:disabled),
body.page-id-3865 .entry-content button.gt-lever-sub__btn:focus-visible:not(:disabled),
.gt-lever-sub__btn:focus-visible:not(:disabled) {
  background: #f3edf9;
  border-color: #5e3e87;
  color: #5e3e87;
  outline: none;
}
body.page-id-3865 .entry-content button.gt-lever-sub__btn:disabled,
.gt-lever-sub__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Active pill: purple fill, matching the active state of the parent
   lever so the visual hierarchy reads top-down as "this lever → this
   action → this stage". */
body.page-id-3865 .entry-content button.gt-lever-sub__btn--active,
.gt-lever-sub__btn--active {
  background: #5e3e87;
  border-color: #5e3e87;
  color: #ffffff;
}
body.page-id-3865 .entry-content button.gt-lever-sub__btn--active:hover:not(:disabled),
.gt-lever-sub__btn--active:hover:not(:disabled) {
  background: #4d3270;
  border-color: #4d3270;
  color: #ffffff;
}
/* ------------------------------------------------------------
   Stage beneath the sub-button grid — hosts each sub-flow's UI
   (picker, confirmation, etc.). Sits inside .gt-lever-sub so it
   inherits the warm-gold framing.
   ------------------------------------------------------------ */
.gt-lever-sub__stage {
  /* Now that the "What would you like to do?" header is gone (the
     calendar lands directly), there is nothing above the stage that
     needs a separator -- the stage IS the content. Flatten the gap
     and drop the line so the calendar sits flush under the lever. */
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.gt-lever-sub__stage[hidden] { display: none; }
.gt-lever-sub__lead {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: #4a3c20;
}
.gt-lever-sub__empty {
  margin: 0;
  font-size: 0.9rem;
  color: #6b5836;
  font-style: italic;
}
.gt-lever-sub__status {
  margin: 10px 0 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}
.gt-lever-sub__status--ok  { color: #2f6b3d; }
.gt-lever-sub__status--err { color: #9b3a1a; }
/* Cancel-a-session picker rows. Five tokens left-to-right:
     Weekday | MM/DD/YY | session code (WE10A) | nature word | [Cancel]
   Tabular numerics on the date and code so the rows align column-to-column
   without setting fixed widths. */
.gt-cancel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gt-cancel-row {
  display: grid;
  grid-template-columns: 3.2em 5.2em 4.4em 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #e8d6b8;
  border-radius: 8px;
}
.gt-cancel-row__dow {
  font-weight: 600;
  color: #4a3c20;
  font-size: 0.92rem;
}
.gt-cancel-row__date {
  color: #4a3c20;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.gt-cancel-row__code {
  color: #6a3d18;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.gt-cancel-row__nature {
  color: #6b5836;
  font-size: 0.9rem;
}
body.page-id-3865 .entry-content button.gt-cancel-row__btn,
.gt-cancel-row__btn {
  background: #ffffff;
  color: #9b3a1a;
  border: 1px solid #d9a896;
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
body.page-id-3865 .entry-content button.gt-cancel-row__btn:hover:not(:disabled),
.gt-cancel-row__btn:hover:not(:disabled) {
  background: #9b3a1a;
  color: #ffffff;
  border-color: #9b3a1a;
}
body.page-id-3865 .entry-content button.gt-cancel-row__btn:disabled,
.gt-cancel-row__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 540px) {
  .gt-cancel-row {
    grid-template-columns: auto auto auto 1fr auto auto;
    gap: 8px;
    padding: 8px 10px;
  }
}
/* No-show button: same chrome as Cancel but a slate palette so the
   two buttons are visually distinct and the admin doesn't fat-finger
   one for the other. Disabled state inherits the .55 opacity rule
   from .gt-cancel-row__btn above and is used until 8 min after
   session start (matching the no_show_grace_min server rule). */
body.page-id-3865 .entry-content button.gt-cancel-row__btn--noshow,
.gt-cancel-row__btn--noshow {
  color: #2c1f4a;
  border-color: #b8aed4;
}
body.page-id-3865 .entry-content button.gt-cancel-row__btn--noshow:hover:not(:disabled),
.gt-cancel-row__btn--noshow:hover:not(:disabled) {
  background: #2c1f4a;
  color: #ffffff;
  border-color: #2c1f4a;
}
/* Waiver checkbox: a single horizontal row above the session list.
   Reads as a small, deliberate switch the admin opts into per action
   — not a sticky toggle. The label is muted so it doesn't shout for
   attention; the checkbox itself uses the page's accent color. */
.gt-cancel-waive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  font-size: 0.88rem;
  color: #4a3c20;
  cursor: pointer;
  user-select: none;
}
.gt-cancel-waive input[type="checkbox"] {
  accent-color: #9b3a1a;
  width: 1em;
  height: 1em;
  margin: 0;
}
/* ============================================================
   Inline composer for the Post-a-notice lever.
   Expands beneath the actions grid when the live lever is clicked.
   ============================================================ */
/* ============================================================
   Post-to-family composer — purple administrative palette.
   George (June 6 2026): the previous warm-fawn/cream styling
   was a legacy holdover from the older theme. Repainted into
   the same purple family that the rest of admin chrome uses
   (.gt-case-winpill, .gt-admin-portrait-hublink, etc.).
     Purple tokens used throughout:
       #5e3e87  primary deep purple   (solid CTA fill)
       #4d3270  darker purple         (hover/border)
       #d7cae3  lavender border       (resting outlines)
       #f3edf9  pale lavender wash    (resting fill / panel bg)
       #2b1f3d  deep purple ink       (body text)
       #8b7aa3  muted lavender ink    (suppressed grey-purple
                                       for placeholders, helper
                                       captions, char counter)
   The three composer buttons — Clear messages, Cancel, Post
   — are now styled as a coherent set: Post is the primary
   solid-purple CTA; Clear and Cancel are ghost purple chips
   so they read as same-rank siblings, not three different
   buttons screaming for attention. No warm rust, no black,
   no slate-blue — those colours are explicitly retired here.
   ============================================================ */
.gt-lever-compose {
  margin-top: 14px;
  padding: 14px 16px 16px;
  border: 1px solid #d7cae3;
  border-radius: 10px;
  background: #f7f3fb;
}
.gt-lever-compose[hidden] { display: none; }
.gt-lever-compose__form {
  display: block;
  margin: 0;
}
.gt-lever-compose__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5e3e87;
  margin-bottom: 6px;
}
body.page-id-3865 .entry-content #gt-lever-compose__body,
.gt-lever-compose textarea[name="body"] {
  /* iOS-Safari safe: explicit width 100%, no calc(), no flex on the
     textarea itself. Border + padding inside box-sizing so the field
     never overflows the composer panel. */
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid #d7cae3;
  border-radius: 8px;
  background: #ffffff;
  color: #2b1f3d;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
body.page-id-3865 .entry-content #gt-lever-compose__body:focus,
.gt-lever-compose textarea[name="body"]:focus {
  outline: none;
  border-color: #5e3e87;
  box-shadow: 0 0 0 3px rgba(94, 62, 135, 0.16);
}
/* Live char counter under the composer textarea. Sits flush right and
   tracks length against the 240-char ceiling. Suppressed grey-purple
   in the safe range, deeper purple-tinted rust when the admin nears
   or hits the 240 ceiling (kept distinct from the chrome purple so
   the warning still reads as a warning). */
.gt-lever-compose__count {
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.78rem;
  color: #8b7aa3;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gt-lever-compose__count--warn { color: #7a3d8f; }
.gt-lever-compose__count--max  { color: #7a3d8f; font-weight: 600; }
.gt-lever-compose__actions {
  /* Three buttons stack vertically, each horizontally centred in the
     composer panel, each hugging its own label width. Vertical stack
     means the three buttons always read as a same-rank set; the
     widest sibling no longer pulls the others sideways.
     Order in the DOM is Clear messages → Cancel → Post to family;
     we visually reorder so the primary CTA (Post) lands on top,
     Cancel in the middle, and Clear messages — the destructive
     action — last and lowest. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.gt-lever-compose__actions .gt-lever-compose__post   { order: 1; }
.gt-lever-compose__actions .gt-lever-compose__cancel { order: 2; }
.gt-lever-compose__actions .gt-lever-compose__clear  { order: 3; }
/* Force each button to hug its own label width. align-items:center on
   the column parent isn't enough on its own — the parent WP theme
   applies a width:100% to button elements inside .entry-content via
   a base reset rule, which stretches our three buttons across the
   panel. width:max-content + align-self:center + !important on width
   beats that reset, so each button sizes to its label and centres
   on the panel axis. flex:0 0 auto stops any inherited flex-grow.
   Scoped to .entry-content prefix so we win specificity inside the
   wrapper that the theme uses. */
body.page-id-3865 .entry-content .gt-lever-compose__actions > button,
.gt-lever-compose__actions > button {
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: 100% !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* Ghost-purple chip — shared base for the two secondary buttons in
   the composer action row (Clear messages, Cancel). Same border,
   same padding, same font, same border-radius as the primary Post
   button so the three stack as a coherent set; only the fill colour
   differs (white wash on ghost, solid purple on primary).
   white-space:nowrap forbids any of the three labels from wrapping
   onto a second line — the buttons hug their label width via the
   parent flex-column align-items:center. */
body.page-id-3865 .entry-content button.gt-lever-compose__cancel,
.gt-lever-compose__cancel,
body.page-id-3865 .entry-content button.gt-lever-compose__clear,
.gt-lever-compose__clear {
  background: #ffffff;
  color: #5e3e87;
  border: 1px solid #d7cae3;
  border-radius: 8px;
  padding: 8px 18px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  white-space: nowrap;
  line-height: 1.2;
}
body.page-id-3865 .entry-content button.gt-lever-compose__cancel:hover,
.gt-lever-compose__cancel:hover,
body.page-id-3865 .entry-content button.gt-lever-compose__clear:hover,
.gt-lever-compose__clear:hover {
  background: #f3edf9;
  border-color: #5e3e87;
  color: #4d3270;
}
/* Post button — primary CTA, solid administrative purple. The
   body.page-id-3865 .entry-content prefix beats the parent theme's
   base button style (background:#222; color:#fff) which otherwise
   wins by selector specificity inside the entry-content wrapper. */
body.page-id-3865 .entry-content button.gt-lever-compose__post,
.gt-lever-compose__post {
  background: #5e3e87;
  color: #ffffff;
  border: 1px solid #5e3e87;
  border-radius: 8px;
  padding: 8px 18px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  white-space: nowrap;
  line-height: 1.2;
}
body.page-id-3865 .entry-content button.gt-lever-compose__post:hover,
.gt-lever-compose__post:hover {
  background: #4d3270;
  border-color: #4d3270;
  color: #ffffff;
}
body.page-id-3865 .entry-content button.gt-lever-compose__post:disabled,
.gt-lever-compose__post:disabled {
  background: #b8a8d0;
  border-color: #b8a8d0;
  color: #ffffff;
  cursor: progress;
  opacity: 0.85;
}
.gt-lever-compose__status {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #8b7aa3;
  min-height: 1em;
}
.gt-lever-compose__status--ok  { color: #2f6a3f; }
.gt-lever-compose__status--err { color: #7a3d8f; }

/* ============================================================
   Suppressed-grey placeholder convention — admin portal global.
   George (June 6 2026, standing rule): "This should be throughout
   the product. When you are prompting for what goes into a textbox,
   do it in a suppressed grey color."
   Scoped to the admin portal page so it cannot bleed into the
   public WP front. Targets every native form control inside the
   entry-content wrapper (textarea / input / select).
   ============================================================ */
body.page-id-3865 .entry-content textarea::placeholder,
body.page-id-3865 .entry-content input::placeholder {
  color: #9a92ab;
  opacity: 1;            /* Firefox lowers placeholder opacity by default; reset. */
  font-style: normal;
  font-weight: 400;
}
body.page-id-3865 .entry-content textarea::-webkit-input-placeholder,
body.page-id-3865 .entry-content input::-webkit-input-placeholder {
  color: #9a92ab;
}
body.page-id-3865 .entry-content textarea:-ms-input-placeholder,
body.page-id-3865 .entry-content input:-ms-input-placeholder {
  color: #9a92ab;
}

/* Recent-notices list inside the composer panel. */
.gt-lever-msgs {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ecdcc0;
}
.gt-lever-msgs__title {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b7e5c;
}
.gt-lever-msgs__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gt-lever-msgs__list li {
  padding: 6px 0;
  border-bottom: 1px dashed #ecdcc0;
  font-size: 0.9rem;
  color: #2b2114;
  line-height: 1.45;
}
.gt-lever-msgs__list li:last-child { border-bottom: none; }
.gt-lever-msg__when {
  display: inline-block;
  min-width: 88px;
  color: #8b7e5c;
  font-size: 0.82rem;
  margin-right: 6px;
}
.gt-lever-msg__body { color: #2b2114; }
.gt-lever-msg__author { font-size: 0.78rem; }

/* ============================================================
   iOS Safari hygiene
   Applied to every interactive surface in the admin portal so we
   never paint ourselves into a corner where a customer (or the
   administrator) gets a long-press share sheet, a stuck hover, or
   a tap-flash on touch.
   ============================================================ */
.gt-admin-tab,
.gt-admin-index__row,
.gt-admin-index__row a,
.gt-admin-pill,
.gt-case-action,
.gt-case-action--live,
.gt-lever-compose__post,
.gt-lever-compose__cancel,
.gt-case-panel__cta,
body.page-id-3865 .entry-content a {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Mirror :hover into :focus and :focus-visible so the warm
   fawn affordance also lights up under keyboard nav and after
   tap on iOS (where :hover does not behave like a mouse hover). */
body.page-id-3865 .entry-content a:focus-visible,
body.page-id-3865 .gt-admin-index__row a:focus-visible {
  color: #a8552c;
  border-bottom-color: #a8552c;
  outline: none;
}
body.page-id-3865 .gt-admin-table tbody tr:focus-within {
  background: #fbf6ee;
}

/* ============================================================
   Hub: Next-session card (admin equivalent of the user portal's
   per-student next-session panel)
   ============================================================
   Lives at the very top of /gt-admin/ above the Students/Families/
   Neither row. Shape and chrome deliberately mirror the user
   portal's .gt-modal__panel: white background, 3px top stripe
   tinted by session nature, eyebrow + when + who + meta + actions
   stack. We re-declare the panel rules here (rather than reuse
   .page-id-3725 selectors from portal.css) because gt_admin.css
   is the only stylesheet loaded on /gt-admin/ \u2014 portal.css is
   user-portal-only. Scoped under body.page-id-3865 so the rules
   don't bleed into any other page the theme happens to include
   gt_admin.css on.
*/
/* Center the card horizontally on the page: the WordPress entry-content
   wrapper is full-width on /gt-admin/, so we use the panel's own
   max-width + margin:auto to pin it to the centre. display:block keeps
   margin:auto working in case anything upstream toggles flex layout. */
body.page-id-3865 .gt-admin-next.gt-modal__panel {
  display: block;
  background: #ffffff;
  border: 1px solid #e4e5ea;
  border-top: 3px solid #6c7686;
  border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow: 0 6px 18px rgba(28, 38, 60, 0.08);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}
body.page-id-3865 .gt-admin-next .gt-modal__eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6c7686;
}
body.page-id-3865 .gt-admin-next .gt-modal__when {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c243a;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
body.page-id-3865 .gt-admin-next .gt-modal__who {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: #3b4a6b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
body.page-id-3865 .gt-admin-next .gt-modal__meta {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: #6b6f76;
}
body.page-id-3865 .gt-admin-next .gt-modal__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: #1c243a;
  background: #f3f4f7;
  border: 1px solid #e4e5ea;
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}
body.page-id-3865 .gt-admin-next .gt-nat {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f7;
  border: 1px solid #e4e5ea;
  color: #3b4a6b;
}
/* ------------------------------------------------------------
   Per-nature theming — byte-identical to the user-portal palette
   ------------------------------------------------------------
   These rules are direct clones of portal.css's
     .page-id-3727 .gt-modal[data-nature="X"] .gt-modal__panel
     .page-id-3727 .gt-modal[data-nature="X"] .gt-modal__eyebrow
   so the same session displayed on the user portal's next-session
   card and on the admin hub's next-session card reads with the
   same colour identity. Three layers per nature:
     1. border-top-color  — the 3px stripe at the top of the card
     2. box-shadow        — a tinted drop shadow that matches the stripe
     3. eyebrow + chip    — the 'NEXT SESSION' label and the inline
                            nature pill, both tinted to the nature
*/
/* !important is used here defensively: the base rule at the top of this
   section uses the `border-top` shorthand which sets border-top-color
   alongside width/style. The longhand `border-top-color` we set below
   has matching specificity (0,3,1) and later source order, so it *should*
   win cleanly — but in practice some browsers and stale caches have
   been observed to keep the gray default. Forcing the longhand removes
   the ambiguity. The box-shadow has no competing shorthand but we mark
   it too so the visual tint is guaranteed to match the stripe. */
body.page-id-3865 .gt-admin-next[data-nature="slot"]    { border-top-color: #2c3a55 !important; box-shadow: 0 12px 36px rgba(44, 58, 85, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="extra"]   { border-top-color: #a85518 !important; box-shadow: 0 12px 36px rgba(168, 85, 24, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="makeup"]  { border-top-color: #3d6b69 !important; box-shadow: 0 12px 36px rgba(61, 107, 105, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="intro"]   { border-top-color: #880e4f !important; box-shadow: 0 12px 36px rgba(136, 14, 79, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="series"]  { border-top-color: #2b2b2b !important; box-shadow: 0 12px 36px rgba(43, 43, 43, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="floater"] { border-top-color: #605a85 !important; box-shadow: 0 12px 36px rgba(96, 90, 133, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="consult"] { border-top-color: #6f3540 !important; box-shadow: 0 12px 36px rgba(111, 53, 64, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="premium"] { border-top-color: #4a2860 !important; box-shadow: 0 12px 36px rgba(74, 40, 96, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="summer"]  { border-top-color: #6d8019 !important; box-shadow: 0 12px 36px rgba(109, 128, 25, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="single"]  { border-top-color: #3a1d52 !important; box-shadow: 0 12px 36px rgba(58, 29, 82, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="package"] { border-top-color: #1a5045 !important; box-shadow: 0 12px 36px rgba(26, 80, 69, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="admin_block"] { border-top-color: #555a66 !important; box-shadow: 0 12px 36px rgba(85, 90, 102, 0.45) !important; }

/* Eyebrow tint: 'NEXT SESSION' label picks up the dark accent. The
   inline nature pill on the 'who' row picks up the same hue. */
body.page-id-3865 .gt-admin-next[data-nature="slot"]    .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="slot"]    .gt-nat--slot    { color: #2c3a55 !important; border-color: rgba(44, 58, 85, 0.35) !important; background: rgba(44, 58, 85, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="extra"]   .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="extra"]   .gt-nat--extra   { color: #a85518 !important; border-color: rgba(168, 85, 24, 0.35) !important; background: rgba(168, 85, 24, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="makeup"]  .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="makeup"]  .gt-nat--makeup  { color: #3d6b69 !important; border-color: rgba(61, 107, 105, 0.35) !important; background: rgba(61, 107, 105, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="intro"]   .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="intro"]   .gt-nat--intro   { color: #880e4f !important; border-color: rgba(136, 14, 79, 0.35) !important; background: rgba(136, 14, 79, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="series"]  .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="series"]  .gt-nat--series  { color: #2b2b2b !important; border-color: rgba(43, 43, 43, 0.35) !important; background: rgba(43, 43, 43, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="floater"] .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="floater"] .gt-nat--floater { color: #605a85 !important; border-color: rgba(96, 90, 133, 0.35) !important; background: rgba(96, 90, 133, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="consult"] .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="consult"] .gt-nat--consult { color: #6f3540 !important; border-color: rgba(111, 53, 64, 0.35) !important; background: rgba(111, 53, 64, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="premium"] .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="premium"] .gt-nat--premium { color: #4a2860 !important; border-color: rgba(74, 40, 96, 0.35) !important; background: rgba(74, 40, 96, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="summer"]  .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="summer"]  .gt-nat--summer  { color: #6d8019 !important; border-color: rgba(109, 128, 25, 0.35) !important; background: rgba(109, 128, 25, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="single"]  .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="single"]  .gt-nat--single  { color: #3a1d52 !important; border-color: rgba(58, 29, 82, 0.35) !important; background: rgba(58, 29, 82, 0.08) !important; }
body.page-id-3865 .gt-admin-next[data-nature="package"] .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="package"] .gt-nat--package { color: #1a5045 !important; border-color: rgba(26, 80, 69, 0.35) !important; background: rgba(45, 134, 116, 0.12) !important; }
body.page-id-3865 .gt-admin-next[data-nature="admin_block"] .gt-modal__eyebrow,
body.page-id-3865 .gt-admin-next[data-nature="admin_block"] .gt-nat--admin_block { color: #555a66 !important; border-color: rgba(85, 90, 102, 0.35) !important; background: rgba(85, 90, 102, 0.08) !important; }

/* Per-nature action buttons — text + border picks up the dark accent
   at low alpha, exactly like the portal's .gt-btn under a nature
   modal. !important is needed only because the WordPress theme's
   generic 'a' rules win on specificity otherwise. */
body.page-id-3865 .gt-admin-next[data-nature="slot"]    .gt-btn { color: #2c3a55 !important; border-color: rgba(44, 58, 85, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="extra"]   .gt-btn { color: #a85518 !important; border-color: rgba(168, 85, 24, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="makeup"]  .gt-btn { color: #3d6b69 !important; border-color: rgba(61, 107, 105, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="intro"]   .gt-btn { color: #880e4f !important; border-color: rgba(136, 14, 79, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="series"]  .gt-btn { color: #2b2b2b !important; border-color: rgba(43, 43, 43, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="floater"] .gt-btn { color: #605a85 !important; border-color: rgba(96, 90, 133, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="consult"] .gt-btn { color: #6f3540 !important; border-color: rgba(111, 53, 64, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="premium"] .gt-btn { color: #4a2860 !important; border-color: rgba(74, 40, 96, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="summer"]  .gt-btn { color: #6d8019 !important; border-color: rgba(109, 128, 25, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="single"]  .gt-btn { color: #3a1d52 !important; border-color: rgba(58, 29, 82, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="package"] .gt-btn { color: #1a5045 !important; border-color: rgba(26, 80, 69, 0.45) !important; }
body.page-id-3865 .gt-admin-next[data-nature="admin_block"] .gt-btn { color: #555a66 !important; border-color: rgba(85, 90, 102, 0.45) !important; }

/* Action row: two buttons side by side, equal width, mirroring the
   portal's next-session card. The .gt-btn class is the same one the
   portal uses, but it isn't styled in gt_admin.css yet, so we declare
   the minimum here \u2014 outline-style button that fills its flex slot. */
body.page-id-3865 .gt-admin-next .gt-modal__actions {
  margin: 6px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
body.page-id-3865 .gt-admin-next .gt-modal__actions .gt-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  color: #1c243a;
  background: #f6f7fa;
  border: 1px solid #d8dae0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
body.page-id-3865 .gt-admin-next .gt-modal__actions .gt-btn:hover,
body.page-id-3865 .gt-admin-next .gt-modal__actions .gt-btn:focus-visible {
  background: #eceff4;
  border-color: #b8bcc6;
  text-decoration: none;
  outline: none;
}

/* Narrow screens: tighten padding, keep the actions side-by-side
   (they're already abbreviated enough to fit). */
@media (max-width: 540px) {
  body.page-id-3865 .gt-admin-next.gt-modal__panel {
    padding: 12px 12px 10px;
    margin-left: 0;
    margin-right: 0;
  }
  body.page-id-3865 .gt-admin-next .gt-modal__when { font-size: 0.98rem; }
  body.page-id-3865 .gt-admin-next .gt-modal__who  { font-size: 0.85rem; }
  body.page-id-3865 .gt-admin-next .gt-modal__meta { font-size: 0.78rem; }
  /* Action-row buttons ("Open case file", "Join on Zoom", "Cancel")
     get clipped on narrow widths because the base rule sets
     white-space:nowrap + padding:7px 12px. On narrow screens we
     tighten padding, drop the font slightly, and allow soft
     wrapping so the full label always fits the flex slot. */
  body.page-id-3865 .gt-admin-next .gt-modal__actions .gt-btn {
    padding: 6px 8px;
    font-size: 0.78rem;
    white-space: normal;
    line-height: 1.15;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* ============================================================
   Hub stack — Next session + Next +1 + Next +2
   ============================================================
   The three panels share the .gt-admin-next.gt-modal__panel
   chrome rules above; this section adds the vertical rhythm
   between them, the red Cancel button on each panel's actions
   row, and the cancel-type chooser modal that opens when the
   admin clicks Cancel.

   The stack wrapper sets max-width once for all 3 panels so the
   column lines up centered. Each panel keeps the existing
   margin-bottom from .gt-admin-next.gt-modal__panel which gives
   the 18px gap; we tighten that to 12px on the stacked variant
   so the trio reads as a single unit.
*/
body.page-id-3865 .gt-admin-next-stack {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto 18px;
  /* No horizontal padding — the panel itself carries its border + shadow. */
}
body.page-id-3865 .gt-admin-next-stack .gt-admin-next.gt-modal__panel {
  /* The single-panel rule sets margin-left/right:auto + margin-bottom:18px.
     Inside the stack we let the flex container handle horizontal centring
     (max-width is on the wrapper) and use a tighter inter-panel gap so the
     trio reads as one unit. */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 12px;
  width: 100%;
}
body.page-id-3865 .gt-admin-next-stack .gt-admin-next.gt-modal__panel:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Red Cancel button on the actions row.
   Lives alongside Open-case-file and Join-on-Zoom. The base
   .gt-admin-next .gt-modal__actions .gt-btn rule above sizes
   it; we override colour to read 'this is destructive'. The
   per-nature rules also override .gt-btn colour, so we use a
   more specific selector and !important to win that fight.
   ------------------------------------------------------------ */
body.page-id-3865 .gt-admin-next .gt-modal__actions .gt-btn--cancel,
body.page-id-3865 .gt-admin-next[data-nature] .gt-modal__actions .gt-btn--cancel {
  color: #ffffff !important;
  background: #b03a3a !important;
  border-color: #8e2a2a !important;
}
body.page-id-3865 .gt-admin-next .gt-modal__actions .gt-btn--cancel:hover,
body.page-id-3865 .gt-admin-next .gt-modal__actions .gt-btn--cancel:focus-visible {
  background: #c44a4a !important;
  border-color: #8e2a2a !important;
  outline: none;
}

/* ------------------------------------------------------------
   Cancel-type chooser modal.
   Five vertically-stacked option buttons. Backdrop dims the
   page; the panel itself is a familiar white card with a thin
   border and shadow, max-width 420px so it reads as a tight
   focused decision rather than a full-page wizard.
   Each option has a label (the action) and a note (the rule)
   in two rows so the admin can see the penalty before clicking.
   ------------------------------------------------------------ */
.gt-admin-cancel-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.gt-admin-cancel-modal[hidden] { display: none; }
.gt-admin-cancel-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 36, 58, 0.5);
}
.gt-admin-cancel-modal__panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid #e4e5ea;
  border-top: 3px solid #b03a3a;
  border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow: 0 18px 48px rgba(28, 36, 58, 0.25);
  max-width: 460px;
  width: 100%;
}
.gt-admin-cancel-modal__panel .gt-modal__eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b03a3a;
}
.gt-admin-cancel-modal__who {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: #3b4a6b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* Live tier readout. Tells the admin which treatment the Late pill
   would fire if pressed right now, and how long until the session.
   The tone shifts subtly as the moment crosses each window boundary
   so the urgency is visible without being shouty. */
.gt-admin-cancel-modal__readout {
  margin: 0 0 14px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 10px;
  border: 1px solid #e0d3b5;
  background: #f4ece0;
  color: #6b5836;
  display: inline-block;
}
.gt-admin-cancel-modal__readout[data-tier="late"] {
  background: #f7e2dc; color: #8a4634; border-color: #e8c3b6;
}
.gt-admin-cancel-modal__readout[data-tier="very_late"] {
  background: #f1cfc4; color: #7a3a26; border-color: #dca896;
}
.gt-admin-cancel-modal__readout[data-tier="last_minute"] {
  background: #e9b8a5; color: #6b2e18; border-color: #c98a6e;
}
/* Past-start state. Once the session start time has passed, the
   chip flips to coral regardless of the underlying tier \u2014 the
   admin no longer cares which side of a future window we're on,
   only how long the student has been a no-show-in-progress. The
   No Show pill remains disabled here until the no_show_grace_min
   window opens; the JS handles the disable. data-state wins over
   data-tier because both attribute selectors carry the same
   specificity but this rule sits below in source order. */
.gt-admin-cancel-modal__readout[data-state="past-start"] {
  background: #e85d4a; color: #ffffff; border-color: #c2362a;
  letter-spacing: 0.02em;
}
/* Cancel chooser \u2014 row of pills.
   The admin only needs to pick the cancellation kind. The pills match the
   schedule-table taxonomy so the chooser reads as a continuation of the
   row's pill, not as a stack of dense option cards. Layout is a flex-wrap
   row that gracefully collapses to two-up on a narrow screen. */
.gt-admin-cancel-modal__opts {
  /* Three cancel-type pills (Override, Late, No Show). On a wide modal
     they sit on one row with comfortable spacing. On narrow viewports
     (portrait phones) we switch to a 3-column grid so each pill is the
     same width, neither overlapping nor wrapping mid-label. The label
     itself stays one-line via white-space:nowrap on the pill (set in
     the pill rule below). */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  justify-items: stretch;
  align-items: stretch;
}
@media (min-width: 480px) {
  .gt-admin-cancel-modal__opts {
    /* Roomier layout on tablet/desktop \u2014 let pills size to content. */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/* Pills live in document.body, OUTSIDE .entry-content, so the
   theme's generic `button` rules outrank a bare class selector.
   We anchor on body.page-id-3865 + the modal class and qualify the
   `button.gt-cancel-pill` tag to win on specificity. !important is
   used on the colour properties because some themes still slip
   through via UA-stylesheet defaults plus inherited tokens. */
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill {
  /* On the narrow (portrait) grid the pill stretches to the column
     width; on the wide flex layout above 480px width:auto kicks in.
     min-width:0 lets the grid item shrink without forcing overflow,
     and padding scales with available room. white-space:nowrap +
     text-overflow:clip together with the 3-column grid guarantee the
     label sits on a single line and the rosette never bleeds across
     into a neighbour. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 120ms ease, filter 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
  box-sizing: border-box;
}
@media (min-width: 480px) {
  body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill {
    padding: 6px 14px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
  }
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill:hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(28, 36, 58, 0.12);
  filter: saturate(1.08) brightness(0.98);
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(28, 36, 58, 0.10);
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}
/* Tone variants \u2014 same palette as the schedule-row pills and the
   readout chip directly above. Hex values intentionally match the
   [data-tier] chip rules so the chooser reads as a continuation of
   the live readout, not a separate vocabulary. */
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--ordinary {
  background: #f4ece0 !important;
  color:      #6b5836 !important;
  border-color: #e0d3b5 !important;
}
/* Default \u2014 used only if the JS tier-stamp hasn't run yet (open
   without a parsable data-start). Falls back to the late palette. */
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late {
  background: #f7e2dc !important;
  color:      #8a4634 !important;
  border-color: #e8c3b6 !important;
}
/* Tier-driven overrides. The Late pill carries data-tier=<key> set by
   updateCancelReadout(), so its tone always mirrors the readout chip
   directly above. Four tiers, matching gt_cancel_rules() on the server. */
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="ordinary"] {
  background: #f4ece0 !important;
  color:      #6b5836 !important;
  border-color: #e0d3b5 !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="late"] {
  background: #f7e2dc !important;
  color:      #8a4634 !important;
  border-color: #e8c3b6 !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="very_late"] {
  background: #f1cfc4 !important;
  color:      #7a3a26 !important;
  border-color: #dca896 !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="last_minute"] {
  background: #e9b8a5 !important;
  color:      #6b2e18 !important;
  border-color: #c98a6e !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--very-late {
  background: #f1cfc4 !important;
  color:      #7a3a26 !important;
  border-color: #dca896 !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--last-minute {
  background: #e9b8a5 !important;
  color:      #6b2e18 !important;
  border-color: #c98a6e !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--no-show {
  background: #e85d4a !important;
  color:      #4a0a02 !important;
  border-color: #c2362a !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Mouseover refinements \u2014 each tone darkens its own family rather
   than collapsing to a single grey hover. */
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--ordinary:hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--ordinary:focus-visible {
  background: #ecdfc8 !important;
  border-color: #c9b896 !important;
}
/* Hover refinements for the tier-driven Late pill \u2014 each tier
   darkens its own family. */
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="ordinary"]:hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="ordinary"]:focus-visible {
  background: #ecdfc8 !important;
  border-color: #c9b896 !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="late"]:hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="late"]:focus-visible,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late:not([data-tier]):hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late:not([data-tier]):focus-visible {
  background: #f2d0c6 !important;
  border-color: #d9a99a !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="very_late"]:hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="very_late"]:focus-visible {
  background: #e8baa9 !important;
  border-color: #c98e7a !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="last_minute"]:hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--late[data-tier="last_minute"]:focus-visible {
  background: #dfa089 !important;
  border-color: #b27355 !important;
}
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--no-show:hover,
body.page-id-3865 .gt-admin-cancel-modal button.gt-cancel-pill.gt-cancel-pill--no-show:focus-visible {
  background: #d94432 !important;
  border-color: #a52a1f !important;
  color: #ffffff !important;
}
.gt-admin-cancel-modal__foot {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}
.gt-admin-cancel-modal__foot .gt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: #1c243a;
  background: #f6f7fa;
  border: 1px solid #d8dae0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.gt-admin-cancel-modal__foot .gt-btn:hover,
.gt-admin-cancel-modal__foot .gt-btn:focus-visible {
  background: #eceff4;
  border-color: #b8bcc6;
  outline: none;
}

/* Narrow screens: panel + pills tighten a touch so a phone fits all five
   pills on two rows. */
@media (max-width: 540px) {
  .gt-admin-cancel-modal__panel { padding: 14px 14px 12px; max-width: 360px; }
  .gt-cancel-pill { padding: 5px 12px; font-size: 0.78rem; }
}

/* ============================================================
   Set availability — weekly grid lever (page 3865)
   ============================================================
   8-column CSS grid: leftmost "time" header + 7 day columns.
   Default cell polarity is available (light green); admin paints
   unavailable cells gray. Booking chips render inside the cell
   wearing the upstream nature color. A conflict (booking sitting
   in an explicitly-unavailable cell) gets a red border so it pops.
*/
body.page-id-3865 .gt-availability__head {
  font-size: 0.9rem;
}
body.page-id-3865 .gt-availability__nav {
  appearance: none;
  border: 1px solid #d4d6dc;
  background: #fff;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 0.82rem;
  cursor: pointer;
  color: #2b1f3f;
  line-height: 1.2;
}
body.page-id-3865 .gt-availability__nav:hover {
  background: #f3f3f7;
  border-color: #b9bcc4;
}
body.page-id-3865 .gt-availability__range {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: #2b1f3f;
  padding: 0 4px;
}
body.page-id-3865 .gt-availability__wrap {
  overflow-x: hidden;     /* no horizontal scroll — grid must fit panel */
}
body.page-id-3865 .gt-availability__grid {
  display: grid;
  /* 44px time-gutter + 7 equal day columns. minmax(0, 1fr) lets the
     columns shrink as needed so the grid always fits its container. */
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  background: #c8cad1;        /* gutter color visible only at intersections */
  border: 1px solid #6e7079;
  border-radius: 6px;
  padding: 0;
  width: 100%;
}
/* v5 (June 11 2026): When the JS has emitted data-days="4" (because
   it determined we are in portrait-phone mode and is rendering 4 day
   columns + a time gutter), apply 5 equal explicit grid tracks at
   the TOP level -- OUTSIDE any media query. Earlier versions only
   set this inside @media (max-width: 600px) and (orientation:
   portrait), but on some devices/browsers (e.g. Samsung Internet,
   certain WebViews) that media query can fail to match even when the
   JS query does -- leading to JS emitting 4 day-headers while CSS
   still draws 7 tracks, painting 3 phantom gray columns at right.
   Letting [data-days="4"] be the single source of truth eliminates
   that JS/CSS disagreement entirely. The base 7-column rule above
   still applies when data-days="7" (or is absent); this rule has
   higher specificity so it wins for the 4-column case regardless of
   viewport. */
body.page-id-3865 .gt-availability__grid[data-days="4"] {
  grid-template-columns: 44px repeat(4, minmax(0, 1fr)) !important;
}
body.page-id-3865 .gt-availability__corner {
  background: #f4f5f8;
  border-right: 1px solid #b7b9c2;
  border-bottom: 1px solid #b7b9c2;
}
/* Template editor corner BUTTONS (left = copy ref →, right = clear all ✕).
   Must fully OCCUPY grid-column 1 (the time gutter, ~44px wide) -- George:
   "sizing of those is not good ... the wrong width for the first column".
   No margin, no padding -- they fill the cell edge-to-edge so they line up
   perfectly with the time column below.
   Hover/focus = intensified version of the SAME button color (no blue
   browser-default focus ring). George: "onmouseover color ... very ugly,
   just make it an intensification of the colour of the button". */
body.page-id-3865 .gt-tpl-corner-btn {
  grid-column: 1;
  grid-row: 1;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 26px;
  border: 0;
  border-right: 1px solid #b7b9c2;
  border-bottom: 1px solid #b7b9c2;
  border-radius: 0;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  transition: background-color 90ms ease;
}
/* Suppress the dark-blue user-agent focus ring/halo entirely. */
body.page-id-3865 .gt-tpl-corner-btn:focus,
body.page-id-3865 .gt-tpl-corner-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
body.page-id-3865 .gt-tpl-corner-btn--copy {
  background: #dceefc;
  color: #1f4a78;
}
body.page-id-3865 .gt-tpl-corner-btn--copy:hover,
body.page-id-3865 .gt-tpl-corner-btn--copy:focus,
body.page-id-3865 .gt-tpl-corner-btn--copy:active {
  background: #9fc7e8;  /* deeper, more saturated blue -- not the dark-blue halo */
  color: #102d4a;
}
body.page-id-3865 .gt-tpl-corner-btn--clear {
  background: #fde0e0;
  color: #7a1f1f;
}
body.page-id-3865 .gt-tpl-corner-btn--clear:hover,
body.page-id-3865 .gt-tpl-corner-btn--clear:focus,
body.page-id-3865 .gt-tpl-corner-btn--clear:active {
  background: #f5a8a8;  /* deeper red, intensifying the same pink */
  color: #5a0e0e;
}
body.page-id-3865 .gt-availability__dayhdr {
  appearance: none;
  border: 0;
  border-right: 1px solid #b7b9c2;
  border-bottom: 1px solid #b7b9c2;
  background: #f0f1f5;
  color: #2b1f3f;
  font-weight: 600;
  font-size: 0.80rem;
  padding: 6px 4px;
  cursor: pointer;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.15;
}
/* Two-line day header: 3-letter day name on top, MM/DD centred below.
   Stacked as block spans so every column header has the SAME shape
   (Sun..Sat) -- previously the single-string label "Sun 6/14" wrapped
   unpredictably depending on column width, so Sun..Wed sometimes
   broke to 2 lines while Thu..Sat stayed on 1. June 11 2026. */
body.page-id-3865 .gt-availability__dayhdr-name,
body.page-id-3865 .gt-availability__dayhdr-date {
  display: block;
  text-align: center;
  line-height: 1.15;
}
body.page-id-3865 .gt-availability__dayhdr-date {
  font-weight: 500;
  font-size: 0.72rem;     /* slightly smaller than the day name for hierarchy */
  color: #4a4253;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
/* The last day header has no neighbor on the right — drop its border. */
body.page-id-3865 .gt-availability__dayhdr:last-of-type {
  border-right: 0;
}
body.page-id-3865 .gt-availability__dayhdr:hover {
  background: #e6e7ec;
}
body.page-id-3865 .gt-availability__timehdr {
  background: #f4f5f8;
  color: #5a5566;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  padding: 0 4px 0 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-right: 1px solid #b7b9c2;
  border-bottom: 1px solid #e2e3e8;
}
body.page-id-3865 .gt-availability__cell {
  appearance: none;
  border: 0;
  /* Real per-cell borders form the visible grid lines, not gutter color. */
  border-right: 1px solid #c8cad1;
  border-bottom: 1px solid #e2e3e8;
  cursor: pointer;
  min-height: 26px;          /* shorter so 20 rows fit without ballooning */
  padding: 2px 3px;
  font-size: 0.72rem;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-content: center;
  transition: background-color 90ms ease, box-shadow 90ms ease;
}
body.page-id-3865 .gt-availability__grid[data-days="7"] .gt-availability__cell:nth-child(8n),
body.page-id-3865 .gt-availability__grid:not([data-days]) .gt-availability__cell:nth-child(8n) {
  /* Last cell in each body row of the 7-day grid (7 day cells + 1
     timehdr leading it = 8). Scoped to data-days="7" (or absent, for
     defensive coverage of any caller that hasn't been updated) so it
     can't leak into the portrait 4-day grid, where the row stride is
     5 (1 timehdr + 4 cells) -- a stray 8n would zero out the border
     on mid-row cells there. The 4-day equivalent rule lives in the
     portrait media block at the end of this file. */
  border-right: 0;
}
/* Four-state palette for cell backgrounds. Borders inherited from the
   .gt-availability__cell base rule above; conflict adds an inset red
   ring on top. Hover slightly darkens the same hue. */
body.page-id-3865 .gt-availability__cell.is-avail {
  background: #e6f4d8;   /* light green — default available */
}
body.page-id-3865 .gt-availability__cell.is-avail:hover {
  background: #d4ecbe;
}
body.page-id-3865 .gt-availability__cell.is-unavail-once {
  background: #fbb863;   /* mandarin orange — unavailable this date only.
                            Brighter than the previous #fbe4c8 so it reads
                            as a clearly distinct hue from yellow (tentative)
                            even at small admin-grid cell size. */
  color: #5a2e08;
}
body.page-id-3865 .gt-availability__cell.is-unavail-once:hover {
  background: #f9a93f;
}
body.page-id-3865 .gt-availability__cell.is-unavail-recurring {
  background: #b9bcc4;   /* grey — recurring (never available) */
  color: #4a4d57;
}
body.page-id-3865 .gt-availability__cell.is-unavail-recurring:hover {
  background: #a8abb4;
}
body.page-id-3865 .gt-availability__cell.is-avail-once {
  background: #dceefc;   /* light blue — available this date only (made a touch lighter to read as clearly blue and clearly light) */
  color: #2a4a66;
}
body.page-id-3865 .gt-availability__cell.is-avail-once:hover {
  background: #c5e0f4;
}
/* --- Availability cell: kill the default focus haze ----------------
   After a click the cell stays focused and the browser/theme paints a
   dark-blue focus background or outline on top of the state color,
   making the state hard to see until the user clicks elsewhere. We
   suppress the default focus ring on availability cells; the state
   color itself is the indicator. (Keyboard accessibility is preserved
   by a subtle inset ring on :focus-visible only.) */
body.page-id-3865 .gt-availability__cell:focus,
body.page-id-3865 .gt-availability__cell:focus-visible,
body.page-id-3865 .gt-availability__cell:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: inherit;
}
body.page-id-3865 .gt-availability__cell:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18) !important;
}

/* --- Templates UI: force visible button text -----------------------
   WordPress themes sometimes inherit `color: inherit` (from a parent
   that resolves to white) onto our admin-portal buttons, making
   button labels disappear. These rules pin the text and background
   colors for every templates-manager / editor / bar control so the
   labels are always readable regardless of theme. */
body.page-id-3865 #gt-templates-bar,
body.page-id-3865 #gt-templates-bar * {
  color: #222;
}
body.page-id-3865 #gt-templates-bar button,
body.page-id-3865 #gt-templates-bar select {
  color: #222 !important;
}
body.page-id-3865 #gt-templates-modal button,
body.page-id-3865 #gt-templates-modal input,
body.page-id-3865 #gt-templates-modal select,
body.page-id-3865 #gt-templates-modal span {
  color: #222 !important;
}
body.page-id-3865 #gt-tpl-editor button:not(.gt-availability__cell):not(.gt-admin-tz-pill),
body.page-id-3865 #gt-tpl-editor input,
body.page-id-3865 #gt-tpl-editor h3,
body.page-id-3865 #gt-tpl-editor span {
  color: #222 !important;
}
/* Active TZ pill in the template editor must keep its white label;
   the inline color:#fff loses to the #gt-tpl-editor button rule
   above, so we carve out an explicit override. Inactive pills want
   the slate-grey label from their inline style and are excluded
   from the blanket rule via :not(.gt-admin-tz-pill). */
body.page-id-3865 #gt-tpl-editor .gt-admin-tz-pill.is-active {
  color: #ffffff !important;
}
/* Locked-row name input stays in the muted slate tone, not pure #222. */
body.page-id-3865 #gt-templates-modal [data-locked="1"] [data-tpl-name] {
  color: #5a5566 !important;
}

/* Tentative -- yellow "soft closed" for booking, but visible to
   the customer so they can self-filter (George: "There are times
   when I will set myself to be tentatively available... that will
   allow them to self-filter"). */
body.page-id-3865 .gt-availability__cell.is-tentative {
  background: #fbe54a;   /* canary yellow -- distinctly yellow, well
                            separated from mandarin orange. */
  color: #5a4a08;
}
body.page-id-3865 .gt-availability__cell.is-tentative:hover {
  background: #f0d720;
}
/* Booking ring: shows the cell is occupied. Color matches the cell's own
   tone so it doesn't alarm \u2014 it just emphasizes there's something here.
   Only orange and grey occupied cells get a ring; green and light-blue
   (available states) wear no ring even when booked. */
body.page-id-3865 .gt-availability__cell.has-conflict.is-unavail-once {
  box-shadow: inset 0 0 0 2px #c97a35;   /* darker orange echoing #fbe4c8 */
}
body.page-id-3865 .gt-availability__cell.has-conflict.is-unavail-recurring {
  box-shadow: inset 0 0 0 2px #7a7d87;   /* darker grey echoing #b9bcc4 */
}
/* No ring on is-avail or is-avail-once even when has-conflict is present. */
/* Booking chip — sits inside the cell, wears its nature color
   on a soft white pill. Padding kept tight so multiple chips
   can stack inside a 60-min cell without spilling. */
body.page-id-3865 .gt-availability__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 0.70rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2b2b2b;              /* fallback so chip text is always visible */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-id-3865 .gt-availability__chip-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  font-size: 0.64rem;
  opacity: 0.65;
}
/* Re-state nature colors so the chip picks them up inside the availability
   panel — the .gt-case-bookings selector earlier in the file doesn’t reach
   here. Same hex values, applied directly to the chip. */
body.page-id-3865 .gt-availability__chip.gt-slot-nat--slot    { color: #2c3a55; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--extra   { color: #a85518; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--makeup  { color: #3d6b69; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--intro   { color: #880e4f; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--series  { color: #2b2b2b; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--floater { color: #605a85; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--consult { color: #6f3540; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--premium { color: #4a2860; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--summer  { color: #6d8019; }
body.page-id-3865 .gt-availability__chip.gt-slot-nat--single  { color: #000000; }

/* -------------------------------------------------------------------------
   Surface A past-events overlay.

   Goal: let the admin scan the week and immediately see what has already
   happened versus what is still on the books. Past delivered sessions are
   dimmed; cancellations are reduced to a small severity dot so they do not
   compete with live chips for attention. Deleted rows are not rendered at
   all and are filtered out upstream. The whole effect only applies inside
   the availability panel so Surface B (case file add-session calendar) is
   left untouched.
   ------------------------------------------------------------------------- */

/* Grey wash overlay on past cells. We tint the cell's own background
   rather than overlaying a sibling so the cell's interactive states
   (hover, has-conflict ring) keep working. */
body.page-id-3865 .gt-availability__cell.gt-availability__cell--past {
  background-image: linear-gradient(rgba(60,60,60,0.10), rgba(60,60,60,0.10));
}
body.page-id-3865 .gt-availability__cell.gt-availability__cell--past:hover {
  /* Keep the wash on hover but a touch lighter so the underlying state
     color (green/blue/orange) shows through enough to read. */
  background-image: linear-gradient(rgba(60,60,60,0.06), rgba(60,60,60,0.06));
}

/* Dimmed chip for past delivered sessions: desaturate + lower opacity
   so it still names the student but recedes visually. */
body.page-id-3865 .gt-availability__chip.gt-availability__chip--past {
  filter: saturate(0.45);
  opacity: 0.78;
}

/* A canceled past chip is reduced to just the dot + time + name on a
   near-transparent background. The name stays so the admin can still
   identify whose session it was. */
body.page-id-3865 .gt-availability__chip.gt-availability__chip--canceled {
  background: rgba(255,255,255,0.55);
  border-style: dashed;
  border-color: rgba(0,0,0,0.22);
  color: #6b5836;
  filter: saturate(0.55);
}
body.page-id-3865 .gt-availability__chip.gt-availability__chip--canceled .gt-availability__chip-time {
  text-decoration: line-through;
  opacity: 0.75;
}

/* Severity / status dot — same hex tokens as the case-file row palette so
   one glance reads consistently across surfaces. Sits left of the time. */
body.page-id-3865 .gt-availability__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
  margin-right: 2px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #cccccc;
}
/* Delivered (past confirmed): healthy-green palette per spec. */
body.page-id-3865 .gt-availability__dot--delivered {
  background: #5a9a6d;
  border-color: #2f5a3a;
}
/* Ordinary cancel: neutral grey, matching the 'empty' row pill. */
body.page-id-3865 .gt-availability__dot--canceled {
  background: #b7ad95;
  border-color: #6b5836;
}
/* Cancel severities — same hex stops as gt-case-booking--late etc. */
body.page-id-3865 .gt-availability__dot--late {
  background: #e8c3b6;
  border-color: #8a4634;
}
body.page-id-3865 .gt-availability__dot--very-late {
  background: #dca896;
  border-color: #7a3a26;
}
body.page-id-3865 .gt-availability__dot--last-minute {
  background: #c98a6e;
  border-color: #6b2e18;
}
body.page-id-3865 .gt-availability__dot--no-show {
  background: #e85d4a;
  border-color: #4a0a02;
}

/* =========================================================================
   Add-session lever — embedded weekly grid inside the family case panel.
   Mirrors the availability palette (green = avail, light-blue = once,
   grey = unavail-recurring, orange = unavail-once, mushroom = past/booked)
   so the admin sees one consistent civil-time canvas across the app.
   ========================================================================= */

.gt-addsess {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* Week navigator: prev / range / next, centered. Buttons use the same
   ghost-pill chrome as the cancel picker so the two pickers feel like
   siblings rather than strangers. */
.gt-addsess__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px;
}
/* Top row holding the "This week" snap-home pill. Centered above the
   prev/range/next bar so the eye reads it as an override that returns
   the calendar to the current week from anywhere. */
.gt-addsess__navtop {
  /* Wide view default: This-week + Clear-forward sit side-by-side,
     centred, on a row OF THEIR OWN above the Prev/range/Next row.
     This keeps the Clear-forward chip up and out of the way of the
     primary calendar nav (George, June 6 2026). The portrait media
     block below collapses this to Clear-forward only — the portrait
     twin of the This-week pill lives between the arrows in row B. */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 6px;
}
/* Wide view: hide the in-nav-row twin of the This-week pill (only
   shown in portrait, between the arrows). */
.gt-addsess__nav-today { display: none; }
/* This-week pill: same ghost-pill chrome as prev/next but with a soft
   administrative-purple accent so it reads as a distinct action rather
   than a sibling of the page nav. justify-content centers the label
   inside the pill (the base nav button uses inline-flex aligned to the
   start, which left-justifies single-child labels). text-align is
   added belt-and-braces in case the inner becomes a span later. */
body.page-id-3865 .entry-content button.gt-addsess__navbtn--today,
.gt-addsess__navbtn--today {
  /* Solid purple fill to match the admin button language
     (Clear-forward, Save Now, Revoke). Was a pale lavender ghost
     pill; George June 6 2026 requested it dressed in the same
     purple as the other admin buttons. */
  background: #5e3e87;
  color: #ffffff;
  border-color: #4d3270;
  font-weight: 600;
  justify-content: center;
  text-align: center;
  padding: 4px 18px;
  min-width: 96px;
}
body.page-id-3865 .entry-content button.gt-addsess__navbtn--today:hover,
.gt-addsess__navbtn--today:hover {
  background: #4d3270;
  color: #ffffff;
  border-color: #3a2456;
}
.gt-addsess__range {
  position: relative;            /* anchor for the inline Clear-forward button */
  font-weight: 600;
  color: #4a3c20;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.page-id-3865 .entry-content button.gt-addsess__navbtn,
.gt-addsess__navbtn {
  /* Dressed in the admin-purple family (George June 6 2026): white
     fill with lavender border + deep-purple text/arrow so they read
     as siblings of the This-week pill but distinct (ghost vs solid). */
  background: #ffffff;
  color: #2b1f3d;
  border: 1px solid #c7b6dc;
  border-radius: 999px;
  /* Base pill chrome (applies everywhere). Padding / sizing live in
     the media-scoped blocks below so the portrait media block at the
     TOP of the file (which sets padding:4px 10px on portrait) cannot
     be overridden by a later wide-view padding rule (George June 6
     2026, fourth pass \u2014 portrait pills were getting clobbered by
     a later-in-file wide rule which the cascade made win at equal
     specificity). Wide sizing is now explicitly gated by a min-width
     601 media query so it never reaches portrait. */
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* Wide view only (landscape phone + tablet + PC): roomy pill with
   arrow + label sitting clear of the border. Gated by min-width so the
   portrait media block at the top of the file is left alone. */
@media (min-width: 601px), (orientation: landscape) {
  body.page-id-3865 .entry-content button.gt-addsess__navbtn,
  .gt-addsess__navbtn {
    padding: 8px 22px;
    gap: 10px;
    min-width: 140px;
  }
}
body.page-id-3865 .entry-content button.gt-addsess__navbtn:hover,
.gt-addsess__navbtn:hover {
  background: #f3edf9;
  border-color: #5e3e87;
  color: #2b1f3d;
}

/* The grid itself: 1 hour-label column + N day columns, where N is
   driven by the data-days attribute the JS stamps on the grid host.
   Default is 7; portrait phones get 4. Hour rows have a fixed minimum
   height so each cell has room for a 'Available' label or a service
   name without the row collapsing. */
.gt-addsess__grid {
  display: grid;
  grid-template-columns: 60px repeat(7, minmax(0, 1fr));
  gap: 2px;
  background: #e8d6b8;
  border: 1px solid #e8d6b8;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.78rem;
}
.gt-addsess__grid[data-days="4"] {
  /* Portrait 4-day mode: trim the hour rail aggressively so the four
     day columns get as much horizontal space as possible. The rail
     only needs to hold strings like "10 AM" / "12 PM". */
  grid-template-columns: 34px repeat(4, minmax(0, 1fr));
  font-size: 0.74rem;
}
.gt-addsess__grid[data-days="4"] .gt-addsess__hour {
  font-size: 0.7rem;
  padding: 2px 2px;
}

/* Clear-forward chip footer: lives BENEATH the calendar grid in every
   view \u2014 down and out of the way of the primary nav (George June 6
   2026). Centred on its own row with a small top margin so the gutter
   between grid and chip reads as deliberate. The chip's click handler
   already runs a server-side preview + a confirm() dialogue that lists
   exactly what will be wiped, so the chip is fully guarded. The base
   .gt-clear-forward-btn--inline class is absolutely-positioned (legacy:
   it used to sit inside the range wrapper); we override that to static
   here and inside the footer so it flows. */
.gt-addsess__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 4px 2px;
  margin-top: 2px;
}
.gt-addsess__footer-clear { display: inline-flex; align-items: center; }
body.page-id-3865 .gt-addsess__footer-clear .gt-clear-forward-btn--inline,
body.page-id-3865 .entry-content button.gt-clear-forward-btn--inline {
  position: static;
  transform: none;
  right: auto;
  top: auto;
}
.gt-addsess__corner {
  background: #faf3e3;
}
.gt-addsess__head {
  background: #faf3e3;
  padding: 6px 6px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.1;
}
.gt-addsess__head-d {
  font-weight: 600;
  color: #4a3c20;
  font-size: 0.78rem;
}
.gt-addsess__head-n {
  color: #6b5836;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.gt-addsess__hour {
  background: #faf3e3;
  color: #6b5836;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
/* Wide view: "4" and "AM" share one inline row, end-aligned. The two
   sub-spans are just unstyled text wrappers here — the portrait media
   block stacks them. */
.gt-addsess__hour-n,
.gt-addsess__hour-ap { display: inline; }

/* Arrow glyph cell. The arrow is an inline SVG (see renderAddSessionShell
   in gt_admin.js) so both directions render from the SAME path; the
   right arrow is the left arrow mirrored via scaleX(-1). This delivers
   a TRULY symmetric pair regardless of font availability \u2014 Unicode
   \u2190 / \u2192 never reliably matched across the WP theme fonts (the
   left routinely came in smaller and baseline-low). George June 6 2026:
   "do what it takes". */
.gt-addsess__navbtn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  color: currentColor;
  line-height: 1;
  flex-shrink: 0;
}
.gt-addsess__navbtn-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.gt-addsess__navbtn-arrow--right svg {
  /* Mirror horizontally so the same path becomes a right-pointing
     arrow. transform-origin centre means the visual position is
     unchanged. */
  transform: scaleX(-1);
}
.gt-addsess__cell {
  background: #ffffff;
  /* Every cell sits at booked-cell height so rows have uniform depth.
     Booked cells need ~44px to fit the two-line {nature, name} stack
     comfortably; non-booked cells inherit the same floor and centre
     their single "Available" label so the grid reads as a regular
     tartan rather than a patchwork that swells around bookings.
     Round 9g: horizontal padding tightened (5px → 2px) so the 7-day
     landscape view fits AVAILABLE / PREMIUM / MAKEUP on a single line
     without widowing the final letters. word-break dropped to keep
     long words intact; nowrap is applied per-label below so we still
     wrap rather than overflow when a multi-word string lands here. */
  min-height: 44px;
  padding: 4px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #4a3c20;
  font-size: 0.74rem;
  line-height: 1.15;
  overflow: hidden;
  white-space: normal;
}
.gt-addsess__lbl {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
  /* Round 9g: single-line render with clip if a future label is too
     long. Stops AVAILABLE from widowing the final E inside the now-
     tighter cells. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
.gt-addsess__who {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  font-size: 0.7rem;
  line-height: 1.15;
  /* color is set inline per-nature; we don't fix it here so the
     ten-nature palette can override cleanly. */
}
.gt-addsess__nat {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  /* Round 9g: PREMIUM / MAKEUP / PACKAGE all sit on one line. Cell
     padding is tight so the natural word fits at 0.78rem; if a future
     nature exceeds the cell, the cell's overflow:hidden clips rather
     than wraps mid-word. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
.gt-addsess__name {
  font-weight: 500;
  font-size: 0.68rem;
  opacity: 0.78;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cell state palette — must agree with the availability/admin-view tints
   in portal.css so the two surfaces tell one story. */
.gt-addsess__cell--avail {
  background: #e6f4d8;
  color: #2a3308;
}
.gt-addsess__cell--avail-once {
  background: #dceefc;
  color: #2a4a66;
}
.gt-addsess__cell--quiet {
  background: #faf3e3;
}
.gt-addsess__cell--grey {
  background: #b9bcc4;
  color: #4a4d57;
}
.gt-addsess__cell--orange {
  background: #fbe4c8;
  color: #6b3f15;
}
.gt-addsess__cell--past {
  background: #cfc4b1;
  color: #6b5836;
}
/* Ghost-offered cells: dashed lavender border + soft tint over the
   existing avail/quiet paint, plus a small "offered" caption in the
   corner. Drawn with an :after overlay so we don't fight any other
   nature/state painting. The cell remains clickable; the runway probe
   on Shift-hover paints over the ghost just like any other free cell. */
.gt-addsess__cell--ghost-offered {
  position: relative;
  box-shadow: inset 0 0 0 2px #8b6cd9;
}
.gt-addsess__cell--ghost-offered::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    rgba(139, 108, 217, 0.10) 0 6px,
    rgba(139, 108, 217, 0.18) 6px 12px
  );
  border-radius: 3px;
}
.gt-addsess__ghost {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5b3aa6;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
/* Booked cells get the mushroom field so existing bookings read as
   'already spoken for' without competing with availability greens.
   Inline style overrides background+color with the per-nature palette
   set by addsessBookedPalette(); this rule is the fallback. */
.gt-addsess__cell--booked {
  background: #cfc4b1;
  color: #2b2b2b;
  position: relative; /* anchor for the :after past wash */
}
/* Past-booked wash: 35% grey overlay sitting on top of the nature tint.
   Keeps the colour readable (so you can still tell summer from extra)
   while clearly signalling "behind us". Pointer-events: none so the
   wash doesn't intercept clicks once we add the remove-modal handler. */
.gt-addsess__cell--booked[data-past="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(75, 75, 75, 0.35);
  pointer-events: none;
}

/* Blocked-by-other-family cell paint + X-hatch.

   Surface B currently shows this family's own bookings as coloured
   cells. Slots held by ANOTHER family used to render as plain quiet
   cells, indistinguishable from "no availability settings". The grid
   now stamps gt-addsess__cell--blocked on those, paints them mushroom
   to match Surface A's blocked treatment, and overlays an X-hatch:
   a pair of thin diagonal black lines drawn corner to corner.

   The X signals "unavailable by reason of a pre-existing booking held
   by another family" -- visually distinct from grey/orange (no
   availability) and from the family's own coloured bookings.

   Two linear-gradients combined: TL->BR diagonal, TR->BL diagonal.
   Pointer-events: none on the overlay so clicks reach the cell. */
.gt-addsess__cell--blocked {
  position: relative;
  background: #b9bcc4; /* grey, matches is-unavail-recurring on Surface A */
  color: transparent;  /* no label -- the X carries the meaning */
  cursor: not-allowed;
}
.gt-addsess__cell--blocked::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to top right,
      transparent calc(50% - 0.6px),
      rgba(0, 0, 0, 0.55) calc(50% - 0.6px),
      rgba(0, 0, 0, 0.55) calc(50% + 0.6px),
      transparent calc(50% + 0.6px)),
    linear-gradient(to top left,
      transparent calc(50% - 0.6px),
      rgba(0, 0, 0, 0.55) calc(50% - 0.6px),
      rgba(0, 0, 0, 0.55) calc(50% + 0.6px),
      transparent calc(50% + 0.6px));
}

/* Runway badge: a discrete number (0-9) or chevron (>) painted in the
   bottom-right of a cell while the user holds Shift over a candidate
   sequence starter. Small, low-saturation, pointer-events: none so it
   never interferes with the underlying click target. Anchored to the
   cell via the cell's own position: relative (set inline by
   addsessPaintRunway when needed). */
.gt-addsess__runway {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: #2b2b2b;
  background: rgba(255, 255, 255, 0.78);
  padding: 1px 3px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  letter-spacing: 0;
}

/* -------------------------------------------------------------
   Half-cell (consult) rendering on Surface B.

   A 30-minute booking sits in a 60-minute grid cell. We split
   the cell into two absolutely-positioned regions stacked
   vertically: the booked half (palette-painted, removable) and
   the avail half (pale-gold, clickable to add another consult).
   --half-top / --half-bottom on the parent decide which visual
   half each region occupies; source order in HTML is irrelevant.
   ------------------------------------------------------------- */
.gt-addsess__cell--split {
  position: relative;
  padding: 0;
  /* Strip the parent's nature paint \u2014 each region paints itself. */
  background: transparent !important;
}
.gt-addsess__cell--split .gt-addsess__region {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  font: inherit;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gt-addsess__cell--split.gt-addsess__cell--half-top    .gt-addsess__region--booked { top: 0; }
.gt-addsess__cell--split.gt-addsess__cell--half-top    .gt-addsess__region--avail,
.gt-addsess__cell--split.gt-addsess__cell--half-top    .gt-addsess__region--quiet  { top: 50%; }
.gt-addsess__cell--split.gt-addsess__cell--half-bottom .gt-addsess__region--booked { top: 50%; }
.gt-addsess__cell--split.gt-addsess__cell--half-bottom .gt-addsess__region--avail,
.gt-addsess__cell--split.gt-addsess__cell--half-bottom .gt-addsess__region--quiet  { top: 0; }

.gt-addsess__cell--split .gt-addsess__region--booked {
  /* Inline style sets background+color per nature; this rule sets
     the layout-only defaults. Subtle inner shadow gives the half
     enough heft to read as a discrete object inside the hour. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-weight: 600;
}
.gt-addsess__cell--split .gt-addsess__region--booked:hover {
  filter: brightness(1.04);
}
.gt-addsess__cell--split .gt-addsess__region--avail {
  background: #f3e9c8;        /* pale gold \u2014 matches portal.css avail-half */
  color: #5e4a14;
  font-weight: 500;
}
.gt-addsess__cell--split .gt-addsess__region--avail:hover {
  background: #ecdcaa;
}
.gt-addsess__cell--split .gt-addsess__region--quiet {
  background: #f5f3ee;
  cursor: default;
}
/* Past-wash for the booked half lives on the parent (data-past="1")
   but we don't want it to dim the avail half too. Scope the
   overlay to the booked region. */
.gt-addsess__cell--split[data-past="1"]::after { display: none; }
.gt-addsess__cell--split[data-past="1"] .gt-addsess__region--booked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(75, 75, 75, 0.35);
  pointer-events: none;
}
.gt-addsess__cell--split .gt-addsess__region--booked,
.gt-addsess__cell--split .gt-addsess__region--avail {
  position: absolute;
  /* Re-state position so the ::after pseudo lands correctly. */
}
.gt-addsess__cell--split .gt-addsess__region .gt-addsess__who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.15;
}
.gt-addsess__cell--split .gt-addsess__region .gt-addsess__nat {
  font-weight: 700;
  font-size: 0.92em;
}
.gt-addsess__cell--split .gt-addsess__region .gt-addsess__name {
  font-weight: 500;
  font-size: 0.82em;
  opacity: 0.92;
}
.gt-addsess__cell--split .gt-addsess__region .gt-addsess__lbl {
  font-size: 0.85em;
  font-weight: 500;
}

/* Red now-line drawn across today's current-hour cell. Positioned in
   JS from the cell's bounding rect, ticked once a minute. The dot on
   the left edge keeps the line legible even when no events sit on it.
   z-index 5 so the line floats above cell content but below any modal
   overlay (the modal scrim sits at z-index 1000+). */
.gt-addsess__nowline {
  position: absolute;
  height: 2px;
  background: #d83a3a;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 0 0.5px rgba(216, 58, 58, 0.4);
}
.gt-addsess__nowdot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d83a3a;
  transform: translate(-4px, -50%);
  box-shadow: 0 0 0 1.5px #ffffff;
}

/* Clickable cells get a hover lift and a pointer; the unbookable tints
   (grey/orange/past/booked) intentionally do NOT receive this rule so
   the admin can't fat-finger a forbidden slot. */
.gt-addsess__cell--clickable {
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.gt-addsess__cell--clickable:hover {
  filter: brightness(0.96);
  box-shadow: inset 0 0 0 2px #9b7a3a;
}

/* -------------------------------------------------------------------------
   Modal — opens inside the case panel when a slot is picked. Fixed-position
   overlay so it floats above the bookings stage without re-flowing it.
   ------------------------------------------------------------------------- */
.gt-addsess__modal[hidden] { display: none; }
.gt-addsess__modal {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 12, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.gt-addsess-modal__panel {
  background: #faf3e3;
  border: 1px solid #d6c39a;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(40, 30, 12, 0.28);
  padding: 12px 18px 12px;
  width: min(440px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The remove-session variant of the panel is content-rich (eyebrow,
   when/code/chip, pills, two action rows, status, old-list link).
   On standard 13" laptops the original spacing pushed Cancel/Remove
   off-screen; tighten everything a touch so the buttons sit within
   the viewport without a scrollbar. */
.gt-addsess-rm__panel { padding: 10px 16px 10px; gap: 6px; }
.gt-addsess-rm__panel .gt-addsess-modal__hdr { margin-bottom: 2px; }
.gt-addsess-rm__panel .gt-addsess-modal__hdr p { margin: 0 0 2px 0; }
.gt-addsess-rm__panel .gt-addsess-modal__group { gap: 2px; }
.gt-addsess-rm__panel .gt-addsess-modal__actions { margin-top: 2px; }
.gt-addsess-rm__panel .gt-addsess-modal__status:empty { display: none; }
.gt-addsess-rm__panel .gt-addsess-rm__oldlink { margin: 2px 0 0; font-size: 0.78rem; }
.gt-addsess-modal__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: #4a3c20;
}
.gt-addsess-modal__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gt-addsess-modal__label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b5836;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gt-addsess-modal__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 0.92rem;
  color: #4a3c20;
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
}
.gt-addsess-modal__opt:hover {
  background: #f3e9d2;
}
.gt-addsess-modal__opt input[type="radio"] {
  accent-color: #9b7a3a;
  margin: 0;
}
.gt-addsess-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
/* Round 9f: Cancel + Confirm rendered as proper square (rounded-rect)
   buttons with centred text, generous min-width, and the same warm-sand
   palette the rest of the add-session modal uses. Replaces the earlier
   pill (radius 999px / 6×16 padding) which George flagged as pathetic. */
body.page-id-3865 .entry-content button.gt-addsess-modal__btn,
.gt-addsess-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  background: #ffffff;
  color: #4a3c20;
  border: 1.5px solid #c8b58a;
  border-radius: 6px;
  padding: 10px 22px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
body.page-id-3865 .entry-content button.gt-addsess-modal__btn--ghost,
.gt-addsess-modal__btn--ghost {
  color: #6b5836;
}
body.page-id-3865 .entry-content button.gt-addsess-modal__btn--ghost:hover,
.gt-addsess-modal__btn--ghost:hover {
  background: #f3e9d2;
}
body.page-id-3865 .entry-content button.gt-addsess-modal__btn--primary,
.gt-addsess-modal__btn--primary {
  background: #9b7a3a;
  color: #ffffff;
  border-color: #9b7a3a;
}
body.page-id-3865 .entry-content button.gt-addsess-modal__btn--primary:hover:not(:disabled),
.gt-addsess-modal__btn--primary:hover:not(:disabled) {
  background: #7e6128;
  border-color: #7e6128;
}
body.page-id-3865 .entry-content button.gt-addsess-modal__btn:disabled,
.gt-addsess-modal__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.gt-addsess-modal__status {
  margin: 0;
  /* Collapses to zero when empty so the dead space below Confirm
     disappears; expands as needed when a message lands. */
  min-height: 0;
  font-size: 0.86rem;
  color: #6b5836;
}
.gt-addsess-modal__status:empty {
  display: none;
}
.gt-addsess-modal__status--err {
  color: #9b3a1a;
  font-weight: 500;
}
/* Multi-line summaries ("Booked N of M" + "Did not book…") render each
   sentence on its own visual line. Lightly indented continuation gives
   the second line a clear hierarchy without forcing a hard list shape. */
.gt-addsess-modal__status-line {
  display: block;
}
.gt-addsess-modal__status-line + .gt-addsess-modal__status-line {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .gt-addsess__grid {
    font-size: 0.7rem;
  }
  .gt-addsess__cell {
    min-height: 24px;
    padding: 2px 3px;
    font-size: 0.68rem;
  }
  .gt-addsess__hour {
    padding: 2px 4px;
    font-size: 0.7rem;
  }
}

/* =========================================================================
   Add-session modal v2 — California-code header + colored chooser pills.
   The earlier radio-row styling (.gt-addsess-modal__opt etc.) is retained
   above for back-compat but unused; the live modal now uses the pill
   metaphor below to match the user-side .gt-nat--choice and .gt-get__opt
   patterns from portal.css. One visual language across admin and family.
   ========================================================================= */

/* ---------- Header: California code as the lead identifier ---------- */
.gt-addsess-modal__hdr {
  text-align: center;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(155, 122, 58, 0.35);
}
.gt-addsess-modal__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b5836;
}
.gt-addsess-modal__code {
  margin: 2px 0 0;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #4a3c20;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.gt-addsess-modal__when {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: #6b5836;
  font-variant-numeric: tabular-nums;
}

/* ---------- Group label + caption ---------- */
.gt-addsess-modal__group--quiet {
  padding: 2px 0;
}
.gt-addsess-modal__caption {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  color: #4a3c20;
}
.gt-addsess-modal__caption strong {
  color: #4a3c20;
  font-weight: 600;
}

/* ---------- Pill rows ---------- */
.gt-addsess-pills {
  display: grid;
  gap: 6px 8px;
  margin-top: 6px;
}
/* Students: single line of pills regardless of count (we expect 1-4). */
.gt-addsess-pills--students {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
/* Natures: 5 columns × 2 rows so all ten tiles fit without scrolling. */
.gt-addsess-pills--natures {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Payments: 5 columns × 1 row, matching the user-side acquisition row. */
.gt-addsess-pills--pays {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Quarters: 4 columns × 1 row. Consult-only start-minute picker
   (:00/:15/:30/:45). Hidden by default via [hidden] on its parent
   group; revealed only when nature=consult is selected. Quarters
   inherit the consult wine palette so they read as part of the
   consult family, with a firm :checked fill so the admin can see
   at a glance which quarter has been picked (mobile-friendly:
   high-contrast on white background under bright daylight). */
.gt-addsess-pills--quarters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gt-addsess-pill--quarter         { color: #6f3540; }
.gt-addsess-pill--quarter:hover   { background: #efdee2; }
.gt-addsess-pill--quarter:has(input:checked) {
  background: #b06576;
  color: #ffffff;
  border-color: #6f3540;
  box-shadow: inset 0 0 0 2px #6f3540;
}

/* Consult quarter-hour chip: small ":15"/":30"/":45" badge that rides
   in the top-right corner of a booked consult cell. Indicates the
   start minute when the consult does not begin on the hour. :00 is
   the default and carries no chip (no visual noise for the common
   case). The chip uses a translucent white pad on the consult wine
   wash so it reads as a quiet annotation, not a second label. */
.gt-addsess__qchip {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.85);
  color: #4a1d27;
  border: 1px solid rgba(74, 29, 39, 0.45);
  border-radius: 999px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
}
/* The booked cell already uses position:relative for the past wash;
   .gt-addsess__who sits inside it. Ensure the who-block doesn't clip
   its children so the chip can corner-anchor against the cell box. */
.gt-addsess__cell--booked .gt-addsess__who {
  position: static;
}

/* ---------- Pill base recipe (mirrors portal.css .gt-nat--choice) ---------- */
.gt-addsess-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 8px 6px;
  background: #ffffff;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.15;
  text-align: center;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
  /* Default neutral accent (mushroom) — overridden per token below. */
  color: #6b5836;
}
.gt-addsess-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.gt-addsess-pill__lbl {
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.gt-addsess-pill__cap {
  font-size: 0.7rem;
  opacity: 0.75;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Card pill is the only stacked pill in the payment row: brand strip on
   top, then label, then price. Matches portal.css .gt-get__opt--stacked. */
.gt-addsess-pill--stacked {
  padding: 4px 8px 5px;
  gap: 0;
}
.gt-addsess-pill__brand {
  display: block;
  max-width: 92%;
  max-height: 14px;
  width: auto;
  height: auto;
  margin: 0 auto 1px;
  opacity: 0.85;
}

/* ---------- Student pills: institutional warm ---------- */
.gt-addsess-pill--student {
  color: #4a3c20;
}
.gt-addsess-pill--student:hover {
  background: #f3e9d2;
}
.gt-addsess-pill--student:has(input:checked) {
  background: #9b7a3a;
  color: #ffffff;
  border-color: #7e6128;
}

/* ---------- Nature pills: ten accents pulled from portal.css ----------
   The accent hue drives both the resting text color and the active-state
   fill, exactly like the user-side .gt-nat--choice idiom. Each block:
     - resting: white fill, hairline border + label in accent text
     - hover:   light-tint background (a desaturated paler version of the
                accent) without committing to a fill
     - active:  full accent fill, white label, darker border
   The ten tokens are slot, extra, makeup, consult, intro, series,
   floater, premium, summer, single. Summer needs dark ink because its
   lime background is too bright for white text; Single is the only pill
   that inverts (white fill / black ink) per existing portal convention. */
.gt-addsess-pill--nature.gt-nat--slot    { color: #2e3a55; }
.gt-addsess-pill--nature.gt-nat--extra   { color: #a85518; }
.gt-addsess-pill--nature.gt-nat--makeup  { color: #2f5f5d; }
.gt-addsess-pill--nature.gt-nat--consult { color: #6f3540; }
.gt-addsess-pill--nature.gt-nat--intro   { color: #7b1142; }
.gt-addsess-pill--nature.gt-nat--series  { color: #3a3a3a; }
.gt-addsess-pill--nature.gt-nat--floater { color: #5e527d; }
.gt-addsess-pill--nature.gt-nat--premium { color: #5a2e6e; }
.gt-addsess-pill--nature.gt-nat--summer  { color: #6d8019; }
.gt-addsess-pill--nature.gt-nat--single  { color: #000000; }

.gt-addsess-pill--nature.gt-nat--slot:hover    { background: #dde3ee; }
.gt-addsess-pill--nature.gt-nat--extra:hover   { background: #fbe6d2; }
.gt-addsess-pill--nature.gt-nat--makeup:hover  { background: #d6e6e5; }
.gt-addsess-pill--nature.gt-nat--consult:hover { background: #efdee2; }
.gt-addsess-pill--nature.gt-nat--intro:hover   { background: #fad1de; }
.gt-addsess-pill--nature.gt-nat--series:hover  { background: #dcdcdc; }
.gt-addsess-pill--nature.gt-nat--floater:hover { background: #e4dfee; }
.gt-addsess-pill--nature.gt-nat--premium:hover { background: #e2d3ea; }
.gt-addsess-pill--nature.gt-nat--summer:hover  { background: #eef5cf; }
.gt-addsess-pill--nature.gt-nat--single:hover  { background: #f4f4f4; }

.gt-addsess-pill--nature.gt-nat--slot:has(input:checked) {
  background: #4a5a7a; color: #ffffff; border-color: #2e3a55;
}
.gt-addsess-pill--nature.gt-nat--extra:has(input:checked) {
  background: #e89243; color: #ffffff; border-color: #a85518;
}
.gt-addsess-pill--nature.gt-nat--makeup:has(input:checked) {
  background: #6ba09e; color: #ffffff; border-color: #2f5f5d;
}
.gt-addsess-pill--nature.gt-nat--consult:has(input:checked) {
  background: #b06576; color: #ffffff; border-color: #6f3540;
}
.gt-addsess-pill--nature.gt-nat--intro:has(input:checked) {
  background: #c2185b; color: #ffffff; border-color: #7b1142;
}
.gt-addsess-pill--nature.gt-nat--series:has(input:checked) {
  background: #6b6b6b; color: #ffffff; border-color: #3a3a3a;
}
.gt-addsess-pill--nature.gt-nat--floater:has(input:checked) {
  background: #a59cc7; color: #ffffff; border-color: #5e527d;
}
.gt-addsess-pill--nature.gt-nat--premium:has(input:checked) {
  background: #7d4b8c; color: #ffffff; border-color: #5a2e6e;
}
/* Summer keeps dark ink even when active — the lime background needs it
   for legibility, same rule as the booked-cell override in portal.css. */
.gt-addsess-pill--nature.gt-nat--summer:has(input:checked) {
  background: #b8d041; color: #2a3308; border-color: #6d8019;
}
/* Single is the only inverted pill: black ink on white, with a black
   border when active. Mirrors the portal's reverse-text Single treatment. */
.gt-addsess-pill--nature.gt-nat--single:has(input:checked) {
  background: #ffffff; color: #000000; border-color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}

/* ---------- Payment pills: five accents from portal.css .gt-get__opt ----- */
.gt-addsess-pill--pay[data-payment="flex"]       { color: #8e6a1f; }
.gt-addsess-pill--pay[data-payment="voucher"]    { color: #a85518; }
.gt-addsess-pill--pay[data-payment="card"]       { color: #6f3540; }
.gt-addsess-pill--pay[data-payment="zelle"]      { color: #6d1dd4; }
/* Admin-comp recedes: mushroom outline, no shouting fill on hover. */
.gt-addsess-pill--pay[data-payment="admin_comp"] { color: #6b5836; }

.gt-addsess-pill--pay[data-payment="flex"]:hover     { background: #faf2e3; }
.gt-addsess-pill--pay[data-payment="voucher"]:hover  { background: #fbe6d2; }
.gt-addsess-pill--pay[data-payment="card"]:hover     { background: #f2e3e6; }
.gt-addsess-pill--pay[data-payment="zelle"]:hover    { background: #ece1f8; }
.gt-addsess-pill--pay[data-payment="admin_comp"]:hover { background: #f3e9d2; }

.gt-addsess-pill--pay[data-payment="flex"]:has(input:checked) {
  background: #c89a48; color: #ffffff; border-color: #8e6a1f;
}
.gt-addsess-pill--pay[data-payment="voucher"]:has(input:checked) {
  background: #e89243; color: #ffffff; border-color: #a85518;
}
.gt-addsess-pill--pay[data-payment="card"]:has(input:checked) {
  background: #b06576; color: #ffffff; border-color: #6f3540;
}
.gt-addsess-pill--pay[data-payment="zelle"]:has(input:checked) {
  background: #6d1dd4; color: #ffffff; border-color: #461e99;
}
/* Admin-comp active reads "free" with a sage-green tint and a firmer
   ring \u2014 the admin needs to register at a glance that no charge is
   being levied. Same green family is reused by the Remove modal's
   No-penalty pill for visual consistency. */
.gt-addsess-pill--pay[data-payment="admin_comp"]:has(input:checked) {
  background: #d8e8c8;
  color: #2f4a1c;
  border-color: #6a8a3c;
  box-shadow: inset 0 0 0 2px #6a8a3c;
}
/* Shrink the "no charge" cap so it sits inside the pill comfortably
   without wrapping or eating the label's air. */
.gt-addsess-pill--pay[data-payment="admin_comp"] .gt-addsess-pill__cap {
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  opacity: 0.82;
}
/* Inactive Card-pill brand dims; active flips to white reverse so it
   stays visible on the wine fill. */
.gt-addsess-pill--pay[data-payment="card"]:has(input:checked) .gt-addsess-pill__brand {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* ---------- Responsive: stack to 2 columns on phone-portrait --------- */
@media (max-width: 520px) {
  .gt-addsess-pills--natures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gt-addsess-pills--pays {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gt-addsess-modal__code {
    font-size: 1.6rem;
  }
}

/* =========================================================================
   Unified Manage Schedule — booked-cell "Remove" affordances.
   The same flex cell becomes clickable when it carries a bid; we mirror
   the picker's clickable lift but use a wine-coloured ring so admins can
   distinguish "I will remove this" from "I will add here" at a glance.
   ========================================================================= */
.gt-addsess__cell--removable {
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.gt-addsess__cell--removable:hover {
  filter: brightness(0.96);
  box-shadow: inset 0 0 0 2px #8a3a4a;
}

/* =========================================================================
   Remove-session modal — same panel chrome as Add-session, with a tinted
   chip in the header showing the booked-cell's nature colour, and three
   colour-coded choice pills (amber Late · red No-show · mushroom No-penalty).
   ========================================================================= */
.gt-addsess-rm__chip {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.gt-addsess-rm__pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gt-addsess-rm-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Tighter than the Add-session pills: only one line of text now, so
     the pill can sit at button-height with comfortable hug. */
  padding: 6px 10px;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid #d6c39a;
  background: #fbf6e8;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.gt-addsess-rm-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gt-addsess-rm-pill .gt-addsess-pill__lbl {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---- Per-pill colour treatments -------------------------------------------
   Late       : light pink (cancellation-pink, recognised in calendars)
   No-show    : coral (warmer, more vivid; greyed out until T+8 unlocks)
   No-penalty : sage-green, same family as Admin no-charge in Add modal
   ------------------------------------------------------------------------- */
.gt-addsess-rm-pill--late {
  color: #8a3a4a;
  background: #fbe6ec;
  border-color: #e2bfca;
}
.gt-addsess-rm-pill--late:hover {
  background: #f7d4de;
}
.gt-addsess-rm-pill--late:has(input:checked) {
  background: #f3b8c8;
  color: #6a1f30;
  border-color: #c87a8e;
  box-shadow: inset 0 0 0 2px #c87a8e;
}

.gt-addsess-rm-pill--noshow {
  color: #8a3a1a;
  background: #fde2d4;
  border-color: #e8b48f;
}
.gt-addsess-rm-pill--noshow:hover {
  background: #fbd0b6;
}
.gt-addsess-rm-pill--noshow:has(input:checked) {
  background: #f59569;
  color: #4a1a08;
  border-color: #c4622e;
  box-shadow: inset 0 0 0 2px #c4622e;
}

.gt-addsess-rm-pill--nopen {
  color: #3a5a20;
  background: #e7f0d8;
  border-color: #b9cd95;
}
.gt-addsess-rm-pill--nopen:hover {
  background: #dbe8c6;
}
.gt-addsess-rm-pill--nopen:has(input:checked) {
  background: #d8e8c8;
  color: #2f4a1c;
  border-color: #6a8a3c;
  box-shadow: inset 0 0 0 2px #6a8a3c;
}

/* Locked No-show pill (pre T+8): coral drained to grey, still visible
   but obviously unreachable. */
.gt-addsess-rm-pill--locked {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ece6dd;
  color: #8a7e6e;
  border-color: #d6c8b5;
}
.gt-addsess-rm-pill--locked:hover { background: #ece6dd; }

/* "Old list view" anchor sitting under the status line. */
.gt-addsess-rm__oldlink {
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.82rem;
}
.gt-addsess-rm__oldlink a {
  color: #6f5836;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gt-addsess-rm__oldlink a:hover { color: #3d2f17; }

/* Stack pills on phone-portrait. */
@media (max-width: 520px) {
  .gt-addsess-rm__pills {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Inert series pills above the Manage-schedule calendar. They live as a
   visual promise of work-to-come; both are disabled until series flows
   are wired. The row is small and quiet so it doesn't compete with the
   week-nav row immediately below it.
   ========================================================================= */
.gt-addsess__series {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.gt-addsess__series-pill {
  padding: 4px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: #8a7e6e;
  background: #f3ece0;
  border: 1px solid #d6c8b5;
  border-radius: 999px;
  cursor: not-allowed;
  opacity: 0.7;
}
.gt-addsess__series-pill:hover { background: #f3ece0; }

/* --- Series create / cancel modal ---------------------------------
   Surfaces:
   - openAddSessionSeriesModal panel        (.gt-addsess-series__panel)
   - The two end-mode rows                  (.gt-addsess-series__endline)
   - The N-weeks / until-date input pair    (.gt-addsess-series__weeks/__until)
   - The danger button used in both the create panel (none currently) and
     the Remove-session series row          (.gt-addsess-modal__btn--danger)
   - The Remove-session series footer       (.gt-addsess-rm__series-row)
   Colors borrow from the family-portal soft palette so the surface
   reads as the same room as the Add and Remove modals.
------------------------------------------------------------------- */
.gt-addsess-series__panel { /* inherits panel base; no override needed */ }
.gt-addsess-series__endmode {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gt-addsess-series__endline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #e3dccf;
  border-radius: 8px;
  background: #fbf7ef;
  font-size: 14px;
  color: #2b2b2b;
  cursor: pointer;
}
.gt-addsess-series__endline:hover { background: #f5efe0; }
.gt-addsess-series__endline input[type="radio"] { margin: 0 6px 0 0; }
.gt-addsess-series__weeks {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid #c8bda7;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  text-align: center;
}
.gt-addsess-series__until {
  padding: 4px 6px;
  border: 1px solid #c8bda7;
  border-radius: 6px;
  background: #fff;
  font: inherit;
}
.gt-addsess-rm__series-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d6c8b5;
  justify-content: stretch;
}
.gt-addsess-rm__series-row .gt-addsess-modal__btn { width: 100%; }
.gt-addsess-modal__btn--danger {
  background: #b94a4a;
  color: #ffffff;
  border: 1px solid #993939;
}
.gt-addsess-modal__btn--danger:hover { background: #a23e3e; }
.gt-addsess-modal__btn--danger:disabled {
  background: #d7b6b6;
  border-color: #c69b9b;
  cursor: not-allowed;
}

/* =========================================================================
   Sequence runway badge (amber) — painted on own-booked cells while Shift
   is held. Inherits position/sizing from .gt-addsess__runway; only the
   colour pair is overridden. Muted amber so the badge reads as "warning,
   not flashy" — matches the agreed visual register for cascade affordances.
   ========================================================================= */
.gt-addsess__runway--seq {
  background: rgba(202, 165, 90, 0.92);
  color: #2b2b2b;
}

/* =========================================================================
   Cascade-delete modal — list of dates inside the confirm panel. Uses the
   same panel chrome as Remove-session; only the body changes. Each row is
   three columns: weekday, MM/DD/YY, California Code. The list scrolls if
   the sequence is long enough to overflow the modal.
   ========================================================================= */
.gt-addsess-cascade__sub {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a4a4a;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.gt-addsess-cascade__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #e3dccb;
  border-radius: 6px;
  background: #fbf8f1;
}

.gt-addsess-cascade__row {
  display: grid;
  grid-template-columns: 56px 1fr 72px;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  color: #2b2b2b;
  border-bottom: 1px solid #ede5d2;
}

.gt-addsess-cascade__row:last-child { border-bottom: none; }

.gt-addsess-cascade__dow {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b5d3a;
}

.gt-addsess-cascade__date {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gt-addsess-cascade__code {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
  color: #4a4a4a;
  letter-spacing: 0.04em;
}

/* ============================================================
   gt-link-btn  — plain-text link styled button.
   Required because <button class="gt-link-btn"> elements pick
   up the WP theme's default button chrome (grey/black bg,
   padding, borders). This reset lets the same class be used
   on <a> and <button> interchangeably.
   ============================================================ */
body.page-id-3865 .gt-link-btn,
body.page-id-3865 button.gt-link-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  font: inherit;
  color: #3a4a5e;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  min-width: 0;
  border-radius: 0;
}
body.page-id-3865 .gt-link-btn:hover,
body.page-id-3865 button.gt-link-btn:hover {
  text-decoration: underline;
  background: transparent !important;
  color: #2c3a55;
}
body.page-id-3865 .gt-link-btn:focus-visible,
body.page-id-3865 button.gt-link-btn:focus-visible {
  outline: 2px solid #2c3a55;
  outline-offset: 2px;
}
body.page-id-3865 .gt-link-btn[disabled],
body.page-id-3865 button.gt-link-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

/* ============================================================
   gt-reg-pill — consistent pill styling for non-primary footer
   buttons in the Registration modal (Mark reviewed, Archive,
   Print, Close). Applied alongside gt-link-btn so the link-btn
   reset (transparent bg, no border) is overridden into a neutral
   pill that visually subordinates to the Accept & instantiate
   primary CTA. */
body.page-id-3865 .gt-link-btn.gt-reg-pill,
body.page-id-3865 button.gt-link-btn.gt-reg-pill {
  background: #f5f1e8 !important;
  border: 1px solid #d6d2c8 !important;
  padding: 6px 14px !important;
  border-radius: 999px;
  color: #3a4a5e;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body.page-id-3865 .gt-link-btn.gt-reg-pill:hover,
body.page-id-3865 button.gt-link-btn.gt-reg-pill:hover {
  background: #ede9de !important;
  border-color: #b8b2a3 !important;
  color: #2c3a55;
  text-decoration: none;
}
body.page-id-3865 .gt-link-btn.gt-reg-pill:focus-visible,
body.page-id-3865 button.gt-link-btn.gt-reg-pill:focus-visible {
  outline: 2px solid #2c3a55;
  outline-offset: 2px;
}

/* The Open-record cell button gets a touch of weight + spacing so
   it reads as a real affordance, not just text. */
body.page-id-3865 .gt-admin-index button.gt-link-btn[data-records-open] {
  font-weight: 600;
  color: #2c3a55;
  white-space: nowrap;
}

/* "Manage records" dropdown items — full-width text targets in a
   floating panel. Hover bg + correct sizing. */
body.page-id-3865 .gt-manage-records__menu button.gt-manage-records__item {
  padding: 7px 14px !important;
  text-align: left !important;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 4px;
}
body.page-id-3865 .gt-manage-records__menu button.gt-manage-records__item:hover {
  background: #f6f1e6 !important;
  text-decoration: none;
}

/* ============================================================
   Records-view modal — overlay rules scoped to the admin page.
   The portal's .gt-modal rules live under .page-id-3727 only,
   so we need our own here. Also used by the Registration modal,
   which previously rendered inline (functional but un-modal).
   ============================================================ */
body.page-id-3865 .gt-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 28, 0.55);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
body.page-id-3865 .gt-modal[hidden] {
  display: none !important;
}
body.page-id-3865 .gt-modal .gt-modal__panel {
  background: #fff;
  border-radius: 8px;
  border-top: 3px solid #2c3a55;
  box-shadow: 0 16px 48px rgba(20, 18, 28, 0.45);
  padding: 22px 26px 20px;
  width: 100%;
  max-width: 900px;
  position: relative;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #2a2434;
}
body.page-id-3865 .gt-modal .gt-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: #6b6371;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
body.page-id-3865 .gt-modal .gt-modal__close:hover {
  background: #f0ebde;
  color: #2a2434;
}
body.page-id-3865 .gt-modal details {
  background: #fafaf6;
}
body.page-id-3865 .gt-modal details > summary::-webkit-details-marker {
  color: #6b6371;
}
body.page-id-3865 .gt-modal table {
  border-collapse: collapse;
}
body.page-id-3865 .gt-modal .muted {
  color: #9a9aa1;
}

/* ============================================================
   Open-record pill button — small, real button in the leftmost
   "Open" column on the Families + Students indexes. Uses the
   admin's slate-blue palette. Sized to fit in an 80px column
   without crowding the family/student name cell.
   ============================================================ */
body.page-id-3865 .gt-admin-index td.col-open {
  /* Was 80px (sized for just the Open chip). Lite-family rows
     also render Send welcome + Delete pills underneath Open,
     and the widest pill ("Send welcome") is ~108px, so the
     column must accommodate that plus its padding. Otherwise
     the pill overflows the cell edge to the left. */
  width: 130px;
  min-width: 130px;
  text-align: left;
  padding: 6px 8px;
  vertical-align: middle;
}
/* Lite-row button stack: Open + Send welcome + Delete each sit
   on their own line, left-aligned in the cell. Forcing block
   layout (with width:fit-content) gives a clean vertical stack
   independent of inline whitespace between the inserted
   button tags. Margin resets cancel the auto-added margin-left:6px
   on the pill rule so the buttons don't push past the cell edge. */
body.page-id-3865 .gt-admin-index td.col-open button.gt-open-record-btn,
body.page-id-3865 .gt-admin-index td.col-open button.gt-welcome-btn,
body.page-id-3865 .gt-admin-index td.col-open button.gt-lite-delete-btn {
  display: flex !important;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 !important;
}
body.page-id-3865 .gt-admin-index td.col-open button.gt-welcome-btn,
body.page-id-3865 .gt-admin-index td.col-open button.gt-lite-delete-btn {
  margin-top: 4px !important;
}
/* Open-record button: matches the canonical .gt-btn used in
   admin next-session modal action rows (see line ~2022). Same
   padding, radius, neutral palette, hover state. */
body.page-id-3865 button.gt-open-record-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 2px 8px !important;
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1c243a !important;
  background: #f6f7fa !important;
  border: 1px solid #d8dae0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  /* Defeat WP theme min-height (Twenty-Twenty injects 45px on
     .entry-content button) so this chip and the sibling pills
     sit at the same compact height. Was missing here, which
     is what caused the Open chip to balloon vertically while
     the new pills sat compact. */
  min-height: 0 !important;
  vertical-align: middle !important;
}
body.page-id-3865 button.gt-open-record-btn:hover,
body.page-id-3865 button.gt-open-record-btn:focus-visible {
  background: #eceff4;
  border-color: #b8bcc6;
  color: #1c243a;
  text-decoration: none;
  outline: none;
}

/* ============================================================
   Phone-portrait index compaction (June 2026).
   On portrait-phone widths only, the Families and Students
   index tables need to fit the viewport horizontally without
   a side scroll. The Open-record + lite-action button column
   (col-open) is the widest fixed column and the row itself is
   already clickable to open the case file, so the column is
   redundant on phone. Hide it; let the remaining columns
   expand to fill. Also collapse each cell to a single line
   where possible so the table reads densely and predictably.
   Scoped under (max-width: 600px) and (orientation: portrait)
   to match the codebase's existing phone-portrait breakpoint;
   landscape phone and tablet are unaffected.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
  /* Hide the Open column on phone-portrait \u2014 header and body cells.
     Use both display:none and visibility-collapsed-equivalent so the
     remaining columns reflow into the freed width. The row itself
     remains clickable via data-href so no functionality is lost. */
  body.page-id-3865 .gt-admin-index th.col-open,
  body.page-id-3865 .gt-admin-index td.col-open {
    display: none !important;
  }
  /* Let the remaining columns size naturally rather than honouring
     the desktop fixed widths declared at lines ~1161-1166. */
  body.page-id-3865 .gt-admin-index .col-family,
  body.page-id-3865 .gt-admin-index .col-student,
  body.page-id-3865 .gt-admin-index .col-students,
  body.page-id-3865 .gt-admin-index .col-entit-pills,
  body.page-id-3865 .gt-admin-index .col-status,
  body.page-id-3865 .gt-admin-index .col-renewal {
    width: auto !important;
    min-width: 0 !important;
  }
  /* One line per cell wherever the content allows. Long names/labels
     stay on one line and ellipsis-truncate. The status column is
     short by construction (e.g. "Active", "Lite", "Archived") so it
     stays nowrap; the renewal column is a short date (e.g. "Aug 12")
     so it stays nowrap. */
  body.page-id-3865 .gt-admin-index td,
  body.page-id-3865 .gt-admin-index th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 6px;
    font-size: 0.82rem;
  }
  /* The entitlements/title column can carry small pills that wrap
     onto a second line if there are several. Don't force nowrap on
     it \u2014 let pills flow naturally so the user can still see
     them all, even if the row grows to two lines on a busy account. */
  body.page-id-3865 .gt-admin-index .col-entit-pills {
    white-space: normal;
    overflow: visible;
  }
  /* Tighten the table's outer padding so every horizontal pixel
     is available to the live columns. */
  body.page-id-3865 .gt-admin-index {
    table-layout: auto;
    width: 100%;
  }
}

/* ============================================================
   gt-capture-deal-btn — the rust-colored "Capture this deal →"
   button that appears in the records modal next to "Deal not
   yet captured" headers. Strong overrides because both the WP
   theme button reset and the gt-link-btn helper try to flatten
   buttons to plain text. We want this one to read as a real
   call-to-action.
   ============================================================ */
body.page-id-3865 button.gt-capture-deal-btn,
body.page-id-3865 .gt-capture-deal-btn {
  background: #7a5a2a !important;
  color: #fff !important;
  border: 1px solid #7a5a2a !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  min-width: 0 !important;
  height: auto !important;
}
body.page-id-3865 button.gt-capture-deal-btn:hover,
body.page-id-3865 .gt-capture-deal-btn:hover {
  background: #5e441f !important;
  border-color: #5e441f !important;
  color: #fff !important;
  text-decoration: none !important;
}
body.page-id-3865 button.gt-capture-deal-btn:focus-visible,
body.page-id-3865 .gt-capture-deal-btn:focus-visible {
  outline: 2px solid #2c3a55 !important;
  outline-offset: 2px !important;
}

/* ============================================================
   Print stylesheet for the Registration Detail modal.
   When the user invokes Print from the modal footer (or browser
   File > Print while the modal is open), hide everything except
   #gt-reg-modal, flatten it from position:fixed to position:static,
   remove the internal scroll, and strip the interactive controls
   so the customer's submitted detail prints as a clean record.
   ============================================================ */
@media print {
  @page {
    margin: 0.5in;
  }
  /* Hide all rendered content except the modal subtree.
     visibility:hidden keeps layout boxes (so the modal's ancestor
     chain is still rendered and the modal itself remains in flow)
     but suppresses paint. We then re-show the modal and its
     descendants. Finally we shrink the html/body to zero so the
     hidden surrounding layout doesn't reserve blank pages. */
  html, body.page-id-3865 {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.page-id-3865 * {
    visibility: hidden !important;
  }
  body.page-id-3865 #gt-reg-modal,
  body.page-id-3865 #gt-reg-modal * {
    visibility: visible !important;
  }
  /* Pin the modal to the document's top-left for print so it paints
     from page origin regardless of how tall the (hidden) admin page
     beneath it is. position:absolute with top/left:0 floats it above
     the hidden flow. */
  body.page-id-3865 #gt-reg-modal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    inset: 0 auto auto 0 !important;
    background: transparent !important;
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.page-id-3865 #gt-reg-modal .gt-modal__panel,
  body.page-id-3865 #gt-reg-modal .gt-admin-next.gt-modal__panel {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: #fff !important;
  }
  body.page-id-3865 #gt-reg-modal-body {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
  /* Hide the interactive chrome -- close X in header, the entire
     footer (Print / Close / Accept / Mark reviewed / Archive),
     and the Capture-the-deal action buttons. The submitted facts
     remain. */
  body.page-id-3865 #gt-reg-modal .gt-modal__close,
  body.page-id-3865 #gt-reg-modal .gt-modal__foot,
  body.page-id-3865 #gt-reg-modal #gt-reg-modal-close-btn,
  body.page-id-3865 #gt-reg-modal #gt-reg-modal-print-btn,
  body.page-id-3865 #gt-reg-modal [data-reg-action],
  body.page-id-3865 #gt-reg-modal #gt-reg-deal-save {
    display: none !important;
    visibility: hidden !important;
  }
  /* Keep individual labeled sections together on a single page when
     they fit -- but only at the section level, NOT every child.
     Recursively forbidding break-inside was forcing orphans onto
     new pages and producing dissociated chunks. */
  body.page-id-3865 #gt-reg-modal section {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Force monospace pills to render with a visible border on
     paper (background colors may not print by default). */
  body.page-id-3865 #gt-reg-modal .gt-admin-pill {
    border: 1px solid #888 !important;
    background: transparent !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ----------------------------------------------------------------------
   Voucher payment: disabled state and per-kind picker sub-row.
   Disabled appears when the impersonated family has no vouchers. The
   picker shows ONE pill per kind (Extra / Premium / etc.) rather than
   one per row, so a family with ten Summer vouchers still sees a single
   Summer tile. Each pill is roughly 2x the height of a payment pill,
   carries a transparent-bg butterfly thumb, kind name underneath, and
   expiry caption. The grid wraps automatically at 5+ kinds.
---------------------------------------------------------------------- */
.gt-addsess-pill--disabled,
.gt-addsess-pill--disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent !important;
}
.gt-addsess-modal__group--vouchers {
  margin-top: -4px;
}
/* 4-across grid that wraps to a second row at 5+ kinds. Uses
   repeat(4, ...) rather than auto-fit so a single voucher still sits
   in a tile of the same width as a row of four would, keeping the
   visual scale predictable. gap matches the payment row. */
.gt-addsess-pills--vouchers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 8px;
}
/* Each voucher pill is a taller, rounded-rect tile (NOT a pill) with
   the butterfly thumb stacked on top of the label + caption. Min-height
   is ~2x the payment pill's natural height. The radius is softened to
   a rounded square so the thumb has room to breathe -- a full 999px
   capsule would clip the butterfly's wing tips at this size.
   Round 9f: long labels ("One session", "Complementary") were spilling
   past the tile edge because .gt-addsess-pill__lbl forces nowrap. The
   voucher tile overrides that to allow up to two lines, shrinks the
   label to 0.84rem, clips overflow inside the rounded rect, and adds
   a touch more vertical breathing room. */
.gt-addsess-pill--voucher {
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px 10px;
  border-radius: 14px;
  min-height: 110px;
  overflow: hidden;
  color: #a85518;
}
.gt-addsess-pill--voucher .gt-addsess-pill__thumb {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin: 0 auto 2px;
  background: transparent;
  pointer-events: none;
}
.gt-addsess-pill--voucher .gt-addsess-pill__lbl {
  font-size: 0.84rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  padding: 0 2px;
}
.gt-addsess-pill--voucher .gt-addsess-pill__cap {
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
  opacity: 0.7;
  white-space: normal;
  max-width: 100%;
  padding: 0 2px;
}
.gt-addsess-pill--voucher:hover {
  background: #fbe6d2;
}
.gt-addsess-pill--voucher:has(input:checked) {
  background: #fbe6d2;
  border-color: #a85518;
  box-shadow: 0 0 0 1px #a85518 inset;
}
/* Per-kind accent borders for the rare case where two kinds share the
   parent palette; subtle, only visible when the pill is unchecked. */
.gt-addsess-pill--voucher-premium       { color: #1e4fa3; }
.gt-addsess-pill--voucher-premium:hover { background: #e3eaf5; }
.gt-addsess-pill--voucher-premium:has(input:checked) {
  background: #e3eaf5;
  border-color: #1e4fa3;
  box-shadow: 0 0 0 1px #1e4fa3 inset;
}
.gt-addsess-pill--voucher-floater       { color: #8a4a14; }
.gt-addsess-pill--voucher-summer        { color: #b06a16; }
.gt-addsess-pill--voucher-complementary { color: #5e7244; }
.gt-addsess-pill--voucher-replacement   { color: #7a3a3a; }
.gt-addsess-pill--voucher-intro         { color: #4a5e7a; }

/* ============================================================
   Finalize / Accept-and-send modal — Cancel + Send buttons
   Per spec: rectangular, rust palette, no slate/dark-blue legacy.
   Cancel = ghost rust outline; Send = solid rust primary.
   ============================================================ */
#gt-finalize-modal .gt-btn,
#gt-finalize-modal .gt-btn--primary {
  display: inline-block;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  border-radius: 4px;
  border: 1.5px solid #a8552c;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
}

/* Cancel: ghost rust on warm-sand */
#gt-finalize-modal #gt-finalize-modal-cancel,
#gt-finalize-modal .gt-btn:not(.gt-btn--primary) {
  background: #fbf6ee;
  color: #a8552c;
}
#gt-finalize-modal #gt-finalize-modal-cancel:hover,
#gt-finalize-modal #gt-finalize-modal-cancel:focus-visible,
#gt-finalize-modal .gt-btn:not(.gt-btn--primary):hover,
#gt-finalize-modal .gt-btn:not(.gt-btn--primary):focus-visible {
  background: #f3e6d2;
  outline: none;
}

/* Send: solid rust on cream text */
#gt-finalize-modal .gt-btn--primary {
  background: #a8552c;
  color: #fbf6ee;
}
#gt-finalize-modal .gt-btn--primary:hover:not([disabled]),
#gt-finalize-modal .gt-btn--primary:focus-visible:not([disabled]) {
  background: #8a4419;
  outline: none;
  box-shadow: 0 0 0 2px rgba(168, 85, 44, 0.25);
}
#gt-finalize-modal .gt-btn--primary[disabled] {
  background: #d8c3b0;
  border-color: #d8c3b0;
  color: #fbf6ee;
  cursor: not-allowed;
}

/* ============================================================
   gtModal -- in-portal alert/confirm replacement.
   Rust palette, matches finalize-modal button styling.
   ============================================================ */
#gt-modal-overlay {
  /* Use explicit edges so the overlay reliably covers the viewport on
     every Chrome/Safari/Firefox build, regardless of any ancestor's
     transform/contain quirks. inset:0 alone has been reported to be
     unreliable on some Samsung Chrome builds inside transformed
     ancestors. */
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — survives URL-bar shrink */
  background: rgba(40, 24, 12, 0.42);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 100000;
  /* Allow the OVERLAY to scroll when content is taller than the
     viewport (e.g. portrait phone + longer messages). The panel itself
     becomes part of the scroll flow rather than overflowing above and
     below the viewport with no way to reach it. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Generous top breathing room, respect safe-area insets so the panel
     never collides with the Android URL bar / iOS notch. */
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.14s ease;
}
#gt-modal-overlay[aria-hidden="true"] {
  opacity: 0; pointer-events: none;
}
body.gt-modal-open {
  overflow: hidden;
}
/* gtModal panel inside #gt-modal-overlay.
   ALL layout properties carry !important because the legacy
   body.page-id-3865 .gt-modal { position:fixed; inset:0; ... } rules
   higher up in this file would otherwise win on the admin page and
   paint this panel as a full-viewport flex container instead of a
   tidy centred card. Title at top, message in the middle, actions
   row at the bottom \u2014 the natural document flow of a block
   element with three vertical children. */
#gt-modal-overlay .gt-modal {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fbf6ee !important;
  color: #1a1a1a;
  border: 1px solid #d8c3b0 !important;
  border-radius: 10px !important;
  border-top: 3px solid #a8552c !important;
  box-shadow: 0 18px 48px rgba(40, 24, 12, 0.28), 0 2px 6px rgba(40, 24, 12, 0.12) !important;
  max-width: 460px !important;
  width: 100% !important;
  padding: 0 !important;
  /* Auto top margin nudges the panel toward the upper third of tall
     viewports while keeping it flush against the overlay padding on
     short viewports. margin-bottom:auto closes the symmetric pair so
     the panel still has air beneath it. */
  margin: 4vh auto auto auto !important;
  /* Cap the panel itself so very long messages scroll INSIDE the panel
     rather than pushing the action buttons off the screen. */
  max-height: calc(100dvh - 8vh) !important;
  overflow: hidden !important;
  font-family: Georgia, "Times New Roman", serif !important;
  line-height: 1.5;
  text-align: left !important;
  flex: 0 0 auto !important;
}
#gt-modal-overlay .gt-modal__title {
  flex: 0 0 auto !important;
}
#gt-modal-overlay .gt-modal__msg {
  /* Message body becomes the scrollable region when content exceeds
     the panel's max-height. Title and actions stay pinned. */
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
}
#gt-modal-overlay .gt-modal__actions {
  flex: 0 0 auto !important;
}
#gt-modal-overlay .gt-modal__title {
  display: block !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #8a4419 !important;
  margin: 0 !important;
  padding: 18px 24px 12px 24px !important;
  letter-spacing: 0.01em;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}
#gt-modal-overlay .gt-modal__msg {
  display: block !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  margin: 0 !important;
  padding: 0 24px 20px 24px !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
}
#gt-modal-overlay .gt-modal__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  /* Centre the Cancel + Confirm pair horizontally within the modal
     panel. The row spans full width; justify-content:center pins the
     button pair to the panel's vertical mid-line. No banded footer
     shelf \u2014 the buttons float over the same cream as the panel
     body so the pair reads as the panel's natural centre. */
  justify-content: center !important;
  margin: 0 !important;
  padding: 16px 20px 20px 20px !important;
  background: transparent !important;
  border-top: 0 !important;
}
#gt-modal-overlay .gt-modal__btn {
  /* inline-flex lets the label centre nicely inside the button at any
     width. white-space:nowrap guarantees "Delete" / "Cancel" / longer
     labels ("Unarchive", "Send welcome") never wrap into two lines. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  min-width: 110px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  border-radius: 4px;
  border: 1.5px solid #a8552c;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
  /* Allow the button to shrink on very narrow screens while still
     respecting a sensible minimum, and stop it growing past its
     natural label width when the row has free space. */
  flex: 0 1 auto;
}
#gt-modal-overlay .gt-modal__btn--ghost {
  background: #fbf6ee;
  color: #a8552c;
}
#gt-modal-overlay .gt-modal__btn--ghost:hover,
#gt-modal-overlay .gt-modal__btn--ghost:focus-visible {
  background: #f3e6d2;
  outline: none;
}
#gt-modal-overlay .gt-modal__btn--primary {
  background: #a8552c;
  color: #fbf6ee;
}
#gt-modal-overlay .gt-modal__btn--primary:hover:not([disabled]),
#gt-modal-overlay .gt-modal__btn--primary:focus-visible:not([disabled]) {
  background: #8a4419;
  outline: none;
  box-shadow: 0 0 0 2px rgba(168, 85, 44, 0.25);
}
#gt-modal-overlay .gt-modal__btn--danger {
  background: #8a2a1a;
  border-color: #8a2a1a;
}
#gt-modal-overlay .gt-modal__btn--danger:hover:not([disabled]),
#gt-modal-overlay .gt-modal__btn--danger:focus-visible:not([disabled]) {
  background: #6a1d10;
  border-color: #6a1d10;
  box-shadow: 0 0 0 2px rgba(138, 42, 26, 0.28);
}
@media (max-width: 480px) {
  #gt-modal-overlay {
    padding: max(14px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  #gt-modal-overlay .gt-modal {
    /* Phone portrait: hug the upper portion of the viewport so the
       title is always visible even when the URL bar is showing. */
    margin: 6vh auto auto auto !important;
    max-height: calc(100dvh - 10vh) !important;
  }
  #gt-modal-overlay .gt-modal__title { padding: 14px 18px 10px 18px !important; }
  #gt-modal-overlay .gt-modal__msg   { padding: 0 18px 16px 18px !important; }
  #gt-modal-overlay .gt-modal__actions {
    /* Keep the two buttons on a single row and centred, even on
       portrait phone. The row may wrap if labels are unusually long;
       wrapped buttons stay centred via justify-content:center. */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  #gt-modal-overlay .gt-modal__btn {
    /* Slightly smaller min-width on phones so both buttons fit in the
       panel's interior width (panel max 460px - 32px panel padding
       - 10px gap = ~209px per button worst-case). */
    min-width: 100px;
    padding: 11px 18px;
  }
}

/* ===== Manage Connections lever — UX polish (MVP-0 Step 1) ===== */

/* Two-line case-action buttons ("Manage / connections", "Issue flex /
   or voucher", "Inspect / record") need each line span to centre
   relative to the button's content box, and the two lines must align
   on the same vertical centre line. Pure text-align:center gets us
   90% there but the visible centre depends on glyph bearings of the
   active font — with heavy weights of Libre Franklin/Source Sans Pro
   the lowercase 'e' at the end of "Manage" has wide right bearing,
   leaving the visual mass shifted slightly relative to "connections".
   Fix: shrink-wrap each line with display:inline-block + width:auto,
   then centre as a block via margin:0 auto. The browser uses the
   span's box for centring, not the glyph extents, so both lines
   share the same x-centre regardless of internal font metrics. */
body.page-id-3865 .entry-content button.gt-case-action .gt-case-action__line,
.gt-case-action__line {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0;
}

/* Placeholders inside the Manage Connections panel are light grey so
   they read as suggestions rather than data. Typed values keep their
   declared dark color (already set via inline style:color:#1f2733). */
#gt-lever-invite input::placeholder {
  color: #9aa1ac;
  opacity: 1; /* Firefox defaults to ~0.54 */
}

/* Inline label editor on each recipient row. Looks like the old pill
   when not focused; lights up subtly on hover/focus so the admin
   discovers it's editable. */
#gt-lever-invite input[data-conn-label-edit]:hover {
  border-color: #d4d2c8 !important;
  background: #f7f6f1 !important;
}
#gt-lever-invite input[data-conn-label-edit]:focus {
  border-color: #5e3e87 !important;
  background: #ffffff !important;
  color: #1f2733 !important;
  outline: none;
}
#gt-lever-invite input[data-conn-label-edit]::placeholder {
  color: #9aa1ac;
  opacity: 1;
}

/* Recipient row buttons (Silence / Enable / Delete). Twenty Seventeen
   sets aggressive defaults on `button` (#222 bg, white text, 1em/2em
   padding). Use a class with strong selector specificity so our look
   wins on the admin page without inline styles. */
/* Recipient row buttons dressed in the admin-purple family (George
   June 6 2026, third pass): solid purple fill, white label, no glyph
   prefix, single line. Silence + Delete sit side-by-side. */
body.page-id-3865 .entry-content button.gt-conn-row-btn,
#gt-lever-invite button.gt-conn-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid #4d3270;
  background: #5e3e87;
  color: #ffffff;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  letter-spacing: 0.02em;
  margin: 0;
}
body.page-id-3865 .entry-content button.gt-conn-row-btn:hover,
#gt-lever-invite button.gt-conn-row-btn:hover {
  background: #4d3270;
  border-color: #3a2456;
  color: #ffffff;
}
/* Enable (only shown when a row is silenced) keeps the same purple
   chrome \u2014 the row strike-through and grey email tell you the
   recipient is currently silenced. */
body.page-id-3865 .entry-content button.gt-conn-row-btn--enable,
#gt-lever-invite button.gt-conn-row-btn--enable,
body.page-id-3865 .entry-content button.gt-conn-row-btn--silence,
#gt-lever-invite button.gt-conn-row-btn--silence,
body.page-id-3865 .entry-content button.gt-conn-row-btn--delete,
#gt-lever-invite button.gt-conn-row-btn--delete {
  background: #5e3e87;
  color: #ffffff;
  border-color: #4d3270;
}
body.page-id-3865 .entry-content button.gt-conn-row-btn--enable:hover,
#gt-lever-invite button.gt-conn-row-btn--enable:hover,
body.page-id-3865 .entry-content button.gt-conn-row-btn--silence:hover,
#gt-lever-invite button.gt-conn-row-btn--silence:hover,
body.page-id-3865 .entry-content button.gt-conn-row-btn--delete:hover,
#gt-lever-invite button.gt-conn-row-btn--delete:hover {
  background: #4d3270;
  border-color: #3a2456;
  color: #ffffff;
}

/* Tombstone chip for cancelled bookings in the case-file addsess grid.
   Cancelled rows stay visible so the admin sees the cancellation history;
   strike-through + 50% opacity + dashed orange outline makes the state
   read at a glance. Clicking the cell opens a Nuke confirm (hard delete).
   See gt_admin.js openAddSessionRemove path. */
.gt-addsess__cell--canceled {
  opacity: 0.55;
  outline: 1px dashed #d97706;
  outline-offset: -2px;
  cursor: pointer;
}
.gt-addsess__cell--canceled .gt-addsess__who,
.gt-addsess__cell--canceled .gt-addsess__nat,
.gt-addsess__cell--canceled .gt-addsess__name {
  text-decoration: line-through;
}
.gt-addsess__cell--canceled::before {
  content: "✕";
  position: absolute;
  top: 2px;
  right: 4px;
  color: #d97706;
  font-weight: 700;
  font-size: 11px;
  pointer-events: none;
}
.gt-addsess__cell--nukeable:hover {
  outline-color: #b91c1c;
  outline-style: solid;
}

/* ============================================================
   Lite-family row action pills — Send welcome / Delete.
   Match the administrative-purple pill palette already used by
   .gt-case-winpill so these read as admin chrome, not as the
   default beige Open-record chip. Same shape, same family.
   Send welcome is the affirmative purple pill; Delete is the
   same pill in an outline-only purple variant with a quiet red
   tint on hover so it still telegraphs destructive intent
   without screaming red at rest.
   ============================================================ */
body.page-id-3865 button.gt-welcome-btn,
body.page-id-3865 .entry-content button.gt-welcome-btn,
body.page-id-3865 button.gt-lite-delete-btn,
body.page-id-3865 .entry-content button.gt-lite-delete-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0 0 0 6px !important;
  /* Padding matched to .gt-open-record-btn vertically (2px) so the
     three sibling buttons sit on the same baseline; horizontal
     padding generous enough to give the pill an elegant ovoid
     shape without bloating it. */
  padding: 2px 14px !important;
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  /* Defeat WP theme min-height (Twenty-Twenty pushes buttons to
     45px). Without this the text appeared vertically squished
     against the top of the pill and was clipped on descenders. */
  height: auto !important;
  min-height: 0 !important;
  vertical-align: middle !important;
  transition: background-color 0.12s ease, color 0.12s ease,
              border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Send welcome — resting: lavender wash, purple text. */
body.page-id-3865 button.gt-welcome-btn,
body.page-id-3865 .entry-content button.gt-welcome-btn {
  background: #f3edf9 !important;
  border: 1px solid #d7cae3 !important;
  color: #5e3e87 !important;
}
body.page-id-3865 button.gt-welcome-btn:hover,
body.page-id-3865 button.gt-welcome-btn:focus-visible,
body.page-id-3865 .entry-content button.gt-welcome-btn:hover,
body.page-id-3865 .entry-content button.gt-welcome-btn:focus-visible {
  background: #5e3e87 !important;
  border-color: #4d3270 !important;
  color: #ffffff !important;
  outline: none;
}

/* Delete — resting: white fill, purple outline (ghost variant). */
body.page-id-3865 button.gt-lite-delete-btn,
body.page-id-3865 .entry-content button.gt-lite-delete-btn {
  background: #ffffff !important;
  border: 1px solid #d7cae3 !important;
  color: #5e3e87 !important;
}
/* Hover deepens to a muted plum to telegraph destructive intent
   without using a red chip at rest. */
body.page-id-3865 button.gt-lite-delete-btn:hover,
body.page-id-3865 button.gt-lite-delete-btn:focus-visible,
body.page-id-3865 .entry-content button.gt-lite-delete-btn:hover,
body.page-id-3865 .entry-content button.gt-lite-delete-btn:focus-visible {
  background: #7a2552 !important;
  border-color: #621c41 !important;
  color: #ffffff !important;
  outline: none;
}

/* ============================================================
   Set Availability lever -- portrait phone (4-day) override.
   ------------------------------------------------------------
   The lever's default grid is 1 time-rail + 7 day columns
   (grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    see the rule at .gt-availability__grid above).
   On portrait phones (<=600w + orientation:portrait) the cells
   become uncomfortably narrow and the day labels widow / clip.
   The render code emits data-days="4" on the grid in portrait
   and slices the visible columns to 4 (Sun-Wed or Wed-Sat,
   driven by gtAvail.portraitOffset); this stylesheet just
   swaps the grid template and fixes the last-column border
   rule. Wide viewports are untouched: data-days defaults to
   "7" and the original rule still wins via the base selector
   (this rule only applies inside the portrait media query AND
   the [data-days="4"] attribute).
   (June 11 2026, restoring the 4-day portrait view that the
    addsess grid already has.)
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
  /* (grid-template-columns: 44px repeat(4, minmax(0, 1fr)) is now set
     at top level above so the JS data-days="4" attribute is the
     single source of truth -- not the media query. v5 fix.) */
  /* Last cell in each body row of the 4-day grid is the 5th child of
     its row (1 timehdr + 4 cells). Suppress the right border on every
     5th child overall so the cell on the right edge of each row hugs
     the panel edge cleanly. The base 8n rule (above) still applies
     when data-days="7" because that attribute selector won't match
     here. */
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__cell:nth-child(5n) {
    border-right: 0;
  }
  /* Day-header label can breathe a touch in the 4-column layout. */
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__dayhdr {
    font-size: 0.82rem;
    padding: 4px 1px;
  }
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__dayhdr-date {
    font-size: 0.70rem;
  }
  /* Portrait sub-task A (June 11 2026, v4): FOURTH ATTEMPT.
     v3 used `column-gap: 1px` + a gray grid background. On a high-DPR
     iOS device with sub-pixel grid tracks (44 + 4*85.5 = 386px on a
     390px viewport), the 1px CSS gap rendered as ~3 device pixels and
     surrounding sub-pixel rounding made the seams look thick gray.
     This was the same root cause as v1 and v2 -- just sub-pixel
     thickness, surfaced as either gray (v1, v3) or white (v2).

     v4 takes the OPPOSITE strategy: zero gaps at all costs. Force
     column-gap and row-gap to 0 (overriding base 0 explicitly), kill
     the grid background entirely (so even if a 0.5px hairline of
     background leaks through it's the panel colour, not gray), and
     suppress every per-cell border-right and border-bottom inside
     this 4-day grid. The visible inter-column dividers are then
     painted by a single 1px box-shadow inset on each cell's RIGHT
     edge. box-shadow paints in DEVICE pixels and is anchored to the
     element's own box -- it cannot grow due to grid track rounding.

     The cell on the right edge of each row (nth-child(5n) inside
     data-days="4") gets no right shadow so the grid hugs the panel
     edge cleanly. */
  body.page-id-3865 .gt-availability__grid[data-days="4"] {
    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: 0 !important;
  }
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__cell,
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__dayhdr,
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__corner,
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__timehdr {
    border-right: 0 !important;
    border-bottom: 0 !important;
    margin: 0 !important;
  }
  /* v6 (June 11 2026) - ROOT CAUSE FOUND via on-device diagnostic.

     Diagnostic dump from George's Samsung phone (DPR 2.8125, iw=384):
        tracks=44px 56.13px 56.13px 56.13px 56.13px
        gap=0px  bg=rgb(200,202,209)
        c0 W=38   c1 W=38 (gap 0->1 = 19)   c3 W=38

     The grid tracks are correct (56.13px each) and column-gap is 0,
     but the <button class=gt-availability__cell> children are
     rendering at only 38px wide -- leaving ~18px of grid background
     visible inside each track. On Samsung Chrome (and likely other
     Android Chrome), <button> elements inside a CSS Grid do not
     auto-stretch to fill their track; they sit at intrinsic width.
     That intrinsic width was painted as the gray vertical band
     George kept seeing -- it was the grid background showing
     through the empty space INSIDE each track, beside its <button>.

     Fix: force every cell + dayhdr + timehdr to fill 100% of its
     grid track via width:100% (and align-self/justify-self: stretch
     for belt-and-braces). This is the canonical CSS Grid stretch
     pattern for <button> children. Applies in portrait 4-day mode
     only. */
  body.page-id-3865 .gt-availability__grid[data-days="4"] {
    background: #c8cad1 !important;
  }
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__cell,
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__dayhdr,
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__timehdr,
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__corner {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__cell {
    padding: 2px 2px !important;
    box-shadow: inset -1px 0 0 0 #c8cad1, inset 0 -1px 0 0 #e2e3e8 !important;
    /* NO background-color override here -- let the state modifier
       classes (.is-avail, .is-busy, .is-unavail-recurring,
       .is-avail-once, .is-unavail-once, etc.) paint the cell so
       portrait shows the same colours as landscape. v6.1 fix. */
  }
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__dayhdr,
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__corner {
    box-shadow: inset -1px 0 0 0 #b7b9c2, inset 0 -1px 0 0 #b7b9c2 !important;
  }
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__timehdr {
    padding: 0 3px 0 0 !important;
    font-size: 0.68rem;
    box-shadow: inset -1px 0 0 0 #b7b9c2, inset 0 -1px 0 0 #e2e3e8 !important;
  }
  /* Right edge of each row -- no right shadow (5th child = last cell
     in a 4-day row: 1 timehdr + 4 cells). Day header row similarly
     (5th child = last dayhdr: 1 corner + 4 dayhdrs). */
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__cell:nth-child(5n),
  body.page-id-3865 .gt-availability__grid[data-days="4"] .gt-availability__dayhdr:nth-child(5n) {
    box-shadow: inset 0 -1px 0 0 #e2e3e8 !important;
  }
  /* Portrait sub-task B (June 11 2026): 'This week' button must be a
     horizontal pill (one line, no break, text centred in the pill,
     pill centred above the timetable). The inline HTML already sets
     border-radius:999px but on narrow viewports it was rendering as a
     near-round chip; force a comfortable horizontal padding + nowrap
     + min-width so the pill has a visible horizontal axis even on a
     360px viewport. Parent div already centres it (justify-content:
     center). !important needed to overcome the inline padding. */
  body.page-id-3865 .gt-availability__nav--today {
    border-radius: 999px !important;
    padding: 4px 22px !important;
    min-width: 7.5em;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    text-align: center;
    display: inline-block;
  }
  /* Portrait sub-task C (June 11 2026): the Templates row was docked
     into the same flex line as the 'Set availability' title, with
     flex-wrap:nowrap + white-space:nowrap on its parent -- which made
     the Apply/Templates pulldowns overflow the panel on a portrait
     phone. In portrait only, allow the title row to wrap, let the
     templates bar break onto its own line, and cap the Apply select
     so it can't blow past the viewport edge. Landscape / desktop
     keep the single-line dock via the base inline styles. */
  /* Portrait sub-task C (June 11 2026, v3): the templates bar needs
     its OWN dedicated row directly under the panel title, full-width,
     with each control given enough horizontal room and a clearly
     legible font. v2 forced everything onto the title row alongside
     'Set availability' + 'Ready' status which left almost no width
     for the Apply and Templates controls on a portrait viewport.
     v3 forces the bar onto its own line, full-width, with the label
     'Templates:' on the left and each control sized as a comfortable
     pill. All overrides !important to defeat the inline styles
     applied by gtTemplatesEnsureBar() at construction time. */
  body.page-id-3865 .gt-availability__head > div:first-child {
    flex-wrap: wrap !important;
    white-space: normal !important;
    row-gap: 8px;
  }
  /* v4 update: Templates button must drop UNDERNEATH the Apply
     dropdown in portrait (George: 'it's leaving the container on
     the right'). Make the templates bar wrap, then force the manage
     button onto its own line by giving it width:100% and a small
     top margin. */
  body.page-id-3865 #gt-templates-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    margin: 6px 0 2px 0 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    order: 99;                /* push to end of title row so it wraps to its own line */
    justify-content: flex-start !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    font-size: 0.88rem !important;
  }
  body.page-id-3865 #gt-templates-bar > span {
    font-size: 0.88rem !important;
    color: #2b1f3f !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important;
  }
  body.page-id-3865 #gt-templates-apply {
    font-size: 0.92rem !important;
    padding: 5px 8px !important;
    min-height: 32px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    background: #fff !important;
    border: 1px solid #c8cad1 !important;
    border-radius: 5px !important;
    color: #2b1f3f !important;
  }
  body.page-id-3865 #gt-templates-manage {
    font-size: 0.92rem !important;
    padding: 5px 14px !important;
    min-height: 32px !important;
    max-width: none !important;
    white-space: nowrap !important;
    /* Force onto its own line under the Apply dropdown by claiming
       full row width (flex-basis:100% + the wrap parent will break
       to a new line). */
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 4px !important;
    background: #fff !important;
    border: 1px solid #c8cad1 !important;
    border-radius: 5px !important;
    color: #2b1f3f !important;
    font-weight: 500 !important;
  }
}

/* ====================================================================
   CLIENT RECORD OVERLAY (#gt-cr-overlay)
   Full-screen paged record viewer opened from the case-file
   Client-record lever. Tabs across the top, one page below.
   Responsive: two-column name/value grid on desktop, single column
   on narrow viewports.
   ==================================================================== */
#gt-cr-overlay {
  font-family: inherit;
  color: #2b1f3f;
}
#gt-cr-overlay .gt-cr-overlay__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #4b2575 0%, #3d1d61 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  min-height: 52px;
}
#gt-cr-overlay #gt-cr-overlay__title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
#gt-cr-overlay .gt-cr-overlay__sub {
  flex: 1 1 auto;
  font-size: 0.92rem;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gt-cr-overlay #gt-cr-overlay__close {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gt-cr-overlay #gt-cr-overlay__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* WRITE-mode toggle. Same height as the close button (32px). Off
   state is a muted red so it reads as "armable"; on state is a hot
   record-button red. */
#gt-cr-overlay #gt-cr-overlay__write {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: #7a2a22;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  height: 32px;
  padding: 0 10px;
  margin-right: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#gt-cr-overlay #gt-cr-overlay__write:hover { background: #8e3128; }
#gt-cr-overlay #gt-cr-overlay__write[aria-pressed="true"],
#gt-cr-overlay.gt-cr-write-on #gt-cr-overlay__write {
  background: #e8261c;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(232, 38, 28, 0.35);
}
/* Portrait phone view: widen the WRITE button only so the label
   "WRITE" sits comfortably without crowding the edges. Height and all
   other dimensions of the X button are unchanged. */
@media (max-width: 600px) and (orientation: portrait) {
  #gt-cr-overlay #gt-cr-overlay__write {
    padding: 0 16px;
    min-width: 72px;
  }
}
/* Editable value cells in write mode. Faint amber wash + dashed border
   to mark them as the editable region; text colour stays normal until
   the admin actually changes it. */
#gt-cr-overlay.gt-cr-write-on .gt-cr-row__value[data-cr-source] {
  background: #fff7e6;
  outline: 1px dashed #c08a2b;
  outline-offset: -1px;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gt-cr-overlay.gt-cr-write-on .gt-cr-row__value[data-cr-source]:focus {
  background: #fffdf4;
  outline: 2px solid #e8261c;
  outline-offset: -2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Time-zone dropdown lives inside the home_tz value cell while WRITE
   is on. Style it as an obvious form control with a visible chevron so
   the admin sees it is a pull-down, not a flat read-only cell. */
#gt-cr-overlay .gt-cr-tz-select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: #222;
  background-color: #fff;
  border: 1px solid #c08a2b;
  border-radius: 3px;
  padding: 2px 22px 2px 6px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}
#gt-cr-overlay .gt-cr-tz-select:focus {
  outline: 2px solid #e8261c;
  outline-offset: -1px;
}
/* Override the value-cell's nowrap/overflow/cursor-text once the
   dropdown is mounted. Marker class is added by gtTzInstallDropdown so
   we don't rely on the :has() selector (spotty browser support). */
#gt-cr-overlay.gt-cr-write-on .gt-cr-row__value.gt-cr-tz-host {
  cursor: pointer;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding: 0;
  background: transparent;
  outline: none;
}
/* Once a value has actually been edited (text differs from the
   stashed original) the cell renders the entire pair -- label and
   value -- in red so the admin can spot uncommitted changes at a
   glance. Cleared on save by the re-render. */
#gt-cr-overlay.gt-cr-write-on .gt-cr-row.gt-cr-row--dirty .gt-cr-row__label,
#gt-cr-overlay.gt-cr-write-on .gt-cr-row.gt-cr-row--dirty .gt-cr-row__value {
  color: #c0392b;
  font-weight: 600;
}
#gt-cr-overlay .gt-cr-overlay__tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 14px 0;
  background: #efe9f6;
  border-bottom: 1px solid #cdbfdf;
}
#gt-cr-overlay .gt-cr-tab {
  appearance: none;
  -webkit-appearance: none;
  background: #f8f4fc;
  border: 1px solid #cdbfdf;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: #4a3866;
  cursor: pointer;
  margin-bottom: -1px;
  transition: background-color 120ms ease, color 120ms ease;
}
#gt-cr-overlay .gt-cr-tab:hover {
  background: #ece2f5;
  color: #2b1f3f;
}
#gt-cr-overlay .gt-cr-tab.is-active {
  background: #fafbfc;
  color: #2b1f3f;
  font-weight: 600;
  border-color: #cdbfdf;
  border-bottom: 1px solid #fafbfc;
}
#gt-cr-overlay .gt-cr-overlay__body {
  flex: 1 1 auto;
  overflow: auto;
  background: #fafbfc;
  padding: 24px 28px;
}
#gt-cr-overlay .gt-cr-page__title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2b1f3f;
  letter-spacing: 0.01em;
}
/* Name/value grid — ONE LINE PER PAIR in every viewport (portrait
   adaptive, landscape adaptive, PC). Two fixed columns: a label
   column of a constant width, then a value column that starts at
   the same x position on every row regardless of label length.
   The label gets a trailing colon via a CSS pseudo-element so the
   data layer stays clean. nowrap on both columns guarantees the
   single-line constraint; overflow values are ellipsised with a
   full-text tooltip via the title attribute (set at render time). */
#gt-cr-overlay .gt-cr-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 16px;
  row-gap: 0;
  align-items: baseline;
  max-width: 880px;
}
#gt-cr-overlay .gt-cr-row {
  display: contents;
}
#gt-cr-overlay .gt-cr-row__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #5a5566;
  padding: 6px 0;
  border-bottom: 1px dashed #e2dceb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gt-cr-overlay .gt-cr-row__label::after {
  content: ':';
  margin-left: 1px;
}
#gt-cr-overlay .gt-cr-row__value {
  font-size: 0.92rem;
  color: #2b1f3f;
  padding: 6px 0;
  border-bottom: 1px dashed #e2dceb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#gt-cr-overlay .gt-cr-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #cdbfdf;
  margin: 8px 0;
}
/* Prose rows (Remarks, Direction). Span the full width and stack:
   label on its own line, value below as a wrapping multi-line block. */
#gt-cr-overlay .gt-cr-row.gt-cr-row--prose {
  grid-column: 1 / -1;
  display: block;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #e2dceb;
}
#gt-cr-overlay .gt-cr-row.gt-cr-row--prose .gt-cr-row__label {
  white-space: nowrap;
  font-weight: 600;
  padding: 0 0 4px;
  border-bottom: none;
}
#gt-cr-overlay .gt-cr-row__value.gt-cr-row__value--prose {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  min-height: 4em;
  border: 1px solid #e2dceb;
  border-radius: 6px;
  background: #fbf9ff;
  padding: 8px 10px;
  line-height: 1.4;
}
/* Prose cells stay wrapping in write mode too (override the
   gt-cr-write-on nowrap rule). */
#gt-cr-overlay.gt-cr-write-on .gt-cr-row__value.gt-cr-row__value--prose[data-cr-source] {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
}
#gt-cr-overlay .gt-cr-empty {
  color: #7a7385;
  font-style: italic;
  font-size: 0.92rem;
  margin: 0;
}
#gt-cr-overlay .gt-cr-loading {
  color: #5a5566;
  font-size: 0.92rem;
}
#gt-cr-overlay .gt-cr-error {
  color: #b3251a;
  font-size: 0.92rem;
}
#gt-cr-overlay .gt-cr-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: #7a7385;
}

/* Adaptive — landscape tablet / narrow desktop (721–1100px wide).
   Tabs stay horizontal across the top, each tab wider so the
   full label has room, but text shrinks a notch so all 8 tabs
   fit on a single row without wrapping. */
@media (min-width: 721px) and (max-width: 1100px) {
  #gt-cr-overlay .gt-cr-overlay__tabs {
    padding: 10px 10px 0;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  #gt-cr-overlay .gt-cr-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    font-size: 0.78rem;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }
}

/* Adaptive — portrait phones / tight tablet portrait (≤720px).
   The horizontal tab strip is kept (so the body has full height
   for content), but each tab’s label is rendered in vertical text
   (writing-mode: vertical-rl, rotated 180° so it reads bottom-to-top
   left-to-right). This lets all 8 labels fit across the top of a
   narrow viewport without truncation or wrapping. */
@media (max-width: 720px) {
  #gt-cr-overlay .gt-cr-overlay__bar {
    padding: 10px 12px;
    gap: 10px;
  }
  #gt-cr-overlay #gt-cr-overlay__title {
    font-size: 1.05rem;
  }
  #gt-cr-overlay .gt-cr-overlay__sub {
    font-size: 0.85rem;
  }
  #gt-cr-overlay .gt-cr-overlay__tabs {
    padding: 6px 6px 0;
    gap: 2px;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  #gt-cr-overlay .gt-cr-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px 10px;
    font-size: 0.78rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    letter-spacing: 0.02em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-radius: 6px 6px 0 0;
    min-height: 92px;
    white-space: nowrap;
    line-height: 1.1;
  }
  #gt-cr-overlay .gt-cr-overlay__body {
    padding: 16px 12px;
  }
  /* Keep the two-column "one line per pair" layout even on phones.
     Narrow the label column so the value still has breathing room. */
  #gt-cr-overlay .gt-cr-grid {
    grid-template-columns: 130px 1fr;
    column-gap: 10px;
  }
  #gt-cr-overlay .gt-cr-row__label {
    font-size: 0.82rem;
    padding: 6px 0;
    border-bottom: 1px dashed #e2dceb;
  }
  #gt-cr-overlay .gt-cr-row__value {
    font-size: 0.88rem;
    padding: 6px 0;
    border-bottom: 1px dashed #e2dceb;
  }
}

/* ============================================================
   Registration inspector modal (#gt-reg-modal) — portrait phone
   adaptation. The detail body is rendered with an inline
   grid-template-columns:1fr 1fr and the footer with an inline
   flex-wrap row; on narrow portrait phones those choices crowd
   "Client / billing" against "Student" and clip the action
   buttons ("Instantiate", "Mark deal first", "Archive",
   "Print", "Close").

   These overrides:
     - Stack Student above Client/billing (and every other
       grid section) by collapsing to a single column.
     - Turn the footer into a vertical column of full-width
       buttons so each label fits comfortably with no clipping.
   Landscape phones (orientation:landscape) and desktop
   (any width over 768px) are untouched.
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
  #gt-reg-modal .gt-reg-detail {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #gt-reg-modal .gt-reg-detail > section[style*="grid-column"] {
    /* Sections that span both columns are already full-width;
       no change needed, but normalise so the selector matches. */
    grid-column: 1 / -1 !important;
  }
  #gt-reg-modal .gt-modal__foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #gt-reg-modal .gt-modal__foot > button,
  #gt-reg-modal .gt-modal__foot .gt-link-btn,
  #gt-reg-modal .gt-modal__foot .gt-case-panel__cta {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* The "Capture deal first" hint sat to the right of the
     disabled Instantiate button; on portrait we want it
     centred under the button rather than full-width-button-
     styled. Match it by being a <span> rather than a button. */
  #gt-reg-modal .gt-modal__foot > span {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }
}

/* ------------------------------------------------------------
   Admin hub Next-Sessions stack — TZ pill pair (June 2026).
   Mirrors the user-portal hub pill design (portal.css ~2270-2345):
   two tiny pills (PDT / admin's home zone), absolutely positioned
   on the eyebrow line so the panel's vertical size is unchanged.
   The pair renders on each of the 3 upcoming-session panels;
   toggling on any one card flips all three in lockstep.
   ------------------------------------------------------------ */
body.page-id-3865 .gt-admin-next.gt-modal__panel {
  position: relative;
}
body.page-id-3865 .gt-admin-next .gt-tz-pills {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
}
body.page-id-3865 .gt-admin-next .gt-tz-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #ffffff;
  color: #6b6f76;
  border: 1px solid #d9d2c4 !important;
  border-radius: 999px !important;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  padding: 2px 9px 3px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  min-width: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap;
}
body.page-id-3865 .gt-admin-next .gt-tz-pill:hover {
  color: #14213d;
  border-color: #14213d;
}
body.page-id-3865 .gt-admin-next .gt-tz-pill:focus-visible {
  outline: 2px solid #a8552c;
  outline-offset: 2px;
}
/* Active = filled in the panel's eyebrow color (per-nature overrides
   below). Default fallback paints restrained navy. */
body.page-id-3865 .gt-admin-next .gt-tz-pill.is-active {
  background: #14213d;
  color: #ffffff;
  border-color: #14213d;
}
body.page-id-3865 .gt-admin-next .gt-tz-pill.is-active:hover {
  background: #14213d;
}
/* Per-nature active fill — matches the user portal palette exactly so
   the same nature reads the same colour on both surfaces. */
body.page-id-3865 .gt-admin-next[data-nature="slot"]    .gt-tz-pill.is-active { background: #2c3a55; border-color: #2c3a55; }
body.page-id-3865 .gt-admin-next[data-nature="extra"]   .gt-tz-pill.is-active { background: #a85518; border-color: #a85518; }
body.page-id-3865 .gt-admin-next[data-nature="makeup"]  .gt-tz-pill.is-active { background: #3d6b69; border-color: #3d6b69; }
body.page-id-3865 .gt-admin-next[data-nature="intro"]   .gt-tz-pill.is-active { background: #880e4f; border-color: #880e4f; }
body.page-id-3865 .gt-admin-next[data-nature="series"]  .gt-tz-pill.is-active { background: #2b2b2b; border-color: #2b2b2b; }
body.page-id-3865 .gt-admin-next[data-nature="floater"] .gt-tz-pill.is-active { background: #605a85; border-color: #605a85; }
body.page-id-3865 .gt-admin-next[data-nature="consult"] .gt-tz-pill.is-active { background: #6f3540; border-color: #6f3540; }
body.page-id-3865 .gt-admin-next[data-nature="premium"] .gt-tz-pill.is-active { background: #4a2860; border-color: #4a2860; }
body.page-id-3865 .gt-admin-next[data-nature="summer"]  .gt-tz-pill.is-active { background: #6d8019; border-color: #6d8019; }
body.page-id-3865 .gt-admin-next[data-nature="single"]  .gt-tz-pill.is-active { background: #3a1d52; border-color: #3a1d52; }
body.page-id-3865 .gt-admin-next[data-nature="package"] .gt-tz-pill.is-active { background: #1a5045; border-color: #1a5045; }
body.page-id-3865 .gt-admin-next[data-nature="admin_block"] .gt-tz-pill.is-active { background: #555a66; border-color: #555a66; }

/* ------------------------------------------------------------
   Admin case-file Add-session calendar — TZ pill pair (June 2026).
   Sits at the very top of the calendar block, above the navtop
   row (which holds "This week" in wide view) and above the
   prev/range/next row (which holds "This week" in portrait).
   Centred on all viewports so the relationship to "This week"
   reads the same regardless of orientation.
   ------------------------------------------------------------ */
.gt-addsess__tzrow {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 2px 8px;
  margin: 0;
}
.gt-addsess__tzrow .gt-tz-pills {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  background: transparent;
  border: 0;
  padding: 0;
}
.gt-addsess__tzrow .gt-tz-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #ffffff;
  color: #6b6f76;
  border: 1px solid #d9d2c4 !important;
  border-radius: 999px !important;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  padding: 2px 9px 3px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  min-width: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap;
}
.gt-addsess__tzrow .gt-tz-pill:hover {
  color: #14213d;
  border-color: #14213d;
}
.gt-addsess__tzrow .gt-tz-pill:focus-visible {
  outline: 2px solid #a8552c;
  outline-offset: 2px;
}
.gt-addsess__tzrow .gt-tz-pill.is-active {
  background: #14213d;
  color: #ffffff;
  border-color: #14213d;
}
.gt-addsess__tzrow .gt-tz-pill.is-active:hover {
  background: #14213d;
}
/* Portrait phone: tighten the vertical padding so the pills don't
   push "This week" further down the screen. The calendar grid is
   already vertically constrained on small viewports. */
@media (max-width: 600px) and (orientation: portrait) {
  .gt-addsess__tzrow {
    padding: 2px 2px 6px;
  }
}
/* Landscape phone (short-height viewport): match portrait's tighter
   padding so the calendar's 4-7 row grid still fits the visible
   area without scrolling. */
@media (max-height: 500px) and (orientation: landscape) {
  .gt-addsess__tzrow {
    padding: 2px 2px 4px;
  }
}

/* ============================================================
   Set Availability lever — TZ pill pair flanking "This week"
   ============================================================
   Two pills (Pacific, admin-home) inserted as siblings of the
   [data-avail-nav="today"] button inside .gt-availability__nav-
   cluster — one immediately before, one immediately after — so
   they read "PT  ◀  Mon 6/17 – Sun 6/23  ▶  This week  PDT" in
   wide views and stay on the same row at all breakpoints.
   Styling: same pill family as the case-file Add Session pills
   (white inactive, navy active) but compact and inline with the
   .gt-availability__nav arrow/today buttons (slightly shorter
   font + tighter padding so heights line up). June 2026. */
body.page-id-3865 .gt-availability__nav-cluster .gt-availability__tz-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #ffffff;
  color: #6b6f76;
  border: 1px solid #d9d2c4 !important;
  border-radius: 999px !important;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  padding: 2px 9px 3px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  min-width: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  margin: 0 4px !important;     /* breathing room around the This-week button */
  flex: 0 0 auto !important;
  white-space: nowrap;
  vertical-align: middle;
}
body.page-id-3865 .gt-availability__nav-cluster .gt-availability__tz-pill:hover {
  color: #14213d;
  border-color: #14213d;
}
body.page-id-3865 .gt-availability__nav-cluster .gt-availability__tz-pill:focus-visible {
  outline: 2px solid #a8552c;
  outline-offset: 2px;
}
body.page-id-3865 .gt-availability__nav-cluster .gt-availability__tz-pill.is-active {
  background: #14213d;
  color: #ffffff;
  border-color: #14213d;
}
body.page-id-3865 .gt-availability__nav-cluster .gt-availability__tz-pill.is-active:hover {
  background: #14213d;
}
/* Portrait phone: tighten the pill padding so the whole nav cluster
   (Prev / range / Next / left-pill / This week / right-pill) still
   fits on a single line. The .gt-availability__head row already
   uses white-space:nowrap; pills here lose a little horizontal pad
   but keep the same hairline shape. */
@media (max-width: 600px) and (orientation: portrait) {
  body.page-id-3865 .gt-availability__nav-cluster .gt-availability__tz-pill {
    margin: 0 2px !important;
    padding: 1px 7px 2px !important;
    font-size: 0.68rem !important;
  }
}
/* Landscape phone (short-height viewport): same tightening so the
   pair doesn't push the grid below the fold. */
@media (max-height: 500px) and (orientation: landscape) {
  body.page-id-3865 .gt-availability__nav-cluster .gt-availability__tz-pill {
    margin: 0 2px !important;
    padding: 1px 7px 2px !important;
    font-size: 0.68rem !important;
  }
}