/* examreportportal - one stylesheet, two portals. The accent differs by
   [data-portal]; everything else is shared. */
:root {
    --ink: #1a1d21;
    --muted: #5b6470;
    --line: #dfe3e8;
    --bg: #ffffff;
    --panel: #f7f8fa;
    --accent: #0b5a8a;
    --warn-bg: #fff6e0;
    --danger: #b3261e;
    --warn-ink: #6b4e00;
    --err-bg: #fdeceb;
    --err-ink: #8a1c13;

    /*
     * Page width. 84rem is not arbitrary: the sidebar (15rem), the gap (2rem)
     * and the side padding take about 19rem, leaving ~65rem of content, which
     * is just enough for the OKAT certificate to render at its true 10.667in
     * instead of being scaled down, and gives the wider tables room - year
     * over year has nine columns, the peer group report seven.
     *
     * 84 - 16 - 2 - 2 leaves exactly 64rem (1024px) of content, which is the
     * certificate's width. Retune here; everything else follows.
     */
    --page: 84rem;
    --sidebar: 16rem;
}
body[data-portal="okat"] { --accent: #1f6a4d; }

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 16px; }

form.inline { display: inline; margin: 0; }

.banner { margin: 0; padding: .6rem 16px; text-align: center; font-size: .9rem; }
.banner.preview { background: var(--warn-bg); color: var(--warn-ink); }
.banner.error { background: var(--err-bg); color: var(--err-ink); }
.banner.success { background: #eaf7ee; color: #1d5c2e; }

main.wrap { padding-top: 1.5rem; padding-bottom: 3rem; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.meta, .muted { color: var(--muted); }
.small { font-size: .85rem; }
.empty { color: var(--muted); font-style: italic; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem; margin-bottom: 1.5rem; }
.card.signin { max-width: 24rem; margin: 3rem auto; }

label { display: block; font-weight: 600; font-size: .9rem; margin: 1rem 0 .25rem; }
input[type="password"], select {
    width: 100%; padding: .5rem; font: inherit;
    border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
/*
 * The primary submit button. :not(.iconbtn) matters: an element+attribute
 * selector outranks a class, so without it this quietly repainted every icon
 * button that happened to submit a form - the logout icon came out as a blue
 * block, a size larger, and pushed down a line by the margin. A .linkbtn is a
 * submit that reads as a link (Guess next year's, Discard), so it is left
 * alone too.
 */
button[type="submit"]:not(.iconbtn):not(.sendnow):not(.linkbtn) {
    margin-top: 1rem; padding: .55rem 1.1rem; font: inherit; font-weight: 600;
    color: #fff; background: var(--accent); border: 0; border-radius: 4px; cursor: pointer;
}

.yearpick { margin: 1rem 0; }
.yearpick label { display: inline; margin-right: .5rem; }
.yearpick select { width: auto; }

table.grid { width: 100%; border-collapse: collapse; margin-top: .5rem; background: #fff; }
table.grid caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: .4rem; }
table.grid th, table.grid td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
table.grid thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tbody tr:hover { background: var(--panel); }

ul.todo { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.footer .wrap { display: flex; justify-content: space-between; min-height: 48px; align-items: center; }

@media screen and (max-width: 40rem) {
    table.grid thead { display: none; }
    table.grid tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
    table.grid td { display: flex; justify-content: space-between; border: 0; padding: .2rem .4rem; }
}

/* admin screens */
nav.tabs { display: flex; gap: 1rem; margin: 1rem 0; border-bottom: 1px solid var(--line); }
nav.tabs a { padding: .4rem 0 .5rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
nav.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* A note at the strip's right-hand end - when Settings last changed. */
nav.tabs .navnote { margin-left: auto; align-self: center; font-size: .8rem; color: var(--muted); white-space: nowrap; }
table.grid tr.flagged td { background: var(--warn-bg); }
table.grid code { font-size: .95em; }

/* reports */
.profile-actions { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.profile-actions button { font: inherit; padding: .35rem .8rem; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; }
.summary .stat { display: inline-block; margin-right: 2rem; }
.summary .stat strong { font-size: 1.3rem; display: block; }

article.profile { border: 1px solid var(--line); border-radius: 6px; padding: 1.5rem; margin-bottom: 2rem; background: #fff; }
article.profile .org { text-align: center; letter-spacing: .18em; font-size: .8rem; text-transform: uppercase; margin: 0 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
article.profile .examline { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin: 0 0 .5rem; }
article.profile .examline .dates { text-align: right; color: var(--muted); }
article.profile h2 { text-align: center; font-style: italic; font-size: 1.15rem; margin: .5rem 0 1rem; }
article.profile .who { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
article.profile .who .ids { text-align: right; }
table.profile-grid tbody.total td { font-weight: 700; }
table.profile-grid tr.arealabel th { text-align: left; font-weight: 700; color: var(--ink); padding-top: .9rem; text-transform: none; font-size: .95rem; letter-spacing: 0; }
article.profile .note { font-size: .9rem; border-top: 1px solid var(--line); padding-top: .75rem; margin-top: 1rem; }

@media print {
    .footer, .profile-actions, nav.tabs, .banner { display: none !important; }
    article.profile { page-break-after: always; border: 0; padding: 0; }
    article.profile:last-child { page-break-after: auto; }
    body { font-size: 11pt; }
}

/* peer group report */
table.peer-grid thead th .n { display: block; font-weight: 400; font-size: .75rem; text-transform: none; letter-spacing: 0; }
table.peer-grid tbody.total td { font-weight: 700; }

/* ---- shell: sidebar + content, matching the old left-hand link column ---- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; gap: 2rem; padding-top: 1.5rem; padding-bottom: 3rem; }
.shell.nosidebar { grid-template-columns: 1fr; }
.sidebar .sidehead { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .4rem; }
.sidebar ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.sidebar li { margin: 0; }
.sidebar a { display: block; padding: .35rem .5rem; border-radius: 4px; text-decoration: none; color: var(--ink); font-size: .92rem; }
.sidebar a:hover { background: var(--panel); }
.sidebar a.on { background: var(--accent); color: #fff; font-weight: 600; }


/* chart */
figure.chart { margin: 1rem 0 2rem; }
figure.chart svg { width: 100%; height: auto; color: var(--ink); }
figure.chart .bar { fill: var(--accent); }
/* The candidate's own bar, and the word over it. The fill alone would not
   survive a grey print, so the label carries it. */
figure.chart .bar.mine { fill: var(--danger); }
figure.chart .youlabel { fill: var(--danger); font-family: inherit; }
figure.chart figcaption { color: var(--muted); font-size: .85rem; margin-top: .4rem; }

/* documents */
object.pdf { width: 100%; height: 46rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; }

/* year over year */
table.yoy tbody { border-bottom: 2px solid var(--line); }
table.yoy tr.total td, table.yoy tr.total th { font-weight: 700; }

@media screen and (max-width: 58rem) {
    .shell { grid-template-columns: 1fr; gap: 1rem; }
    .sidebar ul { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
}

/* ---- OKAT certificate: 10.667in x 8.167in landscape, as cfdocument had ---- */
.certificate {
    width: 10.667in; height: 8.167in; max-width: 100%;
    margin: 0 auto 2rem; position: relative;
    background: #fff url('/assets/images/cert-background.jpg') center/100% 100% no-repeat;
    border: 1px solid var(--line);
    font-family: Helvetica, Arial, sans-serif; color: #111;
}
/* The body is centred between the top and bottom insets rather than hung
   from the top one: the block is shorter than the space inside the border, so
   hanging it left the slack at the bottom and the whole certificate sat high.
   Centring splits that slack, and splits it again if a long name wraps. */
.certificate .inner {
    position: absolute; inset: 1.1in 1in 0.9in; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
}
.certificate .org { font-size: 20px; font-weight: 700; margin: 0 0 1.1rem; line-height: 1.3; }
.certificate .certifies, .certificate .completed { font-size: 20px; margin: .7rem 0; }
.certificate .name { font-size: 26px; margin: 1.1rem 0; }
.certificate .exam { font-size: 22px; font-weight: 700; margin: 1rem 0 .3rem; }
.certificate .inurology { font-size: 20px; margin: 0 0 1.6rem; }
/* The plates are 700px wide at source, so there is room to print them larger
   than the 320 they were asked for without losing the edges. */
.certificate .signature img { width: 420px; max-width: 70%; height: auto; }

/* The certificate page size lives in the certificate view, not here: an
   @page rule takes no selector, so one written into this shared stylesheet
   would hand its landscape sheet to every screen in the portal that gets
   printed. */
@media print {
    .noprint { display: none !important; }
    .certificate {
        border: 0; margin: 0; page-break-after: always;
        width: 10.667in; height: 8.167in;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .certificate:last-child { page-break-after: auto; }
    .shell { display: block; padding: 0; }
}

/* mail preview */
.mailsample { border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 1.25rem; margin-top: .5rem; }

/* prose pages (explanation of reports) */
article.prose { max-width: 46rem; }
article.prose h2 { margin-top: 1.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
article.prose li { margin-bottom: .5rem; }
article.prose ol[type="a"] { margin-top: .5rem; }

/* peer group analysis. The band names the table under it, so it is centred
   over it, and the size of the band is a footnote to the figures - which is
   where the printed report had it. */
td.num.up { color: #1d5c2e; }
td.num.down { color: #8a1c13; }
h2.groupname { text-align: center; margin-bottom: .25rem; }
p.groupcount { margin: .5rem 0 0; text-align: center; }

/* ---- sidebar: logo, the program's own details, grouped links, SASP ------- */

.programcard { font-style: normal; font-size: .9rem; line-height: 1.45; margin: 0 0 1.75rem; }
.programcard strong { display: block; }
.programcard span { display: block; color: var(--muted); }

.sidebar .sidehead { font-size: .9rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; margin: 0 0 .35rem; }
.sidebar ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.sidebar li.spaced { margin-top: .75rem; }
.sidebar a { display: block; padding: .18rem 0; text-decoration: none; color: var(--accent); font-size: .95rem; border-radius: 3px; }
.sidebar a:hover { text-decoration: underline; }
.sidebar a.on { font-weight: 700; }

.sidebar .sasp { display: block; margin-top: 2rem; text-decoration: none; }
.sidebar .sasp img { display: block; max-width: 100%; height: auto; margin-bottom: .5rem; }
.sidebar .sasp em { color: var(--accent); font-size: .9rem; line-height: 1.4; display: block; }
.sidebar .sasp:hover em { text-decoration: underline; }

/* ---- year over year: collapsed to one row per candidate ----------------- */
table.yoy th.more, table.yoy td.more { width: 3rem; text-align: center; }
table.yoy tr.summary td { border-bottom: 0; }
table.yoy tr.detail td { border-bottom: 0; color: var(--muted); font-size: .9rem; }
table.yoy tr.detail td.arealabel { padding-left: 1.75rem; }
table.yoy tbody tr.summary + tr.summary td { border-top: 1px solid var(--line); }
table.yoy tr.detail:last-child td { border-bottom: 1px solid var(--line); }
.expander {
    width: 1.5rem; height: 1.5rem; line-height: 1; padding: 0;
    border: 1px solid var(--line); border-radius: 3px; background: #fff;
    color: var(--accent); font: inherit; font-size: 1rem; cursor: pointer;
}
.expander:hover { border-color: var(--accent); }
.toggle-all { font: inherit; padding: .35rem .8rem; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; }

@media print {
    table.yoy tr.detail { display: table-row !important; }
    .toggle-all, .expander { display: none !important; }
    .sidebar { display: none !important; }
}


.iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; padding: 0;
    border: 1px solid var(--line); border-radius: 4px; background: #fff;
    color: var(--accent); cursor: pointer; text-decoration: none;
}
.iconbtn:hover { border-color: var(--accent); background: var(--panel); }
.iconbtn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bigbtn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.1rem; border-radius: 4px;
    background: var(--accent); color: #fff; text-decoration: none; font-weight: 600;
}
.bigbtn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bigbtn:hover { filter: brightness(1.08); }
.downloadall { text-align: center; margin-top: 1.5rem; }
table.grid td.more .iconbtn { width: 1.9rem; height: 1.9rem; }

/* ---- report to program directors ----------------------------------------
   One page of figures: a letterhead, the content areas, and who was counted.
   Spacing is deliberately close - the whole report is meant to be taken in
   at once, and on paper it has a single sheet to do it in. */
article.report { border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem; background: #fff; }
article.report .org { text-align: center; letter-spacing: .18em; font-size: .8rem; text-transform: uppercase; margin: 0 0 .4rem; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
article.report .examline { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; margin: 0; }
article.report .examline .dates { text-align: right; color: var(--muted); }
article.report h2 { text-align: center; font-style: italic; font-size: 1.05rem; margin: .5rem 0 .6rem; }
article.report .who { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
article.report .who .ids { text-align: right; white-space: nowrap; }
article.report tr.subhead td { border-bottom: 1px solid var(--line); color: var(--muted); font-size: .8rem; padding-bottom: .2rem; }
article.report table.grid th, article.report table.grid td { padding: .3rem .6rem; }
article.report table.profile-grid tr.arealabel th { padding-top: .65rem; }
article.report .residents { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
article.report .residents h3 { font-size: .9rem; margin: 0 0 .4rem; }
article.report .residents ul { columns: 3; column-gap: 1.5rem; margin: 0; padding-left: 1.1rem; font-size: .85rem; line-height: 1.5; color: var(--muted); }
article.report .residents li { break-inside: avoid; }

@media print {
    .masthead { display: none !important; }

    /* On paper the surrounding card is just a box drawn round the page. */
    article.report { border: 0; border-radius: 0; padding: 0; }
    article.report header { break-inside: avoid; page-break-inside: avoid; }
    /* A content area keeps its rows: a heading alone at the foot of a sheet
       reads as though the program scored nothing in it. */
    article.report tbody { break-inside: avoid; page-break-inside: avoid; }

    /* The residents are a reference list, not data to compare, so they are
       set as names in columns rather than one to a line - a program with
       thirty of them then still finishes on the sheet the scores started on.
       The section itself may break; forbidding that would push the whole
       list to a second page, which is the thing being avoided. */
    article.report .residents ul {
        columns: 4; column-gap: 1.2rem;
        padding-left: 0; list-style: none;
        font-size: 8.5pt; line-height: 1.35;
    }
}

/* ---- top strip: brand, the examination on screen, the controls ---------- */
.masthead { background: #f7f8fa; border-bottom: 1px solid var(--line); color: var(--ink); }
.masthead .wrap {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 1rem; min-height: 56px;
}
.masthead .brand { font-size: 1.05rem; color: var(--muted); }

/* The examination being viewed, centred by the grid's middle column. */
.masthead .viewing { margin: 0; text-align: center; }

/*
 * The year picker, dressed as the title. appearance:none strips the native
 * box; the caret is a background image so it sits hard against the text
 * rather than at the far edge of a control-sized box.
 */
.masthead .viewing select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    font: inherit; font-weight: 700; color: inherit;
    width: auto;   /* the base `select` rule sets 100% */
    background: transparent no-repeat right center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231a1d21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: .7em auto;
    border: 0; border-radius: 4px;
    padding: .25rem 1.4em .25rem .4rem;
    text-align: center; text-align-last: center;
    cursor: pointer; white-space: nowrap;
}
.masthead .viewing select:hover { background-color: rgba(0, 0, 0, .05); }
.masthead .viewing select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * One line, one baseline. Logout sits inside a form, and a form carries a
 * default bottom margin in the UA stylesheet - that margin, not the nesting,
 * is what pushed the button out of line with Home and Print. Zero it and make
 * the form a flex box so its button centres like the other two.
 */
.masthead .controls { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.masthead .controls form { margin: 0; padding: 0; display: flex; align-items: center; }

@media screen and (max-width: 58rem) {
    .masthead .wrap { grid-template-columns: 1fr auto; }
    .masthead .viewing { grid-column: 1 / -1; order: 3; text-align: left; font-size: .9rem; }
}

/* ---- document panes: title left, "open in a new tab" right, tight to top - */
.docheader {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin: 0 0 .75rem;
}
.docheader h1 { margin: 0; }
.shell main > .docheader:first-child { margin-top: 0; }

/* ---- acting as a program -------------------------------------------------
   Deliberately the loudest thing on the page: an administrator who forgets
   they are inside somebody else's session is the whole risk here. */
.banner.acting {
    background: #fde9d2; color: #7a3e00; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; flex-wrap: wrap;
}
.banner.acting form { margin: 0; }
.banner.acting button {
    /* margin:0 matters: the generic button[type=submit] rule sets a 1rem top
       margin for form buttons, which pushed this one off the band's centre
       line even though the band itself centres its children. */
    margin: 0;
    font: inherit; font-weight: 600; color: #7a3e00; cursor: pointer;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(122, 62, 0, .35); border-radius: 4px;
    padding: .2rem .7rem;
}
.banner.acting button:hover { background: #fff; }
.banner form { margin: 0; }
table.grid td.more form { margin: 0; display: flex; justify-content: center; }

/* ---- peer group report: tighter, it is a wide numeric grid --------------- */
h1 .qualifier { font-weight: 400; color: var(--muted); font-size: .8em; }
table.peer-grid { font-size: .9rem; }
table.peer-grid th, table.peer-grid td { padding: .22rem .45rem; }
table.peer-grid thead th { font-size: .72rem; line-height: 1.25; }
table.peer-grid thead th .n { font-size: .68rem; }
table.peer-grid tr.arealabel th { padding-top: .6rem; font-size: .88rem; }
table.peer-grid tbody.total td { border-top: 1px solid var(--line); }
/* The questions sit under their content-area heading, indented from it: Patient
   Type and Problem Area are headings, and the rows beneath belong to them. The
   printed report set them that way, and the total line - which has no heading -
   stays at the margin where it reads as the summary of all of them. */
table.peer-grid tbody.labelled tr:not(.arealabel) td:first-child { padding-left: 1.75rem; }

/* ---- embedded video: 16:9, scales with the column ----------------------- */
.videoframe { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.videoframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media print { .videoframe { display: none; } }

/* ---- distribution curve -------------------------------------------------
   Chart and its figures side by side, 4 parts to 2 - the chart earns the
   room, the table is a narrow numeric column beside it rather than a second
   screenful underneath. */
.curvesplit { display: grid; grid-template-columns: 4fr 2fr; gap: 1.5rem; align-items: start; }
.curvesplit figure.chart { margin: 0; }
.curvesplit table.grid { margin-top: 0; }

/* The control sits on the title line. */
.inlinepick { display: flex; align-items: center; gap: .5rem; }
.inlinepick label { margin: 0; font-weight: 400; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.inlinepick select { width: auto; padding: .25rem .5rem; font-size: .9rem; }

/* A narrow table beside a chart wants less air than a full-width one. */
table.grid.tight { font-size: .85rem; }
table.grid.tight th, table.grid.tight td { padding: .18rem .4rem; }
table.grid.tight caption { padding-bottom: .25rem; }

@media screen and (max-width: 58rem) { .curvesplit { grid-template-columns: 1fr; } }

/* ---- compact tables -----------------------------------------------------
   The density the peer group report uses, shared by the other report grids:
   these are read as blocks of numbers, not as prose. */
table.grid.compact { font-size: .9rem; }
table.grid.compact th, table.grid.compact td { padding: .22rem .45rem; }
table.grid.compact thead th { font-size: .72rem; line-height: 1.25; }
table.grid.compact caption { padding-bottom: .3rem; }
table.grid.compact tr.arealabel th { padding-top: .55rem; font-size: .88rem; }

/* Peer group headings stack: level, qualifier, count. */
table.peer-grid { table-layout: fixed; }
table.peer-grid thead th .lvl { display: block; }
table.peer-grid thead th .qual { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
table.peer-grid thead th { vertical-align: bottom; }
table.peer-grid td, table.peer-grid th { overflow-wrap: anywhere; }

/* ---- distribution: the program's own residents beside the breakpoints ---
   4 parts to 2, the same ratio as the chart and its figures above, so the
   column edges line up down the page. Residents take the wide side: names
   need the room, three numeric columns do not. */
.lookupsplit { display: grid; grid-template-columns: 4fr 2fr; gap: 1.5rem; align-items: start; margin-top: 1.5rem; }
.lookupsplit h2 { font-size: .95rem; margin: 0 0 .4rem; }
.lookupsplit table.grid { margin-top: 0; }
table.grid tr.atlevel td { background: #eaf7ee; font-weight: 600; }
@media screen and (max-width: 58rem) { .lookupsplit { grid-template-columns: 1fr; } }

/* A rank that overshoots its group: the real value, visibly not the round one. */
table.grid td.approx { color: var(--muted); }
.note.small { font-size: .8rem; margin-top: .4rem; }

/* ---- admin: settings, documents, evaluation -----------------------------
   Plain forms. These screens are used a few times a year by one or two
   people, so they are built to be read and checked rather than to be
   quick - the label, the value, and under it what the value does. */
form.settings .card { margin-bottom: 1.25rem; }
.field { margin-bottom: 1.1rem; max-width: 42rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 0; }

/* The label and, where a link carries a year, the control that advances it -
   pushed to the right edge of the field it belongs to so it reads as part of
   that field rather than as the next thing down the page. */
.fieldhead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: .25rem;
}
.linkbtn {
    padding: 0; border: 0; background: none; font: inherit; font-size: .82rem;
    color: var(--accent); text-decoration: underline; cursor: pointer;
}
.linkbtn:hover { text-decoration: none; }

/* Whether a value belongs to this year, every year, or is simply not set.
   An empty box means two different things and the portal behaves
   differently for each, so the field says which it is. */
.scopetag {
    display: inline-block; margin-right: .4rem; padding: .05rem .4rem;
    border-radius: 3px; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
    background: var(--panel); color: var(--muted);
}
.scopetag.global { background: #eef3f8; color: var(--accent); }
.scopetag.unset { background: var(--warn-bg); color: var(--warn-ink); }
h1 > .scopetag { vertical-align: middle; margin-left: .5rem; font-size: .7rem; }
.card.liveyear h2 { margin-top: 0; }
.field input[type="text"], .field input[type="url"], .field input[type="email"],
.field input[type="number"], .field select, .field textarea {
    width: 100%; padding: .45rem .6rem; font: inherit;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
.field .hint { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }

/* Settings, compacted: each label beside its box rather than above it, and
   the fields of a card in two columns, so the whole year fits on a screen or
   two instead of a long scroll. One column again where there is no room. */
form.settings .card {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem; align-items: start;
}
form.settings .card > h2 { grid-column: 1 / -1; }
form.settings .field {
    display: grid; grid-template-columns: 14.5rem minmax(0, 1fr);
    column-gap: .75rem; align-items: center; max-width: none; margin-bottom: 1.45rem;
}
/* "Guess next year's" sits over the box it fills in, at its right edge, in
   the space between fields - taken out of the flow, so the label and its box
   stay on one line like every other field. */
form.settings .field > label { white-space: nowrap; }
form.settings .fieldbox { position: relative; }
form.settings .guess { position: absolute; right: 0; bottom: 100%; margin: 0 0 .1rem; font-size: .78rem; line-height: 1.1; }

/* The (i) at the end of a box, and what it says on hover or focus: the
   scope - this year, every year, not set - and what the value is for. */
.inputwrap { position: relative; }
.inputwrap > input, .inputwrap > select { padding-right: 2.2rem !important; }
/* A select has its own arrow at the right; the (i) goes just before it. */
.inputwrap > select { padding-right: 3.4rem !important; }
.inputwrap > select ~ .info { right: 1.9rem; }
.inputwrap .info {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    border: 1px solid var(--muted); color: var(--muted);
    font: italic 600 .72rem/1.05rem Georgia, serif; text-align: center; cursor: help;
}
.inputwrap .info.unset { border-color: var(--warn-ink); color: var(--warn-ink); }
.inputwrap .info:hover, .inputwrap .info:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.inputwrap .tip {
    display: none; position: absolute; right: 0; top: calc(100% + .35rem); z-index: 5;
    width: min(22rem, 90vw); padding: .55rem .7rem; font-size: .82rem; line-height: 1.4;
    color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.inputwrap .tip .scopetag { display: inline-block; margin-bottom: .25rem; }
.inputwrap .info:hover + .tip, .inputwrap .info:focus + .tip { display: block; }
@media screen and (max-width: 58rem) {
    form.settings .card { grid-template-columns: 1fr; }
}
@media screen and (max-width: 40rem) {
    form.settings .field { grid-template-columns: 1fr; }
}

/* An evaluation question's wording, corrected in place: the heading is the
   summary of a details element, the pencil shows it can be opened, and the
   box under it is the edit. */
details.editq > summary { list-style: none; cursor: pointer; }
details.editq > summary::-webkit-details-marker { display: none; }
details.editq .pencil { margin-left: .4rem; color: var(--muted); font-weight: 400; }
details.editq > summary:hover .pencil, details.editq[open] .pencil { color: var(--accent); }
details.editq form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin: 0 0 .8rem; }
details.editq textarea {
    flex: 1 1 100%; padding: .45rem .6rem; font: inherit;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
details.editq .hint { font-size: .82rem; color: var(--muted); align-self: center; }

form.inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
form.inline label { font-size: .9rem; color: var(--muted); }
form.inline input[type="number"], form.inline select {
    padding: .35rem .5rem; font: inherit;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
form.inline button[type="submit"]:not(.iconbtn):not(.bigbtn) { margin-top: 0; }
.yearpick { margin-bottom: 1rem; }
table.documents td { vertical-align: top; }

/* The share of each answer, drawn beside the figure rather than instead of
   it: the number is the result, the bar only makes the shape obvious. */
table.tally td.barcell { width: 40%; padding-right: 0; }
table.tally .bar {
    display: block; height: .55rem; min-width: 1px;
    background: var(--accent); border-radius: 2px;
}
.card.question h2 { font-size: .95rem; margin: 0 0 .6rem; }
ul.replies { margin: 0; padding-left: 1.1rem; }
ul.replies li { margin-bottom: .5rem; }

/* ---- the evaluation form ------------------------------------------------
   The prompt in bold, as the SurveyMonkey version has it, but the answers
   along a row instead of down a column. The scale is four short words - No,
   Somewhat, Yes, Unknown - so a stack spent four lines each on what fits in
   one, and the whole four-question form ran well past the fold.

   Each answer stays a <label> around its radio, so the pill is the target
   and not just the button; they are only narrower, not smaller. */
form.survey { max-width: 46rem; }
form.survey fieldset.question { border: 0; margin: 0 0 1.1rem; padding: 0; }
form.survey legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: .45rem; }
form.survey .required { color: var(--danger, #b3261e); font-weight: 700; }

form.survey .choices { display: flex; flex-wrap: wrap; gap: .4rem; }
form.survey label.choice {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .75rem; cursor: pointer;
    border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
form.survey label.choice:hover { border-color: var(--accent); background: var(--panel); }
form.survey label.choice input { width: 1rem; height: 1rem; margin: 0; }
/* The chosen answer has to read as chosen from across the row, not only
   from the radio itself. */
form.survey label.choice input:checked + span { font-weight: 700; color: var(--accent); }
form.survey label.choice:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

form.survey textarea {
    width: 100%; padding: .5rem .6rem; font: inherit;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
form.survey .downloadall { margin-top: 1.25rem; text-align: left; }

/* Long answers cannot sit side by side; stack them and take the room. */
@media screen and (max-width: 34rem) {
    form.survey .choices { flex-direction: column; }
    form.survey label.choice { width: 100%; }
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- dense tables -------------------------------------------------------
   The password list is nearly 300 rows of six columns and is read by
   scanning, not by dwelling. Tighter rows and smaller type put most of a
   year on one screen; the access code stays at full size because it is the
   thing being read back over the telephone. */
table.grid.dense th, table.grid.dense td { padding: .22rem .45rem; font-size: .82rem; }
table.grid.dense thead th { font-size: .7rem; }
table.grid.dense thead th .sub {
    display: block; font-weight: 400; font-size: .68rem;
    text-transform: none; letter-spacing: 0;
}
table.grid.dense td code { font-size: .88rem; font-weight: 600; }
/* A date read down a column of nearly three hundred rows: right aligned
   and tabular, so the figures line up and a gap is a gap rather than a
   ragged edge. */
table.grid.dense th.lastlogin, table.grid.dense td.lastlogin { text-align: right; }
table.grid.dense td.lastlogin { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid.dense th.lastlogin .sub { text-align: right; }
table.grid.dense td .sub { color: var(--muted); font-size: .72rem; }
table.grid.dense td.more .iconbtn { width: 1.6rem; height: 1.6rem; }
table.grid.dense td.more .iconbtn svg { width: .9rem; height: .9rem; }
table.grid tr.inactive td { opacity: .55; }

/* ---- sortable column headings -------------------------------------------
   A heading is the control for its column: the whole cell is clickable and
   focusable, and the glyph says which way the column went. The colour comes
   from the portal accent, so the active column reads as ISE blue or OKAT
   green. Headings are hidden altogether on a narrow screen, where the table
   reflows into stacked rows and there are no columns left to sort. */
table.grid thead th[data-sort] { cursor: pointer; user-select: none; }
table.grid thead th[data-sort]:hover { color: var(--ink); }
table.grid thead th[data-sort]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.grid thead th .sort-indicator { font-size: .9em; opacity: .4; }
table.grid thead th[aria-sort="ascending"],
table.grid thead th[aria-sort="descending"] { color: var(--accent); }
table.grid thead th[aria-sort="ascending"] .sort-indicator,
table.grid thead th[aria-sort="descending"] .sort-indicator { opacity: 1; }

/* ---- the password list's two populations ---------------------------------
   OKAT publishes to its fellowship programs and to the candidates who
   registered themselves, so the list is two tabs of one screen the way
   OKAT_who_checked.cfm had it. A second-level strip - smaller than the screen
   tabs above it - and each tab carries the size of its population, which is
   the reason to switch to the other one. */
nav.tabs.sub { margin: .25rem 0 .75rem; gap: 1.25rem; font-size: .92rem; }
nav.tabs.sub .count {
    display: inline-block; margin-left: .3rem; padding: 0 .35rem;
    border-radius: 999px; background: var(--panel); color: var(--muted);
    font-size: .75rem; font-variant-numeric: tabular-nums;
}
nav.tabs.sub a.on .count { background: var(--accent); color: #fff; }

/* The announcement is launched from the list it goes to, because the list IS
   the cohort. These open the preview; nothing is sent from this screen. */
.cohort { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.cohort p { margin: 0 0 0 auto; text-align: right; }
.sendbtn.on { background: var(--accent); color: #fff; }
/* The announcement's own line: who it goes to on the left, which mailing
   on the right. The tab strip sheds its underline inside the row - it is
   one of two controls on a line, not a strip across the page. */
.cohort.mailpick { margin-bottom: .75rem; }
.cohort.mailpick nav.tabs.sub { margin: 0; border-bottom: 0; }
.cohort.mailpick .picked { margin-left: auto; display: flex; gap: .5rem; }
/* The send, beside the two that only change the view. The same pill at the
   same size, so the three read as one line, but filled and red: the other two
   are navigation, this one puts mail in front of people.

   It is in the :not() list on the generic submit-button rule above for the
   reason that rule's own comment gives: button[type="submit"] outranks a
   class, so without the exclusion this came out as a green accent block, a
   size larger, square cornered and pushed down a line - the shape the rule
   imposes, not the one written here. */
.cohort.mailpick .picked form { margin: 0; display: flex; align-items: center; gap: .4rem; }
.sendnow {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .75rem; border: 1px solid var(--danger); border-radius: 999px;
    background: var(--danger); color: #fff; font: inherit; font-size: .82rem;
    font-weight: 600; line-height: 1.5; cursor: pointer; white-space: nowrap;
}
.sendnow:hover { filter: brightness(1.08); }
.sendnow svg {
    width: .95em; height: .95em; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* What the transport is, when it is not the real one: a caution beside the
   button rather than a banner across the page, carrying the description as
   its tooltip. No mark at all when the messages really are going out - the
   word on the button is the whole warning then. */
.warntri { display: inline-flex; align-items: center; cursor: help; }
.warntri svg {
    width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--warn-ink);
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.warntri svg .tri { fill: #f2c200; }
.sendbtn {
    padding: .25rem .75rem; border: 1px solid var(--accent); border-radius: 999px;
    color: var(--accent); text-decoration: none; font-size: .82rem; font-weight: 600;
}
.sendbtn:hover { background: var(--accent); color: #fff; }

/* Which staff role is signed in, in the masthead beside the icons. */
.masthead .controls .scopetag { margin-right: .25rem; }

/* Adding a staff account: one row under the list, not a column of fields.
   The two text fields take the slack, the password and the role are as wide
   as what goes in them, and on a narrow screen the row wraps rather than
   scrolling sideways (form.inline already wraps). */
form.addrow { margin-top: .75rem; gap: .4rem; }
form.addrow input[type="text"], form.addrow input[type="email"] { flex: 1 1 10rem; min-width: 8rem; }
form.addrow input[type="password"] { flex: 0 1 11rem; }
form.addrow select { flex: 0 0 auto; width: auto; }
form.addrow input, form.addrow select {
    padding: .3rem .45rem; font: inherit; font-size: .9rem;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
form.addrow button { white-space: nowrap; }

/* The per-row editor on the staff accounts screen: closed until wanted, so
   the list stays a list. */
.useredit { display: grid; gap: .5rem; margin: .5rem 0; min-width: 18rem; }
.useredit label { display: block; font-size: .8rem; color: var(--muted); }
.useredit input, .useredit select {
    width: 100%; padding: .3rem .45rem; font: inherit; font-size: .85rem;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
.useredit label.check { display: flex; align-items: center; gap: .4rem; }
.useredit label.check input { width: auto; }
details > summary { cursor: pointer; font-size: .82rem; color: var(--accent); }
.linkbtn.danger { color: var(--danger); }