/* SkillFox base styles. Bump app.asset_version in config on every edit. */

:root {
    --sf-bg: #0f1115;
    --sf-panel: #171a21;
    --sf-panel-2: #1e222b;
    --sf-line: #2a2f3a;
    --sf-text: #e8eaf0;
    --sf-muted: #9aa3b2;
    --sf-accent: #f07c2f;
    --sf-accent-soft: rgba(240, 124, 47, 0.14);
    --sf-brand-red: #d92d02; /* sampled from assets/logo.png */
    --sf-add: #16a34a;        /* "+New …" create actions */
    --sf-add-hover: #128a3e;
    --sf-ok: #3ec98b;
    --sf-bad: #ef5f6b;
    --sf-radius: 12px;

    /* Semantic aliases. Defined as var() references so the light-mode
       overrides below flow through without restating them. An UNDEFINED
       custom property silently renders as nothing — a background: var(--x)
       that does not exist is a transparent element, not a red error — so any
       name used here must be declared. */
    --sf-surface: var(--sf-panel);  /* opaque raised surface: menus, toasts */
    --sf-ink: var(--sf-text);
}

@media (prefers-color-scheme: light) {
    :root {
        --sf-bg: #f6f7f9;
        --sf-panel: #ffffff;
        --sf-panel-2: #f0f2f6;
        --sf-line: #dfe3ea;
        --sf-text: #1a1d23;
        --sf-muted: #5c6472;
        --sf-accent-soft: rgba(240, 124, 47, 0.12);
    }
}

* { box-sizing: border-box; }

/* The hidden attribute only works via the UA stylesheet, so ANY author rule
   setting display on an element silently un-hides it. Pages toggle sections
   with el.hidden (the user form's scope editor, scope target pickers), so make
   it authoritative. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--sf-bg);
    color: var(--sf-text);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.sf-shell {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}

/* Signed-in app: use the screen. Guest/login pages stay narrow. */
.sf-app .sf-shell {
    max-width: 1560px;
    width: 92%;
}

.sf-brand { margin-bottom: 28px; }

.sf-brand__mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--sf-text);
}

.sf-brand__glyph { font-size: 26px; line-height: 1; }

.sf-brand__logo { height: 34px; width: auto; display: block; }

.sf-brand__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The "Fox" in the wordmark — brand red sampled from the logo */
.sf-fox { color: var(--sf-brand-red); }

.sf-nav {
    display: flex;
    align-items: center;   /* links and <button> triggers share one baseline */
    flex-wrap: wrap;       /* wrap whole items, never mid-word */
    gap: 6px 18px;
    margin-top: 12px;
}

.sf-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;   /* "Sign-offs" / "App Development" stay on one line */
    color: var(--sf-muted);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    padding: 0 0 4px;      /* also neutralises the UA button padding below */
    border-bottom: 2px solid transparent;
}

/* The section you are in is named by the nav, in bold — pages don't repeat it. */
.sf-nav__link.is-active { color: var(--sf-text); font-weight: 700; border-bottom-color: var(--sf-accent); }

.sf-card {
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    padding: 28px;
}

.sf-card--hero { padding: 36px 32px; }

.sf-eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-accent);
}

.sf-title {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sf-title--sm { font-size: 24px; }

.sf-lede { margin: 0 0 16px; color: var(--sf-muted); font-size: 17px; max-width: 58ch; }

.sf-note { margin: 0 0 20px; color: var(--sf-muted); font-size: 14px; }

.sf-btn {
    display: inline-block;
    background: var(--sf-accent);
    color: #17110b;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 8px;
}

.sf-btn:hover { filter: brightness(1.07); }

.sf-flash {
    background: var(--sf-accent-soft);
    border: 1px solid var(--sf-accent);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 14px;
}

.sf-status { font-weight: 600; margin: 0 0 20px; }
.sf-status.is-ok { color: var(--sf-ok); }
.sf-status.is-bad { color: var(--sf-bad); }

/* Wide detail strings must scroll inside the table, not the page. */
.sf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    display: block;
    overflow-x: auto;
}

.sf-table th, .sf-table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--sf-line);
    vertical-align: top;
    white-space: nowrap;
}

.sf-table thead th { color: var(--sf-muted); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }

.sf-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.sf-pill.is-ok { background: rgba(62, 201, 139, 0.16); color: var(--sf-ok); }
.sf-pill.is-bad { background: rgba(239, 95, 107, 0.16); color: var(--sf-bad); }

.sf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--sf-muted); }

.sf-foot { margin-top: 28px; color: var(--sf-muted); font-size: 13px; }

/* ---- App chrome ---- */

.sf-brand--bar {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.sf-brand--bar .sf-nav { margin-top: 0; flex: 1; }

.sf-userbox { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.sf-userbox__name { color: var(--sf-muted); }

.sf-inline-form { display: inline; }

/* ---- Nav dropdown menus (pure CSS: hover / keyboard focus) ---- */

.sf-menu { position: relative; display: inline-flex; align-items: center; }

.sf-menu__trigger {
    background: none;
    border: 0;
    cursor: pointer;
    /* font-family only — NOT the `font` shorthand. Buttons don't inherit any
       font property by default, but the shorthand also resets font-size,
       which would silently override .sf-nav__link's font-size: 14px and make
       every dropdown trigger render at the body's 16px instead. */
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    white-space: nowrap;   /* keep the ▾ caret on the label's line */
}

.sf-menu__list {
    display: none;
    position: absolute;
    top: 100%;
    left: -10px;
    z-index: 40;
    min-width: 180px;
    padding: 6px;
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.sf-menu:hover .sf-menu__list,
.sf-menu:focus-within .sf-menu__list { display: block; }

.sf-menu__item {
    display: block;
    padding: 8px 12px;
    border-radius: 7px;
    color: var(--sf-text);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.sf-menu__item:hover { background: var(--sf-accent-soft); color: var(--sf-text); }

/* Right-aligned dropdown (profile menu sits at the far right edge, so it
   opens leftward instead of running off the viewport). */
.sf-menu__list--right { left: auto; right: -10px; }

.sf-menu__label {
    padding: 6px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--sf-line);
    color: var(--sf-muted);
    font-size: 12px;
    white-space: nowrap;
}

.sf-menu__item--btn {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

/* Profile menu trigger: avatar initials + name, same chip language as the
   org selector next to it. */
.sf-profile__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--sf-text);
    font-family: inherit;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 8px;
}
.sf-profile__trigger:hover { background: var(--sf-panel-2); }

.sf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--sf-accent);
    color: #17110b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sf-profile__name { color: var(--sf-muted); }
@media (max-width: 640px) { .sf-profile__name { display: none; } }

.sf-orgselect {
    background: var(--sf-panel-2);
    color: var(--sf-text);
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    padding: 5px 8px;
    font: inherit;
    font-size: 13px;
    max-width: 190px;
}

.sf-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.sf-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.sf-pagehead .sf-title { margin: 0; }

/* ---- Forms ---- */

.sf-card--narrow { max-width: 440px; margin: 40px auto 0; }
/* Flush cards hold a table edge-to-edge, but they still need air at the
   bottom: without it the last row (or a collapsed summary) sits right on the
   border and reads as clipped. */
.sf-card--flush { padding: 0 0 10px; overflow: hidden; }
.sf-card--flush .sf-table tbody tr:last-child > td,
.sf-card--flush .sf-table tbody tr:last-child > th { border-bottom: none; }
.sf-card--flush > summary.sf-cardhead { padding-bottom: 4px; }
.sf-card--flush > .sf-note:last-child { padding-bottom: 4px; }
.sf-card--flush .sf-table { border-radius: var(--sf-radius); }

.sf-field { margin-bottom: 16px; }

.sf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-muted);
    margin-bottom: 6px;
}

.sf-input {
    width: 100%;
    background: var(--sf-panel-2);
    color: var(--sf-text);
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    padding: 9px 12px;
    font: inherit;
    font-size: 15px;
}

.sf-input:focus { outline: 2px solid var(--sf-accent); outline-offset: 0; border-color: var(--sf-accent); }

.sf-error { margin: 6px 0 0; color: var(--sf-bad); font-size: 13px; }

.sf-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; }

.sf-muted-link { color: var(--sf-muted); font-size: 14px; text-decoration: underline; cursor: pointer; }
.sf-muted-link:hover { color: var(--sf-text); }

.sf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .sf-grid2 { grid-template-columns: 1fr; } }

.sf-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.sf-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
}

.sf-title--xs { font-size: 17px; margin: 18px 0 8px; }

.sf-pre {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--sf-muted);
    background: var(--sf-panel-2);
    border-radius: 8px;
    padding: 10px 12px;
    max-width: 60ch;
}

/* ---- Builder ---- */

.sf-btn--sm { padding: 6px 12px; font-size: 13px; }

.sf-pill.is-warn { background: rgba(240, 124, 47, 0.16); color: var(--sf-accent); }

.sf-details > summary { cursor: pointer; }
.sf-details[open] > summary { margin-bottom: 10px; }

.sf-stagerow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.sf-stagerow__n { width: 20px; }
.sf-stagerow__name { flex: 2; min-width: 160px; }
.sf-stagerow__mode { flex: 1; min-width: 140px; }
.sf-stagerow__prereq { flex: 1; min-width: 160px; }
.sf-stagerow--add { border-top: 1px dashed var(--sf-line); padding-top: 12px; margin-top: 12px; }
.sf-stagerow__tools { display: flex; gap: 10px; margin: -4px 0 10px 28px; }

.sf-secblock { border-left: 2px solid var(--sf-line); padding-left: 14px; margin: 14px 0; }
.sf-sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sf-sechead__title { display: flex; align-items: center; gap: 8px; flex: 1; }
.sf-input--seamless { max-width: 340px; font-weight: 600; }

.sf-itemrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dotted var(--sf-line);
    flex-wrap: wrap;
}
.sf-itemrow__name { flex: 1; min-width: 220px; }
.sf-itemrow__cells { display: flex; gap: 4px; }

.sf-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--sf-line);
    border-radius: 5px;
    font-size: 11px;
    color: var(--sf-muted);
}
.sf-cell.is-na { background: var(--sf-line); text-decoration: line-through; }

.sf-tag {
    display: inline-block;
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 8px;
    margin-left: 6px;
}

