/* =========================================================================
   account-2026.css — the customer account area.

   Loaded AFTER zuzz-2026.css and built entirely on its tokens, so the account
   pages cannot drift away from the rest of the site. Every colour, radius and
   space here is a var() from that file; there are no new palette values.

   The support floor is the same as everywhere else - 2016 televisions, see
   .claude-docs/12. So: no grid for layout, no `inset`, no logical properties,
   no `color-mix()`, no `min()`, `:focus` in its own ruleset, and a static value
   in front of every var() (generated - run tools/flatten-css.js).
   ========================================================================= */

/* ------------------------------------------------------------- page shell */

.zz-main-narrow .zz-shell {
    max-width: 560px;
}

/* ---------------------------------------------------------------- cards */

.zz-card {
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ border-radius: 16px;
    border-radius: var(--zz-r-lg);
    /*!fb*/ padding: 24px;
    padding: var(--zz-s-5);
    /*!fb*/ margin-bottom: 16px;
    margin-bottom: var(--zz-s-4);
}
.zz-card-center { text-align: center; }

.zz-card-title {
    /*!fb*/ margin: 0 0 12px;
    margin: 0 0 var(--zz-s-3);
    /*!fb*/ font-size: 16px;
    font-size: var(--zz-t-md);
    font-weight: 700;
    letter-spacing: -.01em;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}
.zz-card-text {
    /*!fb*/ margin: 0 0 16px;
    margin: 0 0 var(--zz-s-4);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    line-height: 1.6;
}
.zz-card-text:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ sign in */

.zz-auth {
    /*!fb*/ padding: 48px 0;
    padding: var(--zz-s-7) 0;
}
.zz-auth-card {
    /*!fb*/ padding: 32px;
    padding: var(--zz-s-6);
}
.zz-auth-links {
    /*!fb*/ margin-top: 16px;
    margin-top: var(--zz-s-4);
    text-align: center;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-auth-links a { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); font-weight: 600; }
.zz-auth-links a:hover { text-decoration: underline; }
.zz-auth-sep { /*!fb*/ margin: 0 8px; margin: 0 var(--zz-s-2); }

.zz-auth-tv {
    /*!fb*/ margin-top: 24px;
    margin-top: var(--zz-s-5);
    /*!fb*/ padding-top: 16px;
    padding-top: var(--zz-s-4);
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
}

/* ---------------------------------------------------------------- forms */

.zz-form { margin: 0; }

.zz-label {
    display: block;
    /*!fb*/ margin: 16px 0 8px;
    margin: var(--zz-s-4) 0 var(--zz-s-2);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
}
.zz-form > .zz-label:first-child { margin-top: 0; }

.zz-input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: rgba(255, 255, 255, .03);
    background: var(--zz-fill-1);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-family: var(--zz-font);
    /*!fb*/ font-size: 14px;
    font-size: var(--zz-t-base);
    /* Without this a 16px-or-smaller field makes iOS zoom the whole page on
       focus, and the layout appears to jump. */
    line-height: 1.4;
}
.zz-input::placeholder { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
.zz-input:focus {
    outline: none;
    /*!fb*/ border-color: #fb623f;
    border-color: var(--zz-ember);
    /*!fb*/ box-shadow: 0 0 0 3px rgba(251, 98, 63, .35);
    box-shadow: 0 0 0 3px var(--zz-ember-line);
}
.zz-textarea { resize: vertical; min-height: 120px; }

.zz-check {
    display: flex;
    align-items: center;
    /*!fb*/ margin: 16px 0 0;
    margin: var(--zz-s-4) 0 0;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    cursor: pointer;
}
.zz-check input { /*!fb*/ margin-right: 8px; margin-right: var(--zz-s-2); width: 18px; height: 18px; }

.zz-btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
    /*!fb*/ margin-top: 24px;
    margin-top: var(--zz-s-5);
}

/* Two fields side by side above a phone. Flex, not grid. */
.zz-form-row > div { /*!fb*/ margin-bottom: 8px; margin-bottom: var(--zz-s-2); }
@media (min-width: 640px) {
    .zz-form-row { display: flex; }
    .zz-form-row > div { flex: 1 1 0; }
    .zz-form-row > div + div { /*!fb*/ margin-left: 16px; margin-left: var(--zz-s-4); }
}

/* --------------------------------------------------------------- alerts */

.zz-alert {
    /*!fb*/ margin: 0 0 16px;
    margin: 0 0 var(--zz-s-4);
    padding: 12px 14px;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    /*!fb*/ border: 1px solid rgba(251, 98, 63, .35);
    border: 1px solid var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
}
.zz-alert-good {
    border-color: rgba(61, 220, 132, .35);
    background: rgba(61, 220, 132, .10);
}

/* ------------------------------------------------------------ dashboard */

.zz-acc { /*!fb*/ padding: 24px 0 48px; padding: var(--zz-s-5) 0 var(--zz-s-7); }

