/* === GeorgeTutor Portal stylesheet ===
   This file is loaded only on portal pages (IDs 3725, 3727, 3730, 3731, 3732, 3733, 3734).
   Edit this file via the PowerShell deployer; do not paste into WP Additional CSS. */

/* -----------------------------------------------------------
   Stage 1 — blank canvas: hide site chrome on portal pages
   ----------------------------------------------------------- */
.page-id-3725 .site-header,
.page-id-3727 .site-header,
.page-id-3730 .site-header,
.page-id-3731 .site-header,
.page-id-3732 .site-header,
.page-id-3733 .site-header,
.page-id-3734 .site-header,
.page-id-3725 .site-footer,
.page-id-3727 .site-footer,
.page-id-3730 .site-footer,
.page-id-3731 .site-footer,
.page-id-3732 .site-footer,
.page-id-3733 .site-footer,
.page-id-3734 .site-footer,
.page-id-3725 #secondary,
.page-id-3727 #secondary,
.page-id-3730 #secondary,
.page-id-3731 #secondary,
.page-id-3732 #secondary,
.page-id-3733 #secondary,
.page-id-3734 #secondary,
.page-id-3725 .navigation-top,
.page-id-3727 .navigation-top,
.page-id-3730 .navigation-top,
.page-id-3731 .navigation-top,
.page-id-3732 .navigation-top,
.page-id-3733 .navigation-top,
.page-id-3734 .navigation-top,
.page-id-3725 .custom-header,
.page-id-3727 .custom-header,
.page-id-3730 .custom-header,
.page-id-3731 .custom-header,
.page-id-3732 .custom-header,
.page-id-3733 .custom-header,
.page-id-3734 .custom-header {
    display: none !important;
}

/* Hide top subscribe banner on portal pages */
.page-id-3725 #st-topbar-cta,
.page-id-3727 #st-topbar-cta,
.page-id-3730 #st-topbar-cta,
.page-id-3731 #st-topbar-cta,
.page-id-3732 #st-topbar-cta,
.page-id-3733 #st-topbar-cta,
.page-id-3734 #st-topbar-cta {
    display: none !important;
}

/* Hide the admin "Edit" link that WordPress shows next to the page title
   when logged in. It is only visible to you (admins); families never see it.
   We hide both the .edit-link span wrapper and the .post-edit-link anchor,
   on every portal page, with broad specificity so theme rules can't override. */
body.page-id-3725 .edit-link,
body.page-id-3727 .edit-link,
body.page-id-3730 .edit-link,
body.page-id-3731 .edit-link,
body.page-id-3732 .edit-link,
body.page-id-3733 .edit-link,
body.page-id-3734 .edit-link,
body.page-id-3725 .post-edit-link,
body.page-id-3727 .post-edit-link,
body.page-id-3730 .post-edit-link,
body.page-id-3731 .post-edit-link,
body.page-id-3732 .post-edit-link,
body.page-id-3733 .post-edit-link,
body.page-id-3734 .post-edit-link,
body.page-id-3725 span.edit-link,
body.page-id-3727 span.edit-link,
body.page-id-3730 span.edit-link,
body.page-id-3731 span.edit-link,
body.page-id-3732 span.edit-link,
body.page-id-3733 span.edit-link,
body.page-id-3734 span.edit-link {
    display: none !important;
    visibility: hidden !important;
}

/* -----------------------------------------------------------
   Stage 2 — typography & layout
   ----------------------------------------------------------- */
.page-id-3725,
.page-id-3727,
.page-id-3730,
.page-id-3731,
.page-id-3732,
.page-id-3733,
.page-id-3734 {
    background: #fafaf7;
    color: #1f2933;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-id-3725 .entry-content,
.page-id-3727 .entry-content,
.page-id-3730 .entry-content,
.page-id-3731 .entry-content,
.page-id-3732 .entry-content,
.page-id-3733 .entry-content,
.page-id-3734 .entry-content,
.page-id-3725 .entry-header,
.page-id-3727 .entry-header,
.page-id-3730 .entry-header,
.page-id-3731 .entry-header,
.page-id-3732 .entry-header,
.page-id-3733 .entry-header,
.page-id-3734 .entry-header,
.page-id-3865 .entry-header {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Bookings page is wider to fit the calendar */
.page-id-3727 .entry-content,
.page-id-3727 .entry-header {
    max-width: 960px;
}

.page-id-3725 .entry-title,
.page-id-3727 .entry-title,
.page-id-3730 .entry-title,
.page-id-3731 .entry-title,
.page-id-3732 .entry-title,
.page-id-3733 .entry-title,
.page-id-3734 .entry-title,
.page-id-3865 .entry-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 2.1rem;
    line-height: 1.2;
    color: #14213d;
    margin-top: 0.6rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.page-id-3725 .entry-content h2,
.page-id-3727 .entry-content h2,
.page-id-3730 .entry-content h2,
.page-id-3731 .entry-content h2,
.page-id-3732 .entry-content h2,
.page-id-3733 .entry-content h2,
.page-id-3734 .entry-content h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 1.45rem;
    color: #14213d;
    margin-top: 2.25rem;
    margin-bottom: 0.6rem;
    letter-spacing: -0.005em;
}

.page-id-3725 .entry-content h3,
.page-id-3727 .entry-content h3,
.page-id-3730 .entry-content h3,
.page-id-3731 .entry-content h3,
.page-id-3732 .entry-content h3,
.page-id-3733 .entry-content h3,
.page-id-3734 .entry-content h3 {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3b4a6b;
    margin-top: 1.75rem;
    margin-bottom: 0.4rem;
}

.page-id-3725 .entry-content p,
.page-id-3727 .entry-content p,
.page-id-3730 .entry-content p,
.page-id-3731 .entry-content p,
.page-id-3732 .entry-content p,
.page-id-3733 .entry-content p,
.page-id-3734 .entry-content p {
    margin: 0 0 1.1rem 0;
}

.page-id-3725 .entry-content a,
.page-id-3727 .entry-content a,
.page-id-3730 .entry-content a,
.page-id-3731 .entry-content a,
.page-id-3732 .entry-content a,
.page-id-3733 .entry-content a,
.page-id-3734 .entry-content a {
    color: #a8552c;
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 85, 44, 0.35);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.page-id-3725 .entry-content a:hover,
.page-id-3727 .entry-content a:hover,
.page-id-3730 .entry-content a:hover,
.page-id-3731 .entry-content a:hover,
.page-id-3732 .entry-content a:hover,
.page-id-3733 .entry-content a:hover,
.page-id-3734 .entry-content a:hover {
    color: #14213d;
    border-bottom-color: #14213d;
}

/* Lists, rules, tables, blockquotes */
.page-id-3725 .entry-content ul,
.page-id-3727 .entry-content ul,
.page-id-3730 .entry-content ul,
.page-id-3731 .entry-content ul,
.page-id-3732 .entry-content ul,
.page-id-3733 .entry-content ul,
.page-id-3734 .entry-content ul,
.page-id-3725 .entry-content ol,
.page-id-3727 .entry-content ol,
.page-id-3730 .entry-content ol,
.page-id-3731 .entry-content ol,
.page-id-3732 .entry-content ol,
.page-id-3733 .entry-content ol,
.page-id-3734 .entry-content ol {
    padding-left: 1.25rem;
    margin: 0 0 1.25rem 0;
}

.page-id-3725 .entry-content li,
.page-id-3727 .entry-content li,
.page-id-3730 .entry-content li,
.page-id-3731 .entry-content li,
.page-id-3732 .entry-content li,
.page-id-3733 .entry-content li,
.page-id-3734 .entry-content li {
    margin: 0.35rem 0;
    padding-left: 0.25rem;
}

.page-id-3725 .entry-content hr,
.page-id-3727 .entry-content hr,
.page-id-3730 .entry-content hr,
.page-id-3731 .entry-content hr,
.page-id-3732 .entry-content hr,
.page-id-3733 .entry-content hr,
.page-id-3734 .entry-content hr {
    border: 0;
    height: 1px;
    background: #ece3cd;
    margin: 2.5rem 0;
}

.page-id-3725 .entry-content table,
.page-id-3727 .entry-content table,
.page-id-3730 .entry-content table,
.page-id-3731 .entry-content table,
.page-id-3732 .entry-content table,
.page-id-3733 .entry-content table,
.page-id-3734 .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 2rem 0;
    font-size: 0.97rem;
}

.page-id-3725 .entry-content th,
.page-id-3727 .entry-content th,
.page-id-3730 .entry-content th,
.page-id-3731 .entry-content th,
.page-id-3732 .entry-content th,
.page-id-3733 .entry-content th,
.page-id-3734 .entry-content th {
    text-align: left;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    color: #3b4a6b;
    border-bottom: 2px solid #14213d;
    padding: 0.6rem 0.75rem;
}

.page-id-3725 .entry-content td,
.page-id-3727 .entry-content td,
.page-id-3730 .entry-content td,
.page-id-3731 .entry-content td,
.page-id-3732 .entry-content td,
.page-id-3733 .entry-content td,
.page-id-3734 .entry-content td {
    border-bottom: 1px solid #e8e6dd;
    padding: 0.6rem 0.75rem;
    vertical-align: top;
}

.page-id-3725 .entry-content blockquote,
.page-id-3727 .entry-content blockquote,
.page-id-3730 .entry-content blockquote,
.page-id-3731 .entry-content blockquote,
.page-id-3732 .entry-content blockquote,
.page-id-3733 .entry-content blockquote,
.page-id-3734 .entry-content blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.1rem;
    border-left: 3px solid #a8552c;
    color: #3b4a6b;
    font-style: normal;
}

