/* This host's own layout only. Colour, type and the shared controls arrive from
   /branding/theme.css and /css/rota-controls.css, which are generated from RotaPalette — the same
   values that seed the coordinator site's MudBlazor theme, so a button here is the button there.

   Unbranded, and that has not changed: Program.cs maps the theme with branded: false, so the
   palette this host gets is the neutral one whatever group is open. What used to sit here was a
   fourth hand-made copy of the palette that had already drifted from the other three — the cards
   were a shade off the coordinator site's and the dark scheme was its own invention. */

body { margin: 0; }

header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    /* The app bar, not the brand colour: this bar is the one on the coordinator site, and the
       buttons underneath it are the primary blue. They were the same navy until the palette was
       shared, which made every button on this host look like a piece of chrome. */
    background: var(--app-header);
    color: var(--on-app-header);
}

header .brand { color: inherit; text-decoration: none; font-weight: 600; letter-spacing: .02em; }
header .brand span { font-weight: 400; opacity: .8; }
header .who { margin-left: auto; opacity: .85; font-size: .875rem; }
header .out + .who { margin-left: auto; }
header a.out:first-of-type { margin-left: auto; }
header .out { color: inherit; font-size: .875rem; }

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.125rem; margin: 2rem 0 .5rem; }
.lead { color: var(--quiet); margin: 0 0 1.5rem; }

.card h3 { margin: 0 0 .25rem; font-size: 1rem; }
/* Quiet text for a card's own paragraphs, but not for the status boxes inside one: .card p outranked
   .good and .note, and a green "saved" came out grey. */
.card p { margin: .25rem 0; font-size: .9375rem; }
.card p:not(.good, .note, .warn, .bad) { color: var(--quiet); }

/* The page-level h2 margin would open an empty band at the top of the card. */
.history-detail h2 { margin-top: 0; }

/* A history entry's before and after. Wraps rather than scrolls sideways, so a long value is still
   readable at phone width. */
.history-json {
    margin: .25rem 0 .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    background: var(--page);
    font-size: .8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 1.25rem 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.section-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem .75rem;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    font-weight: 600;
    text-decoration: none;
}

.section-nav a[aria-current="page"] {
    color: var(--ink);
    background: var(--card);
    border-color: var(--line);
    box-shadow: inset 0 -3px var(--brand);
}

.group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.group a { font-weight: 600; }
.group .tag { flex: 0 0 auto; max-width: 100%; overflow-wrap: break-word; }
.tag { font-size: .75rem; padding: .1rem .45rem; border-radius: 3px; border: 1px solid var(--line); color: var(--quiet); }
.tag.off { color: var(--bad); border-color: var(--bad); }
.tag.on { color: var(--good); border-color: var(--good); }

/* Every form on this host ends in a submit button, and it needs air above it. The shared sheet
   draws the button; where it sits is this host's business, as is how wide a field gets: a name
   box the full width of a 60rem page is harder to read, not easier. */
button { margin-top: 1rem; }
input, select, textarea { max-width: 26rem; }
input[type=file] { max-width: 32rem; }
.cancel { display: inline-block; padding: .6rem 1rem; min-height: 44px; }
table { margin-top: .5rem; }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }

footer { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem 2rem; color: var(--quiet); font-size: .8125rem; }