.zz-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*!fb*/ margin-bottom: 24px;
    margin-bottom: var(--zz-s-5);
}
.zz-acc-title {
    margin: 0;
    /*!fb*/ font-size: 26px;
    font-size: var(--zz-t-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}
.zz-acc-sub {
    margin: 4px 0 0;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
}
.zz-acc-dim { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }

.zz-acc-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*!fb*/ padding: 16px 24px;
    padding: var(--zz-s-4) var(--zz-s-5);
    /*!fb*/ margin-bottom: 24px;
    margin-bottom: var(--zz-s-5);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
}
.zz-acc-banner b { display: block; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-acc-banner span { /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); }
.zz-acc-banner-warn {
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
}

@media (max-width: 639.98px) {
    .zz-acc-head, .zz-acc-banner { display: block; }
    .zz-acc-banner .zz-btn-cta,
    .zz-acc-banner .zz-btn-ghost { /*!fb*/ margin-top: 12px; margin-top: var(--zz-s-3); }
}

/* ----------------------------------------------------------------- tabs */

.zz-acc-tabs {
    display: flex;
    overflow-x: auto;
    /*!fb*/ margin-bottom: 24px;
    margin-bottom: var(--zz-s-5);
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    scrollbar-width: none;
}
.zz-acc-tabs::-webkit-scrollbar { display: none; }

.zz-acc-tab {
    flex: 0 0 auto;
    padding: 12px 16px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.zz-acc-tab:hover { /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); }
.zz-acc-tab.is-on {
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    /*!fb*/ border-bottom-color: #fb623f;
    border-bottom-color: var(--zz-ember);
}


/* Cards side by side on a wide screen. Flex with a wrap, not grid. */
.zz-acc-grid > .zz-card { /*!fb*/ margin-bottom: 16px; margin-bottom: var(--zz-s-4); }
@media (min-width: 900px) {
    .zz-acc-grid { display: flex; flex-wrap: wrap; }
    .zz-acc-grid > .zz-card {
        flex: 1 1 300px;
        /*!fb*/ margin-right: 16px;
        margin-right: var(--zz-s-4);
    }
    .zz-acc-grid > .zz-card:last-child { margin-right: 0; }
    .zz-acc-grid > .zz-card-span { flex-basis: 100%; margin-right: 0; }
}

.zz-acc-plan {
    /*!fb*/ margin: 0 0 16px;
    margin: 0 0 var(--zz-s-4);
    /*!fb*/ font-size: 20px;
    font-size: var(--zz-t-lg);
    font-weight: 700;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    letter-spacing: -.02em;
}

