/*
 * IRC Calendar -- the one stylesheet.
 *
 * Everything is drawn from the tokens below.  --accent is the current
 * resource's color: the layout sets it on <html> from Resource#accent_color,
 * so Sacramento pages are teal, Davis slate, and so on.  Nothing else in this
 * file names a resource.
 *
 * Sections: tokens, base, header and tabs, page furniture, buttons, forms,
 * tables, messages, calendar, session pages, public pages, admin pages.
 */

@font-face {
    font-family: "Public Sans";
    src: url("/assets/public-sans-latin-wght-normal-dca702d4.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
    --accent: #00716F;
    --accent-tint: color-mix(in srgb, var(--accent) 11%, #fff);
    --accent-soft: color-mix(in srgb, var(--accent) 5%, #fff);
    --accent-edge: color-mix(in srgb, var(--accent) 35%, #fff);
    --accent-dark: color-mix(in srgb, var(--accent) 80%, #000);

    --ink: #1D2428;
    --ink-2: #3D474D;
    --muted: #5B6770;
    --line: #E2E5E8;
    --line-strong: #C9D0D5;
    /* a field's edge must reach 3:1 on white, #FAFBFB and the ground (WCAG 1.4.11) */
    --field-edge: #858F98;
    --ground: #F5F6F7;
    --surface: #fff;
    --hover: #F0F2F4;

    --danger: #B42318;
    --danger-tint: #FDECEA;
    --success: #1E6B3A;
    --success-tint: #E7F5EC;

    /* "may be bumped": amber, dashed -- apart from every accent in hue and
       lightness, and not told by color alone */
    --bump-fill: #FBE8C0;
    --bump-edge: #C98A12;
    --bump-ink: #8A5300;

    --radius: 12px;
    --radius-sm: 8px;
    --font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ base */

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 15px/1.5 var(--font);
    color: var(--ink);
    background: var(--ground);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.underlined { text-decoration: underline; }
/* A link inside running text is underlined: against the body text no
   resource accent reaches 3:1 (the best is 2.85:1, the Mock Scanner's purple
   1.22:1), so color alone cannot mark it (WCAG 1.4.1). Links with a class --
   buttons, tabs, chips, cards, the calendar's day links -- are styled as
   controls and stay as they are. */
main :is(p, li, dd, td.wrap, .hint, .notice) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
h2 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; margin: 28px 0 10px; }
h3 { font-size: 16px; margin: 22px 0 8px; }
main > h2:first-child, main > section:first-child > h2:first-child { margin-top: 0; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; }
small, .smallnote { font-size: 13px; color: var(--muted); }
em { color: var(--muted); }
code { font-family: var(--mono); font-size: 0.92em; }
pre {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 16px 0;
    overflow-x: auto; position: relative;
    max-width: 960px;
}
label { cursor: pointer; display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-only-focusable:focus, .sr-only-focusable:active {
    position: fixed; top: 8px; left: 8px; z-index: 100;
    width: auto; height: auto; margin: 0; clip: auto; white-space: normal;
    padding: 10px 16px; background: var(--surface); border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(16, 24, 40, .2);
}

.right, .num { text-align: right; font-variant-numeric: tabular-nums; }
.left { text-align: left; }
.centered { text-align: center; }
.nowrap { white-space: nowrap; }
.inactive, .inactive a { color: var(--muted); }
.icon { flex: none; vertical-align: middle; }

.wrap { max-width: 1360px; margin: 0 auto; padding: 0 28px; box-sizing: border-box; }
/* an admin tab's own page, where the big tables are, uses the whole window */
.wrap.wide { max-width: none; }

/* ------------------------------------------------------- header and tabs */

.site_header { background: var(--surface); border-bottom: 1px solid var(--line); }
.brand_row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 64px;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink); font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand .icon { color: var(--accent); }
.brand small { font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 4px; }

.user_nav { display: flex; align-items: center; gap: 2px; font-size: 14px; }
.user_nav a { color: var(--ink-2); padding: 10px; border-radius: var(--radius-sm); }
.user_nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.user_nav .who { display: flex; align-items: center; gap: 8px; margin-right: 8px; font-weight: 600; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--accent-tint); color: var(--accent-dark);
    font-weight: 700; font-size: 12px;
}

/* the phone's account menu; the desktop shows .user_nav instead */
.user_menu { display: none; position: relative; }
.user_menu summary {
    list-style: none; cursor: pointer;
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px;
}
.user_menu summary::-webkit-details-marker { display: none; }
.user_menu[open] summary { background: var(--hover); }
.user_menu .menu {
    position: absolute; right: 0; top: 50px; z-index: 20; min-width: 220px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: 6px;
    display: flex; flex-direction: column;
}
.user_menu .menu .who { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.user_menu .menu a { padding: 12px; border-radius: var(--radius-sm); color: var(--ink); }
.user_menu .menu a:hover { background: var(--hover); text-decoration: none; }

.tabs {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; position: relative;
    margin: 0; padding-top: 0; padding-bottom: 0;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    display: flex; align-items: center; gap: 4px;
    padding: 12px 14px 11px; white-space: nowrap;
    color: #4A555C; font-weight: 500; font-size: 14px;
    border-bottom: 3px solid transparent;
}
.tabs a:hover { color: var(--ink); background: #F7F8F9; text-decoration: none; }
.tabs a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tabs a.tab_back { color: var(--muted); padding-left: 4px; }
.tabs .tab_sep { flex: none; width: 1px; background: var(--line); margin: 12px 8px; }

.site_footer { color: var(--muted); font-size: 13px; padding-bottom: 36px; }
a.faq_link { text-decoration: underline; display: inline-block; padding: 4px 0; }
.hours_note p:empty { display: none; }

/* banners that apply to the whole page */
#system_message, #public_computer_message {
    background: var(--danger); color: #fff; font-weight: 600; text-align: center;
    padding: 10px 16px;
}
#system_message:empty { display: none; }
#system_message a { color: #fff; text-decoration: underline; }
.timeout_toast {
    position: fixed; bottom: 16px; right: 16px; z-index: 50; max-width: 320px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 16px 18px;
}
.timeout_toast p { margin: 0 0 10px; }

/* ------------------------------------------------------- page furniture */

main#main_content { padding-top: 24px; padding-bottom: 32px; outline: none; }
.page_head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page_head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page_head p { margin: 4px 0 0; color: var(--muted); }
.back_link {
    display: inline-flex; align-items: center; gap: 2px; margin-bottom: 6px;
    font-size: 14px; font-weight: 600; color: var(--muted);
}
.back_link:hover { color: var(--ink); text-decoration: none; }

.panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 24px; margin-bottom: 16px;
}
.panel > :last-child { margin-bottom: 0; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.narrow { max-width: 760px; }

.label_caps {
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 6px;
}

/* a row of choices, one current: calendar views, sub-pages, scanners */
.segmented {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
    background: #E9ECEE; border-radius: 10px;
}
.segmented a {
    padding: 7px 12px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.segmented a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); text-decoration: none; }
.segmented a[aria-current] {
    background: var(--surface); color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .10);
}
.subnav { margin: 0 0 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.subnav .label_caps { margin: 0; }
/* an admin report's controls, above it: which scanner, which month */
.report_bar { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; margin: 0 0 18px; }
.report_bar .subnav { margin: 0; }
.year_step { display: inline-flex; align-items: center; gap: 2px; }
.year_step strong { font-size: 15px; min-width: 3em; text-align: center; }
.year_step a {
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: var(--radius-sm); color: var(--ink-2);
}
.year_step a:hover { background: var(--hover); }

/* --------------------------------------------------------------- buttons */

button, input[type=submit], input[type=button], .button {
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    min-height: 40px; padding: 0 16px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 10px; cursor: pointer; max-width: 100%; text-align: center;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
}
button:hover, .button:hover { background: #F7F8F9; color: var(--ink); text-decoration: none; }
input[type=submit], button.primary, .button.primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
input[type=submit].secondary {
    background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
input[type=submit].secondary:hover { background: #F7F8F9; color: var(--ink); }
input[type=submit]:hover, button.primary:hover, .button.primary:hover {
    background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
}
button.danger, input[type=submit].danger, .button.danger {
    background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, #fff);
}
button.danger:hover, input[type=submit].danger:hover { background: var(--danger-tint); color: var(--danger); }
button:disabled, input[type=submit]:disabled { opacity: .55; cursor: default; }
.icon_button {
    width: 40px; height: 40px; padding: 0; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.icon_button:hover { background: #F7F8F9; color: var(--ink); text-decoration: none; }
form.button_to { display: inline-block; margin: 0; }
.button_row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }

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

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=date], input[type=search], input[type=tel],
select, textarea {
    font: inherit; font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--field-edge); border-radius: var(--radius-sm);
    padding: 8px 10px; min-height: 40px; box-sizing: border-box; max-width: 100%;
}
select {
    appearance: none; -webkit-appearance: none; padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%235B6770' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
textarea { width: 100%; min-height: 120px; line-height: 1.5; }
/* fields take the same 3px focus ring as everything else (:focus-visible above) */
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* a field with an error shown after it (the layout's script marks it) */
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
/* 20px boxes in option rows at least 28px tall: a 24px target with room to
   spare from its neighbours (WCAG 2.5.8). An option's label is a flex row so
   a long one wraps beside its box, not under it. Same specificity as the
   bare `label` rule above (later, so it wins); a component's own label
   styles (.quiz_answer label) still win. */
input[type=checkbox], input[type=radio] {
    width: 20px; height: 20px; margin: 0 8px 0 0; vertical-align: -4px; accent-color: var(--accent);
}
label:where(:has(> input[type=checkbox]), :has(> input[type=radio])) {
    display: flex; align-items: flex-start; min-height: 28px; padding: 2px 0; box-sizing: border-box;
}
label:where(:has(> input[type=checkbox]), :has(> input[type=radio])) > input { flex: none; margin-top: 1px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px 14px; margin: 0; background: var(--surface); }
legend { font-weight: 600; padding: 0 6px; }

/* label | field | error, in a card; collapses to one column on a phone */
.form_layout {
    display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 20px; align-items: baseline;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 24px; margin-bottom: 16px; max-width: 1000px; box-sizing: border-box;
}
.form_layout > * { margin: 0; }
/* the label column: a <label> for one control, a .field_label (or <dt>) for a
   group's question or a read-only value, which a <label> must not be */
.form_layout > label, .form_layout > .field_label, .form_layout > dt {
    grid-column-start: 1; text-align: right; font-weight: 600; color: var(--ink-2);
}
.form_layout .new_line { grid-column: 2 / 4; }
.form_layout > p:has(input[type=submit]), .form_layout > p:has(button[type=submit]) {
    grid-column-start: 2; margin-top: 6px;
}
.form_layout .formError:empty, .form_layout p.error:empty { display: none; }
.form_layout label input[type=checkbox], .form_layout label input[type=radio] { margin-left: 0; }
.v_header { font-weight: 600; color: var(--ink-2); }
.hint { color: var(--muted); }

.inline_form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.inline_form p { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

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

/* A box that scrolls sideways is positioned, so screen-reader-only text in
   it (position: absolute) scrolls with it. Unpositioned, that text escaped
   to the page, which then scrolled sideways on a phone or at 400% zoom. */
.table_wrap {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    overflow-x: auto; margin: 0 0 16px; position: relative;
}
.data_table, .striped_table { border-collapse: collapse; width: 100%; font-size: 14px; }
.data_table th, .striped_table th {
    text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); background: #FAFBFB;
    padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom;
}
.data_table th a, .striped_table th a { color: inherit; text-decoration: underline; }
.data_table td, .striped_table td {
    padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; white-space: nowrap;
}
.data_table tr:first-child td, .striped_table tr:first-child td { border-top: 0; }
.data_table thead + tbody tr:first-child td { border-top: 0; }
.data_table td.wrap, .striped_table td.wrap { white-space: normal; min-width: 220px; }
.data_table tbody tr:hover, .striped_table tbody tr:hover { background: #FAFBFB; }
.data_table th.right, .data_table td.right, .striped_table th.right, .striped_table td.right { text-align: right; }
.data_table .total_row td, .data_table tfoot td { font-weight: 700; background: #FAFBFB; border-top: 1px solid var(--line-strong); }
.data_table tr.flagged td { background: var(--danger-tint); }
.data_table td.actions { text-align: right; white-space: nowrap; }
.data_table td.actions button { min-height: 34px; padding: 0 12px; }
.data_table th[scope=row] {
    text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink-2); background: inherit;
    border-bottom: 0; border-top: 1px solid var(--line); vertical-align: top;
}
.data_table tr:first-child th[scope=row] { border-top: 0; }
.table_total { text-align: right; margin: -6px 0 16px; font-weight: 600; }
/* calendar List grouped by study: one heading row per study */
.data_table tr.study_heading th {
    text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink);
    background: #F3F5F6; border-top: 1px solid var(--line-strong); padding-top: 12px;
}
.data_table tbody:first-of-type tr.study_heading th, .data_table thead + tbody tr.study_heading th { border-top: 0; }
.data_table tr.study_heading .count { color: var(--muted); font-weight: 500; }
.data_table tr.study_heading + tr td { border-top: 0; }
.expired_date { color: var(--danger); font-weight: 600; }
td.actual_missing { background: var(--danger-tint); color: var(--danger); font-weight: 600; }
td.congestion_group { font-size: 16px; font-weight: 700; padding-top: 18px; }
td.congestion_study { padding-left: 32px; }

/* A table that needs only some of a wide page: the box is as wide as the
   table, not the window (PIFs, Revenue). */
.table_wrap.fit { width: fit-content; max-width: 100%; }

/* An admin table on a desktop is a spreadsheet. Its box is no taller than
   the window (--sheet-height, set by the layout's script to end at the
   bottom of the window), so the sideways scrollbar is always on screen; the
   header row stays put going down and the first column -- the person, lab
   or date that says which row this is -- going across. A table whose rows
   are a sequence in time freezes two (data-frozen-columns="2": Billing's
   Date and Begin); the second is pinned at --frozen-left, the first
   column's width, which the layout's script measures. Without the script
   the variable is unset, `left` falls back to auto, and only the first
   column stays put. Phones keep the plain sideways box: a pinned column
   would take half a phone's width. Cells are separate, not collapsed: a
   collapsed border belongs to the table and would scroll away from a
   pinned cell. */
@media screen and (min-width: 761px) {
    main.wide .table_wrap { overflow: auto; max-height: var(--sheet-height, calc(100vh - 32px)); }
    main.wide .table_wrap > table { border-collapse: separate; border-spacing: 0; }
    main.wide .table_wrap thead { position: sticky; top: 0; z-index: 2; }
    /* never a later header row's cells: Revenue's second row sits beside a
       corner cell that spans both rows, not in the first columns */
    main.wide .table_wrap tr > :first-child:not(thead tr + tr > *) { position: sticky; left: 0; z-index: 1; }
    main.wide .table_wrap [data-frozen-columns="2"] tr > :nth-child(2):not(thead tr + tr > *) {
        position: sticky; left: var(--frozen-left); z-index: 1;
    }
    /* a pinned cell needs a background, or the row scrolls through it. Rows
       are opaque and a cell with no color of its own takes its row's,
       hover included; :where() so any cell that has a color keeps it. */
    main.wide .table_wrap tbody tr { background: var(--surface); }
    main.wide .table_wrap tbody tr:hover { background: #FAFBFB; }
    :where(main.wide .table_wrap tbody tr > *) { background: inherit; }
    /* the edge of the frozen columns, once there is something to scroll under it */
    main.wide .table_wrap[data-scrolls-sideways] table:not([data-frozen-columns="2"]) tr > :first-child:not(thead tr + tr > *),
    main.wide .table_wrap[data-scrolls-sideways] [data-frozen-columns="2"] tr > :nth-child(2):not(thead tr + tr > *) {
        box-shadow: inset -1px 0 0 var(--line-strong);
    }
}

/* -------------------------------------------------------------- messages */

.formError, .error, p.error { color: var(--danger); font-weight: 500; }
.formError:not(:empty)::before, p.error:not(:empty)::before { content: "⚠ "; }
.formError:empty, p.error:empty, .session_error:empty, .notice:empty { display: none; }
.session_error {
    color: var(--danger); background: var(--danger-tint); font-weight: 500;
    border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; max-width: 952px;
}
.notice {
    color: var(--success); background: var(--success-tint); font-weight: 500;
    border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; max-width: 952px;
}
.canceled, .canceled a { color: var(--danger); text-decoration: line-through; }
.hours_note { color: var(--muted); font-size: 14px; margin: 16px 0; }

/* -------------------------------------------------------------- calendar */

.cal_layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.cal_side { flex: 1 1 248px; max-width: 272px; display: flex; flex-direction: column; gap: 16px; }
.cal_main { flex: 999 1 600px; min-width: 0; }
.side_card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.side_card p:last-child { margin-bottom: 0; }
.side_place { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); }
.side_place .icon { color: var(--accent); margin-top: 2px; }
.key { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-2); }
.key span { display: flex; align-items: center; gap: 10px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; flex: none; box-sizing: border-box; }
.swatch.scheduled { background: var(--accent-tint); border: 1px solid var(--accent-edge); }
.swatch.bumpable { background: var(--bump-fill); border: 1.5px dashed var(--bump-edge); }
.swatch.irc { background: repeating-linear-gradient(135deg, #F1F3F4 0 3px, #D5DADD 3px 6px); }

/* the little calendar: days (day/week views) or months (the rest) */
.mini_cal_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mini_cal_head strong { font-size: 15px; }
.mini_cal_head a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--ink-2); }
.mini_cal_head a:hover { background: var(--hover); }
.mini_cal { width: 100%; border-collapse: separate; border-spacing: 2px; text-align: center; font-size: 13px; }
.mini_cal th { color: var(--muted); font-size: 11px; font-weight: 600; padding: 4px 0; }
.mini_cal td { padding: 0; }
.mini_cal a {
    display: block; padding: 6px 0; border-radius: 6px; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.mini_cal a:hover { background: #EEF0F2; text-decoration: none; }
.mini_cal .off a { color: #6B757C; }
.mini_cal .selected a { background: var(--accent-tint); }
.mini_cal .today a { background: var(--accent); color: #fff; font-weight: 700; }
.mini_cal.months { font-size: 14px; }
.mini_cal.months a { padding: 9px 0; }

.cal_toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cal_nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.cal_nav h1 { font-size: 22px; margin-left: 8px; }
.cal_nav .today_badge {
    font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
    border-radius: 999px; padding: 2px 9px; margin-left: 4px;
}
.view_select { display: none; }
.lab_picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.lab_picker label { display: inline; font-weight: 600; color: var(--ink-2); }
.day_notes { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }

/* a holiday, downtime, or (IRC only) a note on a day */
.day_note {
    display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.35;
    padding: 3px 10px; border-radius: 999px; background: #EEF0F2; color: var(--ink-2);
}
.day_note.downtime { background: var(--danger-tint); color: var(--danger); }
.day_note.irc_note { background: var(--surface); border: 1px dashed var(--line-strong); }
a.day_note:hover { text-decoration: none; filter: brightness(.96); }

/* week: one row per day, sessions as chips */
.week_list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day_row { display: flex; gap: 18px; padding: 14px 16px 14px 18px; border-top: 1px solid var(--line); align-items: flex-start; }
.day_row:first-child { border-top: 0; }
.day_row.today { background: var(--accent-soft); }
.day_date { width: 58px; flex: none; display: flex; flex-direction: column; align-items: flex-start; color: var(--ink); padding-top: 2px; }
.day_date:hover { color: var(--accent); text-decoration: none; }
.day_date .dow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.day_date .num { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.day_row.today .num { color: var(--accent); }
.day_date .today_badge { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; margin-top: 4px; }
.day_body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.day_empty { color: var(--muted); font-size: 14px; padding-top: 12px; }
.day_add {
    flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 10px;
    display: grid; place-items: center; color: var(--accent);
    border: 1.5px dashed var(--accent-edge);
}
.day_add:hover { background: var(--accent-tint); text-decoration: none; }

.chip {
    display: flex; flex-direction: column; min-width: 150px; max-width: 100%; box-sizing: border-box;
    padding: 7px 11px 8px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
    background: var(--accent-tint); color: var(--ink);
}
.chip:hover { color: var(--ink); text-decoration: none; border-color: var(--accent); }
.chip .t { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.chip .g { font-weight: 600; font-size: 14px; }
.chip .s { font-size: 13px; color: var(--muted); }
.chip.irc { background: repeating-linear-gradient(135deg, #F1F3F4 0 6px, #E7EAEC 6px 12px); }
.chip.irc .t { color: var(--ink-2); }
.chip.bumpable { background: var(--bump-fill); border: 1.5px dashed var(--bump-edge); }
.chip.bumpable .t { color: var(--bump-ink); }
.chip .flag { font-size: 11.5px; font-weight: 700; color: var(--bump-ink); }

/* month: a grid of days, chips shrink to one line */
.month_wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.month_grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.month_grid thead th {
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); background: #FAFBFB; padding: 10px 8px; text-align: left;
    border-bottom: 1px solid var(--line);
}
.month_grid thead th.week_col { width: 44px; }
.month_grid th.week_head {
    font-size: 11px; font-weight: 600; color: var(--muted); text-align: center;
    border-top: 1px solid var(--line); background: #FAFBFB; padding: 8px 2px; vertical-align: top;
}
.month_grid th.week_head a { color: var(--muted); }
.month_grid td {
    border-top: 1px solid var(--line); border-left: 1px solid var(--line);
    vertical-align: top; padding: 6px 6px 8px; height: 110px;
}
.month_grid td.offmonth { background: #FAFBFB; }
.month_grid td.offmonth .date_num { color: #6B757C; }
.month_grid td.today { background: var(--accent-soft); }
.month_grid td.today .date_num { background: var(--accent); color: #fff; }
.cell_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.date_num {
    display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px;
    font-weight: 700; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.date_num:hover { background: var(--hover); text-decoration: none; }
.cell_add { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--accent); }
.cell_add:hover { background: var(--accent-tint); text-decoration: none; }
.month_grid .day_note { display: block; font-size: 11.5px; margin-bottom: 4px; border-radius: 6px; padding: 2px 6px; }
.mchips { display: flex; flex-direction: column; gap: 3px; }
.mchip {
    display: block; font-size: 12px; line-height: 1.35; padding: 2px 6px; border-radius: 5px;
    background: var(--accent-tint); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid transparent;
}
.mchip:hover { border-color: var(--accent); text-decoration: none; color: var(--ink); }
.mchip b { font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.mchip.irc { background: repeating-linear-gradient(135deg, #F1F3F4 0 5px, #E7EAEC 5px 10px); }
.mchip.irc b { color: var(--ink-2); }
.mchip.bumpable { background: var(--bump-fill); border: 1px dashed var(--bump-edge); }
.mchip.bumpable b { color: var(--bump-ink); }
.mchip.gap_before { margin-top: 5px; }
.mbars { display: none; }

/* day: quarter-hour rows, the unit sessions are booked in. A card is
   positioned against its cell, which spans exactly its rows, so its bottom
   sits on the line for its end time; a percentage height inside a rowspan
   cell is ignored, which is why every card used to be the same height. */
.day_wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day_grid { width: 100%; border-collapse: collapse; }
.day_grid th {
    width: 72px; text-align: right; vertical-align: top; padding: 0 10px 0 0;
    font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--line);
}
.day_grid th a { display: block; color: var(--muted); padding: 2px 0; }
.day_grid th a:hover { color: var(--accent); }
.day_grid tr { height: 16px; }
.day_grid tr.hour td, .day_grid tr.hour th { border-top: 1px solid var(--line); }
.day_grid tr.half td { border-top: 1px dashed #EEF0F2; }
.day_grid tr:first-child td, .day_grid tr:first-child th { border-top: 0; }
.day_grid td { padding: 0; }
.day_grid td.slot { position: relative; vertical-align: top; }
.day_grid td.slot a {
    position: absolute; inset: 1px 8px 1px 8px; overflow: hidden;
    display: flex; flex-direction: column; box-sizing: border-box;
    padding: 4px 12px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
    background: var(--accent-tint); color: var(--ink);
}
.day_grid td.slot.short a { flex-direction: row; align-items: center; gap: 10px; padding: 0 12px; white-space: nowrap; }
.day_grid td.slot.short .g { overflow: hidden; text-overflow: ellipsis; }
.day_grid td.slot.tiny a { font-size: 12px; line-height: 1; }
.day_grid td.slot.tiny .t { font-size: 11.5px; }
.day_grid td.slot a:hover { border-color: var(--accent); text-decoration: none; }
.day_grid td.slot .t { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); }
.day_grid td.slot .g { font-weight: 600; }
.day_grid td.slot.irc a { background: repeating-linear-gradient(135deg, #F1F3F4 0 6px, #E7EAEC 6px 12px); }
.day_grid td.slot.irc .t { color: var(--ink-2); }
.day_grid td.slot.bumpable a { background: var(--bump-fill); border: 1.5px dashed var(--bump-edge); }
.day_grid td.slot.bumpable .t { color: var(--bump-ink); }

/* the IRC staff switch above session/note/downtime forms */
.irc_switch {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius);
    padding: 8px 8px 8px 14px; margin: 0 0 18px; width: fit-content; max-width: 100%; box-sizing: border-box;
}
.irc_switch .label_caps { margin: 0; }

/* ---------------------------------------------------------- public pages */

.auth_card {
    max-width: 440px; margin: 40px auto; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px;
}
.auth_card h1 { font-size: 22px; margin-bottom: 8px; }
.auth_card .field { margin: 16px 0; }
.auth_card .field label { font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
.auth_card input[type=text], .auth_card input[type=email], .auth_card input[type=password] { width: 100%; }
.auth_card input[type=submit] { width: 100%; min-height: 44px; margin-top: 8px; }

.quiz_page { max-width: 680px; margin: 0 auto; }
.quiz_page h1 { font-size: 28px; margin-bottom: 16px; }
.quiz_page .quiz_progress { color: var(--muted); font-weight: 600; }
.quiz_page .quiz_prompt { font-size: 18px; font-weight: 600; line-height: 1.4; }
.quiz_answer label {
    display: flex; align-items: flex-start; gap: 4px; margin: 10px 0;
    padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--surface);
}
.quiz_answer label:hover { border-color: var(--accent); }
.quiz_answer label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.quiz_answer input[type=radio] { margin-top: 3px; }
.quiz_info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0; }
.quiz_info dt { color: var(--muted); }
.quiz_info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.quiz_wrong { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.quiz_page button { min-height: 44px; padding: 0 24px; }

/* the FAQ: contents beside the answers on a desktop, above them on a phone */
.faq_layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; }
.faq_contents { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; font-size: 14px; }
.faq_contents .faq_topic { font-weight: 700; margin: 14px 0 4px; }
.faq_contents .label_caps + .faq_topic { margin-top: 4px; }
.faq_contents ul { list-style: none; padding: 0; margin: 0; }
.faq_contents li a { display: block; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; color: var(--ink-2); line-height: 1.35; }
.faq_contents li a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.faq_body { max-width: 760px; }
.faq_body .panel { padding: 24px 28px; }
.faq_body h2 { font-size: 20px; margin: 0 0 4px; }
.faq_q { padding: 18px 0 2px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.faq_body h2 + .faq_q { border-top: 0; }
.faq_q h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.4; }
.faq_q ul { padding-left: 1.3em; }
.faq_q li { margin-bottom: 6px; }
/* the question a link jumped to */
.faq_q:target { background: var(--accent-soft); box-shadow: 0 0 0 12px var(--accent-soft); border-radius: 2px; }
.faq_formula {
    font-weight: 700; letter-spacing: .01em; padding: 12px 16px; border-radius: 10px;
    background: var(--accent-tint); color: var(--accent-dark);
}
.faq_example { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

/* ----------------------------------------------------------- admin pages */

.pif_tile { max-width: 900px; }
.pif_tile h3 { margin-top: 0; }
/* an approved PIF: closed to its title, the whole title bar opens it */
details.pif_tile { padding: 0; margin-bottom: 8px; }
details.pif_tile[hidden] { display: none; }
details.pif_tile > summary {
    display: flex; align-items: center; gap: 10px; padding: 14px 20px;
    cursor: pointer; list-style: none; border-radius: var(--radius);
}
details.pif_tile > summary::-webkit-details-marker { display: none; }
details.pif_tile > summary:hover { background: var(--hover); }
details.pif_tile[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
details.pif_tile > summary h3 { margin: 0; font-size: 16px; }
details.pif_tile > summary .icon { color: var(--muted); transition: transform .15s; }
details.pif_tile[open] > summary .icon { transform: rotate(90deg); }
/* the particulars line up under the title, past the arrow */
details.pif_tile > .detail_grid { padding: 4px 24px 20px 46px; }
@media (prefers-reduced-motion: reduce) { details.pif_tile > summary .icon { transition: none; } }
.pif_search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; max-width: 900px; }
.pif_search[hidden] { display: none; }
.pif_search input { flex: 0 1 420px; min-width: 0; }
::highlight(pif-match) { background-color: #FFE38A; color: var(--ink); }
.detail_grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.detail_grid dt { font-weight: 600; color: var(--ink-2); }
.detail_grid dd { margin: 0; }
.checklist { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.checklist label { display: flex; align-items: flex-start; gap: 2px; }
.checklist input { margin-top: 3px; }

.ml_filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.ml_filters label { white-space: nowrap; padding: 3px 0; }

.stat { font-size: 20px; font-weight: 700; color: var(--accent-dark); }

/* ---------------------------------------------------------------- phones */

@media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    .brand small { display: none; }
    .user_nav { display: none; }
    .user_menu { display: block; }
    main#main_content { padding-top: 16px; }
    h1 { font-size: 21px; }
    .cal_side { max-width: none; order: 2; }
    .cal_main { order: 1; }
    .cal_nav h1 { font-size: 18px; margin-left: 4px; flex-basis: 100%; order: -1; margin-bottom: 4px; }
    .cal_toolbar > .segmented { display: none; }
    .view_select { display: block; }
    .chip { flex: 1 1 100%; }
    .day_row { gap: 12px; padding: 12px; }
    .day_date { width: 44px; }
    .day_date .num { font-size: 20px; }
    .month_grid thead th.week_col, .month_grid th.week_head { display: none; }
    .month_grid thead th { padding: 8px 2px; text-align: center; font-size: 11px; letter-spacing: 0; }
    .month_grid td { height: 64px; padding: 4px 2px; }
    .cell_head { justify-content: center; }
    .cell_add, .month_grid .day_note { display: none; }
    /* the chips become bars that only picture the day: a 5px link could not
       be tapped and its text could not be seen, so the bars are not links
       and the day number's link covers the whole cell instead */
    .mchips { display: none; }
    .mbars { display: flex; flex-direction: column; gap: 3px; }
    .mbar { height: 5px; border-radius: 3px; background: var(--accent); }
    .mbar.irc { background: #8E9997; }
    .mbar.bumpable { background: var(--bump-edge); }
    .month_grid td { position: relative; }
    .month_grid .date_num::after { content: ""; position: absolute; inset: 0; }
    .form_layout { display: block; padding: 18px; }
    .form_layout > label, .form_layout > .field_label, .form_layout > dt { text-align: left; margin: 16px 0 6px; }
    .form_layout > label:first-child, .form_layout > .field_label:first-child, .form_layout > dt:first-child { margin-top: 0; }
    .form_layout > p:has(input[type=submit]) { margin-top: 18px; }
    .form_layout input[type=text], .form_layout input[type=email], .form_layout input[type=password],
    .form_layout select, .form_layout textarea { width: 100%; }
    .data_table td.wrap { min-width: 260px; }
    .auth_card { margin: 16px auto; padding: 24px 20px; border-radius: var(--radius); }
    .panel { padding: 16px; }
    details.pif_tile > summary { padding: 14px 16px; }
    details.pif_tile > .detail_grid { padding: 4px 16px 16px; }
    .detail_grid { grid-template-columns: 1fr; gap: 2px; }
    .faq_layout { grid-template-columns: 1fr; }
    .faq_contents { position: static; max-height: none; }
    .faq_body .panel { padding: 18px; }
    .detail_grid dd { margin-bottom: 10px; }
}