/**
 * Ellis Web Bell — Signage Right Column (styles)
 * Version: 1.5.0 (app release v6.26.0)
 *
 * v1.5.0: .rc-flap-dark — a faint edge on announcement tiles too dark to see
 * against the band (Vevaios slate is the band's own colour). The tile colour
 * itself is set per half by right-column.js v1.7.0.
 *
 * v1.4.0: the ticker is rebuilt as STYLE D (tile, hinge gap, shading), the
 * flip's missing first half is restored (.rc-armed), and every card is laid
 * out as two half-blocks split at the hinge. Pairs with right-column.js
 * v1.6.0; the two must ship together.
 *
 * v1.3.0: .rc-preview-badge for right-column.js v1.5.0's ?date= preview —
 * amber, top-left of the ticker, deliberately impossible to miss.
 *
 * v1.2.0: white-space: pre-line on the ticker text, so the line break
 * right-column.js v1.4.0 puts after "Happy Birthday," is honoured. Ordinary
 * spaces still collapse and wrap exactly as before.
 *
 * v1.1.0: the ticker's font size is now set per line by right-column.js
 * (FIT_STEPS) rather than fixed at 8cqw here. A 25%-of-TV column fits roughly
 * a dozen characters per line at 8cqw, and "Happy Early Birthday, Mr. Wilson!"
 * is a routine output of this feature, not an edge case — faculty entries carry
 * a title AND a full surname. The value below is now only the fallback for a
 * span the script has not yet written to.
 *
 * The SINGLE home for the right column's appearance, shared by
 * dashboard.html (where it is the right 25%) and dashright.html (where it
 * fills the frame). Before this file, both pages carried their own copy and
 * both headers admitted it. They had already drifted five ways by the time
 * this was written:
 *
 *   - .house-name was 9cqw in dashright and 7cqw in dashboard. dashright
 *     v1.1.0 bumped it after the owner's eyeball test on live hardware and
 *     dashboard never got the bump. 9cqw is the value he approved and is
 *     therefore the value here.
 *   - dashright named 'Urbanist'/'Questrial' in its font stack but never
 *     loaded the webfonts — only dashboard had the <link>. So the two pages
 *     rendered in different typefaces on any player without Century Gothic
 *     installed, which is every Yodeck player. Both now load the link.
 *   - The clock's three period cells used bare 1fr in dashboard (no
 *     min-content floor) and minmax(0, 1fr) + min-width: 0 in dashright.
 *     Same root cause as the v1.5.2 setup-panel overflow. minmax wins.
 *   - .column-label / .column-period / .column-countdown were nowrap in
 *     dashboard and wrapping in dashright. nowrap + ellipsis wins: a wrapped
 *     period name pushes the countdown out of a 20%-tall band.
 *   - The root element was .right in dashboard and .right-column in
 *     dashright. Both are now .rc-column.
 *
 * LAYOUT ORDER CHANGED IN 1.0.0 (owner's request). Top to bottom:
 *   1. .rc-ticker      12%  — birthdays / wacky holidays   (NEW)
 *   2. .houses-area    71%  — four house cards, 17.75% each
 *   3. .clock-area     17%  — clock + three period cells   (was top, 20%)
 * The three previous bands were squeezed to make room rather than the
 * scoreboard absorbing it alone, per his read of the live screen.
 *
 * SIZE IN cqw, NEVER vw/vh. That bug has now been fixed three times in this
 * folder: vw/vh resolve against the VIEWPORT, which inside a Yodeck frame is
 * a quarter of the TV, so text came out a quarter of the intended size. Every
 * container that text is sized against declares container-type explicitly,
 * and only ever inline-size for the scoreboard (container-type: size on a
 * flex parent with flex:1 children collapsed the cards to coloured bars in
 * v1.4.1 — do not go back).
 *
 * LOAD ORDER (in each page's <head>):
 *     <link rel="stylesheet" href="right-column.css">
 * then the page's own <style> for anything outside the column.
 */

/* Palette. Owned here for the two pages that load this file; dashclock.html
   does not load it and keeps its own identical copy. */
:root {
    --carolina-blue: #4B9CD3;
    --carolina-blue-light: #7BAFD4;
    --carolina-blue-sky: #8FC3E8;
    --dark-grey: #1a1a1a;
    --slate-bg: #111827;
}