.zz-acc-dl { margin: 0; }
.zz-acc-dl dt {
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-acc-dl dd {
    /*!fb*/ margin: 2px 0 12px;
    margin: 2px 0 var(--zz-s-3);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}

.zz-pill {
    display: inline-block;
    padding: 3px 10px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    /*!fb*/ background: rgba(255, 255, 255, .05);
    background: var(--zz-fill-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
}
.zz-pill-good {
    border-color: rgba(61, 220, 132, .35);
    background: rgba(61, 220, 132, .12);
    /*!fb*/ color: #3ddc84;
    color: var(--zz-live-ink);
}
.zz-pill-warn {
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
}

/* ---------------------------------------------------------------- tables */

/* Wide content scrolls inside its own box - the page body must never scroll
   sideways. tabindex makes the box reachable by a D-pad, which a scrolling
   div is not before Chromium 130. */
.zz-scroll-x { overflow-x: auto; }
.zz-scroll-x:focus { outline: none; }
.zz-scroll-x:focus-visible { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }
[data-remote] .zz-scroll-x:focus { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }

.zz-table {
    width: 100%;
    border-collapse: collapse;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
}
.zz-table th {
    text-align: left;
    padding: 10px 12px;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid var(--zz-line-2);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.zz-table td {
    padding: 12px;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    white-space: nowrap;
}
.zz-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- devices */

.zz-devices { list-style: none; margin: 0; padding: 0; }

.zz-device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*!fb*/ padding: 16px 0;
    padding: var(--zz-s-4) 0;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
.zz-device:last-child { border-bottom: 0; }
.zz-device-main { min-width: 0; }
.zz-device-name { display: block; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-device-meta {
    display: block;
    margin-top: 2px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
}
.zz-device-act { margin: 0; flex: 0 0 auto; }
.zz-device.is-current .zz-device-name { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); }

/* --------------------------------------------------------------- support */

.zz-tickets { list-style: none; margin: 0; padding: 0; }

.zz-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*!fb*/ padding: 16px 0;
    padding: var(--zz-s-4) 0;
    /*!fb*/ border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid var(--zz-line);
}
.zz-ticket:last-child { border-bottom: 0; }
.zz-ticket:hover .zz-ticket-main b { /*!fb*/ color: #fb623f; color: var(--zz-ember-ink); }
.zz-ticket:focus {
    /*!fb*/ outline: 2px solid #fb623f;
    outline: 2px solid var(--zz-ember);
    outline-offset: 2px;
}
.zz-ticket-main { min-width: 0; }
.zz-ticket-main b { display: block; /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-ticket-main span { display: block; margin-top: 2px; /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); }

.zz-back {
    display: inline-block;
    /*!fb*/ margin-bottom: 12px;
    margin-bottom: var(--zz-s-3);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
}
.zz-back:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }

.zz-thread { list-style: none; /*!fb*/ margin: 24px 0; margin: var(--zz-s-5) 0; padding: 0; }

.zz-msg {
    /*!fb*/ padding: 16px;
    padding: var(--zz-s-4);
    /*!fb*/ margin-bottom: 12px;
    margin-bottom: var(--zz-s-3);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
}
.zz-msg-you {
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
}
.zz-msg-who {
    margin-bottom: 6px;
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-msg-who span { /*!fb*/ margin-left: 8px; margin-left: var(--zz-s-2); font-weight: 500; letter-spacing: 0; }
.zz-msg-text { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); line-height: 1.6; word-wrap: break-word; }

/* ------------------------------------------------------------ television

   Pointer-first, because a Samsung TV browser sends the page no key presses at
   all - measured, see .claude-docs/12. Bigger targets, and hover is the
   feedback that matters. */

[data-tv] .zz-acc-tab { padding: 16px 22px; }
[data-tv] .zz-input { padding: 16px 18px; }
[data-tv] .zz-device { /*!fb*/ padding: 24px 0; padding: var(--zz-s-5) 0; }
[data-tv] .zz-ticket { /*!fb*/ padding: 24px 0; padding: var(--zz-s-5) 0; }

[data-tv] .zz-acc-tab:hover,
[data-tv] .zz-ticket:hover,
[data-tv] .zz-btn-ghost:hover {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}
[data-tv] .zz-acc-tab:focus,
[data-tv] .zz-ticket:focus,
[data-tv] .zz-input:focus {
    outline-width: 3px;
}

/* --------------------------------------------------------- sign in by code */

.zz-code {
    /*!fb*/ margin: 24px 0;
    margin: var(--zz-s-5) 0;
    text-align: center;
}
.zz-code-value {
    display: inline-block;
    /*!fb*/ padding: 16px 32px;
    padding: var(--zz-s-4) var(--zz-s-6);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ border: 1px solid rgba(251, 98, 63, .35);
    border: 1px solid var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember-ink);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
}
[data-tv] .zz-code-value { font-size: 64px; }

.zz-code-where {
    /*!fb*/ margin-top: 16px;
    margin-top: var(--zz-s-4);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
}
.zz-code-where b { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }

/* How long the code has left. Tabular figures so the number does not jitter
   from second to second, which on a 64px television code is very visible. */
.zz-code-life {
    /*!fb*/ margin-top: calc(0px - 12px);
    margin-top: calc(0px - var(--zz-s-3));
    text-align: center;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-variant-numeric: tabular-nums;
}
[data-tv] .zz-code-life { font-size: 22px; }

/* The waiting line: spinner and words on one row, centred together. */
.zz-tv-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* A ring with one brighter quarter, turning. Built from a border rather than an
   image or an SVG so there is nothing to fetch and nothing to fail; if the
   animation is refused - a 2016 set, or reduced motion - it simply sits there
   as a ring, which still reads as "working". */
.zz-spin {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: none;
    /* A MARGIN, NOT flex `gap`. Flexbox gap arrived in Chrome 84 and the sets
       this site supports are from 2016 - there it is simply ignored, and the
       spinner would sit against the first letter of the word. */
    margin-right: var(--zz-s-2);
    /*!fb*/ border: 2px solid rgba(255, 255, 255, .20);
    border: 2px solid var(--zz-line-3);
    /*!fb*/ border-top-color: #fb623f;
    border-top-color: var(--zz-ember);
    border-radius: 50%;
    animation: zz-spin 900ms linear infinite;
}
[data-tv] .zz-spin { width: 24px; height: 24px; border-width: 3px; }
@keyframes zz-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- connected */

.zz-tv-done { text-align: center; /*!fb*/ padding: 24px 0; padding: var(--zz-s-5) 0; }

.zz-tv-done-t {
    /*!fb*/ margin: 16px 0 8px;
    margin: var(--zz-s-4) 0 var(--zz-s-2);
    font-size: 24px;
    font-weight: 700;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}
[data-tv] .zz-tv-done-t { font-size: 34px; }

.zz-tick { width: 72px; height: 72px; }
[data-tv] .zz-tick { width: 104px; height: 104px; }

/* Drawn, not popped. The ring sweeps round and the check follows it, which
   reads as "this just completed" rather than "this was always here" - worth the
   few lines on a screen whose whole job is to confirm something worked.
   stroke-dasharray is the length of each path; animating the offset from that
   length to zero draws it. */
.zz-tick-ring {
    stroke: #2fbf71;
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: zz-draw 520ms ease-out forwards;
}
.zz-tick-mark {
    stroke: #2fbf71;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: zz-draw 320ms ease-out 420ms forwards;
}
@keyframes zz-draw { to { stroke-dashoffset: 0; } }

/* WITHOUT MOTION THE TICK MUST STILL BE THERE. The global reduced-motion rule
   collapses every animation to nothing, and `forwards` on an animation that
   never runs leaves both paths at full offset - an invisible tick and a blank
   success screen. So they are drawn outright instead. */
@media (prefers-reduced-motion: reduce) {
    .zz-tick-ring, .zz-tick-mark { stroke-dashoffset: 0; }
}

/* ======================================================================
   Signing in with Google, and the sign-up form
   ====================================================================== */

/* Where the theme toggle sits on the account pages. The homepage hangs it off
   its leagues nav row; these pages have no such row, so it gets a slim row of
   its own under the header, aligned right. */
.zz-head-tools {
    display: flex;
    justify-content: flex-end;
    /*!fb*/ padding-bottom: 8px;
    padding-bottom: var(--zz-s-2);
}

/* Google's own button is a JavaScript SDK written in modern syntax, and a 2016
   television cannot run it - the button would simply not appear. This is a
   plain link styled to match, so it works everywhere and is a 48px target a
   remote-control pointer can hit.

   Google's brand guidelines allow a white, a light-grey or a black button and
   ask that the mark and the wording are not altered. Dark mode takes the black
   variant so it does not glare out of the card; light mode takes white with a
   grey hairline, which is the reference button. Both keep the official mark. */
.zz-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    min-height: 48px;
    /*!fb*/ padding: 0 16px;
    padding: 0 var(--zz-s-4);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .20);
    border: 1px solid var(--zz-line-3);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    background: #131314;
    color: #e3e3e3;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.zz-btn-google:hover,
