/* =====================================================================
   Chronoline, Trello styling

   Loaded after app.css. This used to also redefine --primary / --ink /
   --rule / --surface and a few shared rules (.masthead, .card, .button)
   so the whole application took on a blue Trello re-skin. That token
   takeover has been removed so the brand palette set in app.css (navy,
   tan, clay, steel-blue, slate) is what actually renders everywhere.

   What remains below is the board, the card, the pop-up and the
   reminder - components with no counterpart in app.css, styled with
   their own --t-* tokens so they keep the Trello-board look on the
   kanban board specifically without touching the rest of the shell.

   Written mobile first. On a narrow screen the board becomes a single
   full width lane that scrolls sideways one column at a time, which is
   how the Trello mobile application behaves.
   ===================================================================== */

:root {
    /* ---------------------------------------------------------------
       Palette. Trello's own working colours: a blue board, near white
       lists, white cards, and dark slate text rather than pure black.
       Scoped to the .tboard family below - no longer redirected onto
       the shared --primary / --ink / --rule tokens.
       --------------------------------------------------------------- */
    --t-board:        #F1F4F7;
    --t-board-deep:   #09326C;
    --t-board-edge:   #0055CC;
    --t-list:         #F1F2F4;
    --t-list-edge:    #DCDFE4;
    --t-card:         #FFFFFF;
    --t-ink:          #172B4D;
    --t-ink-soft:     #44546F;
    --t-ink-faint:    #626F86;
    --t-late:         #C9372C;
    --t-late-wash:    #FFECEB;
    --t-good:         #216E4E;
    --t-good-wash:    #DCFFF1;
    --t-shadow:       0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31);
    --t-shadow-lift:  0 8px 16px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31);
    --t-radius:       8px;
    --t-radius-card:  8px;

    /* The horizontal padding on .main at this width. The board cancels it to
       reach the edge of the screen, so the two must be kept in step. app.css
       sets 1rem, then 1.5rem at 768px, then 2rem at 960px. */
    --t-bleed:        1rem;
}

/* The shell -------------------------------------------------------------- */

/* Buttons on the board ---------------------------------------------------- */

.tbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 32px;
    padding: 0 .75rem;
    border: 0;
    border-radius: 3px;
    background: var(--t-board);
    color: #FFFFFF;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease;
}

.tbutton:hover { background: var(--t-board-edge); color: #FFFFFF; }
.tbutton:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* On a phone the board bar has a title, a search field and two buttons to
   fit. The labels are dropped below 600 pixels and the buttons become the
   icon alone, which is what stops the bar wrapping onto three lines. */
.tbutton__label { display: none; }

@media (min-width: 600px) {
    .tbutton__label { display: inline; }
}

.tbutton--quiet { background: rgba(9, 30, 66, .06); color: var(--t-ink); }
.tbutton--quiet:hover { background: rgba(9, 30, 66, .12); color: var(--t-ink); }
.tbutton--block { width: 100%; margin-bottom: .4rem; }

/* The board bar ----------------------------------------------------------- */

.tbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: calc(var(--t-bleed) * -1) calc(var(--t-bleed) * -1) 0;
    padding: .7rem var(--t-bleed);
    background: var(--t-board-deep);
    color: #FFFFFF;
}

.tbar__title h1 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #FFFFFF;
}

.tbar__meta { margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .72); }

.tbar__search {
    position: relative;
    flex: 1 1 12rem;
    min-width: 0;
}

.tbar__search i {
    position: absolute;
    top: 50%;
    left: .6rem;
    transform: translateY(-50%);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .7);
    pointer-events: none;
}

.tbar__search input {
    width: 100%;
    height: 32px;
    padding: 0 .6rem 0 1.9rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    font: inherit;
    font-size: .875rem;
}

.tbar__search input::placeholder { color: rgba(255, 255, 255, .7); }
.tbar__search input:focus {
    background: #FFFFFF;
    color: var(--t-ink);
    outline: 2px solid #FFFFFF;
}
.tbar__search input:focus::placeholder { color: var(--t-ink-faint); }