/* Hub page: turn the link list into an index */
.page-id-3725 .entry-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
    border-top: 1px solid #ece3cd;
}
.page-id-3725 .entry-content ul li {
    border-bottom: 1px solid #ece3cd;
    margin: 0;
    padding: 0;
}
.page-id-3725 .entry-content ul li a {
    display: block;
    padding: 0.95rem 0.25rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    color: #14213d;
    border-bottom: none;
    letter-spacing: -0.005em;
}
.page-id-3725 .entry-content ul li a:hover {
    color: #a8552c;
    background: rgba(168, 85, 44, 0.04);
    border-bottom: none;
}
.page-id-3725 .entry-content ul li a::after {
    content: " \2192";
    color: #a8552c;
    float: right;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

/* Page header eyebrow & rule */
.page-id-3725 .entry-header,
.page-id-3727 .entry-header,
.page-id-3730 .entry-header,
.page-id-3731 .entry-header,
.page-id-3732 .entry-header,
.page-id-3733 .entry-header,
.page-id-3734 .entry-header,
.page-id-3865 .entry-header {
    border-bottom: 1px solid #ece3cd;
    padding-bottom: 0.3rem;
    margin-bottom: 0.4rem;
    /* Match the admin hub: snug to the top of the content area rather
       than carrying the theme's default header gap above the eyebrow. */
    margin-top: 18px !important;
    padding-top: 0 !important;
    position: relative;
    /* Reserve room on both sides for the absolutely-positioned admin
       quickbar buttons (← Admin hub on the left, View bookings as
       admin → on the right) so they don't overlap the eyebrow or title. */
    padding-left: 130px;
    padding-right: 200px;
}
/* Collapse the theme's default top padding on the article/main wrapper
   so the eyebrow rides up against the top of the visible container,
   matching the admin hub. The wrapper element varies by theme; we hit
   all three commonly used WordPress containers (article, main, .site-main). */
body.page-id-3725 article,
body.page-id-3727 article,
body.page-id-3730 article,
body.page-id-3731 article,
body.page-id-3732 article,
body.page-id-3733 article,
body.page-id-3734 article,
body.page-id-3725 main,
body.page-id-3727 main,
body.page-id-3730 main,
body.page-id-3731 main,
body.page-id-3732 main,
body.page-id-3733 main,
body.page-id-3734 main,
body.page-id-3725 .site-main,
body.page-id-3727 .site-main,
body.page-id-3730 .site-main,
body.page-id-3731 .site-main,
body.page-id-3732 .site-main,
body.page-id-3733 .site-main,
body.page-id-3734 .site-main {
    padding-top: 0 !important;
}
.page-id-3725 .entry-header::before,
.page-id-3727 .entry-header::before,
.page-id-3730 .entry-header::before,
.page-id-3731 .entry-header::before,
.page-id-3732 .entry-header::before,
.page-id-3733 .entry-header::before,
.page-id-3734 .entry-header::before,
.page-id-3865 .entry-header::before {
    content: "GeorgeTutor Portal";
    display: block;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a8552c;
    margin-bottom: 0.5rem;
}
/* Hub page (3725) eyebrow override: shorter wording on the main portal page so
   the long "GeorgeTutor Portal" string doesn't push the heading wider than the
   viewport on phone-portrait. The title beneath it carries the "Portal" word. */
.page-id-3725 .entry-header::before {
    content: "GeorgeTutor";
}
/* Admin page (3865) eyebrow override: same chrome as the user portal, but
   recoloured purple so admin pages are unmistakably distinct from the family-
   facing pages. Eyebrow reads "GeorgeTutor" alone (the title beneath carries
   "Admin Portal"). */
.page-id-3865 .entry-header::before {
    content: "GeorgeTutor";
    color: #5e4a8c;
}
/* Impersonation eyebrow: when an admin is viewing a family page via
   ?view_as=, portal.js stamps body.gt-impersonating. The eyebrow then
   reads "GEORGETUTOR PORTAL (AS ADMIN)" in purple on every portal page
   the admin lands on, so the impersonation state is unmistakable. The
   higher-specificity selectors below override both the orange default
   and the hub's shortened "GeorgeTutor" override. */
body.gt-impersonating.page-id-3725 .entry-header::before,
body.gt-impersonating.page-id-3727 .entry-header::before,
body.gt-impersonating.page-id-3730 .entry-header::before,
body.gt-impersonating.page-id-3731 .entry-header::before,
body.gt-impersonating.page-id-3732 .entry-header::before,
body.gt-impersonating.page-id-3733 .entry-header::before,
body.gt-impersonating.page-id-3734 .entry-header::before {
    content: "GeorgeTutor Portal (as admin)";
    color: #5e4a8c;
}
/* Un-impersonated admin viewing a portal page (body.gt-as-admin, stamped
   by portal.js when clientId === 0). Eyebrow reads just "GeorgeTutor" in
   admin purple, mirroring the case-file admin lever language. */
body.gt-as-admin.page-id-3725 .entry-header::before,
body.gt-as-admin.page-id-3727 .entry-header::before,
body.gt-as-admin.page-id-3730 .entry-header::before,
body.gt-as-admin.page-id-3731 .entry-header::before,
body.gt-as-admin.page-id-3732 .entry-header::before,
body.gt-as-admin.page-id-3733 .entry-header::before,
body.gt-as-admin.page-id-3734 .entry-header::before {
    content: "GeorgeTutor";
    color: #5e4a8c;
}
/* The 40px navy underline that used to live here was disliked by the
   user ("that nasty little black line"). It rendered left-aligned below
   the family subtitle and looked like a stray rule. Removed entirely.
   The eyebrow (::before) remains above the title. If a horizontal
   accent is ever wanted again, re-add with `margin: 0.3rem auto 0;`
   to center it. -- 2026-05-26 */
.page-id-3725 .entry-header::after,
.page-id-3727 .entry-header::after,
.page-id-3730 .entry-header::after,
.page-id-3731 .entry-header::after,
.page-id-3732 .entry-header::after,
.page-id-3733 .entry-header::after,
.page-id-3734 .entry-header::after,
.page-id-3865 .entry-header::after {
    content: none;
    display: none;
}

/* "Back to main portal page" link.
   Top instance: authored as the first <p> in .entry-content, then lifted by
   portal.js (liftTopBackLink) to sit *above* .entry-header inside the parent
   <article>. We style it for both possible parents so it renders correctly
   whether JS has moved it yet or not. The bottom link is a normal paragraph
   at the end of entry-content. */
.page-id-3727 .entry-content p.portal-back-top,
.page-id-3730 .entry-content p.portal-back-top,
.page-id-3731 .entry-content p.portal-back-top,
.page-id-3732 .entry-content p.portal-back-top,
.page-id-3733 .entry-content p.portal-back-top,
.page-id-3734 .entry-content p.portal-back-top,
.page-id-3727 article.hentry > p.portal-back-top,
.page-id-3730 article.hentry > p.portal-back-top,
.page-id-3731 article.hentry > p.portal-back-top,
.page-id-3732 article.hentry > p.portal-back-top,
.page-id-3733 article.hentry > p.portal-back-top,
.page-id-3734 article.hentry > p.portal-back-top {
    margin: 0 auto 0.6rem auto;
    padding: 0 24px 0.4rem 24px;
    max-width: 960px;
    border-bottom: 1px solid #ece3cd;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

/* Pull the article (and thus the back-link at its top) tight to the page top. */
.page-id-3727 article.hentry,
.page-id-3730 article.hentry,
.page-id-3731 article.hentry,
.page-id-3732 article.hentry,
.page-id-3733 article.hentry,
.page-id-3734 article.hentry {
    padding-top: 0.4rem !important;
    margin-top: 0 !important;
}
/* Hub (3725) added 2026-05 so the rust "GEORGETUTOR PORTAL" eyebrow
   sits near the top of the page — was previously depressed ~88px by
   the Twenty Seventeen theme's default #content.site-content top
   padding. Brings the hub in line with all six subviews. */
.page-id-3725 .site-content,
.page-id-3727 .site-content,
.page-id-3730 .site-content,
.page-id-3731 .site-content,
.page-id-3732 .site-content,
.page-id-3733 .site-content,
.page-id-3734 .site-content,
.page-id-3725 #content,
.page-id-3727 #content,
.page-id-3730 #content,
.page-id-3731 #content,
.page-id-3732 #content,
.page-id-3733 #content,
.page-id-3734 #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.page-id-3727 .entry-content p.portal-back,
.page-id-3730 .entry-content p.portal-back,
.page-id-3731 .entry-content p.portal-back,
.page-id-3732 .entry-content p.portal-back,
.page-id-3733 .entry-content p.portal-back,
.page-id-3734 .entry-content p.portal-back {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ece3cd;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}
.page-id-3727 .entry-content p.portal-back-top a,
.page-id-3730 .entry-content p.portal-back-top a,
.page-id-3731 .entry-content p.portal-back-top a,
.page-id-3732 .entry-content p.portal-back-top a,
.page-id-3733 .entry-content p.portal-back-top a,
.page-id-3734 .entry-content p.portal-back-top a,
.page-id-3727 .entry-content p.portal-back a,
.page-id-3730 .entry-content p.portal-back a,
.page-id-3731 .entry-content p.portal-back a,
.page-id-3732 .entry-content p.portal-back a,
.page-id-3733 .entry-content p.portal-back a,
.page-id-3734 .entry-content p.portal-back a {
    color: #3b4a6b;
    border-bottom: none;
}
.page-id-3727 .entry-content p.portal-back-top a:hover,
.page-id-3730 .entry-content p.portal-back-top a:hover,
.page-id-3731 .entry-content p.portal-back-top a:hover,
.page-id-3732 .entry-content p.portal-back-top a:hover,
.page-id-3733 .entry-content p.portal-back-top a:hover,
.page-id-3734 .entry-content p.portal-back-top a:hover,
.page-id-3727 .entry-content p.portal-back a:hover,
.page-id-3730 .entry-content p.portal-back a:hover,
.page-id-3731 .entry-content p.portal-back a:hover,
.page-id-3732 .entry-content p.portal-back a:hover,
.page-id-3733 .entry-content p.portal-back a:hover,
.page-id-3734 .entry-content p.portal-back a:hover {
    color: #a8552c;
    border-bottom: none;
}

/* -----------------------------------------------------------
   Stage 3 — Next-session card (hub) and calendar (bookings)
   ----------------------------------------------------------- */
.page-id-3725 .gt-card {
    background: #ffffff;
    border: 1px solid #ece3cd;
    border-left: 4px solid #14213d;
    border-radius: 2px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0 2.5rem 0;
    box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04);
}
.page-id-3725 .gt-card__eyebrow,
.page-id-3730 .gt-card__eyebrow {
    /* Match the next-session card's eyebrow exactly in family, size,
       weight, and tracking. The colour stays rust to differentiate the
       flexibility card from the slate-blue next-session eyebrow. */
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a8552c;
    margin: 0 0 0.5rem 0;
}
/* The flexibility card wraps the Flex panel, Voucher panel, and the
   Get-a-session CTA inside the same white rounded rectangle that the
   next-session card uses. Its outer shell mirrors .gt-card exactly:
   same padding, same border, same shadow. The card carries no left
   rail of its own because, unlike the next-session card, it is not
   tied to a session nature. Inner panel and CTA margins are reset so
   the wrapper alone supplies the spacing. */
.page-id-3725 .gt-card--flexibility,
.page-id-3730 .gt-card--flexibility {
    /* Mirror the rendered next-session panel exactly. The hub's "Your
       next session" card renders as a .gt-modal__panel: white background,
       3px top border (per-nature on the next-session card, neutral grey
       here), rounded 12px corners, padding 1rem 1.15rem, and a soft
       heavy drop shadow. This card uses the same dimensions and shadow,
       hue-neutral so the styling does not imply a session nature. */
    background: rgba(255, 255, 255, 0.98);
    border: 0;
    /* Canary-yellow accent: a definite, flamboyant yellow on the top
       edge, and a luminous canary-yellow glow in place of the dull grey
       drop shadow. Two stacked shadows give the card the impression of
       genuinely shining rather than merely tinting a grey shadow. */
    border-top: 3px solid #f6c200;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    max-width: 340px;
    margin: 1.25rem 0 1.5rem 0;
    /* The yellow glow is intentionally a touch softer than the slate
       shadow on the next-session card so the two cards read as visual
       peers rather than the flexibility card outshining its neighbour. */
    box-shadow:
        0 0 18px rgba(246, 194, 0, 0.42),
        0 12px 32px rgba(212, 165, 0, 0.33);
    position: relative;
    /* Match the next-session card's overall vertical height exactly.
       The next-session card renders at 243px tall with its eyebrow,
       date, who, duration, and actions row; we use flex column
       distribution so the flexibility card's three children
       (eyebrow, balances, CTA) space out to fill the same envelope. */
    height: 243px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}
/* On the Flex Your Schedule page, the flexibility card is the only card
   in the column (no twin next-session card beside it), so centre it
   within the content area rather than leaving it left-aligned. */
.page-id-3730 .gt-card--flexibility {
    margin-left: auto;
    margin-right: auto;
}
.page-id-3725 .gt-card--flexibility > .gt-flex-balances,
.page-id-3730 .gt-card--flexibility > .gt-flex-balances {
    margin: 0;
    justify-content: center;
    gap: 0.85rem;
}
/* Inside the narrower flexibility panel the two balance panels can sit a
   little tighter -- match the inner padding and font sizing of the
   next-session card to keep the visual rhythm aligned. */
.page-id-3725 .gt-card--flexibility .gt-flex-panel,
.page-id-3730 .gt-card--flexibility .gt-flex-panel,
.page-id-3725 .gt-card--flexibility .gt-vouch-panel,
.page-id-3730 .gt-card--flexibility .gt-vouch-panel {
    padding: 0.65rem 0.95rem;
    min-width: 4.5rem;
}
.page-id-3725 .gt-card--flexibility .gt-flex-panel__num,
.page-id-3730 .gt-card--flexibility .gt-flex-panel__num {
    font-size: 2rem;
}
/* CTA sits centred beneath the panels; the button itself takes on the
   same dimensions as the next-session card's action buttons (Cancel
   session / Join on Zoom) -- padding, font size, border-radius -- but
   in a neutral grey-bordered ghost colour, since the flexibility card
   has no nature hue of its own to take. */
/* Suppress the empty <p> that WordPress's wpautop inserts after the CTA;
   it otherwise becomes a fourth child in the flex column and steals the
   bottom slot under justify-content:space-between, pushing the Get-a-
   session button upward and away from the card bottom. With it hidden,
   space-between distributes eyebrow / balances / CTA cleanly. */
.page-id-3725 .gt-card--flexibility > p:empty,
.page-id-3730 .gt-card--flexibility > p:empty{display:none !important;}
.page-id-3725 .gt-card--flexibility .gt-flex-balances > p:empty,
.page-id-3730 .gt-card--flexibility .gt-flex-balances > p:empty{display:none !important;}

.page-id-3725 .gt-card--flexibility > .gt-flex-cta,
.page-id-3730 .gt-card--flexibility > .gt-flex-cta {
    /* The hub Get-a-session CTA shares the Flex-page CTA's appearance
       exactly: white fill, rust text, warm sand border (defined further
       down in this stylesheet under the shared .page-id-3725 / -3730 rule).
       Flexbox on the parent handles vertical distribution; the CTA only
       needs to centre its inline content. The 17.6px margin-bottom
       mirrors the margin-bottom on the next-session card's
       .gt-modal__actions row, so the bottom edge of the Get-a-session
       button aligns horizontally with the bottom edge of the Cancel /
       Join buttons in the neighbouring card on widescreen. */
    margin: 0 0 17.6px 0;
    text-align: center;
}
/* The panels sit on the card surface, so their own outer shell becomes
   redundant. Strip the shell shadow inside the wrapper to keep the card
   reading as a single object. */
.page-id-3725 .gt-card--flexibility .gt-flex-panel,
.page-id-3730 .gt-card--flexibility .gt-flex-panel,
.page-id-3725 .gt-card--flexibility .gt-vouch-panel,
.page-id-3730 .gt-card--flexibility .gt-vouch-panel {
    box-shadow: none;
}

.page-id-3725 .gt-card__when {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    color: #14213d;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.005em;
}
.page-id-3725 .gt-card__who { color: #3b4a6b; margin: 0 0 1rem 0; }
.page-id-3725 .gt-card__empty { color: #3b4a6b; margin: 0 0 1rem 0; }
.page-id-3725 .gt-card__actions { margin: 0; }

/* === Flex credit readout panel ===
   A compact balance panel showing the household's current Flex token total.
   Appears at the top-right of the hub and at the top of the Flex Your
   Schedule page. Same shell as the next-session card (white, navy left rail)
   so the two read as a related pair, but with a distinct typographic
   treatment: a large serif numeral with a small uppercase caption beneath. */
.gt-flex-panel {
    background: #ffffff;
    border: 1px solid #ece3cd;
    /* Left rail colour identifies the balance type at a glance. Both the
       Flex and Voucher panels share the same rail at present (warm gold,
       institutional rather than neon). If a stronger distinction between
       the two is wanted later, the .gt-vouch-panel selector below can
       override this one with a contrasting hue. */
    border-left: 4px solid #d4a72c;
    border-radius: 2px;
    padding: 0.9rem 1.25rem;
    margin: 1.5rem 0 2.5rem 0;
    box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 5.5rem;
    line-height: 1;
}
.gt-flex-panel__num {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #14213d;
    letter-spacing: -0.01em;
    line-height: 1;
}
.gt-flex-panel__lbl {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a8552c;
    margin-top: 0.35rem;
}

/* Hub and Flex page share the same balance-row presentation: the Flex and
   Voucher panels sit side by side, equal height (align-items: stretch), and
   reflow gracefully on narrow viewports. Each page wraps the two panels in
   a .gt-flex-balances container in page markup. */
.page-id-3725 .gt-flex-balances,
.page-id-3730 .gt-flex-balances {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.25rem;
    margin: 1.5rem 0 1rem 0;
}
.page-id-3725 .gt-flex-balances > .gt-flex-panel,
.page-id-3725 .gt-flex-balances > .gt-vouch-panel,
.page-id-3730 .gt-flex-balances > .gt-flex-panel,
.page-id-3730 .gt-flex-balances > .gt-vouch-panel {
    display: inline-flex;
    width: max-content;
    margin: 0;
}

/* "Get a session" CTA: sits symmetrically below the Flex + Voucher balance
   row on both the hub (3725) and the Flex page (3730), styled to match the
   Not-now / Confirm buttons in the booking modal (mostly white, rust
   writing). The wrapper paragraph is centred; the anchor itself reuses
   .gt-btn .gt-btn--ghost so the visual matches the modal buttons exactly.
   Theme-provided paragraph backgrounds are reset on the wrapper to keep
   the area clean. */
.page-id-3725 .gt-flex-cta,
.page-id-3730 .gt-flex-cta {
    /* When two buttons live in this paragraph (Bookings + Get a session),
       mirror the Next Session card's .gt-modal__actions row exactly: flex
       row, 0.5rem gap, children stretch to equal width. With a single
       child the flexbox is a no-op, so this is safe in both cases. */
    text-align: center;
    margin: 0 0 2rem 0;
    background: transparent;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
}
.page-id-3725 .gt-flex-cta a.gt-btn,
.page-id-3730 .gt-flex-cta a.gt-btn {
    /* Match the booking-modal Not-now button exactly: solid white fill,
       rust text, warm sand-coloured border. (Outside the modal scope the
       .gt-btn--ghost defaults render with a transparent background and a
       cooler border, so we restate the colours here for byte-identical
       parity.) The font-size, line-height and padding mirror the Cancel /
       Join buttons in the next-session card exactly so the Get-a-session
       button has the same 27px vertical height. flex:1 makes the two
       buttons share the row equally, matching the Cancel/Join pair above. */
    background: #ffffff;
    color: #a8552c;
    border: 1px solid #d9c4a6;
    font-size: 13.6px !important;
    line-height: 13.6px !important;
    padding: 5.6px 1.25rem !important;
    text-decoration: none;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}
.page-id-3725 .gt-flex-cta a.gt-btn:hover,
.page-id-3725 .gt-flex-cta a.gt-btn:focus-visible,
.page-id-3730 .gt-flex-cta a.gt-btn:hover,
.page-id-3730 .gt-flex-cta a.gt-btn:focus-visible {
    background: #fbf6ee;
    border-color: #a8552c;
    color: #a8552c;
    text-decoration: none;
}

/* Flex history (placeholder section above Voucher tray). The eventual
   table of token credits and debits will replace the placeholder copy. */
.page-id-3730 .gt-flex-history {
    margin: 0.5rem 0 2rem 0;
}
.page-id-3730 .gt-flex-history__placeholder {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    color: #6b6b66;
    font-style: italic;
    margin: 0;
}

/* Flex history table -- ledger of token credits and debits, most recent
   at top. Styled with Source Sans Pro, slate text, sand borders, with
   green for positive deltas and rust for negative. */
.page-id-3730 .gt-flex-history__table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    color: #2f3a55;
    background: #fffdf7;
    border: 1px solid #d9c4a6;
    border-radius: 6px;
    overflow: hidden;
}
.page-id-3730 .gt-flex-history__table thead th {
    background: #f3ead6;
    color: #5a4a2a;
    font-weight: 600;
    text-align: left;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #d9c4a6;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Light vertical separators between columns. Each cell except the last
   carries a thin sand-coloured right border, giving the table the feel of
   a quiet grid rather than horizontal bands. */
.page-id-3730 .gt-flex-history__table thead th:not(:last-child),
.page-id-3730 .gt-flex-history__table tbody td:not(:last-child) {
    border-right: 1px solid #ece3cd;
}
.page-id-3730 .gt-flex-history__table thead th:not(:last-child) {
    border-right-color: #d9c4a6;
}
.page-id-3730 .gt-flex-history__table tbody td {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid #ece3cd;
    vertical-align: middle;
}
.page-id-3730 .gt-flex-history__table tbody tr:last-child td {
    border-bottom: none;
}
.page-id-3730 .gt-flex-history__table tbody tr:nth-child(even) td {
    background: #faf5e6;
}
.page-id-3730 .gt-flex-history__table .gt-fh-date {
    /* MM/DD only (5 chars, e.g. "06/17"). Locked to its natural
       content width and forbidden from wrapping -- the date must
       never break across two lines. All spare horizontal space is
       deliberately ceded to the Event column (see below). 2026-06-17. */
    white-space: nowrap;
    width: 1%;
    white-space: nowrap !important;
    word-break: keep-all;
    overflow-wrap: normal;
}
/* Event descriptions follow a fixed grammar -- "Book regular slot session
   TU07A on 05/11/26", "V Late Cancel (<2h) regular slot session TH06A on
   04/02/26", etc. They must stay on a single row so the ledger reads as a
   uniform vertical sequence, even though the longest variants run to ~60
   characters. The Date and Tokens / Balance columns are fixed-width above,
   leaving the Event column to absorb whatever width is available. */
.page-id-3730 .gt-flex-history__table .gt-fh-event,
.page-id-3730 .gt-flex-history__table tbody td:nth-child(2) {
    white-space: nowrap;
    width: auto;
}
/* The Tokens and Balance columns are numeric; centre the headers and the
   numerals so the figure sits squarely under its label rather than
   pushed to the right edge of the column. The header carries the
   semantic class (.gt-fh-delta / .gt-fh-bal); the body cells are plain
   <td> elements identified by column position. */
.page-id-3730 .gt-flex-history__table .gt-fh-delta,
.page-id-3730 .gt-flex-history__table .gt-fh-bal,
.page-id-3730 .gt-flex-history__table tbody td:nth-child(3),
.page-id-3730 .gt-flex-history__table tbody td:nth-child(4) {
    text-align: center;
    white-space: nowrap;
    width: 5.5rem;
    font-variant-numeric: tabular-nums;
}
.page-id-3730 .gt-flex-history__table tbody td.gt-fh-pos {
    color: #2f7a3a;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.page-id-3730 .gt-flex-history__table tbody td.gt-fh-neg {
    color: #a8552c;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.page-id-3730 .gt-flex-history__table tbody tr:first-child td {
    background: #fff8db;
    font-weight: 600;
}
.page-id-3730 .gt-flex-history__table tbody tr:first-child td.gt-fh-pos {
    background: #fff8db;
}

/* Responsive scaling for the Flex history table. On narrow viewports the
   theme's entry-content padding (24px each side) and outer .wrap padding
   (34px each side) leave very little room for a four-column ledger, so
   we do three things together:

   1. Break the table wrapper out of the entry-content's horizontal padding
      using equal negative margins, recovering the full inner column width.
   2. Step the table font size down at two breakpoints (tablet, then phone)
      so the longest single-line event description still fits.
   3. Tighten the cell padding so the table's horizontal footprint shrinks
      in proportion with the text. */
@media (max-width: 768px) {
    .page-id-3730 #gt-flex-history {
        margin-left: -24px;
        margin-right: -24px;
    }
    .page-id-3730 .gt-flex-history__table {
        font-size: 0.82rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .page-id-3730 .gt-flex-history__table thead th {
        font-size: 0.72rem;
        padding: 0.45rem 0.55rem;
    }
    .page-id-3730 .gt-flex-history__table tbody td {
        padding: 0.4rem 0.55rem;
    }
    .page-id-3730 .gt-flex-history__table .gt-fh-date {
        width: auto;
    }
}
@media (max-width: 600px) {
    .page-id-3730 #gt-flex-history {
        margin-left: -24px;
        margin-right: -24px;
    }
    .page-id-3730 .gt-flex-history__table {
        font-size: 0.78rem;
        table-layout: fixed;
        width: 100%;
    }
    .page-id-3730 .gt-flex-history__table thead th {
        font-size: 0.62rem;
        padding: 0.4rem 0.3rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .page-id-3730 .gt-flex-history__table tbody td {
        padding: 0.4rem 0.3rem;
    }
    /* MM/DD column: with table-layout:fixed on phones we MUST give it an
       absolute width (a percentage of 1% collapses the cell and lets the
       event text underlap the date). 3.2rem comfortably fits "05/18"
       (5 chars at the mobile 0.78rem font-size) with the 0.3rem cell
       padding either side. 2026-06-17. */
    .page-id-3730 .gt-flex-history__table thead th:nth-child(1),
    .page-id-3730 .gt-flex-history__table .gt-fh-date,
    .page-id-3730 .gt-flex-history__table tbody td:nth-child(1) {
        width: 3.2rem;
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
        line-height: 1.25;
    }
    /* On phones the Event cell always wraps to two lines, so every row
       shows a uniform two-line depth regardless of event-string length.
       The longest events occupy both lines; the shortest still wrap to
       two lines via a forced height-matching min-height. */
    .page-id-3730 .gt-flex-history__table .gt-fh-event,
    .page-id-3730 .gt-flex-history__table tbody td:nth-child(2) {
        width: auto;
        white-space: normal;
        word-break: break-word;
        line-height: 1.25;
    }
    /* Force every body row to a uniform two-line height so the ledger
       keeps a consistent vertical rhythm even when an individual event
       string fits on one line (e.g. "Onboarding bonus"). Applying height
       to <tr> works reliably in modern browsers as a minimum height; the
       cells inherit and the short-text cells centre vertically. */
    .page-id-3730 .gt-flex-history__table tbody tr {
        height: 3.6em;
    }
    .page-id-3730 .gt-flex-history__table tbody td {
        height: 3.6em;
        vertical-align: middle;
    }
    .page-id-3730 .gt-flex-history__table tbody td:nth-child(3),
    .page-id-3730 .gt-flex-history__table tbody td:nth-child(4) {
        /* Tightened from 13% -> 11% (and padding 0.2 -> 0.15rem) on
           2026-06-25 to cede a small slice of horizontal width back
           to the Event column so the new compact cancel-row form
           ("LM cancel MO10A06/25", ~22 chars) sits comfortably on a
           single line on phone widths. The digits still fit because
           the Tokens/Balance values are at most 4 chars wide with
           tabular numerals. Generic: applies to every row of every
           family equally. */
        width: 11%;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        white-space: nowrap;
    }
    .page-id-3730 .gt-flex-history__table thead th.gt-fh-delta,
    .page-id-3730 .gt-flex-history__table thead th.gt-fh-bal {
        width: 13%;
    }
    /* Use shortened header captions on phones via CSS content swap so the
       three-letter labels TOK / BAL sit comfortably inside the narrow
       columns. The body cells already carry the data; nothing else changes. */
    .page-id-3730 .gt-flex-history__table thead th.gt-fh-delta {
        font-size: 0;
    }
    .page-id-3730 .gt-flex-history__table thead th.gt-fh-delta::after {
        content: "TOK";
        font-size: 0.62rem;
        letter-spacing: 0.02em;
    }
    .page-id-3730 .gt-flex-history__table thead th.gt-fh-bal {
        font-size: 0;
    }
    .page-id-3730 .gt-flex-history__table thead th.gt-fh-bal::after {
        content: "BAL";
        font-size: 0.62rem;
        letter-spacing: 0.02em;
    }
}

/* -----------------------------------------------------------------------
   Voucher tray
   -----------------------------------------------------------------------
   The tray lives on the Flex Your Schedule page (3730), inside the
   #vouchers section beneath the vouchers explanation. Each tile is a small
   card with an image area on top and two text rows beneath: voucher type
   name (e.g. "Floater") and expiry date (e.g. "Expires 15 Jun 2026").
   Tiles are sized to give the imagery presence -- about 9rem wide on
   desktop -- and the tray flex-wraps onto a second row when needed.

   Vouchers of the same kind reuse the same image. That repetition is
   deliberate: it makes counts readable at a glance ("four Floater tiles")
   without the user having to count off a number. */
.page-id-3730 .gt-vouch-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 1rem 0 1.5rem 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.page-id-3730 .gt-vouch-tile {
    flex: 0 0 9rem;
    width: 9rem;
    margin: 0;
    padding: 0.75rem 0.75rem 0.6rem 0.75rem;
    background: #fffdf7;
    border: 1px solid #d8d5c8;
    border-radius: 6px;
    /* Stacked shadows imitate the thickness of a playing card: a sharp
       inner highlight on top, then progressively softer shadows beneath
       to lift the tile off the page. The thin dark hairline at the
       bottom edge sells the impression of a physical edge. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 0 rgba(20, 33, 61, 0.10),
        0 2px 0 rgba(20, 33, 61, 0.06),
        0 4px 8px rgba(20, 33, 61, 0.10),
        0 8px 18px rgba(20, 33, 61, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.page-id-3730 .gt-vouch-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1px 0 rgba(20, 33, 61, 0.10),
        0 3px 0 rgba(20, 33, 61, 0.06),
        0 8px 14px rgba(20, 33, 61, 0.14),
        0 14px 26px rgba(20, 33, 61, 0.10);
}
/* The image area is a fixed square so tiles align horizontally even though
   the source images have different aspect ratios. object-fit: contain keeps
   each butterfly (or sphere) intact and centred, with the white tile
   background visible around it where the artwork is narrower than tall or
   vice versa. */
.page-id-3730 .gt-vouch-tile__img {
    width: 100%;
    height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.page-id-3730 .gt-vouch-tile__img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.page-id-3730 .gt-vouch-tile__kind {
    margin: 0;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #14213d;
    line-height: 1.2;
}
.page-id-3730 .gt-vouch-tile__expiry {
    margin: 0.2rem 0 0 0;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: #6b6b66;
    line-height: 1.2;
}
@media (max-width: 600px) {
    /* On narrow screens tile width adjusts to fit two per row comfortably. */
    .page-id-3730 .gt-vouch-tile {
        flex: 0 0 calc(50% - 0.5rem);
        width: calc(50% - 0.5rem);
    }
    .page-id-3730 .gt-vouch-tile__img {
        height: 5.5rem;
    }
}
/* Expired voucher state: the tile remains in the tray for 90 days after
   expiry as a faded ghost. The image is desaturated and dimmed; the kind
   label stays legible but quietened; the expiry line reads "Expired <date>"
   in a muted slate so it doesn't compete with active vouchers above it. */
.page-id-3730 .gt-vouch-tile.is-expired {
    opacity: 0.55;
}
.page-id-3730 .gt-vouch-tile.is-expired .gt-vouch-tile__img img {
    filter: grayscale(0.85);
}
.page-id-3730 .gt-vouch-tile.is-expired .gt-vouch-tile__kind,
.page-id-3730 .gt-vouch-tile.is-expired .gt-vouch-tile__expiry {
    color: #8a8a85;
}
.page-id-3730 .gt-vouch-tile.is-expired:hover {
    /* Suppress the active-tile hover lift on expired ghosts — they are
       not actionable. */
    transform: none;
    box-shadow: none;
}

/* The Flex panel acts as a link to /portal-flex/ wherever it appears
   except on the Flex page itself. A subtle hover affordance signals the
   click target without competing with the readout numerals. */
.gt-flex-panel--link {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                transform 0.15s ease;
}
.gt-flex-panel--link:hover {
    border-color: #cbc7b8;
    box-shadow: 0 2px 5px rgba(20, 33, 61, 0.08);
    transform: translateY(-1px);
}
.gt-flex-panel--link:focus-visible {
    outline: 2px solid #14213d;
    outline-offset: 2px;
}

/* Cost indicator inside a Flex-spend pill: a small inline number that sits
   immediately after the nature label and reads as the token cost of choosing
   that pill. Discreet -- smaller and lighter than the label, no chip, no
   coloured fill. The pill itself must look identical to the standard direct-
   click pill; only the trailing 55 distinguishes it, and it must be quiet
   enough to read as a footnote rather than a badge. */
.page-id-3727 .gt-nat__cost {
    display: inline;
    margin-left: 0.4rem;
    padding: 0;
    font-size: 0.78em;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: 0.01em;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    opacity: 0.72;
    vertical-align: baseline;
}

/* Buttons (shared) */
.gt-btn {
    display: inline-block;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.05rem;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gt-btn--primary { background: #14213d; color: #fff; border-color: #14213d; }
.gt-btn--primary:hover { background: #1f3258; border-color: #1f3258; color: #fff; }
.gt-btn--ghost { background: transparent; color: #14213d; border-color: #c9c6bb; }
.gt-btn--ghost:hover { background: #f1efe7; color: #14213d; }
.gt-btn--danger { background: #a8552c; color: #fff; border-color: #a8552c; }
.gt-btn--danger:hover { background: #8e4623; border-color: #8e4623; color: #fff; }
/* The Twenty Seventeen theme decorates every <a> in entry-content with a
   1px solid bottom border as an underline. That stray edge breaks the
   four-sided button outline, so on the hub and bookings pages we strip
   the theme's link underline -- but we restore the genuine 1px button
   bottom border that the .gt-btn / .gt-btn--ghost rules set. The two
   share the same width, so the easiest distinction is: when the link is
   wearing .gt-btn we keep its full four-sided border; everywhere else on
   these pages the theme underline is suppressed. */
.page-id-3725 .gt-card a.gt-btn,
.page-id-3725 a.gt-btn,
.page-id-3727 a.gt-btn {
    /* Force all four borders to use the button's own colour. The theme's
       cascade can shorthand border-bottom to a different colour or width;
       re-asserting the four sides keeps the outline rectangular. */
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/* Specifically for the flex CTA on the hub and Flex page, the bottom
   edge picks up the sand-coloured border in the resting state and the
   rust-coloured border on hover, matching the other three sides. */
.page-id-3725 .gt-flex-cta a.gt-btn,
.page-id-3730 .gt-flex-cta a.gt-btn {
    border-bottom-color: #d9c4a6;
}
.page-id-3725 .gt-flex-cta a.gt-btn:hover,
.page-id-3725 .gt-flex-cta a.gt-btn:focus-visible,
.page-id-3730 .gt-flex-cta a.gt-btn:hover,
.page-id-3730 .gt-flex-cta a.gt-btn:focus-visible {
    border-bottom-color: #a8552c;
}

/* Calendar (bookings page) */
.page-id-3727 .gt-cal { margin: 0 0 2rem 0; }
.page-id-3727 .gt-cal__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.page-id-3727 .gt-cal__range {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    color: #14213d;
}

/* Toolbar nav buttons: warm-brown text on white, hover pale fawn.
   !important wins over the theme's aggressive button styles.
   Focus state is treated as resting (no sticky hover after click). */
.page-id-3727 button.gt-cal__nav,
.page-id-3727 button.gt-cal__nav:link,
.page-id-3727 button.gt-cal__nav:visited,
.page-id-3727 button.gt-cal__nav:focus,
.page-id-3727 button.gt-cal__nav:focus-visible {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #a8552c !important;
    border: 1px solid #d9c4a6 !important;
    padding: 0.35rem 0.9rem !important;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    text-transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
/* Two-form nav label: wide form (with arrow first/last) on desktop, narrow
   form (with arrow swapped to the inner side) on phone. Toggled in the
   max-width media query below. */
.page-id-3727 .gt-cal__nav-wide { display: inline; }
.page-id-3727 .gt-cal__nav-narrow { display: none; }
.page-id-3727 button.gt-cal__nav:hover,
.page-id-3727 button.gt-cal__nav:active {
    background: #faf2e3 !important;
    background-color: #faf2e3 !important;
    background-image: none !important;
    border-color: #a8552c !important;
    color: #8a3f1e !important;
    outline: none !important;
    box-shadow: none !important;
}

/* The grid is sized dynamically via the data-days attribute set by JS.
   position:relative establishes the containing block for the absolutely-
   positioned red now-line overlay painted by paintCalNowLine() in
   portal.js (mirrors the Surface B case-file calendar). */
.page-id-3727 .gt-cal__grid {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    border: 1px solid #ece3cd;
    background: #ece3cd;
    gap: 1px;
    position: relative;
}

/* 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 floats the line above cell content but below the modal
   overlay. Matches the .gt-addsess__nowline treatment on Surface B. */
.page-id-3727 .gt-cal__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);
}
.page-id-3727 .gt-cal__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;
}
.page-id-3727 .gt-cal__grid[data-days="3"] {
    grid-template-columns: 48px repeat(3, 1fr);
}
/* Portrait phones: 4 days at a glance. The hour-rail narrows aggressively
   (32px vs the earlier 44px) by stacking the number over AM/PM in the
   .gt-cal__hour cell \u2014 see the [data-days="4"] .gt-cal__hour overrides
   below. The 12px we claw back is redistributed across the four day
   columns (~3px each), which is exactly enough to fit labels like
   PACKAGE / PREMIUM / AVAILABLE on a single line without the ellipsis
   that round 9e introduced. (George round 9g, June 6 2026). */
.page-id-3727 .gt-cal__grid[data-days="4"] {
    grid-template-columns: 32px repeat(4, 1fr);
}
/* Stacked hour-rail in portrait: "4" on top, "AM" centred beneath in
   small caps. Mirrors the addsess (Manage-bookings) portrait rail so the
   two surfaces feel like one family. */
.page-id-3727 .gt-cal__grid[data-days="4"] .gt-cal__hour {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2px 0;
    line-height: 1.05;
}
.page-id-3727 .gt-cal__grid[data-days="4"] .gt-cal__hour-n {
    display: block;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
}
.page-id-3727 .gt-cal__grid[data-days="4"] .gt-cal__hour-ap {
    display: block;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    line-height: 1.05;
    opacity: 0.9;
}
/* In portrait the wider day columns mean labels like PACKAGE / PREMIUM /
   AVAILABLE now fit horizontally. Suspend the nowrap+ellipsis behaviour
   from round 9e for the portrait view only \u2014 we want the full word,
   not the ellipsis. */
.page-id-3727 .gt-cal__grid[data-days="4"] .gt-cal__nat,
.page-id-3727 .gt-cal__grid[data-days="4"] .gt-cal__cell--avail .gt-cal__lbl {
    text-overflow: clip;
    /* Keep white-space nowrap so the label still wraps at the cell edge
       rather than mid-word, but allow the cell to clip if a future label
       is genuinely too long. */
}
.page-id-3727 .gt-cal__grid[data-days="4"] .gt-cal__cell {
    padding-left: 2px;
    padding-right: 2px;
}
.page-id-3727 .gt-cal__corner { background: #fafaf7; }
/* Day header: MON / 12 stacked, both vertically centred inside the box.
   Today's variant keeps the number on the same baseline as the others but
   wraps it in a small rust pill. */
.page-id-3727 .gt-cal__head {
    background: #fafaf7;
    text-align: center;
    padding: 0.25rem 0.25rem;
    font-family: Georgia, "Times New Roman", serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    min-height: 2.6rem;
}
.page-id-3727 .gt-cal__head-d {
    display: block;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #3b4a6b;
    line-height: 1.1;
    margin: 0;
}
.page-id-3727 .gt-cal__head-n {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    color: #14213d;
    line-height: 1.1;
    margin: 0.05rem 0 0 0;
    padding: 0;
}
/* Today marker: rust pill, sized so its centre line matches the plain day numbers
   in the sibling cells. The vertical centring of the flex container does the work. */
.page-id-3727 .gt-cal__head--today .gt-cal__head-n {
    background: #a8552c;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    padding: 0.02rem 0.45rem 0.22rem;
    line-height: 1;
    margin: 0.05rem auto 0;
    font-size: 0.92rem;
}
/* Hour column: single inline line "5 AM" -- number then AM/PM on the same row,
   centred vertically in the hour cell. Number is Georgia serif (matching the
   day numbers); AM/PM is small uppercase Source Sans (matching MON/TUE/WED). */
.page-id-3727 .gt-cal__hour {
    background: #fafaf7;
    padding: 0.1rem 0.15rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    line-height: 1;
    white-space: nowrap;
    font-family: Georgia, "Times New Roman", serif;
    min-height: 36px;
}
.page-id-3727 .gt-cal__hour-n {
    font-family: inherit;
    font-size: 1rem;
    color: #14213d;
    line-height: 1;
}
.page-id-3727 .gt-cal__hour-ap {
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 400;
    color: #3b4a6b;
    line-height: 1;
    letter-spacing: 0.02em;
}
.page-id-3727 .gt-cal__cell {
    background: #ffffff;
    min-height: 36px;
    padding: 0.1rem 0.3rem;
    font-size: 0.78rem;
    line-height: 1.15;
    color: #1f2933;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

/* Quiet cells: outside George's working hours, or other families' bookings, or past.
   No label, just a subtly dimmed background. */
.page-id-3727 .gt-cal__cell--quiet { background: #f4f2ec; }

/* Available cells: pale gold, clickable. */
.page-id-3727 .gt-cal__cell--avail {
    background: #faf2e3;
    cursor: pointer;
    color: #8e6a1f;
    align-items: center;
}
.page-id-3727 .gt-cal__cell--avail:hover { background: #f3e3bd; }
.page-id-3727 .gt-cal__cell--avail .gt-cal__lbl {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

/* Booked cells: three lines of content (student, code, nature), centred.
   Compact: smaller fonts and tighter line-height shrink the overall calendar. */
.page-id-3727 .gt-cal__cell--booked {
    color: #fff;
    cursor: pointer;
    border-left: 0;
    align-items: center;
    text-align: center;
    line-height: 1.15;
}
.page-id-3727 .gt-cal__cell--booked:hover { filter: brightness(1.08); }

/* Blocked-by-other-family cell X-hatch: a pair of thin diagonal black
   lines drawn corner to corner. Signals "unavailable by reason of a
   pre-existing booking held by another family" -- visually distinct from
   availability paint and from this family's own coloured bookings.
   Two linear-gradients: one TL->BR diagonal, one TR->BL diagonal.
   Pointer-events: none so the X never intercepts clicks. Anchored via
   position: relative on the cell. */
.page-id-3727 .gt-cal__cell--blocked {
    position: relative;
}
.page-id-3727 .gt-cal__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));
    z-index: 1;
}
.page-id-3727 .gt-cal__who {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.page-id-3727 .gt-cal__code {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    opacity: 0.85;
    margin-top: 0.02rem;
}
.page-id-3727 .gt-cal__nat {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.92;
    margin-top: 0.05rem;
    /* George round-9e: keep the nature label on a single line. Words
       like MAKEUP and PREMIUM and AVAILABLE were breaking onto two
       lines in the View-bookings-as-admin grid where the column
       width can dip below the natural label width. nowrap + tiny
       overflow-ellipsis keeps the cell tidy without us having to
       widen the grid. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Same nowrap guarantee for the Available label (cells without a
   booking). Was also wrapping the final E off the word. */
.page-id-3727 .gt-cal__cell--avail .gt-cal__lbl,
.page-id-3727 .gt-cal--admin .gt-cal__cell--avail .gt-cal__lbl {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Half-hour (Consult) cells: the booking visually occupies only the top half of
   the 1-hour cell. The bottom half is rendered as the Available-style pale gold,
   indicating the second 30 minutes is free. The half-hour cell itself remains a
   single bookable unit (clicking it opens the consult modal). */
.page-id-3727 .gt-cal__cell--booked.gt-cal__cell--half {
    justify-content: flex-start;
    padding-top: 0.1rem;
}
.page-id-3727 .gt-cal__cell--booked.gt-cal__cell--half .gt-cal__who,
.page-id-3727 .gt-cal__cell--booked.gt-cal__cell--half .gt-cal__code,
.page-id-3727 .gt-cal__cell--booked.gt-cal__cell--half .gt-cal__nat {
    position: relative;
    z-index: 1;
}

/* Nature palette: cell + pill backgrounds.
   Softer, more nuanced tones -- each is a desaturated, gentler version of
   the original hue. Dark-background natures still use white text;
   Consult uses dark ink text on cream. */
.page-id-3727 .gt-nat--slot,    .page-id-3727 .gt-cal__cell--booked.gt-nat--slot    { background-color: #4a5a7a; }
.page-id-3727 .gt-nat--extra,   .page-id-3727 .gt-cal__cell--booked.gt-nat--extra   { background-color: #e89243; }
.page-id-3727 .gt-nat--makeup,  .page-id-3727 .gt-cal__cell--booked.gt-nat--makeup  { background-color: #6ba09e; }
.page-id-3727 .gt-nat--intro,   .page-id-3727 .gt-cal__cell--booked.gt-nat--intro   { background-color: #c2185b; }
.page-id-3727 .gt-nat--series,  .page-id-3727 .gt-cal__cell--booked.gt-nat--series  { background-color: #6b6b6b; }
.page-id-3727 .gt-nat--floater, .page-id-3727 .gt-cal__cell--booked.gt-nat--floater { background-color: #a59cc7; }
.page-id-3727 .gt-nat--premium, .page-id-3727 .gt-cal__cell--booked.gt-nat--premium { background-color: #7d4b8c; }
.page-id-3727 .gt-nat--summer,  .page-id-3727 .gt-cal__cell--booked.gt-nat--summer  { background-color: #b8d041; }
/* Package = prepaid session settled from a Package account. Teal so
   it sits as a sibling to slot/extra/makeup in the View-bookings
   grid. Token mirrors button.gt-nat--package above (#2d8674). Use
   the 3-class form (.gt-cal__cell.gt-cal__cell--booked.gt-nat--X)
   so specificity matches single/summer/consult — the 2-class form
   I tried first was being beaten by those rules in adjacent cells
   and was leaving Fede's Sunday-10 slot looking unpainted under
   stale cache assumptions. */
.page-id-3727 .gt-nat--package,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--package {
  background-color: #2d8674 !important;
  color: #ffffff !important;
}
/* Admin block = slot held off the calendar (GMT-style private event).
   George round-9d (June 7 2026): white fill, red text, NO outline.
   The red ink is the entire signal — reads instantly as 'held,
   not a student'. (Earlier outline / black-text treatment removed.) */
.page-id-3727 .gt-nat--admin_block,
.page-id-3727 .gt-cal__cell--booked.gt-nat--admin_block {
  background-color: #ffffff !important;
  color: #c0392b !important;
  border-left: 0 !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--admin_block,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--admin_block * {
  color: #c0392b !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--admin_block:hover {
  background-color: #f8f8f8 !important;
  filter: none !important;
}
/* Summer text needs dark ink: #b8d041 is too light for white text to
   read against. Mirror the Single treatment -- force dark color on the
   cell and all its descendants so the student name (.gt-cal__who),
   booking code (.gt-cal__code), and nature label (.gt-cal__nat) all
   sit legibly on the lime background. Border-left stays in the inherited
   booked treatment because the summer band is contrasty enough. */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--summer,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--summer * {
    color: #2a3308 !important;
}

/* Single: deep plum. George round-9d (June 7 2026): the previous
   white treatment looked unpainted next to slot indigo and extra
   orange; George specifically asked for 'something quite important
   like a purple'. #3a1d52 sits firmly in the purple family while
   staying clearly distinct from premium #7d4b8c (wine-violet) and
   floater #a59cc7 (pale lavender). White text reads cleanly on this
   background — no extra force-dark-ink rule needed. */
.page-id-3727 .gt-nat--single,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--single {
    background-color: #3a1d52 !important;
    color: #ffffff !important;
    border-left: 0 !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--single:hover {
    filter: brightness(1.08);
}

/* =========================================================================
   Historic overlay — admin View-bookings-as-admin canvas only.

   Goal: let the admin scan the week and immediately read what has already
   happened. Cells whose slot is in the past get a soft grey wash. Past
   delivered bookings stay readable but lose saturation. Cancellations are
   reduced to a faded chip carrying a small severity dot. Deleted rows are
   filtered upstream and never render at all. All rules below are scoped to
   .gt-cal--admin so the family-facing view is untouched.
   ========================================================================= */

/* Soft grey wash on every past cell. We tint via a background-image overlay
   so the underlying nature / availability paint still shows through, just
   muted. The half-hour Consult background-image already uses no-repeat
   linear-gradients edge-to-edge; we therefore use box-shadow inset instead
   of touching background-image, to avoid stomping the consult split. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--past {
    box-shadow: inset 0 0 0 9999px rgba(70, 70, 70, 0.10);
}
.page-id-3727 .gt-cal--admin .gt-cal__cell--past:hover {
    /* Lift the wash slightly on hover so the admin can read the underlying
       paint when investigating a specific past cell. */
    box-shadow: inset 0 0 0 9999px rgba(70, 70, 70, 0.04);
}
/* Past empty cells: mushroom regardless of underlying availability state.
   Historic availability (green / blue / grey / orange) carries no meaning
   \u2014 those slots can't be acted on \u2014 so we collapse them to a single
   neutral mushroom paint, matching .gt-cal__cell--blocked. Past BOOKED
   cells are excluded so delivered / cancelled session chips keep their
   nature colour and history-overlay treatment. The :not() chain also
   excludes split-consult cells so their two-half rendering survives. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--past:not(.gt-cal__cell--booked):not(.gt-cal__cell--split) {
    background: #cfc4b1 !important;
    background-image: none !important;
    color: #6b5836;
}
.page-id-3727 .gt-cal--admin .gt-cal__cell--past:not(.gt-cal__cell--booked):not(.gt-cal__cell--split) .gt-cal__lbl {
    display: none;
}

/* Delivered (past confirmed) chip: keep the nature colour but desaturate
   and dim a touch so it reads as a settled, completed event rather than
   demanding attention. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--delivered.gt-cal__cell--booked {
    filter: saturate(0.55) brightness(0.96);
    opacity: 0.88;
}

/* Canceled chip (any severity): collapse the nature paint to a near-white
   background with a dashed border so the cancellation reads visually as
   a placeholder, not a live event. The student name + nature label stay
   so the admin can identify whose session was canceled. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--canceled.gt-cal__cell--booked {
    background-color: rgba(255, 255, 255, 0.72) !important;
    background-image: none !important;
    border-left-color: rgba(0, 0, 0, 0.22) !important;
    color: #6b5836 !important;
    filter: saturate(0.55);
}
.page-id-3727 .gt-cal--admin .gt-cal__cell--canceled.gt-cal__cell--booked * {
    color: inherit !important;
}
.page-id-3727 .gt-cal--admin .gt-cal__cell--canceled.gt-cal__cell--booked .gt-cal__code {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Severity / status dot — reuses the same hex stops as the case-file row
   palette so the colour vocabulary is consistent across surfaces. */
.page-id-3727 .gt-cal--admin .gt-cal__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: #cccccc;
    margin-right: 4px;
    vertical-align: middle;
    position: absolute;
    top: 4px;
    right: 4px;
}
/* Delivered: healthy-green palette. */
.page-id-3727 .gt-cal--admin .gt-cal__dot--delivered {
    background: #5a9a6d;
    border-color: #2f5a3a;
}
/* Ordinary cancel: neutral grey, matching the 'empty' row pill. */
.page-id-3727 .gt-cal--admin .gt-cal__dot--canceled {
    background: #b7ad95;
    border-color: #6b5836;
}
/* Late cancel: light red. */
.page-id-3727 .gt-cal--admin .gt-cal__dot--late {
    background: #e8c3b6;
    border-color: #8a4634;
}
/* Very-late cancel: deeper red. */
.page-id-3727 .gt-cal--admin .gt-cal__dot--very-late {
    background: #dca896;
    border-color: #7a3a26;
}
/* Last-minute cancel: darker still. */
.page-id-3727 .gt-cal--admin .gt-cal__dot--last-minute {
    background: #c98a6e;
    border-color: #6b2e18;
}
/* No-show: strongest red. */
.page-id-3727 .gt-cal--admin .gt-cal__dot--no-show {
    background: #e85d4a;
    border-color: #4a0a02;
}

/* Past empty / available / quiet cells: the wash above already paints them.
   Suppress the avail label's gold pulse so the past avail cells don't draw
   the eye — they're frozen history, not actionable. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--past.gt-cal__cell--avail .gt-cal__lbl {
    opacity: 0.35;
}

/* Consult: the cell occupies a full grid row, but visually only one half
   is the booking. The booked half is warm wine-rose; the other half mirrors
   the pale-gold Available colour so the eye reads "30 minutes booked, 30
   minutes free". A solid brown left border anchors the whole hour as a
   Consult block. The default (top-half) variant is below; the bottom-half
   variant follows and inverts the gradient and text alignment. */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult {
    /* Single-layer background: wine top half, white bottom half, edge-to-edge.
       (The earlier 3px-inset two-layer scheme reserved a left column for an
       accent bar; with the bar suppressed, that reserved column read as a
       white stripe along the left edge. So we paint the gradient flush to
       the cell edge with no inset.) */
    background-color: #ffffff !important;
    background-image:
        linear-gradient(to bottom,
            #b06576 0%, #b06576 50%,
            #ffffff 50%, #ffffff 100%) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 100% 100% !important;
    color: #ffffff !important;
    border-left: 0 !important;
    position: relative !important;
    justify-content: flex-start !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}
/* Half-height dark-wine accent bar on the left edge. Painted as a pseudo-
   element so we can pin it to the top or bottom half independently of the
   cell's border. Default position: top half (matches a 1:00pm booking). */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 3px !important;
    height: 50% !important;
    background: #6f3540 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
/* Bottom-half variant: drop the accent bar into the lower half. */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult.gt-cal__cell--half-bottom::before {
    top: 50% !important;
}

/* Split-cell layout: a consult hour is divided into two stacked regions, each
   exactly half the cell height. The booked region carries the wine band and
   the parent name. The other region carries the pale-gold Available label and
   accepts clicks to book the unbooked half as a second consult. */
.page-id-3727 .gt-cal__cell--split {
    padding: 0 !important;
    /* Children are positioned absolutely; the cell itself does not lay them
       out with flex. The ::before accent bar still floats above the regions. */
}
.page-id-3727 .gt-cal__cell--split .gt-cal__region {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 0.3rem !important;
    border: 0 !important;
    font: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.15 !important;
    cursor: pointer !important;
    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* The booked region starts 3px from the left so it does not overlap the
   dark accent bar (which lives in the leftmost 3px column of the cell). */
.page-id-3727 .gt-cal__cell--split .gt-cal__region--booked {
    left: 3px !important;
    width: calc(100% - 3px) !important;
}
/* Region placement: the booked region sits in whichever half the booking
   occupies; the avail (or quiet) region fills the other half. */
.page-id-3727 .gt-cal__cell--split.gt-cal__cell--half-top    .gt-cal__region--booked { top: 0 !important; }
.page-id-3727 .gt-cal__cell--split.gt-cal__cell--half-top    .gt-cal__region--avail,
.page-id-3727 .gt-cal__cell--split.gt-cal__cell--half-top    .gt-cal__region--quiet  { top: 50% !important; }
.page-id-3727 .gt-cal__cell--split.gt-cal__cell--half-bottom .gt-cal__region--booked { top: 50% !important; }
.page-id-3727 .gt-cal__cell--split.gt-cal__cell--half-bottom .gt-cal__region--avail,
.page-id-3727 .gt-cal__cell--split.gt-cal__cell--half-bottom .gt-cal__region--quiet  { top: 0 !important; }

/* Booked region: wine fill, white text. Mirrors the original consult colour. */
.page-id-3727 .gt-cal__cell--split .gt-cal__region--booked {
    background: #b06576 !important;
    color: #ffffff !important;
}
.page-id-3727 .gt-cal__cell--split .gt-cal__region--booked:hover {
    background: #bc7382 !important;
}
.page-id-3727 .gt-cal__cell--split .gt-cal__region--booked .gt-cal__who {
    color: #ffffff !important;
}
/* Quarter-hour chip on the family-portal consult half-cell. Painted
   only when the consult starts at :15 or :45 (the off-half quarters
   that admin Manage Bookings can now produce). The chip rides in the
   top-right corner of the booked region as a small white pill so it
   reads as a quiet annotation against the wine wash. :00 / :30 starts
   are the canonical halves and carry no chip.

   Specificity note: must include the full
   .gt-cal__cell--booked.gt-nat--consult chain so this rule ties or
   beats the global ".gt-nat--consult *" rule at line ~2051 which
   force-paints every descendant of a consult cell in white. Without
   that chain the chip's number becomes white-on-white. June 2026. */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult .gt-cal__region--booked .gt-cal__qchip {
    position: absolute !important;
    top: 2px !important;
    right: 3px !important;
    padding: 0 5px !important;
    background: #ffffff !important;
    color: #4a1d27 !important;
    border: 1px solid #6f3540 !important;
    border-radius: 999px !important;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}
/* Available region: pale gold, golden-brown label -- identical look to a
   standard Available cell. The region stretches to the very left edge of the
   cell (left: 0) so no white sliver sits between it and the grid line. */
.page-id-3727 .gt-cal__cell--split .gt-cal__region--avail {
    background: #faf2e3 !important;
    color: #8e6a1f !important;
    left: 0 !important;
}
.page-id-3727 .gt-cal__cell--split .gt-cal__region--avail:hover {
    background: #f3e3bd !important;
}
/* Override the global ".gt-nat--consult *" rule that forces white on every
   descendant of a consult cell. The selector below carries the same
   .gt-cal__cell--booked.gt-nat--consult classes so it ties on specificity,
   then wins by source order. The avail half of a split consult cell is
   visually a standard Available band, so its label must be the golden-brown
   ink used in every other Available cell. */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult.gt-cal__cell--split .gt-cal__region--avail,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult.gt-cal__cell--split .gt-cal__region--avail * {
    color: #8e6a1f !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult.gt-cal__cell--split .gt-cal__region--avail .gt-cal__lbl {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    opacity: 1 !important;
}
/* Quiet region (other half is past or outside George's hours): plain neutral. */
.page-id-3727 .gt-cal__cell--split .gt-cal__region--quiet {
    background: #f4f2ec !important;
    cursor: default !important;
}

/* In split mode the cell's own background gradient is no longer needed -- the
   regions paint themselves. Suppress the gradient so it cannot leak through.
   Also suppress the global cell-hover brightness so that hovering the avail
   region does not tint the booked region (each region owns its own hover). */
.page-id-3727 .gt-cal__cell--split.gt-nat--consult {
    background-image: none !important;
    background-color: #ffffff !important;
}
.page-id-3727 .gt-cal__cell--split.gt-cal__cell--booked:hover {
    filter: none !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult:hover {
    filter: none !important;
    background-image:
        linear-gradient(to bottom,
            #bc7382 0%, #bc7382 50%,
            #ffffff 50%, #ffffff 100%),
        linear-gradient(#ffffff, #ffffff) !important;
}

/* Consult, bottom-half variant: the booked half is the LOWER half of the
   hour cell, the upper half is the free pale-gold band. The session text is
   pushed to the bottom of the cell so the parent name sits inside its own
   wine band, leaving the top half visually empty (and available for another
   consult to be booked at the top of the hour). */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult.gt-cal__cell--half-bottom {
    background-image:
        linear-gradient(to bottom,
            #ffffff 0%, #ffffff 50%,
            #b06576 50%, #b06576 100%),
        linear-gradient(#ffffff, #ffffff) !important;
    justify-content: flex-end !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult.gt-cal__cell--half-bottom:hover {
    background-image:
        linear-gradient(to bottom,
            #ffffff 0%, #ffffff 50%,
            #bc7382 50%, #bc7382 100%),
        linear-gradient(#ffffff, #ffffff) !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult * {
    color: #ffffff !important;
}
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult .gt-cal__who,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult .gt-cal__code,
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--consult .gt-cal__nat {
    color: #ffffff !important;
    opacity: 1 !important;
}
.page-id-3727 .gt-nat--consult {
    /* Pill version (used inside the modal) matches the cell colour scheme. */
    background-color: #b06576;
    color: #fff;
}

/* Legend / pills. */
.page-id-3727 .gt-cal__legend {
    margin-top: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    font-size: 0.82rem;
    align-items: center;
}
.page-id-3727 .gt-cal__legend-label {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    color: #6b6f76;
    margin-right: 0.25rem;
}
.page-id-3727 .gt-pill, .page-id-3727 .gt-nat {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    vertical-align: baseline;
}
.page-id-3727 .gt-pill--avail { background: #faf2e3; color: #8e6a1f; }
.page-id-3727 .gt-pill--quiet { background: #f4f2ec; color: #6b6f76; }
/* Single pill: white background, black text, hairline black border so the
   pill remains visible on any light surface. */
.page-id-3727 .gt-nat--single { background-color: #ffffff; color: #000000; border: 1px solid #000000; }

/* Subscriber booking flow: three pill-buttons to pick a nature.
   Pills render as outline-only in their rest state (so the user can clearly
   see which nature is which, but none is asserted yet). The chosen pill
   then fills in its full nature colour via the .is-active modifier. */
.page-id-3727 .gt-modal__choices {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.25rem 0 0.75rem 0;
}
/* Same outline-pill base style for both the nature choices and the
   half-hour selector (which is shown only when Consult is chosen). */
.page-id-3727 button.gt-nat--choice,
.page-id-3727 button.gt-nat--half {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid currentColor !important;
    cursor: pointer !important;
    padding: 0.28rem 0.85rem !important;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
/* Outline-rest text colour: dark accent per nature. */
.page-id-3727 button.gt-nat--choice.gt-nat--extra   { color: #a85518 !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--summer  { color: #6d8019 !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--consult,
.page-id-3727 button.gt-nat--half.gt-nat--consult   { color: #6f3540 !important; }
/* Hover lifts the outline pill toward its light tint without committing. */
.page-id-3727 button.gt-nat--choice.gt-nat--extra:hover   { background: #fbe6d2 !important; background-color: #fbe6d2 !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--summer:hover  { background: #eef5cf !important; background-color: #eef5cf !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--consult:hover,
.page-id-3727 button.gt-nat--half.gt-nat--consult:hover   { background: #efdee2 !important; background-color: #efdee2 !important; }
/* The active pill fills with its full background and switches text to white. */
.page-id-3727 button.gt-nat--choice.is-active.gt-nat--extra   { background: #e89243 !important; background-color: #e89243 !important; color: #ffffff !important; border-color: #a85518 !important; }
.page-id-3727 button.gt-nat--choice.is-active.gt-nat--summer  { background: #b8d041 !important; background-color: #b8d041 !important; color: #ffffff !important; border-color: #6d8019 !important; }
.page-id-3727 button.gt-nat--choice.is-active.gt-nat--consult,
.page-id-3727 button.gt-nat--half.is-active.gt-nat--consult   { background: #b06576 !important; background-color: #b06576 !important; color: #ffffff !important; border-color: #6f3540 !important; }
/* Package nature pill (offered to families with a session-package
   entitlement in place of Summer). Deep-teal palette keeps it distinct
   from Summer-olive and Extra-orange. */
.page-id-3727 button.gt-nat--choice.gt-nat--package        { color: #1a5045 !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--package:hover  { background: #d6ebe5 !important; background-color: #d6ebe5 !important; }
.page-id-3727 button.gt-nat--choice.is-active.gt-nat--package { background: #2d8674 !important; background-color: #2d8674 !important; color: #ffffff !important; border-color: #1a5045 !important; }
.page-id-3727 .gt-nat--package,
.page-id-3727 .gt-cal__cell--booked.gt-nat--package        { background-color: #2d8674; color: #ffffff; }
.page-id-3725 .gt-nat--package                             { background-color: #2d8674; }

/* Lite-portal nature pills: single, premium, intro. Same pattern as the
   extra/summer/consult/package pills above -- outline-rest gives the pill
   its accent text colour so the label is fully legible against the white
   fill; hover lifts to a light tint; :is-active fills to the full nature
   colour with white text. Palettes match the existing calendar-cell paint
   for each nature (single #3a1d52 purple; premium #7d4b8c wine-violet;
   intro #c2185b magenta) so a booked cell and its picker pill read as one
   family. Added because Lite portals were rendering these three pills with
   no explicit text colour, so the labels were falling through to inherited
   text and reading as invisible on the white fill. */
.page-id-3727 button.gt-nat--choice.gt-nat--single   { color: #3a1d52 !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--premium  { color: #7d4b8c !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--intro    { color: #c2185b !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--single:hover,
.page-id-3727 button.gt-nat--choice.gt-nat--single:focus-visible   { background: #e8ddf0 !important; background-color: #e8ddf0 !important; outline: none !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--premium:hover,
.page-id-3727 button.gt-nat--choice.gt-nat--premium:focus-visible  { background: #efe4f2 !important; background-color: #efe4f2 !important; outline: none !important; }
.page-id-3727 button.gt-nat--choice.gt-nat--intro:hover,
.page-id-3727 button.gt-nat--choice.gt-nat--intro:focus-visible    { background: #fbe1ec !important; background-color: #fbe1ec !important; outline: none !important; }
.page-id-3727 button.gt-nat--choice.is-active.gt-nat--single   { background: #3a1d52 !important; background-color: #3a1d52 !important; color: #ffffff !important; border-color: #3a1d52 !important; }
.page-id-3727 button.gt-nat--choice.is-active.gt-nat--premium  { background: #7d4b8c !important; background-color: #7d4b8c !important; color: #ffffff !important; border-color: #7d4b8c !important; }
.page-id-3727 button.gt-nat--choice.is-active.gt-nat--intro    { background: #c2185b !important; background-color: #c2185b !important; color: #ffffff !important; border-color: #c2185b !important; }

/* Half-hour selector row: same flex layout as the nature row, with a soft
   wine-tinted divider above it so it reads as a follow-up choice. */
.page-id-3727 .gt-modal__choices--halves {
    border-top: 1px dashed rgba(111, 53, 64, 0.25);
    padding-top: 0.55rem;
    margin-top: 0.1rem !important;
}
.page-id-3727 .gt-modal__choices--halves[hidden] { display: none !important; }

/* Disabled Confirm button: muted text, no hover lift. */
.page-id-3727 .gt-modal button.gt-btn[disabled],
.page-id-3727 .gt-modal button.gt-btn[disabled]:hover {
    background: #f6f4ef !important;
    background-color: #f6f4ef !important;
    color: #b8b4ab !important;
    border-color: #e4dfd5 !important;
    cursor: not-allowed !important;
}

/* Inline code chip used on the hub card and in modals. */
.page-id-3727 .gt-card__code, .page-id-3727 .gt-modal__code {
    display: inline-block;
    background: #f4f2ec;
    color: #14213d;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    margin-left: 0.35rem;
}
.page-id-3727 .gt-card__nat { margin-left: 0.35rem; }

/* Modal: smaller, softer, slightly translucent panel with rounded corners.
   When opened for a booked session, the backdrop tints to a darker shade of
   the session's own nature colour, so the panel reads as belonging to it. */
.page-id-3727 .gt-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 33, 61, 0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.page-id-3727 .gt-modal[data-nature="slot"]    { background: rgba(44, 58, 85, 0.55); }
.page-id-3727 .gt-modal[data-nature="extra"]   { background: rgba(168, 85, 24, 0.55); }
.page-id-3727 .gt-modal[data-nature="makeup"]  { background: rgba(61, 107, 105, 0.55); }
.page-id-3727 .gt-modal[data-nature="intro"]   { background: rgba(136, 14, 79, 0.55); }
.page-id-3727 .gt-modal[data-nature="series"]  { background: rgba(43, 43, 43, 0.55); }
.page-id-3727 .gt-modal[data-nature="floater"] { background: rgba(96, 90, 133, 0.55); }
.page-id-3727 .gt-modal[data-nature="consult"] { background: rgba(111, 53, 64, 0.55); }
.page-id-3727 .gt-modal[data-nature="premium"] { background: rgba(74, 40, 96, 0.55); }
.page-id-3727 .gt-modal[data-nature="summer"]  { background: rgba(109, 128, 25, 0.55); }
.page-id-3727 .gt-modal[data-nature="single"]  { background: rgba(0, 0, 0, 0.55); }

/* Per-nature panel chrome: top border and drop-shadow share the same dark
   accent colour as the cell's left-edge stripe. */
.page-id-3727 .gt-modal[data-nature="slot"]    .gt-modal__panel { border-top-color: #2c3a55; box-shadow: 0 12px 36px rgba(44, 58, 85, 0.45); }
.page-id-3727 .gt-modal[data-nature="extra"]   .gt-modal__panel { border-top-color: #a85518; box-shadow: 0 12px 36px rgba(168, 85, 24, 0.45); }
.page-id-3727 .gt-modal[data-nature="makeup"]  .gt-modal__panel { border-top-color: #3d6b69; box-shadow: 0 12px 36px rgba(61, 107, 105, 0.45); }
.page-id-3727 .gt-modal[data-nature="intro"]   .gt-modal__panel { border-top-color: #880e4f; box-shadow: 0 12px 36px rgba(136, 14, 79, 0.45); }
.page-id-3727 .gt-modal[data-nature="series"]  .gt-modal__panel { border-top-color: #2b2b2b; box-shadow: 0 12px 36px rgba(43, 43, 43, 0.45); }
.page-id-3727 .gt-modal[data-nature="floater"] .gt-modal__panel { border-top-color: #605a85; box-shadow: 0 12px 36px rgba(96, 90, 133, 0.45); }
.page-id-3727 .gt-modal[data-nature="consult"] .gt-modal__panel { border-top-color: #6f3540; box-shadow: 0 12px 36px rgba(111, 53, 64, 0.45); }
.page-id-3727 .gt-modal[data-nature="premium"] .gt-modal__panel { border-top-color: #4a2860; box-shadow: 0 12px 36px rgba(74, 40, 96, 0.45); }
.page-id-3727 .gt-modal[data-nature="summer"]  .gt-modal__panel { border-top-color: #6d8019; box-shadow: 0 12px 36px rgba(109, 128, 25, 0.45); }
.page-id-3727 .gt-modal[data-nature="single"]  .gt-modal__panel { border-top-color: #000000; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }

/* Per-nature eyebrow tint: "Booked session" picks up the dark accent. */
.page-id-3727 .gt-modal[data-nature="slot"]    .gt-modal__eyebrow { color: #2c3a55; }
.page-id-3727 .gt-modal[data-nature="extra"]   .gt-modal__eyebrow { color: #a85518; }
.page-id-3727 .gt-modal[data-nature="makeup"]  .gt-modal__eyebrow { color: #3d6b69; }
.page-id-3727 .gt-modal[data-nature="intro"]   .gt-modal__eyebrow { color: #880e4f; }
.page-id-3727 .gt-modal[data-nature="series"]  .gt-modal__eyebrow { color: #2b2b2b; }
.page-id-3727 .gt-modal[data-nature="floater"] .gt-modal__eyebrow { color: #605a85; }
.page-id-3727 .gt-modal[data-nature="consult"] .gt-modal__eyebrow { color: #6f3540; }
.page-id-3727 .gt-modal[data-nature="premium"] .gt-modal__eyebrow { color: #4a2860; }
.page-id-3727 .gt-modal[data-nature="summer"]  .gt-modal__eyebrow { color: #6d8019; }
.page-id-3727 .gt-modal[data-nature="single"]  .gt-modal__eyebrow { color: #000000; }

/* Per-nature button rest: text = dark accent, border = dark accent at low alpha. */
.page-id-3727 .gt-modal[data-nature="slot"]    button.gt-btn { color: #2c3a55 !important; border-color: rgba(44, 58, 85, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="extra"]   button.gt-btn { color: #a85518 !important; border-color: rgba(168, 85, 24, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="makeup"]  button.gt-btn { color: #3d6b69 !important; border-color: rgba(61, 107, 105, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="intro"]   button.gt-btn { color: #880e4f !important; border-color: rgba(136, 14, 79, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="series"]  button.gt-btn { color: #2b2b2b !important; border-color: rgba(43, 43, 43, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="floater"] button.gt-btn { color: #605a85 !important; border-color: rgba(96, 90, 133, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="consult"] button.gt-btn { color: #6f3540 !important; border-color: rgba(111, 53, 64, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="premium"] button.gt-btn { color: #4a2860 !important; border-color: rgba(74, 40, 96, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="summer"]  button.gt-btn { color: #6d8019 !important; border-color: rgba(109, 128, 25, 0.45) !important; }
.page-id-3727 .gt-modal[data-nature="single"]  button.gt-btn { color: #000000 !important; border-color: rgba(0, 0, 0, 0.45) !important; }

/* Per-nature button hover: background = light tint, border = full dark accent. */
.page-id-3727 .gt-modal[data-nature="slot"]    button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="slot"]    button.gt-btn:active { background: #e3e7ef !important; background-color: #e3e7ef !important; border-color: #2c3a55 !important; color: #2c3a55 !important; }
.page-id-3727 .gt-modal[data-nature="extra"]   button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="extra"]   button.gt-btn:active { background: #fbe6d2 !important; background-color: #fbe6d2 !important; border-color: #a85518 !important; color: #a85518 !important; }
.page-id-3727 .gt-modal[data-nature="makeup"]  button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="makeup"]  button.gt-btn:active { background: #dfeceb !important; background-color: #dfeceb !important; border-color: #3d6b69 !important; color: #3d6b69 !important; }
.page-id-3727 .gt-modal[data-nature="intro"]   button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="intro"]   button.gt-btn:active { background: #fce4ec !important; background-color: #fce4ec !important; border-color: #880e4f !important; color: #880e4f !important; }
.page-id-3727 .gt-modal[data-nature="series"]  button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="series"]  button.gt-btn:active { background: #e8e8e8 !important; background-color: #e8e8e8 !important; border-color: #2b2b2b !important; color: #2b2b2b !important; }
.page-id-3727 .gt-modal[data-nature="floater"] button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="floater"] button.gt-btn:active { background: #ece9f3 !important; background-color: #ece9f3 !important; border-color: #605a85 !important; color: #605a85 !important; }
.page-id-3727 .gt-modal[data-nature="consult"] button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="consult"] button.gt-btn:active { background: #efdee2 !important; background-color: #efdee2 !important; border-color: #6f3540 !important; color: #6f3540 !important; }
.page-id-3727 .gt-modal[data-nature="premium"] button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="premium"] button.gt-btn:active { background: #e5dceb !important; background-color: #e5dceb !important; border-color: #4a2860 !important; color: #4a2860 !important; }
.page-id-3727 .gt-modal[data-nature="summer"]  button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="summer"]  button.gt-btn:active { background: #eef5cf !important; background-color: #eef5cf !important; border-color: #6d8019 !important; color: #6d8019 !important; }
.page-id-3727 .gt-modal[data-nature="single"]  button.gt-btn:hover, .page-id-3727 .gt-modal[data-nature="single"]  button.gt-btn:active { background: #f4f4f4 !important; background-color: #f4f4f4 !important; border-color: #000000 !important; color: #000000 !important; }
.page-id-3727 .gt-modal[hidden] { display: none; }
.page-id-3727 .gt-modal__panel {
    background: rgba(255, 255, 255, 0.94);
    max-width: 340px;
    width: 100%;
    padding: 1rem 1.15rem 1rem;
    border-top: 3px solid #14213d;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 12px 36px rgba(20, 33, 61, 0.22);
}
.page-id-3727 .gt-modal__close {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    color: #6b6f76;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.45rem;
}
.page-id-3727 .gt-modal__eyebrow {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a8552c;
    margin: 0 0 0.25rem 0;
}
.page-id-3727 .gt-modal__when {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    color: #14213d;
    margin: 0 0 0.15rem 0;
}
.page-id-3727 .gt-modal__who { color: #3b4a6b; margin: 0 0 0.3rem 0; font-size: 0.92rem; }
.page-id-3727 .gt-modal__meta { color: #6b6f76; font-size: 0.82rem; margin: 0 0 0.75rem 0; }

/* Pacific/Home time-zone pill pair on the Next Session card (hub).
   The hub lives on page 3725 (not 3727 \u2014 3727 is the bookings
   calendar modal context). Absolutely positioned at the top-right of
   the card so the eyebrow line and the card height are completely
   unchanged. Amber palette throughout, matching the eyebrow accent
   (#a8552c) and the rest of the GeorgeTutor visual language.
   Active pill = filled amber + white text; inactive pill = transparent
   + amber text. Defaults to PDT on every render. June 2026. */
.page-id-3725 #gt-next-session { position: relative; }
/* Tiny pill pair, sized to match the WE04P code chip alongside it.
   No heavy track \u2014 the pills sit directly on the card surface with
   a hairline border each, so they read as two small chips, not a chunky
   capsule. Active pill fills with the panel's eyebrow color (which is
   already the nature\u2019s tint via per-nature overrides elsewhere in
   portal.css). Inactive pill is white with a hairline border. Defaults
   to PDT on every render. */
.page-id-3725 .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;
}
.page-id-3725 .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;
}
.page-id-3725 .gt-tz-pill:hover { color: #14213d; border-color: #14213d; }
.page-id-3725 .gt-tz-pill:focus-visible {
    outline: 2px solid #a8552c;
    outline-offset: 2px;
}
/* Active = filled in the panel's eyebrow color. We read the current
   computed eyebrow color via a per-nature override (already defined in
   portal.css for slot/extra/makeup/intro/series/floater/consult/premium/
   summer/single). Default fallback paints a restrained navy. */
.page-id-3725 .gt-tz-pill.is-active {
    background: #14213d;
    color: #ffffff;
    border-color: #14213d;
}
.page-id-3725 .gt-tz-pill.is-active:hover { background: #14213d; }
/* Per-nature active fill so the active pill matches the eyebrow color of
   whichever nature the booking carries. Mirrors the eyebrow color rules
   defined for the gt-modal context. */
.page-id-3725 .gt-next[data-nature="slot"]    .gt-tz-pill.is-active { background: #2c3a55; border-color: #2c3a55; }
.page-id-3725 .gt-next[data-nature="extra"]   .gt-tz-pill.is-active { background: #a85518; border-color: #a85518; }
.page-id-3725 .gt-next[data-nature="makeup"]  .gt-tz-pill.is-active { background: #3d6b69; border-color: #3d6b69; }
.page-id-3725 .gt-next[data-nature="intro"]   .gt-tz-pill.is-active { background: #880e4f; border-color: #880e4f; }
.page-id-3725 .gt-next[data-nature="series"]  .gt-tz-pill.is-active { background: #2b2b2b; border-color: #2b2b2b; }
.page-id-3725 .gt-next[data-nature="floater"] .gt-tz-pill.is-active { background: #605a85; border-color: #605a85; }
.page-id-3725 .gt-next[data-nature="consult"] .gt-tz-pill.is-active { background: #6f3540; border-color: #6f3540; }
.page-id-3725 .gt-next[data-nature="premium"] .gt-tz-pill.is-active { background: #4a2860; border-color: #4a2860; }
.page-id-3725 .gt-next[data-nature="summer"]  .gt-tz-pill.is-active { background: #6d8019; border-color: #6d8019; }
.page-id-3725 .gt-next[data-nature="single"]  .gt-tz-pill.is-active { background: #000000; border-color: #000000; }

/* ------------------------------------------------------------
   Bookings page (page-id-3727) — repeat the TZ pill pair in the
   whitespace below the "Bookings" title, to the LEFT of the
   close-X (which lives at right:14px, width:36px → occupies
   right:14..50px). Position absolutely inside .entry-header
   (already position:relative) so the existing vertical
   whitespace is unchanged — no padding/margin added to the
   header itself. Pills sit at top:0.85rem to align with the X
   button's optical center; right:60px clears the X with a 10px
   gutter. The pills reuse the .gt-tz-pill type styles from the
   hub but the page-id-3725 prefix means we need a parallel
   rule set here for page-id-3727. The container class is
   .gt-bookings-tz-pills (injected by portal.js's
   gtInjectBookingsTzPills). Active fill is a restrained navy
   — there is no "nature" context on the bookings page header
   so per-nature tints don't apply. */
.page-id-3727 .gt-bookings-tz-pills {
    /* Pinned to the bottom edge of .entry-header and centered
       horizontally so the pair sits in the existing whitespace
       between the "Bookings" title and the "This week" / week-range
       toolbar. translateY pulls them just past the header's
       border-bottom into the existing margin-bottom gap, so no new
       vertical space is introduced — the gap was already there.
       z-index lifts them above any incidental sibling. */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + 0.2rem));
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    z-index: 2;
    background: transparent;
    border: 0;
    padding: 0;
    pointer-events: auto;
}
.page-id-3727 .gt-bookings-tz-pills .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;
}
.page-id-3727 .gt-bookings-tz-pills .gt-tz-pill:hover { color: #14213d; border-color: #14213d; }
.page-id-3727 .gt-bookings-tz-pills .gt-tz-pill:focus-visible {
    outline: 2px solid #a8552c;
    outline-offset: 2px;
}
.page-id-3727 .gt-bookings-tz-pills .gt-tz-pill.is-active {
    background: #14213d;
    color: #ffffff;
    border-color: #14213d;
}
.page-id-3727 .gt-bookings-tz-pills .gt-tz-pill.is-active:hover { background: #14213d; }

/* Admin View Bookings tz pill pair (June 2026).
   When the admin views /portal-bookings/?gt_view_as_exit=1 the page
   markup is the same page-id-3727 but the family pills above don't
   render (no family context). Instead portal.js injects a parallel
   pill pair as the FIRST child of #gt-cal .gt-cal__toolbar, i.e.
   ABOVE the "This week" button. We place it in-flow (centered row)
   rather than absolute so it adapts cleanly to PC, landscape phone,
   and portrait phone widths without overlapping the toolbar buttons.
   Vertical whitespace is held minimal so the calendar grid does not
   shift down noticeably. */
.page-id-3727 .gt-admin-bookings-tz-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0 2px;
    margin: 0;
    line-height: 1;
    background: transparent;
    border: 0;
}
.page-id-3727 .gt-admin-bookings-tz-pills .gt-tz-pills {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.page-id-3727 .gt-admin-bookings-tz-pills .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;
}
.page-id-3727 .gt-admin-bookings-tz-pills .gt-tz-pill:hover { color: #14213d; border-color: #14213d; }
.page-id-3727 .gt-admin-bookings-tz-pills .gt-tz-pill:focus-visible {
    outline: 2px solid #a8552c;
    outline-offset: 2px;
}
.page-id-3727 .gt-admin-bookings-tz-pills .gt-tz-pill.is-active {
    background: #14213d;
    color: #ffffff;
    border-color: #14213d;
}
.page-id-3727 .gt-admin-bookings-tz-pills .gt-tz-pill.is-active:hover { background: #14213d; }

/* Landscape phone: tighten padding so the toolbar reads as one tidy
   stack above the calendar grid. */
@media (max-width: 900px) and (orientation: landscape) {
    .page-id-3727 .gt-admin-bookings-tz-pills { padding: 3px 0 1px; }
    .page-id-3727 .gt-admin-bookings-tz-pills .gt-tz-pill {
        padding: 1px 7px 2px !important;
        font-size: 0.68rem !important;
    }
}
/* Portrait phone: even tighter so the calendar row beneath stays
   immediately visible without scrolling. */
@media (max-width: 720px) and (orientation: portrait) {
    .page-id-3727 .gt-admin-bookings-tz-pills { padding: 3px 0 1px; }
    .page-id-3727 .gt-admin-bookings-tz-pills .gt-tz-pill {
        padding: 1px 7px 2px !important;
        font-size: 0.68rem !important;
    }
}

.page-id-3727 .gt-modal__actions { margin: 0.7rem 0 0 0; display: flex; gap: 0.5rem; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; }
.page-id-3727 .gt-modal__actions > .gt-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
/* Single-button row variant: used for the Join-on-Zoom row above the
   Cancel/Keep pair on a booked-session modal. Natural width, centered.
   Margin-bottom collapses the gap between the two rows so the pair
   reads as one action block. */
.page-id-3727 .gt-modal__actions--single { justify-content: center; margin-bottom: 0; }
.page-id-3727 .gt-modal__actions--single > .gt-btn { flex: 0 0 auto; }
.page-id-3727 .gt-modal__actions--single + .gt-modal__actions { margin-top: 0.5rem; }

/* Modal buttons: same restrained treatment as Earlier/Later nav buttons.
   White rest, pale fawn on hover, no dark fills, no sticky focus. */
.page-id-3727 .gt-modal button.gt-btn,
.page-id-3727 .gt-modal button.gt-btn:link,
.page-id-3727 .gt-modal button.gt-btn:visited,
.page-id-3727 .gt-modal button.gt-btn:focus,
.page-id-3727 .gt-modal button.gt-btn:focus-visible,
.page-id-3727 .gt-modal a.gt-btn,
.page-id-3727 .gt-modal a.gt-btn:link,
.page-id-3727 .gt-modal a.gt-btn:visited,
.page-id-3727 .gt-modal a.gt-btn:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #a8552c !important;
    border: 1px solid #d9c4a6 !important;
    padding: 0.35rem 0.85rem !important;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    text-transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.page-id-3727 .gt-modal button.gt-btn:hover,
.page-id-3727 .gt-modal button.gt-btn:active,
.page-id-3727 .gt-modal a.gt-btn:hover,
.page-id-3727 .gt-modal a.gt-btn:active {
    background: #faf2e3 !important;
    background-color: #faf2e3 !important;
    background-image: none !important;
    border-color: #a8552c !important;
    color: #8a3f1e !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Danger variant inside the modal still uses the restrained treatment, just
   with a slightly different border to hint at the more weighty action. */
.page-id-3727 .gt-modal button.gt-btn--danger,
.page-id-3727 .gt-modal a.gt-btn--danger {
    border-color: #c89a82 !important;
    color: #8a3f1e !important;
}
.page-id-3727 .gt-modal button.gt-btn--danger:hover,
.page-id-3727 .gt-modal a.gt-btn--danger:hover {
    border-color: #8a3f1e !important;
    color: #6e2f12 !important;
}

/* Phone width (3-day view): tighten everything for narrow screens.
   Earlier/Later nav buttons and modal buttons shrink their font and padding so
   the text fits inside the container at narrow widths. */
@media (max-width: 720px) {
    .page-id-3727 .gt-cal__hour { padding: 0.05rem 0.05rem; gap: 0.12rem; }
    .page-id-3727 .gt-cal__hour-n { font-size: 0.82rem; }
    .page-id-3727 .gt-cal__hour-ap { font-size: 0.55rem; }
    .page-id-3727 .gt-cal__cell { min-height: 32px; padding: 0.1rem 0.22rem; }
    .page-id-3727 .gt-cal__who { font-size: 0.62rem; }
    .page-id-3727 .gt-cal__code { font-size: 0.55rem; }
    .page-id-3727 .gt-cal__nat { font-size: 0.53rem; }
    .page-id-3727 .gt-cal__head { padding: 0.18rem 0.12rem; min-height: 2.3rem; }
    .page-id-3727 .gt-cal__head-d { font-size: 0.6rem; }
    .page-id-3727 .gt-cal__head-n { font-size: 0.85rem; }
    .page-id-3727 .gt-cal__head--today .gt-cal__head-n { font-size: 0.78rem; padding: 0.02rem 0.32rem; }

    /* Toolbar: stack the nav-button label into two lines on phone portrait,
       word on top and arrow underneath, both centred. Both buttons get the
       same min-width so the word sits centred in an identical rectangle
       regardless of whether it reads "Last" or "Next", and the two arrows
       use the exact same font-size and a fixed line-height so they are
       visually identical. */
    .page-id-3727 .gt-cal__toolbar { gap: 0.3rem; }
    .page-id-3727 .gt-cal__nav-wide   { display: none; }
    .page-id-3727 .gt-cal__nav-narrow {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }
    .page-id-3727 .gt-cal__nav-word {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    .page-id-3727 .gt-cal__nav-arrow {
        display: inline-block !important;
        text-align: center !important;
        width: 1rem !important;
        height: 1rem !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        margin: 0.1rem auto 0 !important;
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
        font-weight: 600 !important;
        font-style: normal !important;
        font-variant: normal !important;
        font-feature-settings: normal !important;
        letter-spacing: 0 !important;
    }
    /* Both arrow glyphs are written as \u2192 in markup; the Last button
       carries this modifier which mirrors the glyph horizontally. Using a
       single glyph guarantees identical width, weight, and stroke. */
    .page-id-3727 .gt-cal__nav-arrow--flip {
        transform: scaleX(-1) !important;
        -webkit-transform: scaleX(-1) !important;
    }
    .page-id-3727 button.gt-cal__nav,
    .page-id-3727 button.gt-cal__nav:link,
    .page-id-3727 button.gt-cal__nav:visited,
    .page-id-3727 button.gt-cal__nav:focus {
        font-size: 0.72rem !important;
        padding: 0.18rem 0.4rem !important;
        letter-spacing: 0 !important;
        line-height: 1.05 !important;
        min-width: 3.5rem !important;
        text-align: center !important;
    }
    .page-id-3727 .gt-cal__range { font-size: 0.85rem; text-align: center; }

    /* Modal: smaller padding and slightly smaller fonts so buttons fit.
       The panel widens slightly on phone so the three nature pills each get
       enough horizontal room to read clearly. */
    .page-id-3727 .gt-modal { padding: 0.5rem; }
    .page-id-3727 .gt-modal__panel { padding: 0.85rem 0.85rem 0.85rem; max-width: 360px; width: 100%; }
    .page-id-3727 .gt-modal__when { font-size: 0.98rem; }
    .page-id-3727 .gt-modal__who { font-size: 0.85rem; }
    .page-id-3727 .gt-modal__meta { font-size: 0.78rem; }
    /* Modal action buttons on phone: tighter padding and a guaranteed single
       line. Without nowrap, "Confirm booking" wraps to two lines at narrow
       widths despite the equal-flex rule. */
    .page-id-3727 .gt-modal button.gt-btn,
    .page-id-3727 .gt-modal a.gt-btn {
        font-size: 0.72rem !important;
        padding: 0.28rem 0.45rem !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
    .page-id-3727 .gt-modal__actions { gap: 0.4rem; }

    /* Choice pills on phone: distribute evenly across the panel width.
       Each pill flexes to share the row equally so the three nature pills
       fill the panel from edge to edge, generously and symmetrically. */
    .page-id-3727 .gt-modal__choices {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem !important;
        margin: 0.2rem 0 0.55rem 0 !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }
    .page-id-3727 .gt-modal__choices > .gt-nat--choice,
    .page-id-3727 .gt-modal__choices > .gt-nat--half {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0.3rem 0.25rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.03em !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Get-a-session chooser pills on phone-portrait: keep the 2x2 grid
       and the full 999px pill shape from the base rule. The base rule's
       width:100% means each button now fills its grid cell (~150px at
       phone width), giving the pill plenty of horizontal room for label
       and cost. We just tighten padding and font for the narrower panel. */
    .page-id-3727 .gt-modal--get .gt-get__opts {
        gap: 0.4rem 0.45rem !important;
        margin: 0.5rem 0 0.75rem 0 !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        gap: 0.3rem !important;
        min-width: 0 !important;
        min-height: 3.0rem !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt--stacked {
        padding: 0.34rem 0.4rem !important;
        gap: 0.1rem !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt-brand {
        max-width: 4.6rem !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt-label {
        white-space: nowrap !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt-line {
        gap: 0.25rem !important;
    }

    /* Hub next-session panel: mirror the phone treatment so "Cancel session"
       and "Join on Zoom" stay on a single line each. */
    .page-id-3725 .gt-modal__panel { padding: 0.85rem 0.95rem 0.85rem; max-width: 320px; }
    .page-id-3725 .gt-modal__when { font-size: 0.98rem; }
    .page-id-3725 .gt-modal__who { font-size: 0.85rem; }
    .page-id-3725 .gt-modal__meta { font-size: 0.78rem; }
    .page-id-3725 .gt-modal__panel a.gt-btn,
    .page-id-3725 .gt-modal__panel button.gt-btn {
        font-size: 0.72rem !important;
        padding: 0.28rem 0.45rem !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
    .page-id-3725 .gt-modal__actions { gap: 0.4rem; }

    /* Bookings page phone-portrait: keep pills CENTERED horizontally
       (same as desktop) and keep the same gap between them. Only the
       vertical position changes: raise them so they sit in the
       whitespace above "This week", well clear of the toolbar.
       Anchored at bottom:0 of the header. The calc lifts them by
       an extra 5px above the half-pill translation, per user request
       ("about 5 pixels or so higher") so they don't touch the
       "This week" button. The toolbar's vertical position is
       unchanged \u2014 we are only moving the pills. */
    .page-id-3727 .gt-bookings-tz-pills {
        transform: translate(-50%, calc(50% - 5px)) !important;
    }
}


/* Phone-landscape (721px - 900px): the bookings page is too wide for the
   phone-portrait media query above but still narrow enough that the
   default get-session chooser pill padding and font cause labels to
   overflow. Apply the same compact 2x2 treatment so the chooser reads
   consistently across both phone orientations. The booking-modal nature
   pills (.gt-nat--choice) already nowrap, but get a matching small tweak
   for parity. */
@media (min-width: 721px) and (max-width: 900px) {
    .page-id-3727 .gt-modal--get .gt-get__opts {
        gap: 0.45rem 0.5rem !important;
        margin: 0.6rem 0 0.85rem 0 !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt {
        padding: 0.32rem 0.6rem !important;
        font-size: 0.86rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        gap: 0.32rem !important;
        min-width: 0 !important;
        min-height: 3.2rem !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt--stacked {
        padding: 0.36rem 0.5rem !important;
        gap: 0.12rem !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt-brand {
        max-width: 5rem !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt-label {
        white-space: nowrap !important;
    }
    .page-id-3727 .gt-modal--get .gt-get__opt-line {
        gap: 0.28rem !important;
    }

    /* Bookings page phone-landscape (721\u2013900px): same fix as the
       portrait override above. Keep pills centered with the same gap;
       just raise them into the existing whitespace above "This week". */
    .page-id-3727 .gt-bookings-tz-pills {
        transform: translate(-50%, 10%) !important;
    }
}


/* ===========================================================================
   Hub "next session" panel (page 3725): mirrors the booked-session modal
   panel chrome exactly. The data-nature attribute is set on the panel element
   itself (rather than on a wrapping .gt-modal), so the per-nature theming is
   keyed off .gt-modal__panel[data-nature="..."] selectors here.
   ========================================================================== */
.page-id-3725 .gt-modal__panel {
    background: rgba(255, 255, 255, 0.98);
    max-width: 340px;
    width: 100%;
    padding: 1rem 1.15rem 1rem;
    border-top: 3px solid #14213d;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 12px 36px rgba(20, 33, 61, 0.22);
    margin: 1.25rem 0;
}
.page-id-3725 .gt-modal__eyebrow {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a8552c;
    margin: 0 0 0.25rem 0;
}
.page-id-3725 .gt-modal__when {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    color: #14213d;
    margin: 0 0 0.15rem 0;
}
.page-id-3725 .gt-modal__who { color: #3b4a6b; margin: 0 0 0.3rem 0; font-size: 0.92rem; }
.page-id-3725 .gt-modal__meta { color: #6b6f76; font-size: 0.82rem; margin: 0 0 0.75rem 0; }
.page-id-3725 .gt-modal__actions { margin: 0.7rem 0 0 0; display: flex; gap: 0.5rem; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; }
.page-id-3725 .gt-modal__actions > .gt-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
/* Single-button row variant -- see hub equivalent above for rationale. */
.page-id-3725 .gt-modal__actions--single { justify-content: center; margin-bottom: 0; }
.page-id-3725 .gt-modal__actions--single > .gt-btn { flex: 0 0 auto; }
.page-id-3725 .gt-modal__actions--single + .gt-modal__actions { margin-top: 0.5rem; }
.page-id-3725 .gt-modal__code {
    display: inline-block;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    background: #f1ede2;
    color: #6b6f76;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.3rem;
}

/* Hub buttons: same restrained treatment as modal buttons. */
.page-id-3725 .gt-modal__panel a.gt-btn,
.page-id-3725 .gt-modal__panel a.gt-btn:link,
.page-id-3725 .gt-modal__panel a.gt-btn:visited,
.page-id-3725 .gt-modal__panel a.gt-btn:focus,
.page-id-3725 .gt-modal__panel a.gt-btn:focus-visible,
.page-id-3725 .gt-modal__panel button.gt-btn,
.page-id-3725 .gt-modal__panel button.gt-btn:link,
.page-id-3725 .gt-modal__panel button.gt-btn:visited,
.page-id-3725 .gt-modal__panel button.gt-btn:focus,
.page-id-3725 .gt-modal__panel button.gt-btn:focus-visible {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #a8552c !important;
    border: 1px solid #d9c4a6 !important;
    padding: 0.35rem 0.85rem !important;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    text-transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.page-id-3725 .gt-modal__panel a.gt-btn:hover,
.page-id-3725 .gt-modal__panel a.gt-btn:active,
.page-id-3725 .gt-modal__panel button.gt-btn:hover,
.page-id-3725 .gt-modal__panel button.gt-btn:active {
    background: #faf2e3 !important;
    background-color: #faf2e3 !important;
    background-image: none !important;
    border-color: #a8552c !important;
    color: #8a3f1e !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Per-nature top border + drop shadow (matches modal). */
.page-id-3725 .gt-modal__panel[data-nature="slot"]    { border-top-color: #2c3a55; box-shadow: 0 12px 36px rgba(44, 58, 85, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="extra"]   { border-top-color: #a85518; box-shadow: 0 12px 36px rgba(168, 85, 24, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="makeup"]  { border-top-color: #3d6b69; box-shadow: 0 12px 36px rgba(61, 107, 105, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="intro"]   { border-top-color: #880e4f; box-shadow: 0 12px 36px rgba(136, 14, 79, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="series"]  { border-top-color: #2b2b2b; box-shadow: 0 12px 36px rgba(43, 43, 43, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="floater"] { border-top-color: #605a85; box-shadow: 0 12px 36px rgba(96, 90, 133, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="consult"] { border-top-color: #6f3540; box-shadow: 0 12px 36px rgba(111, 53, 64, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="premium"] { border-top-color: #4a2860; box-shadow: 0 12px 36px rgba(74, 40, 96, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="summer"]  { border-top-color: #6d8019; box-shadow: 0 12px 36px rgba(109, 128, 25, 0.45); }
.page-id-3725 .gt-modal__panel[data-nature="single"]  { border-top-color: #000000; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }

/* Per-nature eyebrow tint (matches modal). */
.page-id-3725 .gt-modal__panel[data-nature="slot"]    .gt-modal__eyebrow { color: #2c3a55; }
.page-id-3725 .gt-modal__panel[data-nature="extra"]   .gt-modal__eyebrow { color: #a85518; }
.page-id-3725 .gt-modal__panel[data-nature="makeup"]  .gt-modal__eyebrow { color: #3d6b69; }
.page-id-3725 .gt-modal__panel[data-nature="intro"]   .gt-modal__eyebrow { color: #880e4f; }
.page-id-3725 .gt-modal__panel[data-nature="series"]  .gt-modal__eyebrow { color: #2b2b2b; }
.page-id-3725 .gt-modal__panel[data-nature="floater"] .gt-modal__eyebrow { color: #605a85; }
.page-id-3725 .gt-modal__panel[data-nature="consult"] .gt-modal__eyebrow { color: #6f3540; }
.page-id-3725 .gt-modal__panel[data-nature="premium"] .gt-modal__eyebrow { color: #4a2860; }
.page-id-3725 .gt-modal__panel[data-nature="summer"]  .gt-modal__eyebrow { color: #6d8019; }
.page-id-3725 .gt-modal__panel[data-nature="single"]  .gt-modal__eyebrow { color: #000000; }

/* Per-nature button rest (matches modal). */
.page-id-3725 .gt-modal__panel[data-nature="slot"]    a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="slot"]    button.gt-btn { color: #2c3a55 !important; border-color: rgba(44, 58, 85, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="extra"]   a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="extra"]   button.gt-btn { color: #a85518 !important; border-color: rgba(168, 85, 24, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="makeup"]  a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="makeup"]  button.gt-btn { color: #3d6b69 !important; border-color: rgba(61, 107, 105, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="intro"]   a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="intro"]   button.gt-btn { color: #880e4f !important; border-color: rgba(136, 14, 79, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="series"]  a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="series"]  button.gt-btn { color: #2b2b2b !important; border-color: rgba(43, 43, 43, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="floater"] a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="floater"] button.gt-btn { color: #605a85 !important; border-color: rgba(96, 90, 133, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="consult"] a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="consult"] button.gt-btn { color: #6f3540 !important; border-color: rgba(111, 53, 64, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="premium"] a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="premium"] button.gt-btn { color: #4a2860 !important; border-color: rgba(74, 40, 96, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="summer"]  a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="summer"]  button.gt-btn { color: #6d8019 !important; border-color: rgba(109, 128, 25, 0.45) !important; }
.page-id-3725 .gt-modal__panel[data-nature="single"]  a.gt-btn, .page-id-3725 .gt-modal__panel[data-nature="single"]  button.gt-btn { color: #000000 !important; border-color: rgba(0, 0, 0, 0.45) !important; }

/* Per-nature button hover (matches modal). */
.page-id-3725 .gt-modal__panel[data-nature="slot"]    a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="slot"]    button.gt-btn:hover { background: #e3e7ef !important; background-color: #e3e7ef !important; border-color: #2c3a55 !important; color: #2c3a55 !important; }
.page-id-3725 .gt-modal__panel[data-nature="extra"]   a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="extra"]   button.gt-btn:hover { background: #fbe6d2 !important; background-color: #fbe6d2 !important; border-color: #a85518 !important; color: #a85518 !important; }
.page-id-3725 .gt-modal__panel[data-nature="makeup"]  a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="makeup"]  button.gt-btn:hover { background: #dfeceb !important; background-color: #dfeceb !important; border-color: #3d6b69 !important; color: #3d6b69 !important; }
.page-id-3725 .gt-modal__panel[data-nature="intro"]   a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="intro"]   button.gt-btn:hover { background: #fce4ec !important; background-color: #fce4ec !important; border-color: #880e4f !important; color: #880e4f !important; }
.page-id-3725 .gt-modal__panel[data-nature="series"]  a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="series"]  button.gt-btn:hover { background: #e8e8e8 !important; background-color: #e8e8e8 !important; border-color: #2b2b2b !important; color: #2b2b2b !important; }
.page-id-3725 .gt-modal__panel[data-nature="floater"] a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="floater"] button.gt-btn:hover { background: #ece9f3 !important; background-color: #ece9f3 !important; border-color: #605a85 !important; color: #605a85 !important; }
.page-id-3725 .gt-modal__panel[data-nature="consult"] a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="consult"] button.gt-btn:hover { background: #efdee2 !important; background-color: #efdee2 !important; border-color: #6f3540 !important; color: #6f3540 !important; }
.page-id-3725 .gt-modal__panel[data-nature="premium"] a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="premium"] button.gt-btn:hover { background: #e5dceb !important; background-color: #e5dceb !important; border-color: #4a2860 !important; color: #4a2860 !important; }
.page-id-3725 .gt-modal__panel[data-nature="summer"]  a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="summer"]  button.gt-btn:hover { background: #eef5cf !important; background-color: #eef5cf !important; border-color: #6d8019 !important; color: #6d8019 !important; }
.page-id-3725 .gt-modal__panel[data-nature="single"]  a.gt-btn:hover, .page-id-3725 .gt-modal__panel[data-nature="single"]  button.gt-btn:hover { background: #f4f4f4 !important; background-color: #f4f4f4 !important; border-color: #000000 !important; color: #000000 !important; }

/* Nature pill (gt-nat) used inside the hub panel: same look as modal. */

/* Nature pill (gt-nat) and per-nature colours on the hub page. */
.page-id-3725 .gt-nat {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    vertical-align: baseline;
}
.page-id-3725 .gt-nat--slot    { background-color: #4a5a7a; }
.page-id-3725 .gt-nat--extra   { background-color: #e89243; }
.page-id-3725 .gt-nat--makeup  { background-color: #6ba09e; }
.page-id-3725 .gt-nat--intro   { background-color: #c2185b; }
.page-id-3725 .gt-nat--series  { background-color: #6b6b6b; }
.page-id-3725 .gt-nat--floater { background-color: #a59cc7; }
.page-id-3725 .gt-nat--premium { background-color: #7d4b8c; }
.page-id-3725 .gt-nat--summer  { background-color: #b8d041; }
.page-id-3725 .gt-nat--consult { background-color: #b06576; color: #ffffff; }
.page-id-3725 .gt-nat--single  { background-color: #ffffff; color: #000000; border: 1px solid #000000; }
/* -----------------------------------------------------------------------
   Get a session: acquisition-method chooser
   -----------------------------------------------------------------------
   When the subscriber clicks "Get a session" on the Flex page, they
   transfer to the bookings page with ?get=1, and this panel opens in
   front of the calendar view asking "How would you like to get this
   session?". Four method buttons are shown -- Flex, Voucher, Credit
   card, Zelle -- filtered to those currently available, with discreet
   cost badges in the unit each method uses (Flex tokens, voucher count,
   dollar amount). The panel reuses the existing booking-modal shell
   (.gt-modal) so the two read as a coordinated pair. */
/* The four acquisition methods render as colour-informative outline pills
   in a 2x2 grid -- two rows of two. The treatment echoes the booking-modal
   nature pills (.gt-nat--choice): white fill, hairline border in the
   method's accent hue, label text in the same hue, fully rounded shape.
   This makes each pill instantly readable as belonging to a particular
   acquisition family without resorting to fills that would shout.

   Accent palette:
     flex    -> warm gold   #8e6a1f  (matches the rail and Available label)
     voucher -> rust        #a85518  (Extra-session tint; vouchers feel)
     card    -> muted plum  #6f3540  (Consult tint; "card" association)
     zelle   -> Zelle violet #6d1dd4 (Zelle corporate brand; hover -> #461e99 deep indigo)
*/
.page-id-3727 .gt-modal--get .gt-get__opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.6rem;
    margin: 0.75rem 0 1rem 0;
}
.page-id-3727 .gt-modal--get .gt-get__opt {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.28rem 0.9rem;
    background: #ffffff;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    line-height: 1.25;
    /* Stretch each button to fill its grid cell. Without this, the
       button's default intrinsic sizing in a grid cell collapses it
       to its content width, leaving the label visually outside the
       pill border and ignoring the 2x2 grid widths. */
    width: 100%;
    box-sizing: border-box;
    /* Labels stay on a single line regardless of viewport width. */
    white-space: nowrap;
    min-width: 0;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Per-method accent colour (drives both border and text). */
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="flex"]    { color: #8e6a1f; }
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="voucher"] { color: #a85518; }
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="card"]    { color: #6f3540; }
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="zelle"]   { color: #6d1dd4; }
/* Hover lifts each available pill toward its light tint, exactly as the
   booking nature pills do on hover. Each method has its own tint matched
   to its accent hue. */
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="flex"]:hover,
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="flex"]:focus-visible    { background: #faf2e3; outline: none; }
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="voucher"]:hover,
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="voucher"]:focus-visible { background: #fbe6d2; outline: none; }
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="card"]:hover,
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="card"]:focus-visible    { background: #f2e3e6; outline: none; }
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="zelle"]:hover,
.page-id-3727 .gt-modal--get .gt-get__opt[data-method="zelle"]:focus-visible   { background: #ece1f8; outline: none; }
.page-id-3727 .gt-modal--get .gt-get__opt-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}
/* The CCard pill is the only stacked pill: WE-ACCEPT mark on top, label
   and discreet price beneath. The pill becomes a column rather than a
   row, and the row alignment of the other pills (baseline) does not
   apply to it. Other pills in the same grid row stretch to its height
   so the four read as a balanced set. */
.page-id-3727 .gt-modal--get .gt-get__opt--stacked {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.4rem 0.9rem;
}
/* The label + price stay on the same line as a discreet second row. */
.page-id-3727 .gt-modal--get .gt-get__opt-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
/* Other pills (Flex, Voucher, Zelle) stretch to the stacked-pill height
   so the 2x2 grid reads as a balanced set, with their label + cost
   vertically centred within their pill. Grid stretch alone only equalises
   heights within a single grid row, so the inline pills sharing a row with
   another inline pill stay short. A min-height matching the stacked-pill
   intrinsic height guarantees every cell across both rows is the same. */
.page-id-3727 .gt-modal--get .gt-get__opts { align-items: stretch; }
.page-id-3727 .gt-modal--get .gt-get__opt:not(.gt-get__opt--stacked) {
    align-items: center;
}
.page-id-3727 .gt-modal--get .gt-get__opt { min-height: 3.4rem; }

/* Brand acceptance strip (CCard pill): a generic WE-ACCEPT mark shown
   on the first line of the pill. Sized to read clearly. The source
   artwork has a generous white margin around the brand marks, so a
   small negative margin pulls the visible marks tight against the
   label below. */
.page-id-3727 .gt-modal--get .gt-get__opt-brand {
    /* The source artwork is a clean horizontal row of four card-brand
       marks (Visa / Mastercard / Amex / Discover) at roughly 7.7:1
       aspect ratio -- already oblate. Render at its natural ratio inside
       the pill, sized so the marks read clearly without crowding the
       label and price line below. */
    display: block;
    width: 100%;
    max-width: 6.5rem;
    height: auto;
    margin: -0.05rem auto 0 auto;
    object-fit: contain;
    object-position: center;
}
/* Cost badge: same understated treatment as the in-modal nature pills.
   Inline, smaller, lighter, no chip, no coloured fill -- a footnote, not
   a price tag. Inherits the pill's accent hue, then dims it. */
.page-id-3727 .gt-modal--get .gt-get__opt-cost {
    font-size: 0.82em;
    font-weight: 400;
    color: inherit;
    opacity: 0.7;
    letter-spacing: 0.01em;
}
/* Coming-soon pills (CCard, Zelle) keep their accent hue but desaturate:
   lighter border, dimmed text, no hover lift, not selectable. The colour
   remains the cue; the muted contrast signals "not yet". */
.page-id-3727 .gt-modal--get .gt-get__opt--soon {
    background: #ffffff;
    border-style: dashed;
    cursor: not-allowed;
}
/* Disabled pills dim their text and border via colour-mix rather than
   opacity, so any inner image (the CCard acceptance strip) renders at
   full strength. The label inherits this faded colour through currentColor;
   the border picks it up too because the base rule uses border: 1px solid
   currentColor. */
.page-id-3727 .gt-modal--get .gt-get__opt--soon[data-method="card"]  { color: color-mix(in srgb, #6f3540 55%, #ffffff); }
.page-id-3727 .gt-modal--get .gt-get__opt--soon[data-method="zelle"] { color: color-mix(in srgb, #6d1dd4 55%, #ffffff); }
.page-id-3727 .gt-modal--get .gt-get__opt--soon:hover,
.page-id-3727 .gt-modal--get .gt-get__opt--soon:focus-visible {
    background: #ffffff;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   Hub two-column row.
   Place the "Your next session" card and the "Your scheduling flexibility"
   card side-by-side on widescreens; stack and centre on narrower viewports.
   The two cards inside share the same 340px max-width, so on wide screens
   the row reads as a balanced pair; on narrow screens they fall to a single
   column with both cards horizontally centred.
   --------------------------------------------------------------------- */
.page-id-3725 .gt-hub-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    /* stretch (not flex-start) so the Next-session card matches the
       Scheduling-flexibility card's height even when its content is
       short (e.g. "No sessions booked." empty state on lite portals).
       Generic across every family. May 2026. */
    align-items: stretch;
    justify-content: center;
    margin: 1.5rem 0;
}
/* The cards themselves keep their own 340px width; reset any vertical
   margins so the flex container alone owns the row spacing. Note: the
   JS that renders the next-session card *replaces* its class list at
   runtime -- the outer wrapper ends up as .gt-next .gt-modal__panel
   rather than .gt-card. We therefore target every direct child of the
   row, plus .gt-modal__panel explicitly, so the next-session card's own
   1.25rem panel margin is cancelled and both cards align at the top. */
.page-id-3725 .gt-hub-row > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0;
    margin-right: 0;
    flex: 0 0 340px;
    width: 340px;
}
.page-id-3725 .gt-hub-row > .gt-modal__panel {
    margin: 0 !important;
}
/* Distribute the Next-session card vertically so it visually balances
   the taller Scheduling-flexibility card next to it. With
   align-items:stretch on .gt-hub-row, this card grows to match its
   sibling's height; without the column-flex distribution below, the
   content would clump at the top and the bottom half would look
   awkwardly empty. Pushes the action row (Open the calendar /
   Join on Zoom) to the bottom edge of the card. Generic across
   every family and every state (empty, booked, in-progress, late).
   May 2026. */
.page-id-3725 .gt-hub-row > .gt-next.gt-modal__panel {
    display: flex;
    flex-direction: column;
}
.page-id-3725 .gt-hub-row > .gt-next.gt-modal__panel > .gt-modal__actions {
    margin-top: auto;
}
@media (min-width: 980px) {
    /* Widescreen: break out of the WordPress theme's narrow
       .entry-content column so the two 340px cards can sit side-by-side
       with breathing room. The negative inline margins extend the row
       symmetrically; the cards themselves remain 340px each. */
    .page-id-3725 .gt-hub-row {
        justify-content: center;
        align-items: stretch;
        margin-left: -120px;
        margin-right: -120px;
    }
}
@media (min-width: 1200px) {
    .page-id-3725 .gt-hub-row {
        margin-left: -200px;
        margin-right: -200px;
    }
}

/* =================================================================
   SUBSCRIPTION PANEL (hub position 3 — below the two top panels)

   Width-matches its two siblings (340px on wide screens, full content
   envelope on phone). Brown top edge and matching warm glow.
   Layout: eyebrow / family title / student name (left-aligned) /
   two-column grid with pill+meta on left and STD-Flex/seed/cap stack
   on right / footer with renewal mechanics. On narrow screens the
   two-column grid collapses to a single column.
   ================================================================= */
.gt-hub-sub-row{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:1.25rem;
  flex-wrap:wrap;
  margin:1.25rem 0 1.5rem;
}
/* Widescreen: mirror .gt-hub-row's break-out so the two 340px panels
   (Subscription + Messages) can sit side-by-side. Without these the
   .entry-content max-width (680px) caps the row at ~632px after padding,
   forcing Messages to wrap underneath Subscription. */
@media (min-width: 980px){
  .page-id-3725 .gt-hub-sub-row{
    margin-left:-120px;
    margin-right:-120px;
  }
}
@media (min-width: 1200px){
  .page-id-3725 .gt-hub-sub-row{
    margin-left:-200px;
    margin-right:-200px;
  }
}

/* ====================================================================
   Messages card — fourth hub panel. Sits beside the Subscription card
   on wide screens, wraps below it on phones (because gt-hub-sub-row
   flex-wraps). Width-matched to Subscription (340px) so the two read
   as a balanced pair. Cooler off-white background so it never competes
   visually with the warm subscription panel.
   ==================================================================== */
.page-id-3725 .gt-card--messages,
.page-id-3725 .gt-card--policies,
.page-id-3725 .gt-card--contact{
  flex:0 0 340px;
  width:340px;
  max-width:340px;
  /* Match Subscription exactly: white background, warm-gold top edge,
     same two-layer warm glow, same 243px height, same internal padding
     and border radius. The two panels read as a balanced pair. */
  background:rgba(255,255,255,0.98) !important;
  border:0 !important;
  border-top:3px solid #8e6a1f !important;
  border-radius:12px !important;
  padding:1rem 1.15rem !important;
  box-sizing:border-box;
  position:relative;
  box-shadow:
    0 0 18px rgba(142,106,31,0.34),
    0 12px 32px rgba(110,80,20,0.26) !important;
  margin:0 !important;
  height:243px;
  display:flex;
  flex-direction:column;
  /* Match Subscription: space-between pins the See-all-messages CTA to
     the bottom of the card so it aligns horizontally with the
     Manage-subscription button to its left and the Get-a-session
     button two cards over. */
  justify-content:space-between;
  overflow:hidden;
}
/* Messages eyebrow intentionally has NO per-panel override. It inherits
   from the shared .page-id-3725 .gt-card__eyebrow rule near the top of
   this stylesheet so the eyebrows on the Next Session, Scheduling
   Flexibility, Subscription, and Messages cards all read as one object
   with one position and one bottom margin. See line ~509. */
/* Inner body of the Messages card scrolls if the latest notice plus the
   earlier list runs longer than the fixed 243px height. Keeps the panel
   neat next to Subscription regardless of content volume. */
.page-id-3725 .gt-card--messages .gt-msg-latest,
.page-id-3725 .gt-card--messages .gt-msg-list,
.page-id-3725 .gt-card--messages .gt-msg-ticker{
  flex:0 0 auto;
}
.page-id-3725 .gt-card--messages > .gt-msg-latest{
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
}
.page-id-3725 .gt-card--messages p:empty{display:none !important;}
/* See-all-messages CTA: shares paragraph wrapper, button style, and
   bottom margin with the Manage-subscription CTA so the two panel
   buttons align horizontally on widescreen. */
.page-id-3725 .gt-card--messages .gt-msg-cta,
.page-id-3725 .gt-card--policies .gt-policies-cta,
.page-id-3725 .gt-card--contact  .gt-contact-cta{
  margin:0 0 17.6px 0;
  text-align:center;
  flex:0 0 auto;
}
.page-id-3725 .gt-card--messages .gt-msg-cta a.gt-btn,
.page-id-3725 .gt-card--policies .gt-policies-cta a.gt-btn,
.page-id-3725 .gt-card--contact  .gt-contact-cta a.gt-btn{
  background:#ffffff;
  color:#a8552c;
  border:1px solid #d9c4a6;
  font-size:13.6px !important;
  line-height:13.6px !important;
  padding:5.6px 1.25rem !important;
  text-decoration:none;
  border-bottom-width:1px;
  border-bottom-style:solid;
}
.page-id-3725 .gt-card--messages .gt-msg-cta a.gt-btn:hover,
.page-id-3725 .gt-card--messages .gt-msg-cta a.gt-btn:focus-visible,
.page-id-3725 .gt-card--policies .gt-policies-cta a.gt-btn:hover,
.page-id-3725 .gt-card--policies .gt-policies-cta a.gt-btn:focus-visible,
.page-id-3725 .gt-card--contact  .gt-contact-cta a.gt-btn:hover,
.page-id-3725 .gt-card--contact  .gt-contact-cta a.gt-btn:focus-visible{
  background:#fbf6ee;
  border-color:#a8552c;
  color:#a8552c;
  text-decoration:none;
}
.gt-msg-ticker{
  margin:0;
  font-size:0.92rem;
  color:#6b5836;
  line-height:1.45;
}
.gt-msg-ticker--loading{ color:#a89c7d; font-style:italic; }
.gt-msg-ticker--empty{ color:#8b7e5c; }

/* ====================================================================
   Mac-only relaxations for the hub sub-row cards (Subscription,
   Messages, Policies, Contact). macOS browsers render the body font
   with slightly different metrics than Windows -- same CSS, more
   vertical text -- so the fixed 243px height with overflow:hidden
   can clip the bottom CTA on the Contact panel and the
   justify-content:space-between gap can collapse to zero on the
   Messages panel, letting the See-all-messages button touch or
   overlap the latest-message text just above it.

   Gated on html.gt-mac (added by portal.js's platform probe) so
   Windows + Linux pixels do NOT move. Local fix, per user request.
   ==================================================================== */
html.gt-mac .page-id-3725 .gt-card--messages,
html.gt-mac .page-id-3725 .gt-card--policies,
html.gt-mac .page-id-3725 .gt-card--contact{
  /* Let the panel grow a few pixels if Mac font metrics push the
     content past 243px. min-height keeps the visual baseline aligned
     with the Subscription panel on the common case; height:auto +
     overflow:visible prevents the CTA from being clipped. The pair
     of panels (Messages, Subscription) still wrap consistently. */
  height:auto !important;
  min-height:243px;
  overflow:visible !important;
}
/* Messages panel specifically: enforce a minimum gap between the
   latest-message block (or list) and the See-all-messages CTA so
   the two cannot touch or overlap when Mac font metrics expand the
   text above. 0.6rem is the smallest gap that reliably reads as
   intentional whitespace; larger would risk pushing the CTA out of
   horizontal alignment with the Subscription panel's CTA. */
html.gt-mac .page-id-3725 .gt-card--messages .gt-msg-cta{
  margin-top:0.6rem !important;
}
/* Contact panel specifically: same minimum-gap insurance for the
   Contact George Tutor CTA, plus a few pixels of bottom padding to
   keep the button comfortably inside the panel after height relaxes. */
html.gt-mac .page-id-3725 .gt-card--contact .gt-contact-cta{
  margin-top:0.6rem !important;
}
html.gt-mac .page-id-3725 .gt-card--contact{
  padding-bottom:1.15rem !important;
}
/* ====================================================================
   Mac-only fixes for the TOP hub row (Next Session card + Scheduling
   Flexibility card). On macOS, the body font renders with slightly
   wider glyph metrics than Windows -- same CSS, more horizontal text.
   That produces two visible defects on the hub:

     (a) The CTA labels ("Open the calendar" on Next Session,
         "Get a session" on Scheduling Flexibility) widen past the
         button's inner width, so the text overflows the right edge
         or sits visibly off-centre.
     (b) The Next Session panel's natural content height grows past
         the 243px envelope that the Flexibility card is pinned to,
         leaving the right-hand card visibly taller than its peer.

   Both are pure rendering drift -- no per-family / per-state branch.
   Gated on html.gt-mac so Windows + Linux pixels stay byte-identical.
   Button BOX dimensions (padding, border, radius) are untouched per
   user request: "Reduce text size, do not change button size."
   ==================================================================== */

/* (a) CTA TEXT FIT --------------------------------------------------
   Next Session card -- the Open-the-calendar button. The base rule
   at .page-id-3725 .gt-modal__panel a.gt-btn uses font-size:0.85rem
   (~13.6px) with padding:0.35rem 0.85rem. Reduce font-size only;
   keep padding so the button outline is pixel-identical to Windows. */
html.gt-mac .page-id-3725 .gt-modal__panel a.gt-btn,
html.gt-mac .page-id-3725 .gt-modal__panel button.gt-btn{
  font-size:0.78rem !important;
  letter-spacing:0.015em !important;
  text-align:center !important;
}
/* Scheduling Flexibility card -- the Get-a-session button. The base
   rule at .page-id-3725 .gt-flex-cta a.gt-btn uses font-size:13.6px /
   line-height:13.6px / padding:5.6px 1.25rem. Drop the font a touch
   and re-assert text-align:center on the anchor so the label sits
   centred inside the button rather than drifting toward the right. */
html.gt-mac .page-id-3725 .gt-flex-cta a.gt-btn{
  font-size:12.5px !important;
  line-height:12.5px !important;
  letter-spacing:0.015em !important;
  text-align:center !important;
}

/* (b) PANEL HEIGHT EQUALIZE -----------------------------------------
   The base layout uses .gt-hub-row{ align-items:flex-start } so each
   card keeps its own natural height. On Mac that lets the Next
   Session panel grow past the Flexibility card's hard 243px. Two
   coordinated changes equalize the pair WITHOUT touching either
   card's content or paddings:

     1. Switch the row to align-items:stretch so children share the
        tallest sibling's height.
     2. Relax the Flexibility card's fixed height:243px to
        min-height:243px; height:auto so it can grow to match its
        sibling when stretched. flex:1 column distribution inside
        the card (eyebrow / balances / CTA) continues to space-
        between correctly because justify-content:space-between is
        already on the card. */
html.gt-mac .page-id-3725 .gt-hub-row{
  align-items:stretch !important;
}
html.gt-mac .page-id-3725 .gt-card--flexibility{
  height:auto !important;
  min-height:243px;
}

/* ====================================================================
   /portal-messages/ — full message history for the logged-in family.
   Renders as a stacked list of cards, newest first. The eyebrow + body
   styling mirrors the hub Messages panel so the two read as one
   surface; only the framing differs (no fixed height, no CTA inside
   each row). Selectors are prefixed with .page-id-3732 .entry-content
   to outrank the TwentySeventeen theme defaults.
   ==================================================================== */
.page-id-3732 .entry-content ol.gt-msg-idx{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
}
.page-id-3732 .entry-content ol.gt-msg-idx > li.gt-msg-idx__row{
  background:rgba(255,255,255,0.98);
  border:0;
  border-top:3px solid #8e6a1f;
  border-radius:12px;
  padding:0.85rem 1.15rem 0.95rem;
  margin:0 0 0.85rem;
  box-shadow:
    0 0 14px rgba(142,106,31,0.22),
    0 8px 22px rgba(110,80,20,0.18);
  list-style:none;
}
.page-id-3732 .entry-content ol.gt-msg-idx > li.gt-msg-idx__row:last-child{
  margin-bottom:0;
}
.page-id-3732 .entry-content .gt-msg-idx__when{
  margin:0;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:#8b7e5c;
  text-transform:uppercase;
}
.page-id-3732 .entry-content .gt-msg-idx__body{
  /* 2026-05-27: match the hub's latest-message body (0.76rem), which in
     turn matches "max £175" in the Services panel. Keeps the See-all
     messages page visually consistent with the hub. */
  margin:0;
  font-size:0.76rem;
  color:#3d2f15;
  line-height:1.5;
  white-space:pre-wrap;
}
.page-id-3732 .entry-content .gt-msg-idx__loading{
  color:#a89c7d;
  font-style:italic;
  margin:1rem 0 0;
}
.page-id-3732 .entry-content .gt-msg-idx__empty{
  color:#8b7e5c;
  margin:1rem 0 0;
}

/* Messages latest-message block. Selectors are prefixed with
   .page-id-3725 .entry-content so they outrank the TwentySeventeen
   theme's default `.entry-content p { margin: 0 0 1.5em; }` rule, which
   would otherwise win on specificity and prevent the body from sitting
   tight under the timestamp. */
.page-id-3725 .entry-content .gt-msg-latest{
  margin:0 0 0.8rem;
}
.page-id-3725 .entry-content .gt-msg-latest__when{
  /* Timestamp hugs the body below it as one block. */
  margin:0;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:#8b7e5c;
  text-transform:uppercase;
}
.page-id-3725 .entry-content .gt-msg-latest__body{
  /* Tight under the timestamp. The two read as one block.
     2026-05-27: body font dropped from 0.98rem → 0.76rem to match the
     size of "max £175" in the Services panel above. */
  margin:0;
  font-size:0.76rem;
  color:#3d2f15;
  line-height:1.5;
  /* preserve line breaks the admin typed without enabling HTML */
  white-space:pre-wrap;
}
.gt-msg-list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid #ece3cd;
  padding-top:0.6rem;
}
.gt-msg-list li{
  margin:0 0 0.45rem;
  font-size:0.84rem;
  color:#5a4a28;
  line-height:1.4;
}
.gt-msg-list li:last-child{ margin-bottom:0; }
.gt-msg-list__when{
  display:inline-block;
  font-size:0.7rem;
  color:#8b7e5c;
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-right:0.4rem;
}
.gt-msg-list__body{
  color:#5a4a28;
}
/* Width is intentionally locked at 340px across every breakpoint to
   match the Subscription panel above. Subscription has no responsive
   width override; Messages must follow suit so the two panels read as
   a balanced pair in landscape, portrait, and widescreen. */
/* Suppress empty paragraphs that WordPress's wpautop inserts between
   the block-level children of the subscription card; these otherwise
   add ~16px of stray vertical margin between sections. Also hide any
   <br> wpautop drops inside the inner flex containers. */
.page-id-3725 .gt-card--subscription p:empty{display:none !important;}
.page-id-3725 .gt-card--subscription .gt-sub-grid > div > br{display:none !important;}
.page-id-3725 .gt-card--subscription{
  flex:0 0 340px;
  width:340px;
  max-width:340px;
  background:rgba(255,255,255,0.98) !important;
  border:0 !important;
  border-top:3px solid #8e6a1f !important;
  border-radius:12px !important;
  padding:1rem 1.15rem !important;
  box-sizing:border-box;
  position:relative;
  box-shadow:
    0 0 18px rgba(142,106,31,0.34),
    0 12px 32px rgba(110,80,20,0.26) !important;
  margin:0 !important;
  /* 243px tall, flex column. The CTA pins to the bottom via
     margin-top:auto on .gt-sub-cta (see below) -- the previous
     justify-content:space-between distributed the slack space between
     every child, opening a big gap below the eyebrow. Natural flow keeps
     the eyebrow / title / student / grid stacked tight at the top with
     their own margins, then auto-margin pushes the CTA to the bottom. */
  /* 2026-05-27: pill floats absolutely to the upper-right of the card
     (level with family/student), so the centered service detail can
     reclaim the white space below without bloating the card. Restored
     to fixed 243px so it lines up with the Messages card again. */
  height:243px;
  display:flex;
  flex-direction:column;
}
/* TwentySeventeen injects padding-top:25.92px on every h3 inside
   .entry-content -- visible as a phantom gap above "Cohen Family".
   Wipe it so the family name sits tight under the Subscription eyebrow,
   level with the timestamp on the Messages card. */
.page-id-3725 .entry-content h3.gt-sub-title{
  padding-top:0 !important;
  margin-top:0 !important;
}
/* The renewal hint sits inline next to the student name -- small, muted
   warm-brown, distinct from the heavier student weight. */
.page-id-3725 .gt-card--subscription .gt-sub-renews{
  font-size:0.78rem;
  font-weight:500;
  color:#8b6f3a;
  letter-spacing:0;
}
/* Manage-subscription CTA: shares paragraph wrapper, button style, and
   bottom margin with the Get-a-session CTA so the three panel buttons
   align horizontally on widescreen. margin-top:auto pins it to the
   bottom of the 243px flex column without distributing slack space
   between the upper children. */
.page-id-3725 .gt-card--subscription .gt-sub-cta{
  margin:auto 0 17.6px 0;
  text-align:center;
}
.page-id-3725 .gt-card--subscription .gt-sub-cta a.gt-btn{
  background:#ffffff;
  color:#a8552c;
  border:1px solid #d9c4a6;
  font-size:13.6px !important;
  line-height:13.6px !important;
  padding:5.6px 1.25rem !important;
  text-decoration:none;
  border-bottom-width:1px;
  border-bottom-style:solid;
  white-space:nowrap;
}
.page-id-3725 .gt-card--subscription .gt-sub-cta a.gt-btn:hover,
.page-id-3725 .gt-card--subscription .gt-sub-cta a.gt-btn:focus-visible{
  background:#fbf6ee;
  border-color:#a8552c;
  color:#a8552c;
  text-decoration:none;
}
/* Twenty Seventeen ships an aggressive `:focus`/`:hover` rule for every
   <a> inside .entry-content that adds `box-shadow: 0 3px 0 #000` — a
   black bar under the link. It looked like a 3D shadow under the
   Manage Services button after the modal closed and returned focus.
   Neutralize it across our hub ghost CTAs so all four CTA buttons
   (Open the calendar, Get a session, Manage Services, See all messages)
   behave the same in :focus and :hover. */
.page-id-3725 a.gt-btn:focus,
.page-id-3725 a.gt-btn:focus-visible,
.page-id-3725 a.gt-btn:hover,
.page-id-3725 a.gt-btn--ghost:focus,
.page-id-3725 a.gt-btn--ghost:focus-visible,
.page-id-3725 a.gt-btn--ghost:hover{
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
}
/* Keep an accessible focus indicator: a thin rust ring instead of the
   default browser outline + theme shadow. */
.page-id-3725 a.gt-btn:focus-visible,
.page-id-3725 a.gt-btn--ghost:focus-visible{
  outline:2px solid #a8552c !important;
  outline-offset:2px !important;
}

/* =====================================================================
   Unified "X back to portal hub" affordance
   ---------------------------------------------------------------------
   The hub has one mental model for getting out of a deeper view: an X
   in the top-right corner returns to the hub. The Manage Services modal
   already follows this. The Get-a-session modal and the full pages
   (/portal-bookings/, /portal-messages/) needed to match.

   For modals: the X lives inside the modal panel (handled per-modal
   stylesheet — see .gt-msm__x in hub_page_content.html and the
   .gt-modal__x rule below).

   For full pages: portal.js injects a <a class="gt-portal-x"> link into
   .entry-header (subscribers only — admins still get the admin
   quickbar). The rust color matches the user-portal accent. */
.gt-portal-x{
  position:absolute;
  /* Raised so the X glyph sits vertically level with the rust
     "GEORGETUTOR PORTAL" eyebrow (.entry-header::before) rather than
     between the eyebrow and the page title. The eyebrow text center
     measures ~y=12 within the header's top padding zone; a 36×36
     button at top:-6 puts the glyph center within 2px of the eyebrow
     center. Background only appears on hover, so any overflow above
     the header is invisible at rest. */
  top:-6px;
  right:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:transparent;
  border:0;
  color:#a8552c !important;
  font-size:28px;
  line-height:1;
  font-weight:300;
  text-decoration:none !important;
  cursor:pointer;
  z-index:50;
  transition:background 0.12s, color 0.12s;
  /* The Twenty Seventeen theme injects box-shadow on focus/hover of
     every <a> inside .entry-content. Beat it here. */
  box-shadow:none !important;
}
.gt-portal-x:hover,
.gt-portal-x:focus,
.gt-portal-x:focus-visible{
  color:#7a3d1f !important;
  background:#fbf6ee;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none !important;
}
.gt-portal-x:focus-visible{
  outline:2px solid #a8552c !important;
  outline-offset:2px !important;
}
/* The entry-header on /portal-bookings/ and /portal-messages/ is the
   anchor for absolute positioning of the X. */
.page-id-3727 .entry-header,
.page-id-3732 .entry-header{position:relative;}
/* Subscribers: hide the static back-link paragraphs on these two pages.
   Admins keep using the admin quickbar (portal.js adminizeBackLinks).
   The body class .gt-has-portal-x is stamped by portal.js when it
   injects the X, signalling "the X is doing the back-nav now". */
body.gt-has-portal-x .entry-content p.portal-back-top,
body.gt-has-portal-x .entry-content p.portal-back{display:none !important;}

/* Get-a-session modal: top-right X (rust). Reuses the .gt-modal__panel
   that the chooser already renders into. */
.gt-modal--get .gt-modal__panel{position:relative;}
.gt-modal__x{
  position:absolute;
  top:8px;
  right:14px;
  background:transparent !important;
  border:0 !important;
  color:#a8552c !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:300 !important;
  cursor:pointer !important;
  padding:4px 8px !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  font-family:inherit !important;
  box-shadow:none !important;
  text-decoration:none !important;
  -webkit-appearance:none;
  appearance:none;
  z-index:50;
}
.gt-modal__x:hover,
.gt-modal__x:focus,
.gt-modal__x:focus-visible{
  color:#7a3d1f !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}
/* Subscription eyebrow intentionally has NO per-panel override. It
   inherits from the shared .page-id-3725 .gt-card__eyebrow rule above
   so the eyebrows on Next Session, Scheduling Flexibility, Subscription,
   and Messages all read as one object. */
.page-id-3725 .gt-card--subscription .gt-sub-title{
  text-transform:none !important;
  border-left:none !important;
  padding-left:0 !important;
  letter-spacing:0 !important;
  font-family:inherit !important;
  font-size:1.08rem !important;
  font-weight:600 !important;
  color:#3d2f15 !important;
  margin:0 0 2px !important;
  line-height:1.2 !important;
}
.page-id-3725 .gt-card--subscription .gt-sub-student{
  font-size:0.95rem !important;
  font-weight:600 !important;
  color:#3d2f15 !important;
  margin:0 0 10px !important;
  line-height:1.2 !important;
  text-align:left !important;
}
/* 2026-05-27 r2: Services panel layout.
   Header row of the card (family name + student names) is rendered by
   .gt-sub-title / .gt-sub-student. The PILL + Tier·Continuous meta is
   pulled out of the column flow and pinned to the UPPER-RIGHT of the
   card via .gt-sub-pillblock — vertically level with the student name.
   The three service-detail lines (Standard Flex / +60/month / max cap)
   sit centered in the remaining white space below. */
.gt-sub-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:2px 0 4px;
  text-align:center;
  /* Take up all available vertical space between header and CTA so the
     centered service-detail block visually centers in the white area. */
  flex:1 1 auto;
}
/* Pill block: absolutely positioned upper-right, level with the family
   name / student name area. The card has position:relative already. */
.page-id-3725 .gt-card--subscription .gt-sub-pillblock{
  position:absolute;
  top:1rem;          /* matches card padding-top */
  right:1.15rem;     /* matches card padding-right */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  text-align:right;
  /* Allow eyebrow row (above the title) to clear; we sit roughly level
     with the .gt-sub-title / .gt-sub-student rows. */
  margin-top:1.55rem;
  z-index:2;
  pointer-events:none;  /* purely informational; CTA below stays clickable */
}
.page-id-3725 .gt-card--subscription .gt-sub-pillblock .gt-sub-pill{
  pointer-events:auto;
}
.gt-sub-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#8e6a1f;
  color:#fff8db;
  font-weight:600;
  /* Height-match .gt-tz-pill (session-code pills) so the services pill
     sits at the same vertical scale as the other pills in the portal.
     Colour + min-width unchanged; only the box metrics shrink to match.
     June 2026. */
  font-size:0.72rem;
  letter-spacing:0.06em;
  padding:2px 11px 3px;
  line-height:1.2;
  border-radius:999px;
  min-width:56px;
  text-align:center;
}
.gt-sub-meta{
  font-size:0.78rem;
  color:#6b5836;
  line-height:1.25;
  /* Sits on its own line beneath the pill now, centered. No ellipsis needed. */
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  min-width:0;
}
.gt-sub-right{
  text-align:center;
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
  width:100%;
  /* The 3 service-detail lines sit centered in the body's white space. */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.gt-sub-suite{
  font-size:0.84rem;
  font-weight:600;
  color:#3d2f15;
  margin-bottom:1px;
  line-height:1.2;
}
.gt-sub-seed{
  font-size:1.02rem;
  font-weight:600;
  color:#2f7a3a;
  line-height:1.2;
}
.gt-sub-seed small{
  font-size:0.7rem;
  color:#6b5836;
  font-weight:500;
  margin-left:1px;
}
.gt-sub-cap{
  font-size:0.76rem;
  color:#6b5836;
  margin-top:1px;
  line-height:1.3;
}
/* .gt-sub-foot retired in favour of inline "next renewal" hint by the
   student name and a Manage-subscription CTA at the bottom of the card. */

/* Wide-screen: subscription panel keeps its 340px envelope and
   centres beneath the two-card row. The .gt-hub-sub-row wrapper
   stays full-width and centres its single child. */

/* Narrow screens: the subscription card keeps the same flat 340px
   width as its siblings (the next-session and flexibility cards do not
   contract on phone), so it lines up beneath them in portrait mode. */
@media (max-width: 480px){
  .page-id-3725 .gt-card--subscription{
    padding:0.85rem 0.95rem !important;
  }
  /* On phones, collapse the two-column grid to a single column so the
     pill + meta line has the full card width (no awkward wrap on
     "Tier 2 · Continuous") and the STD-Flex / seed / cap stack drops
     below, centred for visual balance. */
  .gt-sub-grid{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .gt-sub-left{
    width:100%;
    flex:1 1 auto;
  }
  .gt-sub-meta{
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
  }
  .gt-sub-right{
    text-align:center;
    width:100%;
    /* 2026-05-27: George -- on phone portrait ONLY, the Services card was
       sitting shorter than the sibling cards (Next session, Flexibility,
       Messages). Add generous vertical white space above the "Standard
       Flex" line and below the "max £175" line so the panel height
       matches its row siblings. Desktop/landscape unaffected. */
    padding:1.25rem 0 1.25rem;
  }
  /* Tighten vertical rhythm on phone so the card height matches the
     siblings above. The WordPress theme injects ~26px padding-top on
     h3 elements; we override it here. The 17.6px margin-top on the
     title mirrors the eyebrow-to-when gap in the next-session card on
     phone portrait, so the two cards share the same vertical rhythm
     between header and body. */
  .page-id-3725 .gt-card--subscription .gt-sub-title{
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin:17.6px 0 1px !important;
  }
  .page-id-3725 .gt-card--subscription .gt-sub-student{
    margin:0 0 6px !important;
  }
  .gt-sub-grid{padding:0;}
  .gt-sub-suite{margin-bottom:0;}
  .gt-sub-seed{line-height:1.15;}
  .gt-sub-cap{margin-top:0; line-height:1.2;}
  /* On phone portrait the card relaxes from the widescreen 243px
     envelope -- the stacked single-column layout naturally takes more
     vertical room than the two-column desktop grid. */
  .page-id-3725 .gt-card--subscription{
    height:auto;
    padding:0.75rem 0.95rem 0.7rem !important;
  }
  /* Tighten the bottom margin of the CTA on phone so it does not push
     the card much taller than the siblings above. */
  .page-id-3725 .gt-card--subscription .gt-sub-cta{
    margin:6px 0 0 0;
  }
}

/* ============================================================
   Welcome banner — painted by portal.js renderWelcome() above
   the four hub cards on page 3725. Mirrors the institutional-
   warm voice (no exclamation, scientific-precise) but with a
   slightly larger lead so the family knows whose lens they're
   viewing the portal through.
   ============================================================ */
.page-id-3725 .gt-welcome{
  margin:0 0 14px 0;
  padding:14px 18px;
  background:#fbfafd;            /* lavender mirror of admin language */
  border:1px solid #ece3cd;      /* warm-cream border (no slate) */
  border-left:4px solid #6a4a8e; /* purple 3D edge */
  border-radius:3px;             /* rectangle, not pill */
  box-shadow:0 1px 0 rgba(0,0,0,0.03);
}
.page-id-3725 .gt-welcome__line{
  margin:0;
  font-size:1.15rem;
  line-height:1.3;
  color:#3a2a55;
}
.page-id-3725 .gt-welcome__lead{
  /* Was a small uppercase eyebrow, which fought the warmth of the new
     three-word greeting. Now flattened to share the surname's tone
     and size so "Welcome Cohen family !" reads as one warm sentence. */
  color:#2b1f3f;
  font-weight:500;
  margin-right:6px;
}
.page-id-3725 .gt-welcome__name{
  font-weight:600;
  color:#2b1f3f;
}
/* The trailing exclamation in "Welcome Cohen family !". Kept in its
   own span so we can give it a hairline of breathing room without
   touching the surname token, and so the warmth tone (purple, like
   the lead) stays distinct from the surname's deeper ink. */
.page-id-3725 .gt-welcome__bang{
  margin-left:2px;
  color:#6a4a8e;
  font-weight:600;
}

/* The Administrator preview strip (.gt-impersonate-bar) was retired:
   the page eyebrow + the back-to-admin link in the page header
   already carry the impersonation context, so an extra purple strip
   above the welcome line was duplicating signal. The rules used to
   live here. */

/* ============================================================
   Live availability paint for the booking calendar.
   ============================================================
   The portal calendar (page 3727) now reads its availability from
   the admin's canonical grid (gt_admin_availability + rules) via
   /portal/availability/week. Each rendered cell carries a
   data-state attribute matching the admin grid's vocabulary:
     "avail"             green   bookable
     "avail-once"        blue    bookable (rule + override available=1)
     "unavail-recurring" grey    not bookable (mushroom in family view)
     "unavail-once"      orange  not bookable (mushroom in family view)
     "unknown"           ?       not yet loaded -- treat as not bookable

   Family view: keep the calendar visually quiet. Every non-bookable
   cell paints as a single warm mushroom tone with no "Unavailable"
   label. Bookable cells keep the existing pale-gold treatment.

   Admin view: when the grid carries the .gt-cal--admin class, we
   surface all four underlying colors so George can see his
   availability painting at a glance while still seeing every
   booking laid on top. */

/* --- Family view: mushroom for everything not bookable. --- */
.page-id-3727 .gt-cal__cell--quiet,
.page-id-3727 .gt-cal__cell--blocked {
  background: #cfc4b1;        /* warm mushroom */
}
.page-id-3727 .gt-cal__cell--blocked .gt-cal__lbl,
.page-id-3727 .gt-cal__cell--quiet .gt-cal__lbl {
  display: none;              /* no "Unavailable" label per design rule */
}

/* --- Admin view: paint the four underlying colors. ---
   Selectors are scoped under .gt-cal--admin so the family view is
   unaffected. The :not(.gt-cal__cell--booked) qualifier is critical:
   without it, an admin-view cell that is BOTH booked and carries a
   data-state (every cell does) would be repainted by the underlay
   here because these rules sit later in the stylesheet than the
   .gt-nat--* nature rules and have equal specificity -- causing all
   booked sessions to lose their nature color and render as the
   underlying availability tint instead. Excluding booked cells lets
   the nature palette win for occupied slots, and the underlay only
   colors empty cells. The booking color thus sits on top of the
   underlying availability without showing it (per George's note:
   "those colours may be obscuring colors below"). */
.page-id-3727 .gt-cal--admin .gt-cal__cell[data-state="avail"]:not(.gt-cal__cell--booked) {
  background: #e6f4d8;        /* green */
}
.page-id-3727 .gt-cal--admin .gt-cal__cell[data-state="avail-once"]:not(.gt-cal__cell--booked) {
  background: #dceefc;        /* light blue */
  color: #2a4a66;
}
.page-id-3727 .gt-cal--admin .gt-cal__cell[data-state="unavail-recurring"]:not(.gt-cal__cell--booked) {
  background: #b9bcc4;        /* grey */
  color: #4a4d57;
}
.page-id-3727 .gt-cal--admin .gt-cal__cell[data-state="unavail-once"]:not(.gt-cal__cell--booked) {
  background: #fbe4c8;        /* orange */
  color: #6b3f15;
}
/* "blocked" (another family owns this slot) keeps mushroom even in
   admin view because it's not George's surface to paint; that's a
   booking conflict, not an availability state. The booking overlay
   on top still wins visually because --booked rules outrank these.
   Scoped with :not(--booked) for the same reason as above. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--blocked:not(.gt-cal__cell--booked) {
  background: #cfc4b1;
}
/* In admin view, restore visibility of the Available label on green
   and light-blue bookable cells (the family-view rule above hid all
   --quiet/--blocked labels; bookable cells use --avail, which keeps
   its label by default). No further admin-specific work needed. */

/* =================================================================
   Surface A ← Surface B style port
   May 2026

   Goal: /portal-bookings/ viewed by an un-impersonated admin should
   look exactly like the case-file Manage bookings calendar
   (.gt-addsess__* surface in gt_admin.css). We achieve this by
   overriding the page-id-3727 .gt-cal__* rules above with the
   addsess colour-and-spacing language.

   Scope: every selector starts with .page-id-3727 and adds .gt-cal--admin
   so impersonating admins and families still see the original tan/
   green family-portal styling. .gt-cal--admin is stamped on
   #gt-cal-grid by renderCal() when isAdminViewer() returns true.
   ================================================================= */
.page-id-3727 .gt-cal--admin {
    /* Match addsess grid: 2px gap fenced by warm tan border. */
    background: #e8d6b8;
    border: 1px solid #e8d6b8;
    border-radius: 8px;
    gap: 2px;
    overflow: hidden;
    font-size: 0.78rem;
}
/* Header row + hour column take addsess's warm cream. */
.page-id-3727 .gt-cal--admin .gt-cal__corner,
.page-id-3727 .gt-cal--admin .gt-cal__head,
.page-id-3727 .gt-cal--admin .gt-cal__hour {
    background: #faf3e3;
}
.page-id-3727 .gt-cal--admin .gt-cal__head {
    padding: 6px 6px 5px;
    line-height: 1.1;
}
.page-id-3727 .gt-cal--admin .gt-cal__head-d {
    font-weight: 600;
    color: #4a3c20;
    font-size: 0.78rem;
}
.page-id-3727 .gt-cal--admin .gt-cal__head-n {
    color: #6b5836;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.page-id-3727 .gt-cal--admin .gt-cal__hour {
    color: #6b5836;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    padding: 4px 6px;
}
/* Today's date pill: keep B's quieter treatment — bold the number
   without inheriting the family-view circle background. */
.page-id-3727 .gt-cal--admin .gt-cal__head--today .gt-cal__head-n {
    background: transparent;
    color: #4a3c20;
    font-weight: 700;
    width: auto;
    height: auto;
    border-radius: 0;
    line-height: inherit;
}
/* Body cells: addsess uniform 44px floor, calm white default. */
.page-id-3727 .gt-cal--admin .gt-cal__cell {
    background: #ffffff;
    min-height: 44px;
    padding: 4px 5px;
    color: #4a3c20;
    font-size: 0.74rem;
    line-height: 1.15;
}
/* Available: soft green chip, matches addsess. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--avail {
    background: #e6f4d8;
    color: #2a3308;
}
.page-id-3727 .gt-cal--admin .gt-cal__cell--avail:hover {
    background: #d8ebc4;
}
.page-id-3727 .gt-cal--admin .gt-cal__cell--avail .gt-cal__lbl {
    color: #2a3308;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
/* Quiet (unbookable, no underlying state) — warm cream so it joins
   the headers visually rather than the cells. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--quiet {
    background: #faf3e3;
}
/* Blocked: mushroom, calmer than the original e9eaee. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--blocked {
    background: #cfc4b1;
    color: #6b5836;
}
.page-id-3727 .gt-cal--admin .gt-cal__cell--blocked:hover {
    background: #cfc4b1;
}
/* Booked: keep nature colour from per-nature rules above but switch
   to addsess font-weight + size; strip the bold left band so the
   cell reads as a clean block, the way B does. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked {
    border-left: 0;
    padding: 4px 5px;
}
.page-id-3727 .gt-cal--admin .gt-cal__who {
    font-size: 0.7rem;
    line-height: 1.15;
    gap: 2px;
}
.page-id-3727 .gt-cal--admin .gt-cal__nat {
    font-weight: 700;
    /* George round-9e: was 0.78rem which wrapped MAKEUP/PREMIUM/
       AVAILABLE in narrow View-bookings columns. Drop to 0.72rem
       and tighten letter-spacing to claw back the few pixels each
       word needs to stay on one line. Combined with white-space:
       nowrap inherited from the base .gt-cal__nat rule above. */
    font-size: 0.72rem;
    letter-spacing: 0;
    white-space: nowrap;
}
/* Admin view: also tighten cell horizontal padding so every nature
   label gets two extra pixels of writable space inside the cell. */
.page-id-3727 .gt-cal--admin .gt-cal__cell {
    padding-left: 3px;
    padding-right: 3px;
}
.page-id-3727 .gt-cal--admin .gt-cal__code {
    font-weight: 500;
    font-size: 0.68rem;
    opacity: 0.78;
}

/* Soft nature palette override — addsessBookedPalette colours so
   live booked cells on Surface A read exactly like Surface B.
   White on dark naturals (slot navy) carries; pale palette cells
   keep their dark text by inline style on the cell. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--slot    { background-color: #4a5a7a !important; color: #ffffff !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--extra   { background-color: #f4c590 !important; color: #5a2e0a !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--makeup  { background-color: #bcd6d4 !important; color: #234443 !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--consult { background-color: #d9b6bf !important; color: #4a1d27 !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--intro   { background-color: #f8bbd0 !important; color: #560027 !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--series  { background-color: #c7c7c7 !important; color: #2b2b2b !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--floater { background-color: #d5cee6 !important; color: #322b54 !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--premium { background-color: #cdb6d6 !important; color: #3a1f4a !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--summer  { background-color: #e1ec9d !important; color: #3d4811 !important; }
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--single  { background-color: #d4b8e0 !important; color: #3a1d52 !important; }
/* Package = teal, saturated end of the green family. Sibling of slot
   indigo — same boldness so a Package session reads with equal
   weight to a Slot session at a glance. George round-9d. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--package { background-color: #2d8674 !important; color: #ffffff !important; }
/* Private (admin_block) = white field with RED text. George round-9d
   (June 7 2026): GMT private blocks must read instantly as 'not a
   student session'. White fill keeps the cell out of the student
   colour vocabulary; red ink (#c0392b crimson) flags it as a held
   slot. NO outline — the red text on white is enough signal. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--admin_block { background-color: #ffffff !important; color: #c0392b !important; }
/* Make the text inside booked cells inherit the cell colour rather
   than carry the white from family-view rules. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked .gt-cal__who,
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked .gt-cal__nat,
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked .gt-cal__code {
    color: inherit !important;
}

/* =================================================================
   No-stripe / no-border guarantee for booked appointments.
   May 2026 — George does not want any dark stripe along the left
   edge of any appointment, and no dark border around the Single
   nature. This block runs last and uses !important to defeat any
   earlier border-left / border / ::before accent on both Surface A
   (admin view) and Surface B convention.
   ================================================================= */
.page-id-3727 .gt-cal__cell--booked,
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked {
    border: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
/* Kill the half-height wine accent bar that Consult paints as ::before. */
.page-id-3727 .gt-cal__cell--booked.gt-nat--consult::before,
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--consult::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}
/* Single sits on light-purple; explicitly strip every border declaration
   (kept from the previous near-white treatment — the no-border rule
   is still wanted even though the fill is now coloured). George
   round-9d: was near-white, now a 'light premium' lavender. */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--single,
.page-id-3727 .gt-cal--admin .gt-cal__cell.gt-cal__cell--booked.gt-nat--single {
    border: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
/* Admin_block on the admin view: also strip every border declaration.
   The earlier round-9c rule that gave admin_block a 1px black outline
   has been removed — George wants the red text to do the work,
   nothing else. */
.page-id-3727 .gt-cal__cell.gt-cal__cell--booked.gt-nat--admin_block,
.page-id-3727 .gt-cal--admin .gt-cal__cell.gt-cal__cell--booked.gt-nat--admin_block {
    border: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
/* Force every text descendant of an admin_block cell to red — the
   .gt-cal__who / .gt-cal__nat / .gt-cal__code inherit-color rule
   above (line ~3895) would otherwise paint them in the parent's
   color, which IS red here, so this is belt-and-braces in case a
   nested element picks up a stray color from elsewhere. */
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--admin_block,
.page-id-3727 .gt-cal--admin .gt-cal__cell--booked.gt-nat--admin_block * {
    color: #c0392b !important;
}

/* Runway badge (admin Shift+hover): a small white pill pinned to the
   bottom-right of a cell showing "0"-"9" or ">" for the consecutive
   weeks bookable at that weekday/hour. Same look as the Surface B
   admin Add-session runway badge. pointer-events: none so it never
   blocks the underlying click target. */
.page-id-3727 .gt-cal__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;
}

/* =====================================================================
   Admin-hub quickbar (#gt-admin-quickbar) — arrow glyph + portrait
   centring. Injected by portal.js adminizeBackLinks() on every portal
   page when an admin is viewing (un-impersonated or impersonating).

   On wide screens the button is absolutely positioned top-left of the
   .entry-header (inline style on the element). On portrait phones
   George (June 6 2026) wants it CENTRED on its own row between the
   eyebrow (.entry-header::before) and the page title (.entry-title), so
   we override the inline position to static and centre with block + auto
   margins. Visibility gate matches the rest of the portrait-only
   adjustments in the product.
   --------------------------------------------------------------------- */
/* Arrow glyph cell. The arrow is an inline SVG (see adminizeBackLinks
   in portal.js); we just size the cell here so the icon sits beside the
   "Admin hub" label at the right scale. Mirrors the calendar arrows in
   gt_admin.css so the two read as siblings. */
.gt-admin-quickbar__arrow,
.gt-addsess__navbtn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    color: currentColor;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 4px;
}
.gt-admin-quickbar__arrow svg,
.gt-addsess__navbtn-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.gt-addsess__navbtn-arrow--right svg {
    transform: scaleX(-1);
}

/* Portrait phones only: drop the absolute positioning, centre the
   button between the eyebrow pseudo-element (always first) and the
   .entry-title H1 (next DOM child after our button). Because
   .gt-admin-quickbar is appended to .entry-header AFTER the title in
   adminizeBackLinks(), we additionally reorder it via flex to sit
   between the pseudo-eyebrow and the title. Flex on .entry-header is
   harmless on wide too because the inline position:absolute is honoured
   regardless of parent display; but we scope this block to portrait so
   we don't disturb wide-view layout. */
@media (max-width: 600px) and (orientation: portrait) {
    .entry-header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        /* The wide-view 130px/200px side padding leaves a weirdly
           narrow column on phones; relax it back to 0 in portrait so
           the centred chip and the title can both use full width. */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .entry-header::before { order: 1; }
    #gt-admin-quickbar {
        order: 2;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0.3rem auto 0.5rem !important;
        align-self: center;
    }
    /* Case-file quickbar sibling. Sits directly under Admin hub, both
       centred on their own rows between the eyebrow (order:1) and the
       title (order:3). Same static positioning treatment as Admin hub;
       inherits DOM order after it (JS appends it second), so it renders
       below. Margin collapses the 0.5rem bottom of Admin hub into a
       tight 0.15rem gap between the two buttons, then keeps the 0.5rem
       breathing room above the title. 2026-07-18, George. */
    #gt-admin-quickbar-case {
        order: 2;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto 0.5rem !important;
        align-self: center;
    }
    /* Admin hub's bottom margin is reduced in portrait when the
       Case-file sibling is present, so the two buttons stack tightly
       without extra gap. Selector uses :has() which is broadly
       supported in current Chrome/Safari/Firefox; the fallback (no
       :has()) simply leaves the original 0.5rem gap intact which is
       still perfectly acceptable. */
    .entry-header:has(#gt-admin-quickbar-case) #gt-admin-quickbar {
        margin-bottom: 0.15rem !important;
    }
    .entry-header .entry-title { order: 3; text-align: center; }
}

/* Fawn palette for the Case-file quickbar sibling. Applied in ALL
   views (portrait and wide). The rust #a8552c on warm-sand #fbf6ee
   family is the same fawn already used elsewhere in the portal; here
   we invert to solid rust background with warm-sand text so the
   button reads as a sibling of Admin hub (which is solid purple with
   white text) rather than looking like a subordinate ghost. Hover
   nudges the background a shade darker for tactile feedback.
   2026-07-18, George. */
#gt-admin-quickbar-case {
    background: #a8552c !important;
    color: #fbf6ee !important;
}
#gt-admin-quickbar-case:hover,
#gt-admin-quickbar-case:focus-visible {
    background: #8f4523 !important;
    color: #fbf6ee !important;
}