.zz-btn-google:focus {
    background: #1e1f20;
    /*!fb*/ border-color: rgba(255, 255, 255, .20);
    border-color: var(--zz-line-3);
    color: #e3e3e3;
}

[data-theme="light"] .zz-btn-google {
    background: #ffffff;
    color: #1f1f1f;
    border-color: rgba(0, 0, 0, .18);
}

[data-theme="light"] .zz-btn-google:hover,
[data-theme="light"] .zz-btn-google:focus {
    background: #f1f3f4;
    border-color: rgba(0, 0, 0, .28);
    color: #1f1f1f;
}

.zz-btn-google svg { flex: 0 0 auto; }

/* The "or" rule between the two ways in. */
.zz-or {
    display: flex;
    align-items: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /*!fb*/ margin: 16px 0;
    margin: var(--zz-s-4) 0;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 13px;
}

.zz-or:before,
.zz-or:after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-line);
}

/* A short note under a field - the password rule, mostly. */
.zz-hint {
    margin: 6px 0 0;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    font-size: 13px;
}

/* The honeypot. Hidden from people without display:none, because some bots
   skip anything that is display:none and this is meant to be filled in. */
.zz-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The second way in: sign in on a phone and type a code.
   Deliberately the same shape, height and radius as the Google button so the
   two read as a matched pair of alternatives rather than one real option and
   one afterthought. Its colours come from tokens, so light and dark are
   handled without a second rule. */
.zz-btn-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    min-height: 48px;
    /*!fb*/ padding: 0 16px;
    padding: 0 var(--zz-s-4);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .20);
    border: 1px solid var(--zz-line-3);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    background: transparent;
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.zz-btn-phone:hover,
.zz-btn-phone:focus {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}

.zz-btn-phone svg { flex: 0 0 auto; }

/* The two alternatives, stacked. */
/* THE WAY OUT, WHEN SIGNING IN IS NOT ONE.

   A suspended account is shown live chat, and it must not read as a third
   sign-in option stacked with Google - the customer has just been told signing
   in is exactly what will not work. So it is the ACCENT button (nothing else on
   this card is), and it is pushed clear of the block below rather than sitting
   flush against it.

   .zz-btn-block already supplies the space above. */
.zz-auth-chat {
    /*!fb*/ margin-bottom: 32px;
    margin-bottom: var(--zz-s-6);
}

.zz-auth-alts {
    display: flex;
    flex-direction: column;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /*!fb*/ margin-bottom: 16px;
    margin-bottom: var(--zz-s-4);
}

/* On a television the phone route is the one that actually works, so it comes
   first and gets the accent border.

   The ORDER is decided in PHP, not with flex-direction: column-reverse. That
   property moves the buttons on screen and leaves the focus order alone, so a
   D-pad would still reach Google first and the highlight would appear to jump
   upwards for no reason. Visual order and focus order have to agree - which is
   the whole point of the remote-control work in .claude-docs/12. */
[data-tv] .zz-btn-phone { /*!fb*/ border-color: rgba(251, 98, 63, .35); border-color: var(--zz-ember-line); }

/* ======================================================================
   THE MERGED SIGN IN / CREATE ACCOUNT PAGE
   ====================================================================== */