.tbar__actions { display: flex; gap: .4rem; }
.tbar__actions .tbutton--quiet { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.tbar__actions .tbutton--quiet:hover { background: rgba(255, 255, 255, .28); color: #FFFFFF; }

/* The board --------------------------------------------------------------- */

.tboard {
    /* Stacked top to bottom. On a narrow screen the columns run down the
       page and the only scrolling is vertical, which is the behaviour the
       rest of this application has. Sideways scrolling is reserved for
       960px and wider, where there is room for the columns to sit beside
       one another without anything being pushed off the screen. */
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-inline: calc(var(--t-bleed) * -1);
    padding: .75rem var(--t-bleed) 1.25rem;
    background: var(--t-board-bg);
}

.tlist {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    border-radius: 12px;
    background: var(--t-list);
    box-shadow: var(--t-shadow);
}

.tlist--over { background: #E4E6EA; outline: 2px dashed var(--t-board-edge); outline-offset: -4px; }

.tlist__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .4rem .5rem;
    border-radius: 8px 8px 0 0;
    background: var(--t-list);
}

.tlist__title {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--t-ink);
}

.tlist__count {
    min-width: 1.4rem;
    padding: .05rem .35rem;
    border-radius: 10px;
    background: rgba(9, 30, 66, .08);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--t-ink-soft);
}

.tlist__cards {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: .1rem .15rem .3rem;
}

.tlist__empty {
    margin: 0;
    padding: .6rem .4rem;
    font-size: .8125rem;
    color: var(--t-ink-faint);
}

/* A card ------------------------------------------------------------------ */

.tcard {
    position: relative;
    padding: .5rem .6rem .45rem;
    border-left: 4px solid var(--card-colour, var(--t-board));
    border-radius: var(--t-radius-card);
    background: var(--t-card);
    box-shadow: var(--t-shadow);
    cursor: pointer;
    transition: box-shadow .12s ease, transform .12s ease;
}

.tcard:hover { box-shadow: var(--t-shadow-lift); }
.tcard:focus-visible { outline: 2px solid var(--t-board-deep); outline-offset: 2px; }
.tcard--dragging { opacity: .55; transform: rotate(2deg); }
.tcard--lifted { box-shadow: var(--t-shadow-lift); transform: rotate(2deg) scale(1.02); }
.tcard--saving { opacity: .7; }

/* The stripe span is no longer used now .tcard carries its own left border
   above; kept hidden in case an older cached view still renders it. */
.tcard__stripe { display: none; }

.tcard__labels { display: flex; gap: .25rem; margin-bottom: .35rem; }

.tlabel {
    display: block;
    width: 2.5rem;
    height: .5rem;
    border-radius: 4px;
}

.tlabel--late { background: var(--t-late); }

.tcard__title {
    margin: 0 0 .15rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    color: color-mix(in srgb, var(--card-colour, var(--t-ink)) 60%, var(--t-ink));
    overflow-wrap: anywhere;
}

.tcard__code {
    margin: 0 0 .4rem;
    font-size: .75rem;
    color: var(--t-ink-faint);
}

.tcard__meter {
    height: 4px;
    margin-bottom: .4rem;
    border-radius: 2px;
    background: rgba(9, 30, 66, .08);
    overflow: hidden;
}

.tcard__meter span { display: block; height: 100%; background: var(--t-good); }

.tcard__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .4rem;
    min-width: 0;
    font-size: .75rem;
    color: var(--t-ink-faint);
}

.tchip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    font-size: .75rem;
    color: var(--t-ink-faint);
}

.tchip--late { background: var(--t-late-wash); color: var(--t-late); font-weight: 600; }

.tavatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--t-board);
    color: #FFFFFF;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.tavatar--small { width: 1.35rem; height: 1.35rem; margin-left: 0; font-size: .625rem; }

/* The pop-up -------------------------------------------------------------- */

.tmodal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, .5);
    overflow-y: auto;
}

.tmodal[hidden] { display: none; }

.tmodal__panel {
    position: relative;
    width: 100%;
    max-width: 46rem;
    margin: 0;
    border-radius: 0;
    background: var(--t-list);
    box-shadow: var(--t-shadow-lift);
    overflow: hidden;
}

.tmodal__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--t-ink);
    font-size: 1rem;
    cursor: pointer;
}