.sf-additem {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.sf-additem .sf-input { max-width: 260px; }

.sf-input--tiny { max-width: 80px; }

.sf-rowactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Clickable row title (list tables) */
.sf-rowlink { color: var(--sf-text); text-decoration: none; border-bottom: 1px solid transparent; }
.sf-rowlink:hover { border-bottom-color: var(--sf-accent); }
.sf-rowsub { display: block; font-weight: 400; font-size: 12px; color: var(--sf-muted); white-space: normal; max-width: 320px; }

/* ---- Learner matrix ---- */

.sf-matrix th, .sf-matrix td { white-space: normal; }
.sf-matrix__section { background: var(--sf-panel-2); font-weight: 700; }

.sf-matrix__cell { text-align: center; min-width: 64px; }
.sf-matrix__cell a { text-decoration: none; display: block; padding: 2px 4px; border-radius: 6px; color: var(--sf-muted); }
.sf-matrix__cell a:hover { background: var(--sf-panel-2); color: var(--sf-text); }
.sf-matrix__cell.is-complete a { color: var(--sf-ok); font-weight: 700; }
.sf-matrix__cell.is-awaiting a { color: var(--sf-accent); }
.sf-matrix__cell.is-progress a { color: var(--sf-text); }
.sf-matrix__cell.is-na { color: var(--sf-muted); background: var(--sf-panel-2); font-size: 11px; }

.sf-flash--warn { border-color: var(--sf-bad); background: rgba(239, 95, 107, 0.10); }

.sf-tile--link { text-decoration: none; color: var(--sf-text); display: block; }
.sf-tile--link:hover { border-color: var(--sf-accent); }

/* ---- Spreadsheet-style checklist builder grid ---- */

.sf-gridwrap { overflow: visible; } /* popover panels must escape the card */
.sf-gridwrap .sf-table { overflow-x: visible; }

.sf-buildgrid th, .sf-buildgrid td { border: 1px solid var(--sf-line); }

/* The header row follows you down a long checklist. The page is the scroll
   container (.sf-gridwrap stays overflow:visible so config popovers can
   escape), so sticky top:0 tracks the window. An opaque background is
   mandatory — cells would otherwise show through as they scroll under. */
.sf-buildgrid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--sf-panel-2);
}
/* The corner outranks its neighbours so its right border stays crisp. */
.sf-buildgrid__corner {
    min-width: 260px;
    z-index: 4;
}
/* An open column popover must float above the frozen header, not under it. */
.sf-buildgrid thead th:has(details[open]) { z-index: 6; }

.sf-buildgrid__colhead {
    text-align: center;
    vertical-align: middle;
    min-width: 74px;
    position: relative;
}
/* Stage names stack one word per line (the <br>s come from the view), which
   is what keeps a seven-column grid inside a laptop screen. */
.sf-colhead__name {
    display: block;
    line-height: 1.25;
    font-weight: 600;
    hyphens: none;
}
.sf-colhead__mode {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--sf-muted);
}
.sf-buildgrid__addcol summary { color: var(--sf-accent); font-weight: 600; }
.sf-buildgrid__section th { background: var(--sf-panel-2); }
.sf-buildgrid__secrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sf-buildgrid__rowhead { font-weight: 400; }
.sf-buildgrid__rowtools { visibility: hidden; margin-left: 8px; display: inline-flex; }
.sf-buildgrid__rowhead:hover .sf-buildgrid__rowtools { visibility: visible; }
.sf-buildgrid__cell { text-align: center; padding: 2px; }
.sf-buildgrid__cell.is-na { background: rgba(154, 163, 178, 0.18); color: var(--sf-muted); }

.sf-cellbtn {
    width: 100%;
    min-width: 60px;
    min-height: 30px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--sf-muted);
    font-family: inherit;
    font-size: 14px;
}
/* Interactive affordances belong to the BUTTON only. The editable grid renders
   cells as <button>; the read-only view and the cell key render the same class
   on a <span>, and a span that lights up under the pointer promises a click
   that does nothing. */
button.sf-cellbtn { cursor: pointer; }
button.sf-cellbtn:hover { background: var(--sf-accent-soft); color: var(--sf-text); }
.sf-cellbtn.is-na { color: var(--sf-muted); }

/* An APPLICABLE cell shows a ghosted ✓ — "this is in play, not yet done" —
   rather than a dot, which reads as nothing being there. Deliberately the same
   glyph the learner matrix uses for complete, just faded, so the builder and
   the record speak the same visual language. */
.sf-cellbtn.is-open {
    color: var(--sf-muted);
    opacity: 0.3;
    font-size: 15px;
}
button.sf-cellbtn.is-open:hover { opacity: 1; }
/* A repeat-count cell stays emphatic — it carries real information. */
.sf-cellbtn.is-count {
    color: var(--sf-text);
    font-variant-numeric: tabular-nums;
}

/* Hover-revealed editing tools: hidden until the containing row/header is
   hovered, focused (keyboard), or has an open popover — cuts grid clutter
   without hiding capability. */
.sf-hovertool { visibility: hidden; }
tr:hover .sf-hovertool,
th:hover > .sf-hovertool,
.sf-hovertool:focus-within,
tr:has(details[open]) .sf-hovertool { visibility: visible; }

.sf-colmove { display: flex; justify-content: center; gap: 10px; margin-top: 2px; }

/* Add-column stays discoverable but quiet until approached. */
.sf-buildgrid__addcol summary { opacity: 0.35; transition: opacity 0.12s; }
.sf-buildgrid__addcol:hover summary,
.sf-buildgrid__addcol details[open] summary { opacity: 1; }

/* Column/row configuration popovers (pure <details>) */
.sf-colcfg { position: relative; display: inline-block; }
.sf-colcfg > summary { cursor: pointer; list-style: none; }
.sf-colcfg > summary::-webkit-details-marker { display: none; }

/* Column headers get the same hover affordance as row headers (.sf-rowlink):
   an accent underline saying "this opens something". Without it the row names
   looked clickable and the column names did not, though both are. The border
   is always present but transparent, so nothing shifts on hover. */
.sf-buildgrid__colhead .sf-colcfg > summary {
    display: block;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
}
.sf-buildgrid__colhead .sf-colcfg > summary:hover,
.sf-buildgrid__colhead .sf-colcfg > summary:focus-visible,
.sf-buildgrid__colhead .sf-colcfg[open] > summary {
    border-bottom-color: var(--sf-accent);
    outline: none;
}
.sf-colcfg__panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    min-width: 260px;
    padding: 14px;
    text-align: left;
    font-weight: 400;
    white-space: normal;
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    /* The header row is sticky, so a tall panel hanging from it could never
       be scrolled into view (the grid moved underneath instead — Jason,
       2026-10-06). The panel scrolls INSIDE itself instead; build.php sets
       --sf-colcfg-max to the exact room below the header when it opens. */
    max-height: var(--sf-colcfg-max, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sf-colcfg--inline .sf-colcfg__panel { left: 0; transform: none; }
.sf-colcfg__tools { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sf-line); }

.sf-input--seamless {
    width: auto;
    background: transparent;
    border-color: transparent;
    padding: 4px 6px;
    font-weight: 600;
}
.sf-input--seamless:hover, .sf-input--seamless:focus { border-color: var(--sf-line); background: var(--sf-panel-2); }