/* A minimal header for the auth page: logo and the theme toggle, nothing else.
   An auth page should offer one thing to do. */
.zz-head-min-in {
    display: flex;
    align-items: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /*!fb*/ padding: 12px 0;
    padding: var(--zz-s-3) 0;
}
.zz-head-min .zz-head-tools { padding-bottom: 0; }
.zz-head-min .zz-logo img { display: block; height: 40px; width: auto; }

/* The switcher: a sliding highlight behind two real links. */
.zz-auth-switch {
    position: relative;
    display: flex;
    /*!fb*/ margin-bottom: 24px;
    margin-bottom: var(--zz-s-5);
    padding: 4px;
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ background: #121a20;
    background: var(--zz-surface-2);
}

.zz-auth-tab {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    font-weight: 600;
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    text-decoration: none;
    transition: color .18s ease;
}

.zz-auth-tab:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
/* The open tab is the brightest text on the strip; the other is dimmed. That,
   plus the pill behind it, is enough to say which one is open without colour
   doing the work - which also keeps it legible for anyone who cannot separate
   orange from grey. */
.zz-auth-tab.is-on { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }

/* The moving pill. Driven by [data-mode] on the card so it slides when the
   panels swap; with no JavaScript the attribute is never set and it simply
   sits under the tab the server opened. */
.zz-auth-slider {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 50%;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /* Neutral, not orange.
       Orange is the site's "do this" colour, and it is now the one flat colour
       every primary button wears. A tab strip is not an action - it only says
       which half of the card you are looking at - so painting it the same
       colour put two identical-looking oranges on the card and made the real
       Sign in button compete with a label. This is a raised surface instead. */
    background: var(--zz-surface-3);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .12);
    border: 1px solid var(--zz-line-2);
    transition: transform .22s ease;
}
[data-mode="signup"] .zz-auth-slider { transform: translateX(100%); }

.zz-auth-panel[hidden] { display: none; }

/* "Keep me signed in" and "Forgotten your password?" on one line. */
.zz-form-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /*!fb*/ gap: 8px;
    gap: var(--zz-s-2);
    /*!fb*/ margin: 12px 0;
    margin: var(--zz-s-3) 0;
}