.tmodal__close:hover { background: #FFFFFF; }

.tmodal__loading { padding: 2.5rem 1.25rem; text-align: center; color: var(--t-ink-faint); }

/* The fragment fetched from the server is placed here. It is given a minimum
   height so that the panel does not collapse to nothing while it loads and
   then jump to full size when it arrives. */
.tmodal__body { min-height: 12rem; }

/* Below 768px these simply stack, which is why they carry no rules of their
   own until the grid takes over. min-width guards against a long unbroken
   string in a description forcing the column wider than the screen. */
.tmodal__main, .tmodal__side { min-width: 0; }

.tmodal__cover { height: 6rem; }

.tmodal__head { padding: .9rem 1.25rem .5rem; }

.tmodal__eyebrow {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

.tmodal__title {
    margin: .1rem 0 .4rem;
    font-size: 1.3125rem;
    line-height: 1.25;
    color: var(--t-ink);
}

.tmodal__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }

.tmeta { font-size: .8125rem; color: var(--t-ink-soft); }

.tmodal__grid { display: block; padding: 0 1.25rem 1.5rem; }

.tsection { margin-bottom: 1.25rem; }

.tsection__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .4rem;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--t-ink);
}

.tsection__count { margin-left: auto; font-size: .75rem; font-weight: 500; color: var(--t-ink-faint); }
.tsection__text { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--t-ink-soft); }
.tsection__empty { margin: 0; font-size: .8125rem; color: var(--t-ink-faint); }

.tsection__pair {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .3rem;
    font-size: .8125rem;
    color: var(--t-ink-soft);
}

.tsection__pair strong { color: var(--t-ink); }
.tsection__pair .is-late { color: var(--t-late); }

.tprogress {
    height: 6px;
    margin-bottom: .75rem;
    border-radius: 3px;
    background: rgba(9, 30, 66, .08);
    overflow: hidden;
}

.tprogress span { display: block; height: 100%; background: var(--t-good); }

.ttasks__heading {
    display: flex;
    gap: .4rem;
    margin: .8rem 0 .3rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

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

.ttask {
    display: flex;
    gap: .5rem;
    padding: .5rem .6rem;
    margin-bottom: .3rem;
    border-radius: var(--t-radius-card);
    background: var(--t-card);
    box-shadow: var(--t-shadow);
}

.ttask--done .ttask__title { text-decoration: line-through; color: var(--t-ink-faint); }
.ttask__mark { color: var(--t-good); font-size: .95rem; line-height: 1.5; }
.ttask--done .ttask__mark { color: var(--t-good); }
.ttask__body { flex: 1 1 auto; min-width: 0; }

.ttask__title {
    display: block;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--t-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ttask__title:hover { text-decoration: underline; }

.ttask__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .2rem; }

.tteam { display: flex; flex-wrap: wrap; gap: .3rem; }
.tteam .tavatar { margin-left: 0; }

.tsection--links { display: flex; flex-direction: column; }

/* The reminder ------------------------------------------------------------ */

.talarm {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .5);
    overflow-y: auto;
}

.talarm[hidden] { display: none; }

.talarm__panel {
    width: min(26rem, 100%);
    padding: 1.35rem 1.4rem 1.1rem;
    border-top: 5px solid var(--reminder-colour, var(--t-board));
    border-radius: var(--t-radius);
    background: #FFFFFF;
    box-shadow: var(--t-shadow-lift);
    animation: talarm-in .16s ease-out;
}