/* List tabs (e.g. Users: learners vs staff) */
.sf-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--sf-line);
}
.sf-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: var(--sf-muted);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.sf-tab:hover { color: var(--sf-text); }
.sf-tab.is-active { color: var(--sf-text); font-weight: 600; border-bottom-color: var(--sf-accent); }
.sf-tab__count {
    background: var(--sf-panel-2);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* Settings section headers with their access tier */
.sf-sectionhead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.sf-sectionhead .sf-title { margin: 0; }
.sf-tag--restricted { background: var(--sf-accent-soft); color: var(--sf-accent); border-color: var(--sf-accent); }

select[multiple].sf-input { min-height: 150px; padding: 6px; }

/* Development tracker */
.sf-filters { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: flex-start; }
.sf-field--inline { margin-bottom: 8px; min-width: 170px; }

.sf-comment { border-left: 3px solid var(--sf-line); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.sf-comment__meta { margin: 0 0 4px; font-size: 12px; color: var(--sf-muted); }
.sf-comment__body { margin: 0; font-size: 14px; white-space: pre-wrap; }

/* Microsoft sign-in */
.sf-ssoblock { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.sf-btn--ms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #2f2f2f;
    color: #fff;
    border: 1px solid #8c8c8c;
    border-radius: 6px;
    font-weight: 500;
}
.sf-btn--ms:hover { filter: brightness(1.15); }

/* The four-square Microsoft mark, drawn in CSS (no external asset) */
.sf-ms-logo {
    width: 16px; height: 16px; flex: none;
    background:
        linear-gradient(#f25022, #f25022) 0 0 / 7px 7px no-repeat,
        linear-gradient(#7fba00, #7fba00) 9px 0 / 7px 7px no-repeat,
        linear-gradient(#00a4ef, #00a4ef) 0 9px / 7px 7px no-repeat,
        linear-gradient(#ffb900, #ffb900) 9px 9px / 7px 7px no-repeat;
}

.sf-or {
    display: flex; align-items: center; gap: 12px;
    color: var(--sf-muted); font-size: 13px; margin: 0 0 18px;
}
.sf-or::before, .sf-or::after { content: ""; flex: 1; height: 1px; background: var(--sf-line); }

/* Impersonation banner — deliberately loud */
.sf-impersonate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--sf-accent-soft);
    border: 2px solid var(--sf-accent);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 14px;
}

/* Queue decline mini-form */
.sf-decline { display: inline-block; }
.sf-decline__form { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.sf-decline__form .sf-input { max-width: 220px; font-size: 13px; padding: 5px 8px; }

/* "Used on" checklist links in the skills table: compact, wrapping */
.sf-usedon { font-size: 11.5px; white-space: normal; max-width: 260px; }
.sf-usedon a { color: var(--sf-muted); }
.sf-usedon a:hover { color: var(--sf-text); }

/* ---- Dashboard tiles ---- */

.sf-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.sf-tile {
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    padding: 16px 18px;
}

.sf-tile__num { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.sf-tile__label { margin: 2px 0 0; color: var(--sf-muted); font-size: 13px; }

/* ---- Curriculum map: skills taught per week of a catalog course ---- */
.sf-curriculum__wk {
    width: 64px;
    text-align: right;
    padding-right: 14px;
    color: var(--sf-muted);
    font-variant-numeric: tabular-nums;
    vertical-align: top;
}
.sf-table tr.is-empty .sf-curriculum__wk { opacity: 0.5; }

.sf-curchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 6px 6px 0;
    padding: 3px 8px;
    border: 1px solid var(--sf-line);
    border-radius: 999px;
    background: var(--sf-panel-2);
    font-size: 13px;
    line-height: 1.6;
}
/* A multi-week skill shown on a continuation week, not its first. */
.sf-curchip.is-cont {
    border-style: dashed;
    opacity: 0.7;
}
.sf-curchip__name { font-weight: 500; }
.sf-curchip__meta {
    color: var(--sf-muted);
    font-size: 12px;
    white-space: nowrap;
}
.sf-curchip__x {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0 0 0 2px;
    color: var(--sf-muted);
    font-size: 15px;
    line-height: 1;
}
.sf-curchip__x:hover { color: var(--sf-brand-red); }

.sf-form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.sf-form--inline .sf-field { margin: 0; }
.sf-field--narrow { max-width: 110px; }

/* ---- Offering week calendar ---- */
.sf-weeks__no {
    width: 88px;
    text-align: right;
    padding-right: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: top;
}
/* A break occupies calendar space but teaches nothing. */
.sf-table tr.sf-weeks--break > * {
    background: var(--sf-panel-2);
    color: var(--sf-muted);
}
/* The week today falls in. */
.sf-table tr.sf-weeks--now > * {
    box-shadow: inset 3px 0 0 var(--sf-brand-red);
}
.sf-weekedit { display: inline-block; margin-left: 8px; }
.sf-weekedit > summary {
    cursor: pointer;
    color: var(--sf-muted);
    font-size: 12px;
    list-style: none;
}
.sf-weekedit > summary::-webkit-details-marker { display: none; }
.sf-weekedit[open] > summary { color: var(--sf-ink); }
.sf-weekedit .sf-form {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--sf-line);
    border-radius: 8px;
    background: var(--sf-bg);
}
.sf-btn--danger { border-color: var(--sf-brand-red); color: var(--sf-brand-red); }
.sf-cardhead { padding: 12px 14px 0; margin: 0; }

/* ---- Checklists without versions: live-edit notice, History band, audit ---- */
.sf-note--live {
    border-left: 3px solid var(--sf-brand-red);
    padding-left: 12px;
}
.sf-history > summary { cursor: pointer; }
.sf-history .sf-table { margin-top: 10px; }
.sf-table tr.sf-audit--bookmark > * {
    background: rgba(46, 160, 67, 0.06);
}
.sf-list { margin: 8px 0 12px; padding-left: 18px; }
.sf-list li { margin: 3px 0; }

/* The builder's three-state cell key, shown inline in a note line. */
.sf-cellkey .sf-cellbtn {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0 3px;
}

/* Cell toggled in place: a brief busy tint, no layout shift. */
.sf-buildgrid__cell.is-saving { opacity: 0.45; }
.sf-cellbtn[disabled] { cursor: progress; }

/* Transient notice for things the flash bag used to carry across a redirect
   (e.g. "3 learners had already signed this cell"). Fixed, so nothing on the
   grid moves when it appears. */
.sf-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    max-width: min(560px, calc(100vw - 32px));
    padding: 10px 16px;
    border: 1px solid var(--sf-line);
    border-left: 3px solid var(--sf-brand-red);
    border-radius: 8px;
    background: var(--sf-surface);
    color: var(--sf-text);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
}
.sf-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .sf-toast { transition: none; }
}

/* ---- Cell state menu (one shared element, positioned per cell) ---- */
.sf-cellmenu {
    position: fixed;
    z-index: 70;
    min-width: 190px;
    padding: 4px;
    border: 1px solid var(--sf-line);
    border-radius: 10px;
    background: var(--sf-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    display: none;
}
.sf-cellmenu.is-on { display: block; }
.sf-cellmenu__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--sf-text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.sf-cellmenu__opt:hover,
.sf-cellmenu__opt:focus-visible { background: var(--sf-accent-soft); outline: none; }
.sf-cellmenu__glyph {
    min-width: 30px;
    color: var(--sf-muted);
    font-variant-numeric: tabular-nums;
}
/* The state the cell already holds, so the menu reads as a selection. */
.sf-cellmenu__opt.is-current { font-weight: 600; }
.sf-cellmenu__opt.is-current .sf-cellmenu__glyph { color: var(--sf-text); }
.sf-cellmenu__opt.is-na-opt { border-top: 1px solid var(--sf-line); margin-top: 4px; padding-top: 9px; }

/* The cell whose menu is open stays visibly the subject of it. */
.sf-buildgrid__cell.is-picking { background: var(--sf-accent-soft); }

/* A field the SIS owns: visibly not editable, still submitted. */
.sf-input[readonly] {
    background: var(--sf-panel-2);
    color: var(--sf-muted);
    cursor: not-allowed;
}
/* Explanatory line under a checkbox label. */
.sf-check__hint { margin: 2px 0 0 26px; }

/* ---- Integration: the two syncs, numbered because order matters ---- */
.sf-syncstep { padding: 14px 0 4px; border-top: 1px solid var(--sf-line); margin-top: 12px; }
.sf-syncstep .sf-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.sf-syncstep__n {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
    font-size: 12px;
    font-weight: 700;
}

/* ---- Field mapping: labelled columns, SIS -> local ---- */
.sf-mapgrid__head,
.sf-mapgrid__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.sf-mapgrid__head {
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sf-line);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sf-muted);
}
.sf-mapgrid__src { font-weight: 400; text-transform: none; letter-spacing: 0; }
.sf-mapgrid__row { margin-bottom: 6px; }
.sf-mapgrid__arrow { text-align: center; color: var(--sf-muted); }
/* On a phone the columns stack. The header stacks too — still labelling
   "SIS field" then the local field, in the same top-to-bottom order as each
   row — and the arrow turns to point down the stack. */
@media (max-width: 640px) {
    .sf-mapgrid__head,
    .sf-mapgrid__row { grid-template-columns: 1fr; gap: 4px; }
    .sf-mapgrid__head > span:empty { display: none; }
    .sf-mapgrid__row { padding-bottom: 8px; border-bottom: 1px solid var(--sf-line); }
    .sf-mapgrid__arrow { transform: rotate(90deg); }
}

/* ---- Sections & faculty ---- */
/* A co-instructor: present and fully scoped, but visibly not the lead. */
.sf-pill--secondary {
    background: var(--sf-panel-2);
    color: var(--sf-muted);
    border: 1px solid var(--sf-line);
    font-size: 11px;
    padding: 0 6px;
    vertical-align: 1px;
}
.sf-facultyline { line-height: 1.7; }
.sf-facultyline + .sf-facultyline { border-top: 1px dashed var(--sf-line); }

/* ---- Roster column filters: one control under each header ---- */
.sf-filterrow td { padding-top: 4px; padding-bottom: 8px; background: var(--sf-panel-2); }
.sf-input--filter {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    font-size: 12px;
}

/* A person's name linking to their user page (user_link()). */
.sf-personlink { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.sf-personlink:hover { color: var(--sf-brand-red, #d92d02); border-bottom-style: solid; }

/* ---- Month calendar (dashboard + learner portal) ---- */
.sf-cal { table-layout: fixed; }
.sf-cal thead th { text-align: center; font-size: 12px; letter-spacing: .04em; }
.sf-cal__days td {
    text-align: center;
    padding: 6px 4px;
    vertical-align: top;
    border-bottom: none;
}
.sf-cal__days td.is-out .sf-cal__num { opacity: .35; }
.sf-cal__num { font-variant-numeric: tabular-nums; font-size: 13px; }
.sf-cal__days td.is-today .sf-cal__num {
    background: var(--sf-brand-red);
    color: #fff;
    border-radius: 999px;
    padding: 2px 7px;
}
.sf-cal__bands td { padding: 0 10px 10px; }
.sf-calband {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-top: 4px;
    border-left: 3px solid var(--sf-brand-red);
    background: rgba(127, 127, 127, 0.07);
    border-radius: 4px;
    font-size: 13px;
}
.sf-calband__course { font-weight: 600; text-decoration: none; color: inherit; }
.sf-calband__course:hover { color: var(--sf-brand-red); }
.sf-calband__wk { color: var(--sf-muted); font-size: 12px; }

/* A section's faculty: name on top, role pill beneath it. */
.sf-fac {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0 14px 6px 0;
    vertical-align: top;
}
.sf-fac--secondary .sf-fac__name { font-size: 0.88em; }
.sf-fac--secondary .sf-pill { font-size: 10px; }
.sf-seclink { text-decoration: none; border-bottom: 1px dotted currentColor; }
.sf-seclink:hover { color: var(--sf-brand-red); }

/* ---- Sign-off pop-up (staff matrix) ---- */
.sf-modal {
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: var(--sf-panel);
    color: inherit;
    padding: 24px 24px 18px;
    max-width: 560px;
    width: calc(100% - 32px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.sf-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.sf-modal .sf-actions { margin-top: 16px; align-items: center; gap: 14px; }
.sf-modal__x { position: absolute; top: 10px; right: 14px; margin: 0; }
.sf-modal__x button { font-size: 20px; line-height: 1; }
.sf-matrix__cell a { cursor: pointer; }

/* ---- "Where is this skill taught?" popup ---- */
.sf-taught { position: relative; display: inline-block; cursor: help; }
.sf-taught__name { border-bottom: 1px dotted var(--sf-muted); }
.sf-taught__pop {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 40;
    display: none;
    min-width: 300px;
    max-width: 420px;
    padding: 10px 12px;
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    font-weight: 400;
    white-space: normal;
}
.sf-taught:hover .sf-taught__pop,
.sf-taught:focus .sf-taught__pop,
.sf-taught:focus-within .sf-taught__pop { display: block; }
.sf-taught__head {
    display: block;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin-bottom: 6px;
}
.sf-taught__line { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; }
.sf-taught__line.is-now { font-weight: 600; }
.sf-taught__course { min-width: 84px; font-weight: 600; }
.sf-taught__wk { color: var(--sf-muted); }

/* ---- Click-to-sort table headers ---- */
.sf-sortable { cursor: pointer; user-select: none; }
.sf-sortable:hover { color: var(--sf-brand-red); }
.sf-sortable[data-dir="asc"]::after { content: " \2191"; }
.sf-sortable[data-dir="desc"]::after { content: " \2193"; }

.sf-modal--wide { max-width: 680px; }
.sf-modal #sf-cell-history { max-height: 240px; overflow-y: auto; }
.sf-modal .sf-decline__form { display: flex; gap: 8px; margin-top: 8px; }

/* ---- Cell pop-up: panels, and a compact record row ---- */
.sf-modal__panel {
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: rgba(127, 127, 127, 0.06);
    padding: 12px 14px;
    margin-top: 14px;
}
.sf-modal__h {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}
.sf-modal__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.sf-modal__row + .sf-modal__row { margin-top: 8px; }
.sf-field--tight { margin: 0; }
.sf-field--grow { flex: 1 1 180px; min-width: 150px; }
.sf-note--tight { margin: 8px 0 0; font-size: 12px; }
.sf-modal .sf-input { padding: 6px 8px; }
.sf-modal .sf-label { font-size: 11px; }
.sf-modal .sf-check { margin: 0 0 4px; white-space: nowrap; }
.sf-modal #sf-cell-history { max-height: 220px; overflow-y: auto; }
.sf-modal #sf-cell-history .sf-itemrow { padding: 4px 0; }
.sf-modal .sf-decline { margin-bottom: 2px; }

/* The record panel folds away when nothing is waiting on a decision. */
.sf-modal__panel--fold > summary { cursor: pointer; margin-bottom: 0; list-style: revert; }
.sf-modal__panel--fold > summary:hover { color: var(--sf-brand-red); }
.sf-modal__panel--fold[open] > summary { margin-bottom: 10px; }

/* ---- "+New …" — one look for every create action ---- */
.sf-btn--add {
    background: var(--sf-add);
    border-color: var(--sf-add);
    color: #fff;
}
.sf-btn--add:hover { background: var(--sf-add-hover); border-color: var(--sf-add-hover); }

/* ---- Column header tools: sort + filter, no filter row ---- */
.sf-colhead { position: relative; cursor: pointer; user-select: none; white-space: nowrap; }
.sf-colhead:hover { color: var(--sf-brand-red); }
.sf-colhead::after { content: " ▾"; opacity: .45; font-size: 10px; }
.sf-colhead.is-sorted[data-dir="asc"]::after { content: " ↑"; opacity: 1; }
.sf-colhead.is-sorted[data-dir="desc"]::after { content: " ↓"; opacity: 1; }
.sf-colhead.is-filtered { color: var(--sf-brand-red); }
.sf-colhead.is-filtered::before { content: "● "; font-size: 9px; vertical-align: middle; }
.sf-colmenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 210px;
    padding: 10px;
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: default;
    white-space: normal;
}
.sf-colmenu__sort { display: flex; gap: 12px; margin-bottom: 8px; }
.sf-colmenu .sf-input { width: 100%; padding: 6px 8px; }
.sf-colmenu > .sf-linkbtn { margin-top: 8px; }

/* Faculty role pills: primary in faded green, secondary in the muted grey. */
.sf-pill--primary {
    background: rgba(22, 163, 74, 0.16);
    color: var(--sf-add);
}
/* Long section lists read better banded. */
.sf-table--zebra tbody tr:nth-child(even) { background: rgba(127, 127, 127, 0.06); }
.sf-table--zebra tbody tr:hover { background: rgba(127, 127, 127, 0.11); }
/* A nested table sits inside its parent row without doubling the padding. */
.sf-subrow > td { padding: 0 0 12px 28px; }
.sf-subsections > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--sf-muted);
    padding: 4px 0;
}
.sf-subsections > summary:hover { color: var(--sf-brand-red); }
.sf-subsections[open] > summary { margin-bottom: 6px; }
.sf-subsections .sf-table { border-left: 2px solid var(--sf-line); }
.sf-subrow .sf-table { margin: 0; }

/* A <summary> that carries a title class must read like the headings beside it
   (browsers give summary their own weight/size). */
summary.sf-title { font-weight: 700; }
summary.sf-title--xs { font-size: 17px; letter-spacing: .01em; }

/* ---- Breadcrumbs ---- */
.sf-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--sf-muted);
}
.sf-crumbs__link { color: var(--sf-muted); text-decoration: none; }
.sf-crumbs__link:hover { color: var(--sf-brand-red); text-decoration: underline; }
.sf-crumbs__sep { opacity: .5; }
.sf-crumbs__here { color: inherit; font-weight: 600; }

/* ---- Curriculum drag and drop ---- */
.sf-curchip[draggable="true"] { cursor: grab; }
.sf-curchip[draggable="true"]:active { cursor: grabbing; }
.sf-curchip.is-dragging { opacity: .4; }
.sf-curriculum tr.is-dropzone > td,
.sf-curriculum tr.is-dropzone > th {
    background: rgba(22, 163, 74, 0.12);
    box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.45);
}