.zz-auth-small { /*!fb*/ font-size: 12px; font-size: var(--zz-t-sm); /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); }
.zz-auth-small:hover { /*!fb*/ color: #fb623f; color: var(--zz-ember); }

.zz-auth-foot {
    /*!fb*/ margin: 16px 0 0;
    margin: var(--zz-s-4) 0 0;
    text-align: center;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
}
.zz-auth-foot a { /*!fb*/ color: #fb623f; color: var(--zz-ember); font-weight: 600; }


/* ======================================================================
   THE ACCOUNT HUB
   ====================================================================== */

/* Two cards side by side, the shortcuts full width underneath. Flex with a wrap,
   not grid: grid reaches a television in 2019 and these sets are from 2016,
   where the hub collapsed into one unspaced column. Every child takes a full
   row by default; the two main cards share one. */
.zz-hub {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.zz-hub > * { flex: 1 1 100%; min-width: 0; }
.zz-hub > .zz-hub-main,
.zz-hub > .zz-hub-support { flex: 1 1 0; }
.zz-hub > .zz-hub-main { /*!fb*/ margin-right: 16px; margin-right: var(--zz-s-4); }

.zz-eyebrow {
    margin: 0 0 6px;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zz-hub-main-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
}

.zz-hub-plan {
    /*!fb*/ margin: 0 0 12px;
    margin: 0 0 var(--zz-s-3);
    /*!fb*/ font-size: 20px;
    font-size: var(--zz-t-lg);
    font-weight: 700;
    /*!fb*/ color: #ffffff;
    color: var(--zz-ink-hi);
    line-height: 1.25;
}

.zz-hub-when { /*!fb*/ margin: 0 0 16px; margin: 0 0 var(--zz-s-4); /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); }
.zz-hub-when b { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }

/* An expired subscription gets an accent edge - noticeable without being a red
   wall, because the customer still has full use of the rest of the page. */
.zz-hub-main.is-lapsed { /*!fb*/ border-color: rgba(251, 98, 63, .35); border-color: var(--zz-ember-line); }

.zz-hub-actions {
    display: flex;
    flex-wrap: wrap;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    margin-top: auto;
}

.zz-hub-main,
.zz-hub-support { display: flex; flex-direction: column; }

/* The three shortcuts, full width under the two big cards. */
.zz-hub-links {
    display: flex;
}
.zz-hub-links > .zz-hub-link { flex: 1 1 0; min-width: 0; }
.zz-hub-links > .zz-hub-link + .zz-hub-link { /*!fb*/ margin-left: 12px; margin-left: var(--zz-s-3); }

.zz-hub-link {
    display: flex;
    align-items: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    min-height: 64px;
    /*!fb*/ padding: 12px 16px;
    padding: var(--zz-s-3) var(--zz-s-4);
    /*!fb*/ border: 1px solid rgba(255, 255, 255, .07);
    border: 1px solid var(--zz-line);
    /*!fb*/ border-radius: 12px;
    border-radius: var(--zz-r);
    /*!fb*/ background: #0d1317;
    background: var(--zz-surface-1);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.zz-hub-link:hover,
.zz-hub-link:focus {
    /*!fb*/ border-color: rgba(251, 98, 63, .35);
    border-color: var(--zz-ember-line);
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
}

.zz-hub-link svg { flex: 0 0 auto; /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }
.zz-hub-link:hover svg { /*!fb*/ color: #fb623f; color: var(--zz-ember); }
.zz-hub-link span { display: flex; flex-direction: column; min-width: 0; }
.zz-hub-link b { /*!fb*/ font-size: 14px; font-size: var(--zz-t-base); }
.zz-hub-link small { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); /*!fb*/ font-size: 11px; font-size: var(--zz-t-xs); }


/* ======================================================================
   SUPPORT
   ====================================================================== */

.zz-support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*!fb*/ gap: 16px;
    gap: var(--zz-s-4);
}
.zz-support-hero-text { min-width: 0; }
.zz-support-hero .zz-btn-cta { flex: 0 0 auto; }

/* The count beside "Open" / "Closed". */
.zz-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 1px 7px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ background: rgba(255, 255, 255, .12);
    background: var(--zz-line-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 11px;
    font-size: var(--zz-t-xs);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

/* A conversation waiting on the CUSTOMER gets the accent edge: it is the only
   row on the page that needs them to do something. */

.zz-tickets.is-quiet .zz-ticket { opacity: .82; }
.zz-tickets.is-quiet .zz-ticket:hover { opacity: 1; }

.zz-thread-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /*!fb*/ margin-bottom: 16px;
    margin-bottom: var(--zz-s-4);
}

.zz-thread-reply { /*!fb*/ margin-top: 24px; margin-top: var(--zz-s-5); }

.zz-thread-closed {
    /*!fb*/ margin-top: 24px;
    margin-top: var(--zz-s-5);
    /*!fb*/ padding-top: 16px;
    padding-top: var(--zz-s-4);
    /*!fb*/ border-top: 1px solid rgba(255, 255, 255, .07);
    border-top: 1px solid var(--zz-line);
}

.zz-back {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    /*!fb*/ margin-bottom: 8px;
    margin-bottom: var(--zz-s-2);
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    text-decoration: none;
}
.zz-back:hover { /*!fb*/ color: #fb623f; color: var(--zz-ember); }

/* The account heading's buttons. */
.zz-acc-head-act { display: flex; /*!fb*/ gap: 8px; gap: var(--zz-s-2); flex-wrap: wrap; }


/* ======================================================================
   NARROW SCREENS

   The wide layout is written first and collapsed here, rather than the other
   way round, because the wide one is where the real layout decisions are.
   ====================================================================== */

@media (max-width: 860px) {
    .zz-hub > .zz-hub-main,
    .zz-hub > .zz-hub-support { flex: 1 1 100%; margin-right: 0; }
    .zz-hub-links { display: block; }
    .zz-hub-links > .zz-hub-link + .zz-hub-link { margin-left: 0; /*!fb*/ margin-top: 12px; margin-top: var(--zz-s-3); }

    .zz-support-hero { display: block; }
    .zz-support-hero .zz-btn-cta { width: 100%; /*!fb*/ margin-top: 16px; margin-top: var(--zz-s-4); }

    .zz-acc-head { display: block; }
    .zz-acc-head-act { /*!fb*/ margin-top: 12px; margin-top: var(--zz-s-3); }
    .zz-acc-head-act .zz-btn-ghost { flex: 1 1 0; justify-content: center; }

    .zz-hub-actions .zz-btn-cta,
    .zz-hub-actions .zz-btn-ghost { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 560px) {
    /* Stacked, and each a full-width target - a thumb is not a mouse. */
    .zz-form-between { display: block; }
    .zz-form-between .zz-auth-small { display: inline-block; /*!fb*/ margin-top: 8px; margin-top: var(--zz-s-2); }

    .zz-thread-head { display: block; }
    .zz-thread-head .zz-pill { /*!fb*/ margin-top: 8px; margin-top: var(--zz-s-2); }

    .zz-head-min-in { /*!fb*/ padding: 8px 0; padding: var(--zz-s-2) 0; }
    .zz-head-min .zz-logo img { height: 34px; }
}

/* Small print, on a television.
   The TV type scale lifts the whole site, but its smallest step is still 13px
   and these labels sit at three metres, not fifty centimetres. Nothing in the
   account area goes below 14px on a set. */
[data-tv] .zz-eyebrow,
[data-tv] .zz-hint,
[data-tv] .zz-auth-small,
[data-tv] .zz-auth-foot,
[data-tv] .zz-count,
[data-tv] .zz-hub-link small,
[data-tv] .zz-back { font-size: 15px; }

/* ======================================================================
   THE SIGN-IN POP-UP

   Opened from the player's own sign-in gate on the homepage, so a visitor who
   has just been told "sign in to start watching" does not lose the page they
   were on. It carries the SAME card the /login page renders, fetched from
   /login?embed=1 - not a second copy of the form.
   ====================================================================== */

.zz-auth-modal {
    position: fixed;
    z-index: 90;
    top: 0; right: 0; bottom: 0; left: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    /*!fb*/ padding: 24px 16px;
    padding: var(--zz-s-5) var(--zz-s-4);
    background: rgba(4, 7, 9, .72);
    overflow-y: auto;
}

.zz-auth-modal.is-open { display: flex; }

[data-theme="light"] .zz-auth-modal { background: rgba(30, 26, 22, .55); }

.zz-auth-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: auto;
}

/* The card arrives with its own border and padding from .zz-auth-card, so the
   wrapper adds only the close button and the room for it. */
.zz-auth-modal .zz-auth-embed { margin: 0; }

.zz-auth-modal .zz-modal-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    background: transparent;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    cursor: pointer;
}

.zz-auth-modal .zz-modal-close:hover,
.zz-auth-modal .zz-modal-close:focus {
    /*!fb*/ background: rgba(255, 255, 255, .12);
    background: var(--zz-line-2);
    /*!fb*/ color: #f3f6f8;
    color: var(--zz-ink);
}

.zz-auth-loading {
    /*!fb*/ padding: 48px 0;
    padding: var(--zz-s-7) 0;
    /*!fb*/ color: #9aa7b0;
    color: var(--zz-ink-2);
    text-align: center;
}

.zz-auth-done { /*!fb*/ padding: 24px; padding: var(--zz-s-5); text-align: center; }

/* The switcher sits under the close button; keep them apart. */
.zz-auth-modal .zz-auth-switch { margin-right: 44px; }

@media (max-width: 560px) {
    .zz-auth-modal { padding: 0; }
    .zz-auth-modal-card { max-width: none; min-height: 100%; }
    .zz-auth-modal .zz-auth-embed {
        min-height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* A television has no pointer to dismiss with, so the close button has to be
   big and obviously focusable. */
[data-tv] .zz-auth-modal .zz-modal-close { width: 56px; height: 56px; }
[data-tv] .zz-auth-modal .zz-auth-switch { margin-right: 56px; }

/* ======================================================================
   DASHBOARD POLISH
   ====================================================================== */

/* Vertical rhythm for a column of cards. Cards used to carry their own
   bottom margin, which meant the gap changed depending on which card came
   last. One owner of the spacing, not five. */
.zz-stack { display: flex; flex-direction: column; /*!fb*/ gap: 16px; gap: var(--zz-s-4); }

.zz-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /*!fb*/ margin-bottom: 16px;
    margin-bottom: var(--zz-s-4);
}
.zz-card-head .zz-card-title { margin-bottom: 4px; }
.zz-card-head .zz-card-text { margin: 0; }

/* ------------------------------------------------------------- the tabs
   A tab strip has three states and the old one really only had two: the open
   tab was tinted and everything else was flat, so there was no feedback at all
   between "pointing at it" and "having pressed it". */
.zz-acc-tab {
    position: relative;
    /*!fb*/ border-radius: 8px 8px 0 0;
    border-radius: var(--zz-r-sm) var(--zz-r-sm) 0 0;
    transition: color .15s ease, background .15s ease;
}

/* The moving underline. On the open tab it is full width; on hover it grows in
   from the middle, so the pointer gets an answer before the click. */
.zz-acc-tab:after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 2px;
    /*!fb*/ background: #fb623f;
    background: var(--zz-ember);
    border-radius: 2px;
    transition: left .18s ease, right .18s ease;
}

.zz-acc-tab:hover { /*!fb*/ color: #f3f6f8; color: var(--zz-ink); /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-line); }
.zz-acc-tab:hover:after { left: 30%; right: 30%; }

.zz-acc-tab.is-on { /*!fb*/ color: #ffffff; color: var(--zz-ink-hi); }
.zz-acc-tab.is-on:after { left: 0; right: 0; }

/* Keyboard focus is never only a colour change - it has to be visible to
   somebody who cannot see the pointer. */
.zz-acc-tab:focus-visible { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: -2px; }

/* ---------------------------------------------------------- empty states
   An empty list used to be one dim sentence, which reads as a page that failed
   to load. An icon, a plain statement and - where there is one - the action
   that fills it, so the state explains itself. */
/* The account area's quieter variant of the empty state. SCOPED, not a second
   definition: the base .zz-empty lives in zuzz-2026.css, and an unscoped copy
   here restyled the homepage's schedules too whenever this sheet was loaded
   for the sign-in pop-up. */
.zz-acc .zz-empty {
    min-height: 0;
    /*!fb*/ padding: 48px 16px;
    padding: var(--zz-s-7) var(--zz-s-4);
}

.zz-acc .zz-empty-ico {
    width: 56px;
    height: 56px;
    border: 0;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    /*!fb*/ background: rgba(255, 255, 255, .07);
    background: var(--zz-line);
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
}
.zz-acc .zz-empty-ico svg { /*!fb*/ color: #7e8b95; color: var(--zz-ink-3); }

.zz-acc .zz-empty-t { font-weight: 700; }
.zz-acc .zz-empty-x { max-width: 46ch; /*!fb*/ color: #9aa7b0; color: var(--zz-ink-2); }
.zz-acc .zz-empty .zz-btn-cta, .zz-acc .zz-empty .zz-btn-ghost { margin-top: 16px; }

/* --------------------------------------------------------- "message sent" */
.zz-sent {
    display: flex;
    align-items: flex-start;
    /*!fb*/ gap: 16px;
    gap: var(--zz-s-4);
    border-color: rgba(61, 220, 132, .35);
    background: rgba(61, 220, 132, .07);
}

.zz-sent-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    /*!fb*/ border-radius: 999px;
    border-radius: var(--zz-r-pill);
    background: rgba(61, 220, 132, .16);
    /*!fb*/ color: #3ddc84;
    color: var(--zz-live);
}

.zz-sent .zz-card-text:last-child { margin-bottom: 0; }

/* The reference, as a link. Monospaced so it can be read back over the phone
   without ambiguity. */
.zz-ref {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    /*!fb*/ color: #fb623f;
    color: var(--zz-ember);
    text-decoration: none;
    /*!fb*/ border-bottom: 1px dashed rgba(251, 98, 63, .35);
    border-bottom: 1px dashed var(--zz-ember-line);
}
.zz-ref:hover { border-bottom-style: solid; }

/* ------------------------------------------------------------- live chat */
.zz-btn-chat { display: inline-flex; align-items: center; gap: 8px; }

.zz-hero-acts,
.zz-form-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
}
.zz-form-acts { /*!fb*/ margin-top: 16px; margin-top: var(--zz-s-4); }
.zz-form-aside { /*!fb*/ margin-top: 12px; margin-top: var(--zz-s-3); margin-bottom: 0; }

/* ------------------------------------------------- lists, rows and cards
   Rows now lift slightly and shift the accent edge in, so the pointer has
   something to land on. */
.zz-ticket {
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.zz-ticket:hover {
    /*!fb*/ background: rgba(251, 98, 63, .12);
    background: var(--zz-ember-ghost);
    /*!fb*/ border-left-color: rgba(251, 98, 63, .35);
    border-left-color: var(--zz-ember-line);
}
.zz-ticket:focus-visible { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: -2px; }

.zz-hub-link { transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.zz-hub-link:hover { transform: translateY(-1px); }
.zz-hub-link:focus-visible { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }

/* A television has no hover, and a transform that only happens on hover is
   invisible there - the focus ring does the work instead. */
[data-tv] .zz-hub-link:hover,
[data-tv] .zz-ticket:hover { transform: none; }

/* Section headings inside a card, with their count. */
.zz-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*!fb*/ gap: 12px;
    gap: var(--zz-s-3);
    /*!fb*/ margin-bottom: 16px;
    margin-bottom: var(--zz-s-4);
}
.zz-sec-head .zz-card-title { margin: 0; }

@media (max-width: 560px) {
    .zz-sent { display: block; }
    .zz-sent-ico { /*!fb*/ margin-bottom: 12px; margin-bottom: var(--zz-s-3); }
    .zz-hero-acts .zz-btn-cta,
    .zz-hero-acts .zz-btn-chat,
    .zz-form-acts .zz-btn-cta,
    .zz-form-acts .zz-btn-chat { width: 100%; justify-content: center; }
}

/* A quiet, secondary action - "close this conversation". Deliberately not a
   button-looking button: it is the least likely thing on the page to be wanted
   and the most annoying to press by accident. */
.zz-thread-close { /*!fb*/ margin-top: 16px; margin-top: var(--zz-s-4); }

.zz-btn-quiet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    /*!fb*/ padding: 0 12px;
    padding: 0 var(--zz-s-3);
    border: 0;
    /*!fb*/ border-radius: 8px;
    border-radius: var(--zz-r-sm);
    background: transparent;
    /*!fb*/ color: #7e8b95;
    color: var(--zz-ink-3);
    /*!fb*/ font-size: 12px;
    font-size: var(--zz-t-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.zz-btn-quiet:hover,
.zz-btn-quiet:focus { /*!fb*/ background: rgba(255, 255, 255, .07); background: var(--zz-line); /*!fb*/ color: #f3f6f8; color: var(--zz-ink); }
.zz-btn-quiet:focus-visible { /*!fb*/ outline: 2px solid #fb623f; outline: 2px solid var(--zz-ember); outline-offset: 2px; }

/* Cloudflare's widget sits between the last field and the submit button. */
.zz-turnstile { /*!fb*/ margin: 12px 0; margin: var(--zz-s-3) 0; min-height: 0; }