@keyframes talarm-in {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

.talarm__eyebrow {
    margin: 0 0 .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

.talarm__title { margin: 0 0 .2rem; font-size: 1.125rem; line-height: 1.3; color: var(--t-ink); overflow-wrap: anywhere; }
.talarm__project { margin: 0 0 .1rem; font-size: .8125rem; color: var(--t-ink-faint); }
.talarm__due { margin: 0 0 1.1rem; font-size: .8125rem; font-weight: 600; color: var(--t-ink); }

.talarm__prompt {
    margin: 0 0 .4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

.talarm__snooze { display: grid; grid-template-columns: 1fr; gap: .4rem; margin-bottom: 1rem; }

.talarm__actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .85rem;
    border-top: 1px solid var(--t-list-edge);
}

.talarm__foot { margin: .8rem 0 0; font-size: .75rem; text-align: center; color: var(--t-ink-faint); }

/* Nothing behind a modal should scroll away underneath it. */
body.has-modal, body.has-alarm { overflow: hidden; }

/* Wider screens -----------------------------------------------------------

   Breakpoints match the ones app.css already uses: 600, 768, 960 and 1280
   pixels. The board is stacked by default and only becomes a row of
   columns at 960, where there is genuinely room for one.
   -------------------------------------------------------------------------- */

/* Landscape phone and small tablet. The columns still run down the page,
   but there is room to set the cards inside each one two abreast, which
   stops a board of five columns becoming an endlessly long page. */
@media (min-width: 600px) {
    .tlist__cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
    }
    .tlist__empty { grid-column: 1 / -1; }
    .talarm__snooze { grid-template-columns: 1fr 1fr; }
}

/* app.css widens .main to 1.5rem here, so the bleed follows it. */
@media (min-width: 768px) {
    :root { --t-bleed: 1.5rem; }

    .tlist__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .tmodal { padding: 3rem 1rem; align-items: flex-start; }
    .tmodal__panel { border-radius: var(--t-radius); }
    .tmodal__grid { display: grid; grid-template-columns: 1fr 13rem; gap: 1.25rem; }
}

/* Desktop. app.css widens .main to 2rem and hides the bottom tab bar. Only
   here do the columns sit side by side, because only here is there room
   for five of them without pushing anything off the screen. Each column
   scrolls inside itself rather than lengthening the page, and the board
   scrolls sideways only if the columns genuinely overflow. */
@media (min-width: 960px) {
    :root { --t-bleed: 2rem; }

    .tboard {
        flex-direction: row;
        align-items: flex-start;
        gap: .6rem;
        overflow-x: auto;
        min-height: calc(100dvh - 11rem);
    }

    .tlist {
        flex: 0 0 17.5rem;
        width: auto;
        max-width: 17.5rem;
        max-height: calc(100dvh - 13rem);
    }

    .tlist__cards {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
}

/* Older browsers with no dvh unit fall back to vh, which is close enough on
   a desktop where the toolbars do not move. */
@supports not (height: 100dvh) {
    @media (min-width: 960px) {
        .tboard { min-height: calc(100vh - 11rem); }
        .tlist { max-height: calc(100vh - 13rem); }
    }
}

/* Touch targets. Anything tapped rather than clicked wants to be at least
   44 pixels, which is the size a fingertip can reliably hit. */
@media (hover: none) and (pointer: coarse) {
    .tbutton { min-height: 44px; padding: 0 1rem; }
    .tmodal__close { width: 2.75rem; height: 2.75rem; }
    .tcard { padding: .65rem .7rem .6rem; }
    .ttask { padding: .65rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tcard, .talarm__panel { transition: none; animation: none; }
    .tcard--dragging, .tcard--lifted { transform: none; }
}

/* Print ------------------------------------------------------------------- */

@media print {
    .tbar, .tmodal, .talarm { display: none !important; }
    .tboard { display: block; background: none; padding: 0; }
    .tlist { max-width: none; max-height: none; page-break-inside: avoid; box-shadow: none; }
}

/* =====================================================================
   The portfolio schedule

   One row per project across a shared timeline. Every position is a
   percentage of the span the controller calculated, so the chart reflows
   at any width without a script.

   A Gantt chart is the one place in this application where scrolling
   sideways is right rather than a failure of layout: a timeline is wider
   than a phone by its nature, and squeezing a year into 360 pixels would
   make it unreadable. What matters is that the project names stay put
   while the timeline moves, which is what the sticky first column does.
   ===================================================================== */

.gchart__lede {
    margin: 1rem 0 .6rem;
    font-size: .875rem;
    color: var(--t-ink-soft);
}

.gchart {
    border: 1px solid var(--t-list-edge);
    border-radius: var(--t-radius);
    background: var(--t-card);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}

.gchart__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.gchart__scroll:focus-visible { outline: 2px solid var(--t-board); outline-offset: -2px; }

/* Wide enough that a month is legible. Below this the chart scrolls. */
.gchart__inner { min-width: 44rem; }

.gchart__head {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--t-list-edge);
    background: var(--t-list);
}

.gchart__namehead,
.gchart__name {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 9.5rem;
    width: 9.5rem;
    padding: .5rem .6rem;
    border-right: 1px solid var(--t-list-edge);
    background: var(--t-list);
}

.gchart__namehead {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

.gchart__months { display: flex; flex: 1 1 auto; min-width: 0; }

.gchart__month {
    flex: 0 0 auto;
    min-width: 0;
    padding: .5rem .25rem;
    border-left: 1px solid var(--t-list-edge);
    font-size: .75rem;
    font-weight: 600;
    color: var(--t-ink-soft);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.gchart__month small { display: block; font-size: .625rem; font-weight: 400; color: var(--t-ink-faint); }

.gchart__body { position: relative; }

.gchart__today {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 2px;
    margin-left: 9.5rem;
    background: var(--t-late);
    opacity: .7;
}

.gchart__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--t-list-edge);
}

.gchart__row:last-child { border-bottom: 0; }

.gchart__name { background: var(--t-card); }

.gchart__name a {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--t-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gchart__name a:hover { color: var(--t-board); text-decoration: underline; }
.gchart__name small { display: block; font-size: .6875rem; color: var(--t-ink-faint); }

.gchart__track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
}

.gchart__bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    min-width: 6px;
    height: 1.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--bar, #0C66E4) 30%, #FFFFFF);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar, #0C66E4) 55%, #FFFFFF);
    text-decoration: none;
    overflow: hidden;
}

.gchart__bar--late { box-shadow: inset 0 0 0 2px var(--t-late); }

.gchart__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--bar, #0C66E4);
    opacity: .55;
}