/* ---- Audit log ---- */
.sf-auditdetail { margin-top: 4px; }
.sf-auditdetail .sf-pre { max-height: 240px; overflow: auto; margin: 4px 0 8px; }

/* ---- Read-only record (e.g. User Information) ---- */
.sf-deflist {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 8px 18px;
    margin: 4px 0 0;
}
.sf-deflist dt { color: var(--sf-muted); font-size: 13px; font-weight: 600; }
.sf-deflist dd { margin: 0; }
@media (max-width: 560px) {
    .sf-deflist { grid-template-columns: 1fr; gap: 2px; }
    .sf-deflist dd { margin-bottom: 8px; }
}

/* ---- Section management (manual offerings) ---- */
.sf-popover { position: relative; display: inline-block; }
.sf-popover > summary { cursor: pointer; list-style: none; }
.sf-popover > summary::-webkit-details-marker { display: none; }
.sf-popover__body {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    display: grid;
    gap: 8px;
    min-width: 240px;
    padding: 12px;
    background: var(--sf-panel);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    white-space: normal;
}
.sf-popover__body form { display: grid; gap: 8px; }
.sf-secmanage { gap: 12px; }
.sf-facx { font-size: 15px; line-height: 1; padding: 0 2px; opacity: .55; }
.sf-facx:hover { opacity: 1; color: var(--sf-bad); }
.sf-danger { color: var(--sf-bad); }

/* ---- Sign-offs hub ---- */
/* Tabs styled like the index tabs on binder dividers: each is a rounded-top
   tab standing on a shared rule; the chosen one is lifted, drawn in the page
   colour and breaks the rule, so it reads as the divider you have open. */
.sf-tabs {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 0 0 0 10px;
    margin: 0 0 18px;
    border-bottom: 2px solid var(--sf-line);
}
.sf-tabs__tab {
    position: relative;
    top: 2px;                      /* sit ON the rule */
    padding: 8px 18px 7px;
    border: 1px solid var(--sf-line);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--sf-panel-2);
    color: var(--sf-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -6px 8px -8px rgba(0, 0, 0, 0.25);
    transition: background .12s, color .12s, padding .12s;
}
.sf-tabs__tab:hover {
    color: var(--sf-text);
    background: var(--sf-panel);
}
.sf-tabs__tab.is-active {
    z-index: 1;
    padding-top: 11px;             /* the open divider stands taller */
    background: var(--sf-bg);
    color: var(--sf-text);
    border-color: var(--sf-line);
    border-top: 3px solid var(--sf-brand-red);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.10);
}
/* Erase the rule under the open tab so it flows into the page below. */
.sf-tabs__tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--sf-bg);
}
.sf-tabs__badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--sf-brand-red);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    vertical-align: 1px;
}
@media (max-width: 560px) {
    .sf-tabs { padding-left: 0; gap: 3px; overflow-x: auto; }
    .sf-tabs__tab { padding: 7px 11px 6px; font-size: 14px; }
    .sf-tabs__tab.is-active { padding-top: 9px; }
}
.sf-teachgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sf-teachcard__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-cellpick.is-recent { background: rgba(22, 163, 74, 0.10); border-radius: 6px; padding: 2px 6px; }
tr.is-current > * { background: rgba(217, 45, 2, 0.06); }

/* Present for screen readers, invisible on screen (e.g. an <h1> the top nav
   already says visibly). */
.sf-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* A page head whose heading is hidden keeps its controls on the right. */
.sf-pagehead--end { justify-content: flex-end; }

/* ---- Teaching now tiles (collapsed by default) ---- */
.sf-teachcard { padding: 14px 16px; }
.sf-teachcard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    cursor: pointer;
    list-style: none;
}
.sf-teachcard__head::-webkit-details-marker { display: none; }
.sf-teachcard__head::before { content: "▸"; margin-right: 6px; color: var(--sf-muted); }
.sf-teachcard[open] > .sf-teachcard__head::before { content: "▾"; }
.sf-teachcard__title { font-weight: 700; font-size: 16px; flex: 1 1 auto; }
.sf-teachcard__meta { color: var(--sf-muted); font-size: 13px; }
.sf-teachcard[open] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.sf-teach-skills { display: grid; gap: 6px; margin: 10px 0 4px; }
.sf-teach-people { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--sf-line); }
.sf-teach-all { font-weight: 600; margin: 0; }
.sf-teach-list { margin: 4px 0 0 26px; }
.sf-teach-list > summary { cursor: pointer; font-size: 13px; }
.sf-teach-names { display: grid; gap: 4px; margin-top: 6px; max-height: 240px; overflow-y: auto; }
.sf-rule { border: 0; border-top: 1px solid var(--sf-line); margin: 26px 0 8px; }

.sf-teachcard__term { color: var(--sf-muted); font-size: 12px; font-weight: 600; margin-right: 6px; letter-spacing: .03em; }
.sf-teach-go:disabled { opacity: .55; cursor: not-allowed; }
.sf-teach-done { margin: 8px 0 0; color: var(--sf-ok); font-weight: 600; }

/* A flush card clips to its rounded corners (overflow: hidden), which also
   clipped the section "+ Faculty" / "Edit" popovers. Cards holding a popover
   let it overflow instead; the popover floats above neighbouring cards. */
.sf-card--flush:has(.sf-popover),
.sf-card--overflow { overflow: visible; }
.sf-popover[open] { z-index: 60; }
.sf-popover__body { z-index: 60; }

/* Future weeks in the Teaching now picker: selectable, but visibly "not yet". */
.sf-teach-week option.is-future { color: var(--sf-muted); }

/* ---- Section [Open] buttons ---- */
.sf-btn--xs { padding: 2px 10px; font-size: 12px; line-height: 1.6; border-radius: 999px; vertical-align: 1px; }
.sf-seccell { white-space: nowrap; }
.sf-seccell .sf-btn--xs { margin-left: 8px; }
.sf-openbar {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sf-line);
    background: rgba(217, 45, 2, 0.06);
    font-size: 14px;
}

/* Batch sign-off page: the signer, given room. */
.sf-batchsigner { max-width: 720px; }
.sf-signer-other { margin-top: 6px; }

/* All Students: the pick column, and the pop-up's skill list */
.sf-pickcol { width: 36px; text-align: center; }
.sf-pickcol input[disabled] { opacity: .35; cursor: not-allowed; }
.sf-session-picklist { max-height: 280px; }
.sf-session-picklist label[hidden] { display: none; }

/* Checkable column filters (table-tools.js, data-filter="select") */
.sf-colmenu__pick .sf-input { margin-bottom: 6px; }
.sf-colmenu__list { display: grid; gap: 3px; max-height: 260px; overflow-y: auto; min-width: 200px; padding-right: 4px; }
.sf-colmenu__list .sf-check { font-size: 13px; white-space: nowrap; }
.sf-colmenu__list .sf-check[hidden] { display: none; }

/* ---- Wall calendar (dashboard + learner portal; partials/teaching_calendar.php) ----
   Each week is a 7-column grid: day squares fill every row of it, course
   weeks sit on top as bars spanning their days, one lane per overlap. */
.sf-bigcal__bar { align-items: center; }
.sf-bigcal__month { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.sf-bigcal__scroll { overflow-x: auto; padding: 0 16px 4px; }
.sf-bigcal { min-width: 760px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; }
.sf-bigcal__head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--sf-line); }
.sf-bigcal__head > div {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sf-muted);
}
.sf-bigcal__short { display: none; }
.sf-bigcal__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 128px;
    row-gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sf-line);
    position: relative;
}
.sf-bigcal__week:last-child { border-bottom: 0; }
.sf-bigcal__day {
    grid-row: 1 / -1;
    border-right: 1px solid var(--sf-line);
    padding: 6px 8px;
    margin-bottom: -6px;
}
.sf-bigcal__day:nth-child(7) { border-right: 0; }
.sf-bigcal__day.is-out { background: rgba(127, 127, 127, 0.07); }
.sf-bigcal__day.is-out .sf-bigcal__num { opacity: .4; }
.sf-bigcal__num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-bigcal__day.is-today { background: rgba(217, 45, 2, 0.06); animation: sf-today-pulse 2.2s ease-in-out infinite; }
/* Today's square breathes (2026-10-13; quickened 3.2s → 2.2s on 10-14) — the whole cell, not just its number. */
@keyframes sf-today-pulse {
    0%, 100% { background-color: rgba(217, 45, 2, 0.05); }
    50%      { background-color: rgba(217, 45, 2, 0.20); }
}
@media (prefers-reduced-motion: reduce) { .sf-bigcal__day.is-today { animation: none; } }
.sf-bigcal__day.is-today .sf-bigcal__num {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    background: var(--sf-brand-red);
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px;
}

