/*
 * Portal styling. Deliberately plain and theme-agnostic: this renders inside whatever theme
 * the site runs, and a parent checking a call time on a phone needs legibility, not brand.
 * Sizes are in rem so the theme's base font still governs.
 */

.tr-portal { max-width: 46rem; margin: 0 auto; line-height: 1.5; }

.tr-notice { padding: .75rem 1rem; border-radius: .375rem; margin-bottom: 1rem; }
.tr-notice-ok { background: #ecfdf5; border: 1px solid #a7f3d0; }
.tr-notice-warn { background: #fffbeb; border: 1px solid #fde68a; }

.tr-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: baseline;
           justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.12);
           padding-bottom: .75rem; margin-bottom: 1.25rem; }
.tr-head h2 { margin: 0; }
.tr-program { margin: .125rem 0 0; opacity: .7; font-size: .9rem; }

.tr-groups { display: flex; flex-wrap: wrap; gap: .375rem; }
.tr-chip { display: inline-block; padding: .25rem .625rem; border-radius: 999px;
           border: 1px solid rgba(0,0,0,.2); font-size: .85rem; text-decoration: none; }
.tr-chip.is-current { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.tr-section { margin-bottom: 2rem; }
.tr-section h3 { margin: 0 0 .75rem; font-size: 1.05rem; text-transform: uppercase;
                 letter-spacing: .04em; opacity: .75; }

.tr-schedule { list-style: none; margin: 0; padding: 0; }
.tr-schedule-item { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.tr-when { font-weight: 600; }
.tr-where, .tr-call { opacity: .75; font-size: .9rem; }
.tr-call { white-space: nowrap; }

.tr-post { padding: 1rem; border: 1px solid rgba(0,0,0,.12); border-radius: .5rem;
           margin-bottom: .75rem; }
.tr-post.is-pinned { border-color: #fbbf24; box-shadow: inset 3px 0 0 #fbbf24; }
.tr-post h4 { margin: 0 0 .25rem; }
.tr-meta { margin: 0 0 .5rem; font-size: .8rem; opacity: .65; }
.tr-body { margin-bottom: .5rem; }

.tr-btn { display: inline-block; padding: .5rem 1rem; border: 0; border-radius: .375rem;
          background: #0a0a0a; color: #fff; cursor: pointer; font: inherit; }
.tr-btn:disabled { opacity: .5; cursor: default; }
.tr-link { background: none; border: 0; padding: 0; color: inherit;
           text-decoration: underline; cursor: pointer; font: inherit; }

.tr-acked { margin: 0; font-size: .85rem; color: #047857; font-weight: 600; }
.tr-ackreport { margin-top: .5rem; font-size: .85rem; }
.tr-ackreport ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.tr-pending { opacity: .8; }

.tr-replies { margin-top: .75rem; border-top: 1px solid rgba(0,0,0,.08); padding-top: .5rem; }
.tr-reply { margin: .25rem 0; font-size: .9rem; }
.tr-reply-form { display: flex; gap: .5rem; margin-top: .5rem; }
.tr-reply-input { flex: 1; padding: .375rem .5rem; }

.tr-signin { max-width: 26rem; margin: 2rem auto; }
.tr-signin label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
.tr-signin input { width: 100%; padding: .5rem; margin-bottom: .75rem; }
.tr-msg { min-height: 1.25rem; font-size: .9rem; opacity: .85; }

.tr-tools { margin-bottom: 2rem; border: 1px solid rgba(0,0,0,.12); border-radius: .5rem;
            padding: .75rem 1rem; background: rgba(0,0,0,.02); }
.tr-tools > summary { cursor: pointer; font-weight: 600; }
.tr-tool { margin-top: 1.25rem; }
.tr-tool h3 { margin: 0 0 .5rem; font-size: 1rem; }
.tr-tool label { display: block; margin: .5rem 0; }
.tr-tool input[type="text"], .tr-tool input[type="datetime-local"],
.tr-tool textarea, .tr-tool select { width: 100%; padding: .375rem .5rem; }
.tr-check { display: flex !important; align-items: center; gap: .5rem; }
.tr-check input { width: auto; }
.tr-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.tr-row label { flex: 1 1 10rem; }
.tr-hint { font-size: .85rem; opacity: .7; margin: .25rem 0 .5rem; }
.tr-count { font-weight: 400; opacity: .6; }

.tr-roster { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tr-roster th, .tr-roster td { text-align: left; padding: .375rem .5rem;
                               border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.tr-phone { opacity: .7; font-size: .85em; }

.tr-empty { opacity: .7; font-style: italic; }
.tr-foot { margin-top: 2rem; padding-top: .75rem; border-top: 1px solid rgba(0,0,0,.08);
           font-size: .85rem; }

@media (max-width: 480px) {
    .tr-head { flex-direction: column; align-items: flex-start; }
    .tr-roster thead { display: none; }
    .tr-roster tr { display: block; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
    .tr-roster td { display: block; border: 0; padding: .125rem 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Single-page layout: every level stacked, read on a phone.
   Sections are wide, generously spaced and separated by a rule rather than
   a card, so scrolling past four levels does not feel like scrolling past
   four boxes. Touch targets are 44px; contact details are tap-to-call.
   ───────────────────────────────────────────────────────────────────────── */

.tr-head { display: block; border-bottom: 2px solid rgba(0,0,0,.15); }
.tr-role { margin: .25rem 0 0; font-size: .9rem; opacity: .7; }

.tr-jump { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1.5rem; }
.tr-jump a { padding: .375rem .75rem; border: 1px solid rgba(0,0,0,.2);
             border-radius: 999px; font-size: .85rem; text-decoration: none; }

.tr-level { padding: 1.5rem 0 2rem; border-bottom: 1px solid rgba(0,0,0,.12); scroll-margin-top: 1rem; }
.tr-level:last-of-type { border-bottom: 0; }
.tr-level-head { margin-bottom: 1rem; }
.tr-level-head h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.tr-level-head .tr-program { display: inline-block; margin-right: .5rem; font-size: .85rem; opacity: .7; }
.tr-leadnames { display: block; font-size: .85rem; opacity: .75; margin-top: .125rem; }

.tr-sub { margin: 1.25rem 0 .5rem; font-size: .8rem; text-transform: uppercase;
          letter-spacing: .06em; opacity: .6; }

/* The captain's standing note — visually the first thing after the calendar. */
.tr-note { background: rgba(251,191,36,.10); border-left: 3px solid #fbbf24;
           border-radius: .25rem; padding: .75rem 1rem; margin: .75rem 0 0; }
.tr-note-body p:first-child { margin-top: 0; }
.tr-note-body p:last-child { margin-bottom: 0; }

.tr-inline-edit > summary { cursor: pointer; font-size: .85rem; opacity: .8; margin-top: .5rem; }
.tr-inline-edit textarea { width: 100%; margin: .5rem 0; padding: .5rem; font: inherit; }

.tr-calendar { margin-top: .75rem; }

/* Roster and tools are collapsed by default: a captain opens them, a long
   page stays scannable, and contact details are not on screen by accident. */
.tr-roster-wrap, .tr-tool-wrap { margin-top: 1rem; border: 1px solid rgba(0,0,0,.12);
                                 border-radius: .375rem; padding: .625rem .875rem; }
.tr-roster-wrap > summary, .tr-tool-wrap > summary {
    cursor: pointer; font-weight: 600; font-size: .95rem; min-height: 44px;
    display: flex; align-items: center; }

.tr-rolehead { margin: .875rem 0 .375rem; font-size: .8rem; text-transform: uppercase;
               letter-spacing: .05em; opacity: .65; }
.tr-people { list-style: none; margin: 0; padding: 0; }
.tr-people li { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.07);
                display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.tr-person { font-weight: 600; flex: 1 1 100%; }
.tr-contact { font-size: .875rem; text-decoration: none; padding: .25rem 0; }
.tr-pending-tag { font-size: .75rem; opacity: .6; font-style: italic; }

.tr-addform { margin-top: .75rem; }
.tr-addform label { display: block; margin: .5rem 0; font-size: .9rem; }
.tr-addform input[type="text"], .tr-addform input[type="email"],
.tr-addform input[type="tel"], .tr-addform input[type="datetime-local"],
.tr-addform textarea, .tr-addform select {
    width: 100%; padding: .625rem; font: inherit; margin-top: .25rem;
    border: 1px solid rgba(0,0,0,.25); border-radius: .25rem; }
.tr-addform .tr-btn { margin-top: .75rem; min-height: 44px; }
.tr-inline { display: inline; }

@media (max-width: 560px) {
    .tr-portal { padding: 0 .25rem; }
    .tr-level-head h3 { font-size: 1.2rem; }
    .tr-row { flex-direction: column; gap: 0; }
    .tr-row label { flex: 1 1 auto; }
    .tr-btn { width: 100%; text-align: center; }
}

/* Staff sign in with their account; everyone else by emailed link. */
.tr-staff-signin { margin-top: 1.25rem; padding-top: 1rem;
                   border-top: 1px solid rgba(0,0,0,.12); font-size: .875rem; opacity: .85; }

/* Text-message consent, rendered by the campaigns module through the portal hooks. */
.tr-sms { padding: 1rem; border: 1px solid rgba(0,0,0,.12); border-radius: .5rem; margin-bottom: 1.5rem; }
.tr-sms-number { margin: 0 0 .5rem; }
.tr-sms-agree { display: flex; gap: .625rem; align-items: flex-start; cursor: pointer; }
.tr-sms-agree input { margin-top: .3rem; flex: none; }
.tr-sms-actions { margin: .75rem 0 0; }
.tr-sms-status { margin: 0 0 .75rem; font-size: .9rem; opacity: .85; }
.tr-sms-inline { display: inline; }
.tr-sms-inline .tr-link, .tr-sms-status a { text-decoration: underline; }

/* ── The roster: a name, and everything else one tap away ──────────────────
   Thirty children with two addresses and two phone numbers each is a wall
   nobody reads, and it puts a child's contact details on screen every time a
   captain checks who is in the group. The name is the row; "Parent / contacts"
   opens the dancer's own details and their parents', each attributed.
   ───────────────────────────────────────────────────────────────────────── */

.tr-roster { margin-top: 1rem; }

.tr-dancer { border-bottom: 1px solid rgba(0,0,0,.08); }
.tr-dancer:last-child { border-bottom: 0; }

.tr-dancer-panel > summary { cursor: pointer; padding: .625rem 0; min-height: 44px;
                             display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.tr-dancer-name { font-weight: 600; font-size: 1rem; }

/* A name with nothing behind it — the level a viewer can see but is not in. Sits on the
   same baseline as a name that does open, so a list of both reads as one list. */
.tr-dancer-plain {
    display: block;
    padding: 0.6rem 0.2rem;
    font-weight: 500;
}
.tr-openhint { font-size: .75rem; opacity: .55; margin-left: auto; }
.tr-noguardian-tag { font-size: .7rem; color: #b32d2e; border: 1px solid currentColor;
                     border-radius: 999px; padding: 0 .4em; }

.tr-dancer-body { padding: 0 0 .75rem .875rem; border-left: 2px solid rgba(0,0,0,.12); }
.tr-contact-line { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .125rem .75rem; align-items: baseline; }

.tr-forwhom { font-size: .75rem; opacity: .6; }
.tr-forwhom::before { content: "for "; }
.tr-noguardian { margin: .25rem 0 0; font-size: .85rem; color: #b32d2e; }

/* Messaging the group is first among the captain's tools by position, not by being open —
   a box standing open on a page somebody came to read is a prompt to write, every time. */
.tr-messageall { margin: 1rem 0 1.25rem; padding: .625rem 1rem;
                 border: 1px solid rgba(0,0,0,.15); border-radius: .5rem;
                 background: rgba(0,0,0,.02); }
.tr-messageall > summary { cursor: pointer; font-weight: 600; min-height: 44px;
                           display: flex; align-items: center; gap: .5rem; }
.tr-btn-primary { background: #0a0a0a; font-weight: 600; }

@media (max-width: 560px) {
    .tr-openhint { margin-left: 0; flex-basis: 100%; }
    .tr-contact-line { flex-direction: column; gap: .125rem; }

}

/* Programme settings — managers only, collapsed, visually set apart from the levels. */
.tr-programme { background: rgba(0,0,0,.03); margin-bottom: 1.5rem; }
.tr-programme .tr-tool { margin-top: 1rem; }
.tr-programme .tr-tool:first-of-type { margin-top: .5rem; }

/* Each row in a dancer's panel says what it is: the child, or an adult for them. */
.tr-role-tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
               border-radius: 3px; padding: .1em .45em; white-space: nowrap;
               flex: 0 0 auto; align-self: center; }
.tr-role-dancer { background: rgba(10,10,10,.08); }
.tr-role-parent { background: rgba(251,191,36,.25); }
.tr-role-lead   { background: rgba(59,130,246,.22); }
.tr-role-other  { background: rgba(16,185,129,.20); }
.tr-dancer-body .tr-people li { gap: .25rem .625rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   iOS — this is read on a phone, standing up, one-handed, often outdoors.
   Everything here is a Safari-specific behaviour rather than general polish.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Safari zooms the whole page when a field smaller than 16px takes focus, and
   does not zoom back out. A parent tapping "Message everyone" then finds the
   page magnified and the layout lost. 16px is the threshold, not a preference. */
.tr-portal input[type="text"],
.tr-portal input[type="email"],
.tr-portal input[type="tel"],
.tr-portal input[type="search"],
.tr-portal input[type="number"],
.tr-portal input[type="datetime-local"],
.tr-portal textarea,
.tr-portal select {
    font-size: 16px;
    max-width: 100%;
    /* Safari ignores width on date inputs without this, and they overflow. */
    -webkit-appearance: none;
    appearance: none;
    border-radius: .25rem;
}

/* Rotating to landscape otherwise inflates body text and nothing else,
   which breaks every alignment on the page. */
.tr-portal { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The grey flash on every tap reads as a rendering fault on a list of names. */
.tr-portal a,
.tr-portal summary,
.tr-portal button { -webkit-tap-highlight-color: rgba(0,0,0,.06); }

/* Safari puts its own disclosure triangle on summary and ignores list-style;
   this is the documented way to replace it, and without it the custom marker
   appears twice. */
.tr-portal summary { list-style: none; }
.tr-portal summary::-webkit-details-marker { display: none; }
.tr-portal summary::before {
    content: "›";
    display: inline-block;
    margin-right: .5em;
    transform: rotate(90deg);
    transition: transform .12s ease;
    opacity: .5;
    font-size: 1.1em;
    line-height: 1;
}
.tr-portal details[open] > summary::before { transform: rotate(-90deg); }

/* A phone number is the thing somebody reaches for at 4pm on a Saturday.
   iOS already linkifies tel:, but the target has to be worth hitting. */
.tr-contact { min-height: 32px; display: inline-flex; align-items: center; }

/* Home-indicator and notch. Without this the sign-out control sits under the
   indicator on every modern iPhone. */
.tr-portal { padding-left: max(.25rem, env(safe-area-inset-left));
             padding-right: max(.25rem, env(safe-area-inset-right)); }
.tr-foot { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }

/* Rubber-band scrolling inside the roster drags the whole page on iOS. */
.tr-portal details { overscroll-behavior: contain; }

/* Long addresses are the one thing that makes this page scroll sideways. */
.tr-contact, .tr-person, .tr-dancer-name { overflow-wrap: anywhere; }

/* Dark mode is a system setting most families leave on; the page inherits the
   theme's colours but these hard-coded panels would stay light. */
@media (prefers-color-scheme: dark) {
    .tr-note        { background: rgba(251,191,36,.12); }
    .tr-messageall,
    .tr-programme,
    .tr-tool-wrap,
    .tr-roster-wrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
    .tr-role-dancer { background: rgba(255,255,255,.12); }
    .tr-role-parent { background: rgba(251,191,36,.28); color: #111; }
    .tr-role-lead   { background: rgba(59,130,246,.34); color: #fff; }
    .tr-role-other  { background: rgba(16,185,129,.30); color: #fff; }
    .tr-notice-ok   { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.4); }
    .tr-notice-warn { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.4); }
}

/* Rehearsals, grouped under the day they fall on. */
.tr-schedule-day { margin: .9rem 0 .15rem; font-weight: 700; font-size: .82rem;
                   letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.tr-schedule-day:first-child { margin-top: 0; }
.tr-schedule-item .tr-when { font-variant-numeric: tabular-nums; }
.tr-note-inline { font-size: .9rem; opacity: .8; }


/* ============================================================ Nutcracker HQ
 *
 * The master schedule: Virginia's wall chart, in the site's own type.
 *
 * Written as one block on purpose. This started as nine appended patches — one per
 * thing that looked wrong on the day — and they ended up setting the same padding
 * three times with three values and fighting each other over colour. Alignment went
 * with them. A stylesheet you can only correct by appending another override is one
 * nobody can reason about, so the rules below are stated once, in order.
 *
 * Two constants behind the decisions:
 *
 *   The page sits on the studio's THEME, which is light at all times. So there is no
 *   prefers-color-scheme handling here: honouring the reader's dark setting painted
 *   light text on a white page and the calls vanished. The OS preference describes
 *   the reader, not this page.
 *
 *   The theme styles every button, heading and table cell on the page and carries its
 *   own !important. Matching it is not decoration, it is the only way these rules
 *   survive at all.
 */

.tr-hq .tr-head h2 { margin: 0 0 1rem; }

/* Layout toggle — the only control on the page. */
.tr-views { display: flex; gap: .4rem; margin: 0 0 1.25rem; }
.tr-portal .tr-views .tr-chip {
    font: inherit; font-size: .82rem; line-height: 1; cursor: pointer;
    padding: .55rem .85rem; min-height: 40px; border-radius: 999px;
    background: #fff !important; color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    border: 1px solid rgba(10,10,10,.3) !important; text-shadow: none !important;
}
.tr-portal .tr-views .tr-chip.is-on {
    background: #111 !important; color: #fff !important;
    -webkit-text-fill-color: #fff !important; border-color: #111 !important;
}

.tr-hq.is-list .tr-gridwrap { display: none; }
.tr-hq.is-grid .tr-day      { display: none; }

/* ---- the chart */

.tr-gridday   { margin: 0 0 2.25rem; }
.tr-gridscroll { overflow: visible; }

.tr-portal .tr-day-head {
    position: sticky; top: 0; z-index: 2;
    margin: 0 0 .25rem; padding: .45rem 0 .35rem;
    background: #fff !important; color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: 1rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 2px solid rgba(10,10,10,.85);
}
.tr-daycount { font-size: .68rem; font-weight: 600; letter-spacing: .04em;
               opacity: .55; margin-left: .5rem; text-transform: none; }

.tr-grid { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: .86rem; }

/* One horizontal rhythm for every cell in the table — this is what keeps the columns
   aligned, so it is set here once and nowhere else. */
.tr-portal .tr-grid th,
.tr-portal .tr-grid td {
    text-align: left; vertical-align: top;
    padding: .4rem .6rem;
    border-right: 1px solid rgba(10,10,10,.07);
}
.tr-portal .tr-grid th:last-child,
.tr-portal .tr-grid td:last-child { border-right: 0; }

.tr-portal .tr-grid thead th {
    position: sticky; top: 2.1rem; z-index: 1;
    background: #fff !important; color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap; border-bottom: 1px solid rgba(10,10,10,.25);
}

/* The time gutter. Right-aligned so the numbers sit against the first column. */
.tr-portal .tr-gt-time {
    width: 4rem; text-align: right;
    font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 500;
    color: rgba(10,10,10,.5) !important; -webkit-text-fill-color: rgba(10,10,10,.5) !important;
    white-space: nowrap; border-right: 1px solid rgba(10,10,10,.12);
}
.tr-portal .tr-grid tbody tr.is-hour .tr-gt-time {
    color: #111 !important; -webkit-text-fill-color: #111 !important; font-weight: 700;
}
.tr-portal .tr-grid tbody tr.is-hour td,
.tr-portal .tr-grid tbody tr.is-hour th { border-top: 1px solid rgba(10,10,10,.13); }

/* Nothing scheduled, nothing drawn.
 *
 * An empty slot had a column rule down one side and an hour rule across the top, which
 * over a quiet afternoon adds up to a page of empty boxes — the ruled-paper look the
 * spreadsheet had. The structure that matters is carried by the time gutter and the
 * studio headings, both of which stay; free space is now simply free space, and a
 * booking is the only thing on the page with edges. */
.tr-portal .tr-gempty,
.tr-portal .tr-grid tbody tr.is-hour .tr-gempty {
    border: 0 !important;
    background: transparent !important;
}

/* A call. No fill, no spine, no inner box — the cell is already the box. */
.tr-portal .tr-gcell {
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    overflow-wrap: anywhere;
}
.tr-portal .tr-gcell,
.tr-portal .tr-gcell .tr-piece,
.tr-portal .tr-gcell .tr-cast,
.tr-portal .tr-gcell .tr-with,
.tr-portal .tr-gcell .tr-gtime {
    color: #111 !important; -webkit-text-fill-color: #111 !important; text-shadow: none !important;
}
.tr-portal .tr-gcell .tr-piece { display: block; font-weight: 700; font-size: .84rem; line-height: 1.25; }
.tr-portal .tr-gcell .tr-cast  { display: block; font-size: .76rem; line-height: 1.3; opacity: .85; }
.tr-portal .tr-gcell .tr-with  { display: block; font-size: .74rem; opacity: .6; }
.tr-portal .tr-gcell .tr-gtime { display: block; font-size: .72rem; opacity: .55;
                                 margin-top: .15rem; font-variant-numeric: tabular-nums; }



/* Narrow screens keep the chart; it tightens rather than scrolling sideways. */
@media (max-width: 40rem) {
    .tr-grid { font-size: .78rem; }
    .tr-portal .tr-grid th, .tr-portal .tr-grid td { padding: .3rem .4rem; }
    .tr-portal .tr-gt-time { width: 3rem; font-size: .66rem; }
    .tr-portal .tr-gcell .tr-piece { font-size: .76rem; line-height: 1.2; }
    .tr-portal .tr-gcell .tr-with,
    .tr-portal .tr-gcell .tr-gtime { display: none; }
}

/* ---- the day list, for phones and anyone who prefers it */

.tr-day { margin: 0 0 1.5rem; }
.tr-portal .tr-call {
    display: flex; gap: .85rem; align-items: baseline;
    padding: .7rem 0; border-bottom: 1px solid rgba(10,10,10,.08);
}
.tr-call-when { flex: 0 0 8rem; }
.tr-time   { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-studio { display: block; font-size: .78rem; opacity: .7; }
.tr-call-what { flex: 1 1 auto; }
.tr-portal .tr-call .tr-piece { font-weight: 600; }
.tr-portal .tr-call .tr-cast  { display: block; font-size: .85rem; opacity: .85; margin-top: .15rem; }
.tr-portal .tr-call .tr-with  { display: block; font-size: .78rem; opacity: .6; }
.tr-when-badge {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
    padding: .15rem .45rem; border-radius: 4px; vertical-align: middle;
    font-weight: 700;
}
.tr-today    { background: rgba(220,38,38,.18); }
.tr-tomorrow { background: rgba(10,10,10,.10); }

@media (max-width: 30rem) {
    .tr-portal .tr-call { flex-direction: column; gap: .15rem; }
    .tr-call-when { flex: 0 0 auto; }
    .tr-time { display: inline; } .tr-studio { display: inline; margin-left: .5rem; }
}