/* Full-frame mount, used by dashright.html. dashboard.html mounts into its
   own .right (25% wide) instead, so it does not use this class. */
.rc-mount {
    width: 100%;
    height: 100%;
}

.rc-column {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--slate-bg);
}

/* ---- 1. Birthday / holiday ticker (12%) -------------------------------- */

.rc-ticker {
    position: relative;   /* anchors .rc-flap and .rc-preview-badge */
    height: 12%;
    overflow: hidden;
    background: var(--slate-bg);
    container-type: inline-size;
    font-family: 'Century Gothic', 'Urbanist', 'Questrial', sans-serif;
    color: #fff;
    /* The flap hinges in 3D. Perspective is sized against the column so the
       fold looks the same at any TV size. */
    perspective: 60cqw;
}

/* v1.4.0 — STYLE D, the owner's pick from four live mockups: a lighter tile on
   the dark band, a dark gap at the hinge, and shading on the moving flaps.

   Four layers, two clipped halves each:
     .rc-flap-top    (static) the NEXT card's top half, revealed as the front
                     flap falls away
     .rc-flap-bottom (static) the CURRENT card's bottom half, covered as the
                     back flap lands
     .rc-flap-front  CURRENT's top half: flat, then falls 0 -> -90deg
     .rc-flap-back   NEXT's bottom half: swings 90deg -> 0
   Every card is split AT the hinge by right-column.js (planCard), so each half
   holds whole lines and the gap never cuts through letters. All sizes are cqw
   against the ticker, so the tile looks the same on every TV. */
.rc-flap {
    position: absolute;
    inset: 1.8cqw 2.4cqw;
    transform-style: preserve-3d;
}

.rc-flap-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    background: #2b3242;
}

.rc-flap-top { top: 0; border-radius: 2.1cqw 2.1cqw 0 0; }

/* v1.5.0: an announcement tile as dark as the band itself would disappear. */
.rc-flap-dark {
    outline: 1px solid rgba(255, 255, 255, 0.3);
    outline-offset: -1px;
}
.rc-flap-bottom { bottom: 0; border-radius: 0 0 2.1cqw 2.1cqw; }

/* Each layer holds the WHOLE card (height 200% of a half = the full tile),
   laid out as two half-blocks separated by the hinge; each half of the tile
   then clips to its own half-block. */
.rc-flap-half > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 2cqw;           /* PAD_CQW in right-column.js — keep in step */
    box-sizing: border-box;
    font-weight: 700;
    /* Replaced per card by right-column.js with a MEASURED px size and the
       font's own line height; these only apply before layout. No
       letter-spacing: the canvas measurement would not see it, and every
       width calculation would be wrong by that much. */
    font-size: 8cqw;
    line-height: 1.2;
}

.rc-flap-top > span { top: 0; }
.rc-flap-bottom > span { bottom: 0; }

/* One half of a card. Height = half the tile minus half the hinge
   (HINGE_CQW in right-column.js). */
.rc-hb {
    height: calc(50% - 0.4cqw);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The nudge moves the fixed reference ink box — tallest ascender to deepest
   descender — to the exact centre of its half. Computed per font size by
   right-column.js; zero until then. */
.rc-hb > i {
    display: block;
    font-style: normal;
    text-align: center;
    transform: translateY(var(--rc-nudge, 0px));
}

.rc-hb > i > div { white-space: nowrap; }

.rc-flap-hinge {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 0.4cqw);
    height: 0.8cqw;
    background: #0b0d12;
    z-index: 3;
}

/* Idle: both moving flaps parked edge-on, out of sight. */
.rc-flap-front {
    transform-origin: bottom center;
    transform: rotateX(-90deg);
    filter: brightness(1);
    z-index: 2;
}

.rc-flap-back {
    transform-origin: top center;
    transform: rotateX(90deg);
    filter: brightness(0.4);
    z-index: 2;
}

/* Step 1, .rc-armed: snap the front flap FLAT over the old top half, with no
   transition. Through v1.3.0 this step did not exist — the front flap was
   parked at -90deg in both states, so it never visibly fell. */
.rc-armed .rc-flap-front {
    transform: rotateX(0deg);
    transition: none;
}