/* A course week laid across its days. --h is the course's hue. */
.sf-calev {
    position: relative;
    z-index: 1;
    margin: 0 4px;
    padding: 5px 8px 6px;
    border-radius: 6px;
    border-left: 4px solid hsl(var(--h), 62%, 46%);
    background: hsla(var(--h), 70%, 50%, 0.14);
    font-size: 12px;
    line-height: 1.3;
    min-width: 0;
}
.sf-calev.is-cont-before { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; border-left-style: dashed; }
.sf-calev.is-cont-after { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.sf-calev.is-break {
    border-left-color: var(--sf-muted);
    background: repeating-linear-gradient(135deg, rgba(127, 127, 127, 0.10) 0 6px, rgba(127, 127, 127, 0.04) 6px 12px);
}
.sf-calev__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-calev__course { font-weight: 700; color: inherit; text-decoration: none; white-space: nowrap; }
a.sf-calev__course:hover { text-decoration: underline; }
.sf-calev__tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 999px;
    background: hsla(var(--h), 62%, 46%, 0.22);
}
.sf-calev__skills { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 4px; }
.sf-calev__skill {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--sf-panel);
    border: 1px solid hsla(var(--h), 55%, 45%, 0.35);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-calev__note { margin-top: 3px; color: var(--sf-muted); font-style: italic; }
@media (max-width: 900px) {
    .sf-bigcal__long { display: none; }
    .sf-bigcal__short { display: inline; }
}
.sf-calev.is-narrow .sf-calev__course { white-space: normal; }
.sf-calev.is-narrow .sf-calev__tag { display: none; }

/* Sign-off activity: an undone row reads as struck from the record */
.sf-activity--undone td, .sf-activity--undone th { opacity: .55; }

/* Calendar: each skill is its own full-width bar across the course's weekdays,
   stacked one under another; weekends are quiet (nothing is scheduled there). */
.sf-calev__skills { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.sf-calev__skill {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 3px 8px;
    border-radius: 4px;
    border: 0;
    background: hsla(var(--h), 65%, 50%, 0.28);
    font-weight: 600;
}
.sf-bigcal__day.is-weekend { background: rgba(127, 127, 127, 0.05); }
.sf-bigcal__day.is-weekend.is-out { background: rgba(127, 127, 127, 0.09); }
/* Bars sit on an opaque base so today's / weekend shading never bleeds through. */
.sf-calev { background: linear-gradient(hsla(var(--h), 70%, 50%, 0.14), hsla(var(--h), 70%, 50%, 0.14)), var(--sf-panel); }
.sf-calev.is-break { background: repeating-linear-gradient(135deg, rgba(127, 127, 127, 0.10) 0 6px, rgba(127, 127, 127, 0.04) 6px 12px), var(--sf-panel); }
.sf-bigcal__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 0 10px; font-size: 14px; }
.sf-bigcal__filter .sf-check { font-weight: 600; }
.sf-calev[hidden] { display: none; }

/* Teaching tiles: course and week/skills/students on ONE line — the course
   name gives way (ellipsis) before the summary wraps under it. */
.sf-teachgrid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.sf-teachcard__head { flex-wrap: nowrap; align-items: center; }
.sf-teachcard__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-teachcard__meta { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 480px) { .sf-teachgrid { grid-template-columns: 1fr; } }

/* Batch sign-off: "All skills this week" heads the week, its skills indented beneath. */
.sf-allweek { margin-bottom: 2px; }
.sf-allweek-list { display: grid; gap: 4px; padding-left: 24px; border-left: 2px solid var(--sf-line); margin-left: 7px; }
.sf-teachcard__course { color: var(--sf-muted); font-weight: 400; font-size: 13px; margin-left: 8px; }

/* A person's photo beside their User Information (user_photos). */
.sf-userinfo { display: flex; gap: 20px; align-items: flex-start; }
.sf-userinfo > .sf-deflist { flex: 1 1 auto; min-width: 0; }
.sf-userphoto {
    flex: 0 0 auto;
    width: 132px;
    height: 164px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--sf-line);
    background: var(--sf-panel);
}
@media (max-width: 560px) { .sf-userinfo { flex-direction: column; } }

/* A table that fits its card instead of scrolling sideways (Requests from
   Students): cells may wrap, headers are a size smaller, padding tighter. */
.sf-table--fit { display: table; }
.sf-table--fit th, .sf-table--fit td { white-space: normal; padding: 8px 8px; overflow-wrap: anywhere; }
.sf-table--fit thead th { font-size: 12px; letter-spacing: 0.02em; overflow-wrap: normal; }
.sf-table--fit .sf-nowrap { white-space: nowrap; overflow-wrap: normal; }
.sf-table--fit .sf-usedon { max-width: 200px; }
.sf-rowactions--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-small { font-size: 11.5px; }

/* Programs page: a row's Edit opens its checklist picker in place. */
.sf-programedit > summary { list-style: none; cursor: pointer; }
.sf-programedit > summary::-webkit-details-marker { display: none; }
.sf-programedit__form { display: grid; gap: 6px; margin-top: 8px; min-width: 280px; text-align: left; white-space: normal; }
.sf-programedit__form--wide { min-width: 360px; }

/* A person's small round photo, just left of their name (person_avatar()). */
.sf-avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin: -4px 8px -4px 0;
    background: var(--sf-line);
    flex: 0 0 auto;
}
.sf-avatar--initials {
    line-height: 28px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--sf-muted);
    text-transform: uppercase;
}
.sf-teach-names .sf-check { align-items: center; }

/* The header's own initials circle keeps its centring and colour — the list
   avatars (person_avatar) share the .sf-avatar name. */
.sf-profile__trigger .sf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    line-height: 1;
    background: var(--sf-accent);
    color: #17110b;
}

/* ---- Student experience on phones (2026-09-24 mobile pass) ---- */

/* Legend as chips, ABOVE the checklist grid. */
.sf-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 12.5px; color: var(--sf-muted); }
.sf-legend > span { padding: 3px 9px; border: 1px solid var(--sf-line); border-radius: 999px; background: var(--sf-panel); white-space: nowrap; }
.sf-legend strong { color: var(--sf-text); margin-right: 3px; }

/* Column tabs: phones only — one checklist column at a time. */
.sf-coltabs { display: none; }
@media (max-width: 640px) {
    .sf-coltabs { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; padding-bottom: 2px; }
    .sf-coltab {
        flex: 1 0 auto;
        padding: 8px 12px;
        min-height: 44px;
        border: 1px solid var(--sf-line);
        border-radius: 10px;
        background: var(--sf-panel);
        color: var(--sf-text);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
    }
    .sf-coltab.is-active { border-color: var(--sf-brand-red); box-shadow: inset 0 -3px 0 var(--sf-brand-red); }
    .sf-coltab__n { display: block; font-size: 11.5px; font-weight: 400; color: var(--sf-muted); }
    .sf-matrix { display: table; }
    .sf-matrix th, .sf-matrix td { white-space: normal; }
    .sf-matrix .sf-matrix__cell a { display: block; min-width: 44px; min-height: 36px; font-size: 18px; }
}

/* "Where is this taught?" — on phones a tap opens it INLINE under the name,
   so a table's sideways scroll can never clip it. */
.sf-taught.is-open .sf-taught__pop { display: block; }
@media (max-width: 640px) {
    .sf-taught { display: block; cursor: pointer; }
    .sf-taught__pop { position: static; margin-top: 6px; box-shadow: none; min-width: 0; width: auto; }
}

/* Back links and the skill page heading. */
.sf-backlink { display: inline-block; margin: 0 0 6px; font-size: 14px; color: var(--sf-muted); text-decoration: none; }
.sf-backlink:hover { color: var(--sf-text); }
.sf-cellhead { margin: 0 0 6px; }
.sf-cellhead__col { display: block; font-size: 15px; font-weight: 600; color: var(--sf-muted); margin-top: 2px; }
.sf-matrixmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 14px; }

/* Waiting for sign-off: the form hides behind "log again anyway". */
.sf-waiting { margin: 0 0 8px; font-size: 15px; }
.sf-logagain > summary { margin-bottom: 8px; }

/* History entries: plain readable text, not a code font. */
.sf-entry { padding: 10px 0; border-bottom: 1px solid var(--sf-line); }
.sf-entry:last-child { border-bottom: 0; }
.sf-entry__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sf-entry__note { margin-top: 4px; }
.sf-entry__by { margin-top: 3px; font-size: 13px; color: var(--sf-muted); }

/* Progress bar on the student's checklist card. */
.sf-progress { display: block; height: 6px; margin-top: 10px; border-radius: 999px; background: var(--sf-line); overflow: hidden; }
.sf-progress > span { display: block; height: 100%; background: var(--sf-brand-red); border-radius: 999px; }

/* Calendar: a week-by-week list on phones instead of the 7-column grid. */
.sf-agenda { display: none; }
@media (max-width: 640px) {
    .sf-bigcal__scroll { display: none; }
    .sf-agenda { display: block; padding: 0 16px 6px; }
    .sf-agenda__week { padding: 10px 0; border-top: 1px solid var(--sf-line); }
    .sf-agenda__dates { font-size: 15px; font-weight: 800; color: var(--sf-text); margin-bottom: 8px; }
    .sf-agenda__item { margin: 0 0 8px; }
    .sf-bigcal__bar { flex-wrap: wrap; gap: 8px; }
}
.sf-agenda__item[hidden] { display: none; }

/* ---- Student portal: sticky tabs, dashboard tiles, pick-lists, feed ---- */

/* The three tabs stay at the top of the screen while the student scrolls. */
.sf-tabs--sticky {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--sf-bg);
    padding-top: 8px;
    margin-top: -8px;
}
@media (max-width: 640px) {
    .sf-tabs--sticky { gap: 2px; }
    .sf-tabs--sticky .sf-tabs__tab { flex: 1 1 0; justify-content: center; text-align: center; padding: 10px 6px; font-size: 14px; }
}