.branding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .5rem 1rem; }
.branding-grid figure { margin: .5rem 0; min-width: 0; }
.artwork-card { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line); min-width: 0; }
.artwork-card legend { font-weight: 600; }
.artwork-current { object-fit: contain; border-radius: 10px; background: var(--page); }
/* The file inputs inside a card must not push it wider than the grid column it sits in. */
.artwork-card input[type=file] { max-width: 100%; }
.branding-previews, .pack-previews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}
.branding-previews h4 { margin: .5rem 0; }
.brand-preview-card, .pack-preview-card { min-width: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.brand-preview-card > h4, .pack-preview-card > h4 { margin: 0; padding: .65rem .75rem; }
.brand-preview-header { display: flex; gap: .7rem; align-items: center; padding: .75rem; border-bottom: 3px solid; overflow-wrap: anywhere; }
.brand-preview-header div { min-width: 0; }
.brand-preview-header span, .brand-preview-header strong { display: block; }
.brand-preview-header span { font-size: .8rem; }
.brand-preview-header [hidden] { display: none; }
.brand-preview-header canvas { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; }
.brand-preview-header canvas.preview-web-wordmark.is-wide { width: min(145px, 38vw); height: 48px; flex: 0 1 145px; object-fit: contain; }
.installed-preview { display: flex; flex-direction: column; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.icon-treatments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .75rem; }
.icon-treatments figure { min-width: 0; margin: 0; text-align: center; font-size: .75rem; color: var(--quiet); }
.icon-treatments canvas, .icon-treatments img { display: block; width: 64px; height: 64px; margin: 0 auto .35rem; object-fit: contain; border-radius: 14px; }
.icon-treatments .mask-preview canvas, .icon-treatments .maskable img { border-radius: 50%; }
.icon-treatments .favicon-preview canvas, .icon-treatments .favicon img { width: 32px; height: 32px; border-radius: 7px; margin-top: 16px; }
.brand-preview-card > p, .pack-preview-card > p { margin: 0; padding: 0 .75rem .75rem; }
.pack-preview-header { display: flex; align-items: center; gap: .7rem; min-height: 72px; padding: .65rem; color: var(--pack-foreground); background: var(--pack-header); border-bottom: 3px solid var(--pack-accent); }
.pack-preview-header img { width: auto; max-width: min(9rem, 55%); height: 48px; object-fit: contain; }
.pack-preview-header span { overflow-wrap: anywhere; }
.rcs-pack-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.rcs-pack-previews figure { margin: .5rem 0; }
.rcs-pack-previews img { display: block; max-width: 100%; max-height: 12rem; object-fit: contain; }
.table-scroll { overflow-x: auto; }
.pack-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pack-actions form { margin: 0; }
.pack-review details { margin-top: 1rem; }

/* Configuration values and the operator's address must wrap on narrow screens. */
body { overflow-wrap: anywhere; }
header { flex-wrap: wrap; }
header .who { min-width: 0; }
.card table { table-layout: fixed; }

.setup-status h2 { margin-top: 0; }
.setup-checklist { list-style: none; padding: 0; margin: .75rem 0 0; }
.setup-checklist li {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: .75rem;
    padding: .55rem 0;
    border-top: 1px solid var(--line);
}
.setup-result { font-weight: 600; }
.setup-checklist [data-state="ready"] .setup-result { color: var(--good); }
.setup-checklist [data-state="missing"] .setup-result { color: var(--bad); }
.setup-checklist [data-state="review"] .setup-result { color: var(--quiet); }

@media (max-width: 600px) {
    .section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-nav a { justify-content: center; text-align: center; }
    .icon-treatments { grid-template-columns: repeat(3, minmax(4.5rem, 1fr)); overflow-x: auto; }
    .setup-checklist li { grid-template-columns: 1fr; gap: .1rem; }

    .responsive-records thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .responsive-records,
    .responsive-records tbody,
    .responsive-records tr,
    .responsive-records th,
    .responsive-records td {
        display: block;
        width: 100%;
    }

    .responsive-records tr {
        margin-bottom: .75rem;
        padding: .5rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--card);
    }

    .responsive-records tbody th,
    .responsive-records td {
        display: grid;
        grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
        gap: .5rem;
        padding: .45rem .25rem;
    }

    .responsive-records tbody th::before,
    .responsive-records td::before {
        content: attr(data-label);
        color: var(--quiet);
        font-weight: 600;
    }

    .responsive-records td form:first-child button { margin-top: 0; }
}

/* Sign-in and authenticator set-up (ADR-24). */

.codes {
    list-style: none;
    padding: .75rem;
    margin: 0 0 1rem;
    border: 1px solid var(--line);
    border-radius: var(--mud-default-borderradius);
    background: var(--card);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem .75rem;
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    letter-spacing: .08em;
}

.secret {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 1.0625rem;
    letter-spacing: .12em;
    word-break: break-all;
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: var(--mud-default-borderradius);
    padding: .6rem .8rem;
    margin: 0 0 1rem;
}

/* The shared sheet draws this as a button already; a sign-in page has room for a wider one. */
.button-link { padding: .6rem 1.2rem; }

/* Connectors (ADR-58): a card per channel, headed inside the card like every other card on this
   site. They were fieldsets, whose legend the browser draws on the top border, so the headings sat
   across the card's edge; each form is named by its heading instead, which a screen reader announces
   on the way in just as it did the legend. */
.connector h3 { font-size: 1.0625rem; margin: 0 0 .35rem; }
.connector h3 .optional { margin-left: .35rem; font-size: .8125rem; font-weight: 400; color: var(--quiet); }
.card .connector-status { margin: 0 0 .25rem; color: var(--ink); }
.connector-status b { margin-right: .15rem; }
.connector-status[data-state="ready"] b { color: var(--good); }
.connector-status[data-state="off"] b,
.connector-status[data-state="not-saved"] b { color: var(--quiet); }
.connector details { margin-top: .75rem; }
/* Padding rather than flex for the 44px target: flex on a summary drops its disclosure triangle. */
.connector summary { cursor: pointer; padding: .7rem 0; }
.connector-keys { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.connector-keys h4 { margin: 0 0 .25rem; font-size: .9375rem; }
.not-kept { color: var(--bad); font-weight: 600; }

/* A connector's on/off switch, drawn as a toggle. The shared .check draws a plain tick box; this
   outranks it for the switches only. Off is an outlined track with a grey knob and on is a filled
   track with a light one, so either state has a 3:1 edge against the card (WCAG 1.4.11) without
   relying on colour alone: the knob also moves. */
.check.toggle input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    border: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    background: var(--card);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.check.toggle input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--quiet);
    transition: transform .15s, background-color .15s;
}
.check.toggle input:checked { background: var(--brand); border-color: var(--brand); }
.check.toggle input:checked::before { background: var(--on-brand); transform: translateX(1.25rem); }
.check.toggle span { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .check.toggle input, .check.toggle input::before { transition: none; }
}

@media (forced-colors: active) {
    .check.toggle input { border-color: CanvasText; }
    .check.toggle input::before { background: CanvasText; }
    .check.toggle input:checked { background: Highlight; border-color: Highlight; }
    .check.toggle input:checked::before { background: HighlightText; }
}

/* The mark for each way of reaching somebody (ADR-68), beside a connector's name. */
.channel-icon { vertical-align: -0.2em; margin-right: .3rem; flex: none; }