.gchart__label {
    position: relative;
    display: block;
    padding: 0 .4rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--t-ink);
    white-space: nowrap;
}

.gchart__undated {
    position: absolute;
    top: 50%;
    left: .5rem;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--t-ink-faint);
}

.gchart__key { margin-top: 1rem; }

/* The filter sits in the board bar, so it wears the same clothes as the
   search field beside it on the projects page. */
.tbar__filter { flex: 1 1 12rem; min-width: 0; }

.tbar__filter select {
    width: 100%;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    font: inherit;
    font-size: .875rem;
}

.tbar__filter select option { color: var(--t-ink); background: #FFFFFF; }
.tbar__filter select:focus { background: #FFFFFF; color: var(--t-ink); outline: 2px solid #FFFFFF; }

/* Browsers without color-mix get a flat bar rather than a tinted one. */
@supports not (background: color-mix(in srgb, red 50%, white)) {
    .gchart__bar { background: #E4E6EA; box-shadow: inset 0 0 0 1px #C1C7D0; }
}

@media (min-width: 768px) {
    .gchart__namehead,
    .gchart__name { flex: 0 0 13rem; width: 13rem; }
    .gchart__today { margin-left: 13rem; }
    .gchart__inner { min-width: 52rem; }
}

@media (min-width: 960px) {
    /* Room for the whole chart, so the sideways scroll goes away entirely. */
    .gchart__inner { min-width: 0; }
}

@media (hover: none) and (pointer: coarse) {
    .tbar__filter select { height: 44px; }
}

/* =====================================================================
   The bottom tab bar

   app.css fixes the grid at five columns. The schedule makes six, so the
   grid is widened here and the labels are given room to stay legible on
   a narrow phone.
   ===================================================================== */

.tabbar { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 26rem) {
    .tabbar__item { font-size: .6rem; padding: .4rem .1rem; letter-spacing: 0; }
    .tabbar__item i { font-size: 1.05rem; }
}

@media print {
    .gchart__scroll { overflow: visible; }
    .gchart__inner { min-width: 0; }
}

/* =====================================================================
   The install prompt

   A quiet bar at the foot of the screen offering to add the app to the
   home screen. It sits above the bottom tab bar on a phone so it hides
   nothing, and it is dismissible and shown at most once.
   ===================================================================== */

.installbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--tabbar-height, 3.5rem) + var(--safe-bottom, 0px) + .6rem);
    z-index: 950;
    width: min(30rem, calc(100vw - 1.5rem));
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border-radius: 10px;
    background: var(--t-ink);
    color: #fff;
    box-shadow: 0 8px 24px rgba(9, 30, 66, .3);
    animation: installbar-in .2s ease-out;
}

@keyframes installbar-in {
    from { opacity: 0; transform: translate(-50%, .6rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.installbar__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.installbar__text strong { font-size: .875rem; font-weight: 700; }
.installbar__text span { font-size: .75rem; color: rgba(255, 255, 255, .82); line-height: 1.4; }

.installbar__actions { display: flex; gap: .4rem; margin-left: auto; flex-shrink: 0; }

.installbar__no,
.installbar__yes {
    min-height: 40px;
    padding: 0 .8rem;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.installbar__no { background: transparent; color: rgba(255, 255, 255, .82); }
.installbar__no:hover { color: #fff; }
.installbar__yes { background: var(--t-board); color: #fff; }
.installbar__yes:hover { background: #fff; color: var(--t-board); }

/* Above the tablet breakpoint the tab bar is gone, so the bar simply sits
   a little way up from the bottom edge. */
@media (min-width: 960px) {
    .installbar { bottom: 1.25rem; }
}

@media (hover: none) and (pointer: coarse) {
    .installbar__no, .installbar__yes { min-height: 44px; }
}