/* Dashboard tiles. */
.sf-agenda-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
@media (max-width: 640px) { .sf-agenda-tiles { grid-template-columns: 1fr; gap: 8px; } }
.sf-agenda-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "title title" "num sub" "wait wait";
    align-items: baseline;
    column-gap: 10px;
    padding: 14px 16px;
    min-height: 44px;
    border: 1px solid var(--sf-line);
    border-left: 5px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: var(--sf-panel);
    color: var(--sf-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sf-agenda-tile--overdue { border-left-color: var(--sf-brand-red); }
.sf-agenda-tile--this    { border-left-color: #2f8f5b; }
.sf-agenda-tile--next    { border-left-color: #3a78c2; }
.sf-agenda-tile.is-open  { box-shadow: 0 0 0 2px var(--sf-brand-red) inset; }
.sf-agenda-tile__title { grid-area: title; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.sf-agenda-tile__num   { grid-area: num; font-size: 34px; font-weight: 800; line-height: 1; }
.sf-agenda-tile__sub   { grid-area: sub; color: var(--sf-muted); font-size: 13px; }
.sf-agenda-tile__wait  { grid-area: wait; margin-top: 8px; font-size: 13px; color: var(--sf-muted); }

/* A bucket's pick-list. */
.sf-bucket { margin-bottom: 16px; scroll-margin-top: 64px; }
.sf-pickall { margin: 6px 0 8px; }
.sf-picklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sf-line); }
.sf-pick { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--sf-line); }
.sf-pick > input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; }
.sf-pick__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sf-pick__skill { font-weight: 700; color: var(--sf-text); text-decoration: none; }
.sf-pick__skill:hover { text-decoration: underline; }
.sf-pick__col { font-size: 14px; }
.sf-pick__meta { font-size: 12.5px; color: var(--sf-muted); }
.sf-pick__act { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 480px) {
    /* Checkbox + name share the first row (the body takes all but the
       checkbox's 34px); the action pill drops beneath, lined up with the name. */
    .sf-pick { flex-wrap: wrap; }
    .sf-pick__body { flex: 1 1 calc(100% - 34px); }
    .sf-pick__act { margin-left: 34px; }
}
@media (max-width: 640px) {
    /* More room for one-line skill names in the pick-lists and feed. */
    .sf-bucket, .sf-card:has(> .sf-feed) { padding: 16px 14px; }
}
.sf-pickbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 14px; }
.sf-pickbar .sf-field--grow { flex: 1 1 200px; }
.sf-pickbar__go { min-height: 44px; }
@media (max-width: 640px) { .sf-pickbar__go { width: 100%; } }

/* Recent activity feed. */
.sf-feed { list-style: none; margin: 0; padding: 0; }
.sf-feed__row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--sf-line); }
.sf-feed__row:last-child { border-bottom: 0; }
.sf-feed__row > .sf-pill { flex: 0 0 auto; min-width: 86px; text-align: center; }
.sf-feed__body { display: grid; gap: 2px; min-width: 0; }
.sf-feed__text { color: var(--sf-text); text-decoration: none; }
.sf-feed__text:hover { text-decoration: underline; }
.sf-feed__meta { font-size: 12.5px; color: var(--sf-muted); }

/* ---- Header: above the student portal's sticky tabs; one row on phones ---- */

/* The header is its own stacking layer ABOVE the sticky tabs (z 40), so the
   profile and nav dropdowns open over them instead of behind. */
.sf-brand--bar { position: relative; z-index: 60; }

/* A pure learner has no nav links; don't let the empty nav take a row. */
.sf-nav:not(:has(a, button)) { display: none; }

@media (max-width: 640px) {
    /* Logo · college name · profile stay on ONE row; any staff nav links drop
       to their own row underneath. The college name gives way first. */
    .sf-brand--bar { flex-wrap: wrap; gap: 8px 10px; margin-bottom: 16px; }
    .sf-brand--bar .sf-brand__mark { flex: none; gap: 6px; }
    .sf-brand--bar .sf-brand__logo { height: 30px; }
    .sf-brand--bar .sf-brand__name { font-size: 17px; }
    .sf-brand--bar .sf-userbox { order: 2; flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: 6px; }
    .sf-brand--bar .sf-nav { order: 3; flex: 1 0 100%; }
    .sf-userbox__name {
        /* Up to two lines, right-aligned, then an ellipsis. */
        min-width: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        text-align: right;
        line-height: 1.2;
        font-size: 13px;
    }
    .sf-userbox .sf-inline-form { min-width: 0; }
    .sf-orgselect { max-width: 100%; }
    .sf-profile { flex: none; }
    .sf-profile__trigger { padding: 4px; }
}
@media (max-width: 340px) {
    /* The logo alone says SkillFox; the wordmark yields to the college name. */
    .sf-brand--bar .sf-brand__name { display: none; }
}
/* The student tabs share the width equally and always fit, so they need no
   sideways scroller (which on phones also showed a stray vertical bar). */
@media (max-width: 640px) { .sf-tabs--sticky { overflow: visible; } }

/* One-line skill names on phones (assets/js/fit-line.js sizes each one). */
@media (max-width: 640px) {
    .sf-fit1.is-fit {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}

/* Student dashboard: page back through Recent activity. */
.sf-feed__pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.sf-feed__pager .sf-btn:only-child { margin-left: auto; }
.sf-feed__pager .sf-btn { min-height: 44px; display: inline-flex; align-items: center; }

/* IT Configuration → Branding images: current image + upload, per kind. */
.sf-brand__logo { max-width: 220px; object-fit: contain; }
.sf-brandslots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 14px; }
.sf-brandslot { border: 1px solid var(--sf-line); border-radius: 10px; padding: 16px; }
.sf-brandslot__title { margin: 0 0 10px; font-size: 15px; }
.sf-brandslot__preview {
    display: flex; align-items: center; justify-content: center;
    height: 96px; border-radius: 8px; background: var(--sf-panel-2);
    border: 1px dashed var(--sf-line);
}
.sf-brandslot__preview--logo img { height: 34px; width: auto; max-width: 90%; object-fit: contain; }
.sf-brandslot__preview--favicon img { width: 48px; height: 48px; object-fit: contain; }
.sf-brandslot__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.sf-brandslot__form .sf-input[type="file"] { flex: 1 1 200px; min-width: 0; }