/* Step 2, .rc-flipping: the front flap falls and darkens as it tips away... */
.rc-armed.rc-flipping .rc-flap-front {
    transform: rotateX(-90deg);
    filter: brightness(0.4);
    transition: transform 0.25s ease-in, filter 0.25s ease-in;
}

/* ...then the back flap lands and brightens. If transitions never fire, the
   text still swaps — the flip is decoration, the swap is the feature. */
.rc-flipping .rc-flap-back {
    transform: rotateX(0deg);
    filter: brightness(1);
    transition: transform 0.25s ease-out 0.25s, filter 0.25s ease-out 0.25s;
}

/* ?date= preview marker. Amber and on top of the flap, because a preview URL
   accidentally left in a Yodeck playlist must never pass for the real day. */
.rc-preview-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: #f59e0b;
    color: #111;
    font-family: -apple-system, sans-serif;
    font-weight: 700;
    font-size: 3.2cqw;
    letter-spacing: 0.04em;
    padding: 0.6cqw 2cqw;
    border-bottom-right-radius: 1.5cqw;
}

/* ---- 2. House scoreboard (71%) ----------------------------------------- */

.houses-area {
    height: 71%;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.house-card {
    flex: 1 1 0;                       /* equal share: ~17.75% of the column */
    display: grid;
    grid-template-columns: auto 1fr;   /* crest | name-over-score */
    align-items: center;
    gap: 3cqw;
    padding: 2% 3cqw;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    font-family: 'Century Gothic', 'Urbanist', 'Questrial', serif;
}

.house-crest {
    height: 90%;
    max-width: 30cqw;   /* cap so the crest cannot dominate a narrow frame */
    width: auto;
    object-fit: contain;
    /* transparent PNGs — the card colour shows through */
}

.house-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    min-width: 0;
    gap: 1%;
    height: 100%;
}

.house-name {
    font-family: 'Century Gothic', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 9cqw;    /* the value the owner eyeballed on hardware */
    font-variant-caps: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}

.house-score {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 16cqw;
    line-height: 1;
    letter-spacing: -0.02em;
}

.house-accomodore { background: #ffffff; color: #111827; }
.house-callidus   { background: #d1d5db; color: #111827; }  /* matches --theme-border */
.house-princeps   { background: var(--carolina-blue); color: #111827; }
.house-vevaios    { background: var(--slate-bg); color: #ffffff; }

/* ---- 3. Clock + period cells (17%, now the bottom band) ---------------- */

.clock-area {
    height: 17%;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a1a 0%, var(--slate-bg) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2%;
    container-type: size;
    font-family: 'Century Gothic', 'Urbanist', 'Questrial', sans-serif;
}

/* 13cqw, down from 15cqw. The band lost three points of height while cqw text
   is keyed to WIDTH, so the readout plus three cells no longer fit at the old
   size. Expect to tune this against the real frame. */
#main-clock {
    font-size: 13cqw;
    font-weight: 700;
    color: #fff;
    text-align: center;
    width: 100%;
    line-height: 1.1;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

#schedule-columns {
    display: grid;
    /* minmax(0, 1fr), never bare 1fr: bare 1fr is minmax(auto, 1fr) and the
       auto floor refuses to shrink below the longest label ("TCAP - 6th"),
       overflowing the whole row. Same root cause as clock.html v1.4.0. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2cqw;
    width: 100%;
    margin-top: 2cqh;
}

.schedule-column {
    text-align: center;
    padding: 1.5cqh 1cqw;
    border-radius: 8px;
    background: var(--dark-grey);
    border: 1px solid #333;
    min-width: 0;
}

.column-label {
    font-size: 4cqw;
    font-weight: 600;
    color: #a0a0a0;
    margin-bottom: 1cqh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-period {
    font-size: 5cqw;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.4em;
}

.column-period.active { color: var(--carolina-blue); }

.column-countdown {
    font-size: 3.5cqw;
    color: var(--carolina-blue);
    margin-top: 1cqh;
    white-space: nowrap;
}

/* ---- Version stamp ----------------------------------------------------- */

.version-stamp {
    position: fixed;
    bottom: 4px;
    right: 8px;
    font-size: 10px;
    color: #333;
    font-family: -apple-system, sans-serif;
    z-index: 1;
}