/* Two-way switch (e.g. My students | All actively enrolled). */
.sf-seg { display: inline-flex; margin: 6px 0 4px; border: 1px solid var(--sf-line); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.sf-seg__opt { padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--sf-muted); text-decoration: none; }
.sf-seg__opt + .sf-seg__opt { border-left: 1px solid var(--sf-line); }
.sf-seg__opt:hover { color: var(--sf-text); background: var(--sf-panel-2); }
.sf-seg__opt.is-on { background: var(--sf-brand-red); color: #fff; }

/* A row kept for the record but no longer in force (e.g. an undone signature). */
.sf-table tr.is-muted > td, .sf-table tr.is-muted > th { opacity: 0.6; }

/* Requests queue: "Decline" is a small quiet link (no disclosure triangle)
   that opens the reason box; the submit inside stays compact. */
.sf-decline__open { list-style: none; cursor: pointer; font-size: 12px; }
.sf-decline__open::-webkit-details-marker { display: none; }
/* Opened in a narrow Actions column: reason on top, the button under it. */
.sf-rowactions--stack .sf-decline__form { flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-rowactions--stack .sf-decline__form .sf-input { min-width: 160px; max-width: none; }
.sf-decline__form .sf-btn { white-space: nowrap; }
/* Requests queue: the Decline controls are deliberately the smallest thing in the row. */
.sf-decline__open { font-size: 11px; }
.sf-decline__form .sf-btn.sf-btn--xs { font-size: 10.5px; padding: 1px 8px; min-height: 0; line-height: 1.4; }
.sf-rowactions--stack .sf-decline__form .sf-input { font-size: 12px; padding: 3px 6px; min-width: 140px; }

/* Student dashboard: a jump to #checklists lands below the sticky tabs. */
#checklists { scroll-margin-top: 72px; }

/* Organization settings → Cohort Settings: the ordered rule editor. */
.sf-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-rule { border: 1px solid var(--sf-line); border-radius: 10px; padding: 12px 14px; background: var(--sf-panel); }
.sf-rule__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sf-rule__num { font-weight: 700; }
.sf-rule__tools { display: inline-flex; gap: 10px; }
.sf-rule__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; }
.sf-rulemonths { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0; }
.sf-rulemonth { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.sf-ruleyears { font-size: 13px; color: var(--sf-muted); }
.sf-ruleyears .sf-input--tiny { width: 70px; display: inline-block; padding: 3px 6px; }
.sf-tokenlist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.sf-token { cursor: pointer; font-family: inherit; }
.sf-rulecounts { margin: 8px 0; padding-left: 18px; }
.sf-rulecounts li { margin: 3px 0; }
.sf-warntext { color: var(--sf-brand-red); }


/* "Impersonate this user" pill beside a person's name (opens their view in a new tab). */
.sf-title--withpill { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.sf-imp-form { display: inline-flex; }
.sf-pill--action {
    cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4;
    padding: 3px 10px; border-radius: 999px; border: 1px solid #1e4fb8;
    /* Blue (2026-10-13): "Impersonate this user ↗" is the only action pill. */
    background: #2563eb; color: #fff; vertical-align: middle;
}
.sf-pill--action:hover, .sf-pill--action:focus-visible { background: #1d4ed8; border-color: #1e40af; color: #fff; }

/* An impersonating tab: the banner spans the top of the page, above the header. */
body.is-impersonating .sf-impersonate {
    border-radius: 0; margin: 0; border-width: 0 0 2px;
    justify-content: center; text-align: center;
    background: var(--sf-brand-red); border-color: #9e2100; color: #fff;
}
body.is-impersonating .sf-impersonate .sf-btn { background: #fff; color: var(--sf-brand-red); border-color: #fff; }

/* Curriculum page (DESIGN.md 9d): weeks left, a sticky skill pool right. */
.sf-curlayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.sf-curlayout__weeks { min-width: 0; }
.sf-curpool {
    position: sticky; top: 12px;
    max-height: calc(100vh - 24px); overflow-y: auto;
    padding: 16px;
}
@media (max-width: 900px) {
    .sf-curlayout { grid-template-columns: 1fr; }
    .sf-curpool { position: static; max-height: none; order: -1; }
}
.sf-pooladd { display: grid; gap: 8px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--sf-line); }
.sf-pooladd .sf-field { margin: 0; }
.sf-pooladd select { width: 100%; }
.sf-pooladd__row { display: flex; gap: 10px; }
.sf-poolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.sf-poolbar .sf-seg { margin: 0; }
.sf-poolbar .sf-seg__opt { background: none; border: 0; cursor: pointer; font-family: inherit; }
.sf-poolbar .sf-seg__opt.is-on { background: var(--sf-brand-red); color: #fff; }
.sf-poolfind { flex: 1 1 140px; min-width: 0; padding: 5px 8px; font-size: 13px; }
.sf-poolhead { font-size: 13px; margin: 12px 0 4px; }
.sf-poolul { list-style: none; margin: 0; padding: 0; }
.sf-poolsec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--sf-muted); margin: 10px 0 2px; }
.sf-poolskill {
    display: flex; gap: 6px; align-items: baseline;
    padding: 4px 8px; margin: 2px 0; border-radius: 6px; cursor: grab;
    border: 1px solid transparent; font-size: 14px;
}
.sf-poolskill:hover, .sf-poolskill:focus { background: var(--sf-panel-2); border-color: var(--sf-line); outline: none; }
.sf-poolskill.is-picked { border-color: var(--sf-brand-red); background: var(--sf-accent-soft); }
.sf-poolskill.is-dragging { opacity: .4; }
.sf-poolskill.is-used .sf-poolskill__name { text-decoration: line-through; color: var(--sf-muted); }
.sf-poolskill__n { font-size: 12px; font-weight: 700; color: var(--sf-muted); }
.sf-poolskill--legend { display: inline-flex; padding: 0 2px; margin: 0; cursor: default; font-size: inherit; }
.sf-curchip.is-outside { border-color: var(--sf-brand-red); }
.sf-curchip__warn { color: var(--sf-brand-red); font-weight: 600; }
.sf-curriculum tr[data-week] { scroll-margin-top: 16px; }

/* Curriculum drag and drop (pool → week): used skills are GREYED, not struck;
   every week lights up as a target while a skill is being dragged. */
.sf-poolskill { cursor: grab; user-select: none; }
.sf-poolskill:active { cursor: grabbing; }
.sf-poolskill__grip { color: var(--sf-muted); font-size: 12px; opacity: .6; }
.sf-poolskill.is-used { background: var(--sf-panel-2); }
.sf-poolskill.is-used .sf-poolskill__name { text-decoration: none; color: var(--sf-muted); }
.sf-poolskill.is-used .sf-poolskill__n { background: var(--sf-line); color: var(--sf-text); border-radius: 999px; padding: 0 6px; }
.sf-poolskill--legend { background: var(--sf-panel-2); border-radius: 4px; }
.sf-pooladdwrap { margin: 0 0 10px; }
.sf-pooladdwrap > summary { cursor: pointer; font-size: 13px; margin-bottom: 6px; }
body.is-dragging-skill .sf-curriculum tr[data-week] td { outline: 1px dashed var(--sf-line); outline-offset: -3px; }
.sf-curriculum tr.is-dropzone td { background: var(--sf-accent-soft); outline: 2px solid var(--sf-brand-red) !important; outline-offset: -3px; }
.sf-curriculum tr.is-dropzone td::after { content: "Drop here"; margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--sf-brand-red); }
.sf-curriculum tr.is-justadded td { animation: sf-justadded 1.4s ease-out; }
@keyframes sf-justadded { from { background: #d9f2df; } to { background: transparent; } }

/* Used pool skills: faded, struck-through TEXT — no background (Jason). */
.sf-poolskill.is-used { background: transparent; }
.sf-poolskill.is-used .sf-poolskill__name { text-decoration: line-through; color: var(--sf-muted); opacity: .75; }
.sf-poolskill.is-used .sf-poolskill__n { background: none; padding: 0; color: var(--sf-muted); }
.sf-poolskill--legend { background: none; }

/* Skills list: each checklist / course-week on its own line, so a long
   "Used on" can never run over the next column. */
.sf-skillused { font-size: 12.5px; white-space: normal; }
.sf-skillused > a, .sf-skillused > span:not(.sf-muted) { display: block; line-height: 1.5; }
.sf-skillused > a { color: var(--sf-muted); }

/* Skills list: coverage flags stack one per line. */
.sf-covflag { display: inline-block; margin: 1px 0; white-space: nowrap; cursor: help; }

/* Users list: a person's verifier scopes, one pill per line. */
.sf-scopecell .sf-pill { display: inline-block; margin: 1px 0; white-space: nowrap; }
.sf-scopecell { white-space: normal; }

/* Users list: verifier scope pills stack one per line (the column stays narrow). */
.sf-scopecell .sf-pill { display: block; width: fit-content; margin: 0 0 5px; white-space: nowrap; }
.sf-scopecell .sf-pill:last-child { margin-bottom: 0; }


/* Sign-in page: two doors side by side (after the college's Blackboard login),
   in ordinary app cards. The page carries its own big logo, so the guest
   header is hidden there. */
body.sf-guest--login .sf-brand { display: none; }
.sf-login { max-width: 820px; margin: 28px auto 0; }
.sf-login__hero { text-align: center; margin-bottom: 22px; }
.sf-login__logo { display: block; width: 104px; height: 104px; object-fit: contain; margin: 0 auto 8px; }
.sf-login__welcome { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.sf-login__flash { margin-bottom: 16px; }
.sf-login__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.sf-login__card { margin: 0; padding: 22px 22px 20px; }
/* Preceptors (code sign-in) sit under the two doors, full width. */
.sf-login__card--wide { grid-column: 1 / -1; }
.sf-login__form--row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sf-login__form--row .sf-field { flex: 1 1 260px; margin: 0; }
.sf-login__form--row .sf-login__btn { width: auto; }
.sf-login__card h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.sf-login__lead { margin: 0 0 18px; color: var(--sf-muted); font-size: 15px; line-height: 1.45; }
.sf-login__card .sf-ssoblock { margin-bottom: 0; }
.sf-login__card .sf-btn--ms, .sf-login__btn { width: 100%; min-height: 44px; justify-content: center; }
.sf-login__links { display: flex; justify-content: flex-end; margin-top: 10px; font-size: 13px; }
.sf-login__links a, .sf-login__alt summary, .sf-login__also a { color: var(--sf-text); text-decoration: underline; }
.sf-login__alt { margin-top: 14px; }
.sf-login__alt summary { cursor: pointer; font-size: 13px; }
.sf-login__alt[open] summary { margin-bottom: 14px; }
.sf-login__also { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--sf-line); font-size: 13px; color: var(--sf-muted); }
@media (max-width: 720px) {
    .sf-login { margin-top: 12px; }
    .sf-login__grid { grid-template-columns: 1fr; }
    .sf-login__welcome { font-size: 24px; }
    .sf-login__logo { width: 76px; height: 76px; }
}
.sf-login__links--start { justify-content: flex-start; }
.sf-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sf-text); text-decoration: underline; cursor: pointer; }
.sf-login__help { max-width: 420px; text-align: center; font-size: 14px; line-height: 1.5; }
.sf-login__help p { margin: 0 0 14px; }
.sf-login__help a { color: var(--sf-accent); font-weight: 600; }
.sf-login__helpfoot { display: flex; justify-content: center; }
.sf-leadpick { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding: 4px 2px; border: 1px solid var(--sf-line); border-radius: 8px; }
.sf-jobprog { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--sf-line); border-radius: 8px; background: var(--sf-panel-2); font-size: 14px; }
.sf-jobprog .sf-pre { font-size: 12px; max-height: 140px; overflow: auto; }

/* A skill's checklist section after its name, everywhere outside the checklist
   views (skill_html, 2026-10-08): tiny, light grey, never bold. */
.sf-skillsec { font-size: 0.75em; font-weight: 400; color: var(--sf-muted); opacity: .85; white-space: nowrap; }

/* SIS sync progress panel (integration page, 2026-10-08). */
.sf-syncstatus { border: 1px solid var(--sf-line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--sf-panel); }
.sf-syncstatus__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sf-syncphases { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.sf-syncphases li { color: var(--sf-muted); }
.sf-syncphases li.is-done { color: var(--sf-text); }
.sf-syncphases li.is-now { color: var(--sf-text); font-weight: 600; }
.sf-syncphases li.is-failed { color: var(--sf-brand-red); font-weight: 600; }
.sf-syncphases__mark { display: inline-block; width: 1.2em; text-align: center; }
.sf-syncphases li.is-done .sf-syncphases__mark { color: #2f855a; }
.sf-syncbar { display: block; height: 6px; margin: 4px 0 2px 1.5em; max-width: 320px; background: var(--sf-line); border-radius: 3px; overflow: hidden; }
.sf-syncbar span { display: block; height: 100%; background: var(--sf-accent, #2f855a); transition: width .4s; }
.sf-synccounts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; }
.sf-syncchild { margin: 8px 0 0 1.5em; padding-left: 10px; border-left: 2px solid var(--sf-line); }
.sf-synclog { margin-top: 8px; }

/* Weekly Skills tile header, two lines (2026-10-13): term · course · title
   on the left with the week on the right; then students · skills · taught by. */
.sf-teachcard__head { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; row-gap: 3px; align-items: baseline; }
.sf-teachcard__head::before { grid-row: 1; grid-column: 1; }
.sf-teachcard__line1 { grid-column: 2; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sf-teachcard__line1 .sf-teachcard__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-teachcard__week { flex: 0 0 auto; white-space: nowrap; color: var(--sf-text); font-size: 13px; font-weight: 600; }
.sf-teachcard__line2 { grid-column: 2; color: var(--sf-muted); font-size: 13px; line-height: 1.4; }
/* "Taught by" with the secondary instructors stacked directly under the primary names. */
.sf-teachby { display: inline-flex; gap: 4px; vertical-align: top; }
.sf-teachby__names { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; }
.sf-teachby__secondary { font-size: 12px; opacity: .8; }

/* Weekday inside a date field (assets/js/date-dow.js, 2026-10-14): "Mon 10/05/2026". */
.sf-dow { position: relative; display: block; }
.sf-dow__day {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--sf-text); font: inherit; font-size: 15px;
}
.sf-dow.has-day > input[type="date"] { padding-left: 50px; }
.sf-dow:not(.has-day) > .sf-dow__day { display: none; }

/* Weekly Skills tile header, two rows (2026-10-14, Jason):
   term · week N · CODE · course name…  /  SECTION (N students) · Lastname · N skills this week.
   Each row stays on one line; the course name (row 1) and faculty (row 2) give way first. */
.sf-teachcard__head .sf-teachcard__line1,
.sf-teachcard__head .sf-teachcard__line2 { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.sf-teachcard__head .sf-teachcard__line1 { font-size: 13px; color: var(--sf-muted); }
.sf-teachcard__head .sf-teachcard__term { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--sf-muted); flex: 0 0 auto; }
.sf-teachcard__head .sf-teachcard__week { font-size: 13px; font-weight: 400; color: var(--sf-muted); flex: 0 0 auto; }
.sf-teachcard__code { font-weight: 700; font-size: 16px; color: var(--sf-text); flex: 0 0 auto; }
.sf-teachcard__head .sf-teachcard__course { margin: 0; font-size: 13px; color: var(--sf-muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-teachcard__sep { color: var(--sf-muted); flex: 0 0 auto; }
.sf-teachcard__section { font-weight: 700; color: var(--sf-text); flex: 0 0 auto; }
.sf-teachcard__fac { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.sf-teachcard__skillcount { flex: 0 0 auto; }
/* Tiles never force the page wider than the screen. */
.sf-teachgrid { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.sf-teachgrid > .sf-teachcard { min-width: 0; }

/* Student hover card (assets/js/person-card.js, 2026-10-14): the profile photo
   on the left, the facts on the right; fixed to the viewport so no table clips it. */
.sf-pcard {
    position: fixed; z-index: 80; width: max-content; max-width: min(720px, calc(100vw - 16px));
    background: var(--sf-panel); color: var(--sf-text); border: 1px solid var(--sf-line);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 14px 16px 10px;
    font-size: 13px; line-height: 1.4; white-space: normal; text-align: left;
}
.sf-pcard__inner { display: flex; gap: 14px; align-items: flex-start; }
.sf-pcard__photo { margin: 0; }
.sf-pcard__photo--none {
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-panel-2); color: var(--sf-muted); font-size: 34px; font-weight: 700;
}
.sf-pcard__facts { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px; margin: 0; min-width: 0; }
.sf-pcard__facts dt { color: var(--sf-muted); font-weight: 600; white-space: nowrap; }
.sf-pcard__facts dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.sf-pcard__name { font-weight: 700; }
.sf-pcard__list { display: block; }
.sf-pcard__more { margin: 10px 0 0; text-align: right; }

/* A section's weekly meeting days/times (Section::meetingText, 2026-10-14). */
.sf-meets { font-size: 13px; white-space: normal; min-width: 150px; }
.sf-teachcard__meets { flex: 0 0 auto; }

/* Absences in a signer's selected week (session_dialog.php, 2026-10-14). */
.sf-absent-note { margin-left: 10px; color: #c81e1e; font-weight: 700; }
/* It blinks (Jason, 2026-10-14) — calmly, and not at all for people who ask for less motion. */
.sf-absent-note { animation: sf-absent-blink 1.1s ease-in-out infinite; }
@keyframes sf-absent-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .sf-absent-note { animation: none; } }
/* A student row keeps the name on ONE line; an absence pill drops below it when the row is too narrow. */
.sf-teach-names .sf-check { flex-wrap: wrap; row-gap: 2px; }
.sf-teach-names .sf-check .sf-rowlink { white-space: nowrap; }
.sf-absent-pill { margin-left: 8px; background: #fde2e2; color: #b42318; border-color: #f5b5b5; font-size: 12px; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .sf-absent-note { color: #ff8a8a; } .sf-absent-pill { background: #4a1d1d; color: #ffb3b3; border-color: #7a2c2c; } }

/* Phone checklist: the column chooser is PINNED, 5+ columns get a picker, and the
   status column is narrow so skill names get the width (2026-10-14, after the
   12-column DE-MSN checklist hid 9 tabs off-screen and cut 12 names short). */
.sf-colbar { display: none; }
@media (max-width: 640px) {
    .sf-colbar {
        display: block;
        position: sticky;
        top: 0;              /* JS moves it under the learner portal's sticky tabs */
        z-index: 30;
        margin: 0 0 10px;
        padding: 6px 0 8px;
        background: var(--sf-bg);
    }
    .sf-colbar .sf-coltabs { margin: 0; }
    /* Label ABOVE the picker: beside it, "Performed in Lab/Sim · 0/68" was clipped to "0/6". */
    .sf-colpick { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; }
    .sf-colpick__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-muted); }
    .sf-colpick__select { width: 100%; min-height: 44px; font-size: 16px; font-weight: 600; }
    /* 72px: room for a queued skill's ✓ + hand chip (60px clipped it, 2026-10-15). */
    .sf-matrix .sf-matrix__cell { width: 72px; min-width: 72px; padding-left: 4px; padding-right: 4px; }
    /* The pinned bar names the column, so the header row is for screen readers only. */
    .sf-colbar ~ .sf-card .sf-matrix thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* Student checklist (2026-10-15): empty column picker with a pulsing halo, a "–"
   placeholder column until a column is chosen, queued skills as a blue chip
   (✓✋ = will ask for sign-off, ✓ = signs it off themselves), and the batch bar
   pinned to the bottom of the screen. */
.sf-mcol-none { display: none; }
.sf-needcol { all: unset; display: block; width: 100%; min-height: 36px; line-height: 36px; text-align: center; color: var(--sf-muted); cursor: pointer; }
/* The halo is a ring drawn by the picker's WRAPPER (a native <select> barely shows
   its own shadow on iPhone Safari): a solid red outline plus a ring that expands
   ~26px outward and fades, three times (2026-10-15 — the first version was too faint). */
.sf-colpick__selectwrap { position: relative; display: block; }
.sf-colpick__selectwrap.is-pulsing .sf-colpick__select { border-color: #d92d02; box-shadow: 0 0 0 2px #d92d02; }
.sf-colpick__selectwrap.is-pulsing::before,
.sf-colpick__selectwrap.is-pulsing::after {
    content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
    border: 3px solid rgba(217, 45, 2, 0.75);
    animation: sf-halo 1.5s ease-out 3;
}
.sf-colpick__selectwrap.is-pulsing::after { animation-delay: 0.5s; }
@keyframes sf-halo {
    0%   { transform: scale(1);    opacity: 0.95; inset: 0; }
    100% { opacity: 0; inset: -26px; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-colpick__selectwrap.is-pulsing::before, .sf-colpick__selectwrap.is-pulsing::after { animation: none; opacity: 0.6; inset: -4px; }
}
.sf-matrix__cell a.is-picked { background: #dbeafe; color: #1e40af; border: 1px solid #2563eb; border-radius: 8px; font-weight: 700; padding: 2px 4px; }
.sf-pickmark { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
/* An outstretched, palm-up hand beside the tick: "I'm asking for this to be signed"
   (2026-10-15 — a raised hand read as "stop", a paper plane did not land). */
/* Jason's hand drawing (assets/img/hand-request.png, transparent) used as a MASK, so it
   takes the chip's text colour — blue, and light in dark mode. */
.sf-hand {
    display: inline-block; width: 1.75em; height: 0.7em; background-color: currentColor;
    -webkit-mask: url('../img/hand-request.png') center / contain no-repeat;
            mask: url('../img/hand-request.png') center / contain no-repeat;
}
.sf-batchbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; align-items: center; gap: 12px; justify-content: flex-end;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--sf-panel); border-top: 1px solid var(--sf-line); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}
.sf-batchbar[hidden] { display: none; }
.sf-batchbar__count { margin-right: auto; color: var(--sf-muted); font-size: 14px; }
.sf-batchbar .sf-btn { min-height: 44px; }
body.has-batchbar { padding-bottom: 84px; }
.sf-batchlist { margin: 0 0 12px; padding-left: 18px; font-size: 14px; max-height: 30vh; overflow: auto; }
@media (prefers-color-scheme: dark) { .sf-matrix__cell a.is-picked { background: #1e3a8a; color: #dbeafe; border-color: #60a5fa; } }

/* iPhone/iPad Safari gives a date input its own minimum width and ignores width:100%
   unless its native appearance is off — the batch request sheet's "Date performed"
   ran past the dialog's right edge (2026-10-15). iOS only (-webkit-touch-callout);
   tapping still opens the native date wheel. */
@supports (-webkit-touch-callout: none) {
    input[type="date"].sf-input {
        -webkit-appearance: none; appearance: none;
        display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px;
    }
    input[type="date"].sf-input::-webkit-date-and-time-value { text-align: left; }
}
.sf-dow { max-width: 100%; min-width: 0; }

/* Weekly Skills: who is already signed off, weekly column only (.55) */
.sf-teachcard__progress { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; }
.sf-teachcard__progress:empty { display: none; }
.sf-teachcard__progress .sf-pill { font-size: 12px; line-height: 1.5; padding: 0 8px; }
.sf-skilldone { margin-left: 6px; font-size: 12px; color: var(--sf-muted); white-space: nowrap; }
.sf-skilldone.is-all { color: #15803d; font-weight: 600; }
.sf-persondone { margin-left: 8px; font-size: 12px; color: #15803d; font-weight: 600; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .sf-skilldone.is-all, .sf-persondone { color: #4ade80; } }

/* Weekly Skills tile header: three rows, each centred (2026-10-16) */
.sf-teachcard__head .sf-teachcard__line3 { grid-column: 2; display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; color: var(--sf-muted); font-size: 13px; line-height: 1.4; }
.sf-teachcard__head .sf-teachcard__line1,
.sf-teachcard__head .sf-teachcard__line2,
.sf-teachcard__head .sf-teachcard__line3 { justify-content: center; text-align: center; }
.sf-teachcard__head .sf-teachcard__course { flex: 0 1 auto; }
.sf-teachcard__head .sf-teachcard__meets { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Student's choice of signer (SignerChoice, .59) */
.sf-signerbox:empty { display: none; }
.sf-signerfield { position: relative; }
.sf-signerother { margin-top: 6px; position: relative; }
.sf-suggest { list-style: none; margin: 2px 0 0; padding: 4px 0; position: absolute; left: 0; right: 0; z-index: 30; background: var(--sf-surface, #fff); border: 1px solid var(--sf-line, #d9dde3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 240px; overflow: auto; }
.sf-suggest li { margin: 0; padding: 0; }
.sf-suggest li.sf-muted { padding: 6px 12px; }
.sf-suggest button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.sf-suggest button:hover, .sf-suggest button:focus { background: var(--sf-panel, #f2f4f7); outline: none; }
.sf-signerpicked { margin: 4px 0 0; color: #15803d; }

/* Builder: say that a column or row header is clickable (2026-10-19, Jason) */
.sf-buildgrid__colhead .sf-colcfg > summary { position: relative; cursor: pointer; }
.sf-buildgrid__colhead .sf-colcfg > summary::after,
.sf-buildgrid__rowhead > a.sf-rowlink::after {
    content: "✎ edit"; position: absolute; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #fff;
    background: var(--sf-accent, #d92d02); border-radius: 999px; padding: 1px 7px; line-height: 1.5; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .12s;
}
.sf-buildgrid__colhead .sf-colcfg > summary::after { top: 2px; right: 2px; }
.sf-buildgrid__rowhead { position: relative; }
.sf-buildgrid__rowhead > a.sf-rowlink { position: relative; padding-right: 2px; }
.sf-buildgrid__rowhead > a.sf-rowlink::after { position: static; display: inline-block; margin-left: 6px; vertical-align: 1px; }
.sf-buildgrid__colhead .sf-colcfg > summary:hover::after,
.sf-buildgrid__colhead .sf-colcfg > summary:focus-visible::after,
.sf-buildgrid__rowhead > a.sf-rowlink:hover::after,
.sf-buildgrid__rowhead > a.sf-rowlink:focus-visible::after { opacity: 1; }
.sf-buildgrid__colhead .sf-colcfg[open] > summary::after { content: "✎ editing"; opacity: 1; }

/* A list cell that wraps instead of widening the table (Students page Courses column, 2026-10-19) */
.sf-table td.sf-wrapcol { white-space: normal; max-width: 340px; line-height: 1.6; }
.sf-table td.sf-wrapcol a { white-space: nowrap; }

/* Section meeting times shown on a calendar day while a week bar is hovered (2026-10-20) */
.sf-bigcal__day { position: relative; }
.sf-calmeet {
    /* Opens DOWN from under the day number and may run past the square over
       the rows below (it is a hover overlay) — never up over the row above. */
    position: absolute; left: 2px; right: 2px; top: 24px; z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; line-height: 1.25;
    padding: 2px; border-radius: 6px; background: rgba(255, 255, 255, 0.72);
}
.sf-calmeet span {
    display: block; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: hsla(var(--h, 210), 70%, 45%, 0.82); color: #fff; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .sf-calmeet { background: rgba(20, 20, 24, 0.72); } }

/* The week bar under the pointer (meeting-times hover): a shade darker, lifted above its neighbours */
.sf-calev.is-focus { background: hsla(var(--h), 70%, 45%, 0.34); box-shadow: 0 0 0 2px hsla(var(--h), 62%, 42%, 0.45); z-index: 4; }
@media (prefers-color-scheme: dark) { .sf-calev.is-focus { background: hsla(var(--h), 70%, 50%, 0.42); } }

/* Sys Admin → System information (2026-10-22): key/value tables, two per row on wide screens */
.sf-sysinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 640px) { .sf-sysinfo { grid-template-columns: 1fr; } }
.sf-table--kv { display: table; width: 100%; }
.sf-table--kv th[scope="row"] { width: 42%; font-weight: 600; white-space: normal; color: var(--sf-muted); }
.sf-table--kv td { white-space: normal; overflow-wrap: anywhere; }