/* ========================================
   The points history in the Classlings look (js/classlings-history.js)
   For classes with Classlings on, body.classlings-app: the reviewed design (design-directions,
   directions/mix/history.html). On the left what matters at a glance, on the right every point,
   newest first; the bar picks the time and who. Points taken away keep who they were for behind their
   own "Tap to show". Every rule here is scoped to body.classlings-app, so classes without
   Classlings keep the HP History pop-up. Plain lines are in Atkinson Hyperlegible, at the design's sizes.
   ======================================== */

body.classlings-app #historyScreen:not(.hidden) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px var(--cla-gutter) 32px;
    overflow: hidden;
}

body.classlings-app .cla-hist {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    color: var(--cla-ink);
}

body.classlings-app .cla-hist-body {
    display: grid;
    flex: 1;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
}

/* ---------------------------------------------------------------- the summary */

body.classlings-app .cla-hist-sum {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 16px;
    min-height: 0;
    padding: 16px 24px;
    overflow-y: auto;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-l);
}

/* "Today in <the class's name>": a name with a word wider than the card breaks rather than run out of it. */
body.classlings-app .cla-hist-sum h2 {
    margin: 0;
    font: 700 28px / 1.1 var(--cla-display);
    overflow-wrap: anywhere;
}

body.classlings-app .cla-hist-sum h3 {
    margin: 0 0 8px;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .cla-hist-tots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.classlings-app .cla-hist-tot {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 8px 16px 12px;
    border: 2px solid;
    border-radius: var(--cla-r-m);
}

body.classlings-app .cla-hist-tot.is-plus {
    background: var(--cla-lime-tint);
    border-color: var(--cla-lime-deep);
}

body.classlings-app .cla-hist-tot.is-minus {
    background: var(--pm-red-tint);
    border-color: var(--pm-red-deep);
}

body.classlings-app .cla-hist-tot b {
    font: 700 48px / 1.05 var(--cla-display);
    font-variant-numeric: tabular-nums;
}

body.classlings-app .cla-hist-tot span {
    font: 600 18px / 1.2 var(--cla-display);
}

/* Given most: each reason's icon and name, a thin bar in its colour, and how many times. */
body.classlings-app .cla-hist-bars {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.classlings-app .cla-hist-bars li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto 10px;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
}

body.classlings-app .cla-hist-bars .cla-hist-ri {
    grid-row: 1 / span 2;
}

body.classlings-app .cla-hist-nm {
    overflow: hidden;
    font: 600 18px / 1.2 var(--cla-display);
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.classlings-app .cla-hist-n {
    grid-column: 3;
    grid-row: 1 / span 2;
    font: 400 18px / 1 var(--cla-display);
    white-space: nowrap;
}

body.classlings-app .cla-hist-n b {
    font-size: 24px;
    font-weight: 700;
}

body.classlings-app .cla-hist-bar {
    grid-column: 2;
    width: calc(var(--n) / var(--max) * 100%);
    height: 10px;
    background: var(--cla-lime);
    border-radius: 0 4px 4px 0;
}

body.classlings-app .cla-hist-bars li.is-work .cla-hist-bar {
    background: var(--pm-red);
}

/* No points yet: a nudge for the teacher, not a list of names to read out. */
body.classlings-app .cla-hist-none ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.classlings-app .cla-hist-none .cla-hist-who img {
    width: 36px;
    height: 36px;
}

body.classlings-app .cla-hist-held {
    display: flex;
    align-items: center;
    gap: 16px;
}

body.classlings-app .cla-hist-held p {
    margin: 0;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .cla-hist-held b {
    font-size: 28px;
}

body.classlings-app .cla-hist-quiet {
    margin: 0;
    font: 400 18px / 1.35 var(--cla-ui);
    color: var(--cla-ink-2);
}

body.classlings-app .cla-hist-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: 400 17px / 1.35 var(--cla-ui);
    color: var(--cla-ink-2);
}

/* One pupil: their Classling as on their card, their points now, today and this week. */
body.classlings-app .cla-hist-me {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

body.classlings-app .cla-hist-me .cla-hist-face {
    width: 96px;
    height: 96px;
    border: 2px solid var(--cla-ink);
    border-radius: 14px;
}

body.classlings-app .cla-hist-sum.is-pupil .cla-hist-me h2 {
    font: 700 36px / 1.05 var(--cla-display);
    overflow-wrap: anywhere;
}

body.classlings-app .cla-hist-me p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font: 600 20px / 1.2 var(--cla-display);
}

body.classlings-app .cla-hist-heart {
    width: 18px;
    height: auto;
    color: #ef4444;
}

body.classlings-app .cla-hist-tot2 {
    display: grid;
    gap: 6px;
    padding: 8px 16px 12px;
    background: var(--cla-wash);
    border-radius: var(--cla-r-m);
}

body.classlings-app.cla-sky .cla-hist-tot2 {
    background: var(--cla-page);
    box-shadow: inset 0 0 0 var(--cla-edge) var(--cla-line-soft);
}

body.classlings-app .cla-hist-tot2 > span {
    font: 600 18px / 1.2 var(--cla-display);
}

body.classlings-app .cla-hist-tot2 p {
    display: flex;
    gap: 8px;
    margin: 0;
}

body.classlings-app .cla-hist-tot2 .cla-hist-chg {
    min-width: 58px;
    height: 42px;
    font-size: 28px;
}

/* ---------------------------------------------------------------- the list */

body.classlings-app .cla-hist-list {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    padding: 16px 24px 0;
    overflow: hidden;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-wash-2);
    border-radius: var(--cla-r-l);
}

body.classlings-app .cla-hist-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding-bottom: 8px;
}

body.classlings-app .cla-hist-top h2 {
    margin: 0;
    font: 700 28px / 1.1 var(--cla-display);
}

body.classlings-app .cla-hist-top p {
    margin: 0;
    font: 500 20px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .cla-hist-weeks {
    display: flex;
    gap: 12px;
    margin-left: auto;
    align-self: center;
}

/* The list scrolls under a soft fade at its foot. */
body.classlings-app .cla-hist-scroll {
    position: relative;
    min-height: 0;
    padding-bottom: 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
}

body.classlings-app .cla-hist-scroll:focus-visible {
    outline: 4px solid var(--cla-ink);
    outline-offset: -4px;
}

body.classlings-app .cla-hist-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
    font: 500 20px / 1.2 var(--cla-display);
}

body.classlings-app .cla-hist-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0 12px 4px;
    font: 600 18px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
    text-align: left;
    background: var(--cla-page);
}

body.classlings-app .cla-hist-table td {
    height: 50px;
    padding: 0 12px;
    white-space: nowrap;
}

/* The reason may wrap, with when it was undone under it, when the list is narrow. */
body.classlings-app .cla-hist-table td:last-child {
    white-space: normal;
}

body.classlings-app .cla-hist-table tbody tr.cla-hist-row:nth-child(odd of .cla-hist-row) td {
    background: var(--cla-wash);
}

body.classlings-app .cla-hist-table tbody td:first-child {
    border-radius: var(--cla-r-s) 0 0 var(--cla-r-s);
}

body.classlings-app .cla-hist-table tbody td:last-child {
    border-radius: 0 var(--cla-r-s) var(--cla-r-s) 0;
}

body.classlings-app .cla-hist-t {
    width: 84px;
    font-variant-numeric: tabular-nums;
}

body.classlings-app .cla-hist-c {
    width: 112px;
}

body.classlings-app .cla-hist-table.is-pupil .cla-hist-c {
    width: 96px;
}

body.classlings-app .cla-hist-who {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    font: 600 20px / 1.2 var(--cla-display);
    color: var(--cla-ink);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

body.classlings-app button.cla-hist-who:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.classlings-app .cla-hist-who.is-gone,
body.classlings-app .cla-hist-who.is-table {
    cursor: default;
}

body.classlings-app .cla-hist-who.is-gone {
    font-weight: 500;
    color: var(--cla-ink-2);
}

body.classlings-app .cla-hist-face {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

/* The points, as a sign and a colour: plus green, minus red; an undone one crossed out. */
body.classlings-app .cla-hist-chg {
    display: inline-grid;
    place-items: center;
    min-width: 48px;
    height: 32px;
    padding: 0 8px;
    font: 700 20px / 1 var(--cla-display);
    font-variant-numeric: tabular-nums;
    color: var(--cla-ink);
    border: 2px solid;
    border-radius: var(--cla-r-s);
}

body.classlings-app .cla-hist-chg.is-plus {
    background: var(--cla-lime);
    border-color: var(--cla-lime-deep);
}

body.classlings-app .cla-hist-chg.is-minus {
    background: var(--pm-red);
    border-color: var(--pm-red-deep);
}

body.classlings-app .cla-hist-chg.is-zero {
    color: var(--cla-ink-2);
    background: var(--cla-page);
    border-color: var(--cla-wash-2);
}

body.classlings-app .cla-hist-chg.is-undone {
    color: var(--cla-ink-2);
    text-decoration: line-through;
    background: var(--cla-page);
    border-color: var(--cla-wash-2);
}

body.classlings-app .cla-hist-each {
    margin-left: 6px;
    font: 500 18px / 1 var(--cla-display);
}

body.classlings-app .cla-hist-why {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

body.classlings-app .cla-hist-why.is-quick {
    color: var(--cla-ink-2);
}

body.classlings-app .cla-hist-ri {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
}

body.classlings-app .cla-hist-ri svg {
    display: block;
    width: 32px;
    height: 32px;
}

body.classlings-app .cla-hist-ri.is-plain::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    margin: 10px;
    background: var(--cla-ink-2);
    border-radius: 50%;
}

/* A table's point: two Classlings at a table, in pixels, as Settings' Tables and the bar's (3 October). */
body.classlings-app .cla-hist-ri.is-table {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%232d3436' d='M2 1h1v1h-1zM6 1h1v1h-1zM9 1h1v1h-1zM13 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM7 2h2v1h-2zM10 2h1v1h-1zM12 2h1v1h-1zM14 2h1v1h-1zM1 3h1v1h-1zM4 3h1v1h-1zM7 3h2v1h-2zM11 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM7 4h2v1h-2zM14 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h2v1h-2zM10 5h1v1h-1zM12 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM7 6h2v1h-2zM14 6h1v1h-1zM1 7h14v1h-14zM0 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM15 9h1v1h-1zM1 10h1v1h-1zM4 10h8v1h-8zM14 10h1v1h-1zM1 11h1v1h-1zM4 11h1v1h-1zM11 11h1v1h-1zM14 11h1v1h-1zM1 12h1v1h-1zM4 12h1v1h-1zM11 12h1v1h-1zM14 12h1v1h-1zM2 13h2v1h-2zM12 13h2v1h-2z'/%3E%3Cpath fill='%23a855f7' d='M2 2h1v1h-1zM6 2h1v1h-1zM2 3h2v1h-2zM5 3h2v1h-2zM2 4h5v1h-5zM2 5h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM2 6h5v1h-5z'/%3E%3Cpath fill='%23f97316' d='M9 2h1v1h-1zM13 2h1v1h-1zM9 3h2v1h-2zM12 3h2v1h-2zM9 4h5v1h-5zM9 5h1v1h-1zM11 5h1v1h-1zM13 5h1v1h-1zM9 6h5v1h-5z'/%3E%3Cpath fill='%23c98b52' d='M1 8h14v1h-14z'/%3E%3Cpath fill='%238a5a2b' d='M1 9h14v1h-14zM2 10h2v1h-2zM12 10h2v1h-2zM2 11h2v1h-2zM12 11h2v1h-2zM2 12h2v1h-2zM12 12h2v1h-2z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
}

body.classlings-app .cla-hist-q {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
}

body.classlings-app .cla-hist-q .cla-ic {
    width: 22px;
    height: 22px;
}

/* Undone, Back to the start and Quick add wear pixel pictures: 12 art pixels at 24px. */
body.classlings-app .cla-hist-q .cla-ic.is-px {
    width: 24px;
    height: 24px;
}

/* Week before and Week after: the pixel arrows, 8 art pixels at 16px, a pair. */
body.classlings-app svg.cla-ic.is-px.is-small {
    width: 16px !important;
    height: 16px !important;
}

/* An undone point keeps its place, crossed out, with when it was undone. */
body.classlings-app .cla-hist-undone {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    font: 600 16px / 1.2 var(--cla-display);
    background: var(--cla-page);
    border: 2px solid var(--cla-ink-2);
    border-radius: 8px;
}

body.classlings-app .cla-hist-row:is(.is-undone, .is-undo) :is(.cla-hist-who, .cla-hist-why) {
    color: var(--cla-ink-2);
}

/* A table's point: one row for the table, with some of its Classlings. */
body.classlings-app .cla-hist-faces {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}

body.classlings-app .cla-hist-faces span {
    margin-left: 4px;
    font: 600 18px / 1 var(--cla-display);
    color: var(--cla-ink-2);
}

/* A new day: a quiet line across the row. */
body.classlings-app .cla-hist-row.is-newday .cla-hist-why {
    color: var(--cla-ink-2);
}

/* One pupil's week, or a week of everyone's: a heading for each day, with that day's points. */
body.classlings-app .cla-hist-day th {
    padding: 12px 12px 4px;
    font: 700 20px / 1.2 var(--cla-display);
    text-align: left;
}

body.classlings-app .cla-hist-day th span {
    margin-left: 12px;
    font: 500 18px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .cla-hist-table tbody .cla-hist-day:first-child th {
    padding-top: 0;
}

body.classlings-app .cla-hist-empty {
    margin: 24px 12px;
    font: 500 20px / 1.4 var(--cla-display);
    color: var(--cla-ink-2);
}

/* ---------------------------------------------------------------- kept private on the board */

body.classlings-app .cla-hist-tap {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ctl-small-h);
    margin: 0;
    padding: 0 16px 0 12px;
    font: var(--ctl-small-font);
    color: var(--cla-ink);
    white-space: nowrap;
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--ctl-wash-2);
    border-radius: var(--ctl-r);
    cursor: pointer;
}

body.classlings-app .cla-hist-tap:is(:hover, :active) {
    background: var(--cla-wash);
}

body.classlings-app .cla-hist-who.is-table .cla-hist-tap {
    margin-left: 8px;
}

/* ---------------------------------------------------------------- the bar */

body.classlings-app .cla-hist-seg {
    display: flex;
    flex: none;
    gap: 4px;
    padding: var(--cla-switch-pad);
    background: var(--cla-wash);
    border-radius: calc(var(--cla-r-m) + var(--cla-switch-pad));
}

body.classlings-app .cla-hist-tool {
    appearance: none;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--cla-tap);
    margin: 0;
    padding: 0 12px;
    font: 600 var(--cla-word) / 1 var(--cla-display);
    color: var(--cla-ink);
    white-space: nowrap;
    background: transparent;
    border: var(--cla-edge) solid transparent;
    border-radius: var(--cla-r-m);
    cursor: pointer;
}

body.classlings-app .cla-hist-tool .cla-ic {
    width: 24px;
    height: 24px;
}

body.classlings-app .cla-hist-seg .cla-hist-tool {
    min-height: calc(var(--cla-tap) - var(--cla-switch-pad) * 2);
}

body.classlings-app .cla-hist-tool:hover {
    background: var(--cla-wash);
}

body.classlings-app .cla-hist-seg .cla-hist-tool:hover {
    background: var(--cla-page);
}

body.classlings-app .cla-hist-tool.is-on {
    background: var(--cla-grape);
    border-color: var(--cla-grape-deep);
}

/* While a pop-up is open, its button is outlined, so the time in use stays the only filled choice. */
body.classlings-app .cla-hist-tool.is-open {
    background: var(--cla-page);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .cla-hist-who-on {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: calc(var(--cla-tap) - 8px);
    padding: 0 4px 0 12px;
    font: 600 var(--cla-word) / 1 var(--cla-display);
    white-space: nowrap;
    background: var(--cla-grape-tint);
    border: 2px solid var(--cla-grape-deep);
    border-radius: var(--cla-r-m);
}

body.classlings-app .cla-hist-who-on .cla-hist-tool {
    min-height: 44px;
    padding: 0 10px;
}

/* ---------------------------------------------------------------- pick a pupil, pick a day: above the bar */

body.classlings-app .cla-hist-pop {
    position: fixed;
    z-index: 120;
    bottom: calc(var(--cla-dock) + 12px);
    /* Room up to near the top of the page: "Pick a day" shows the whole month, last week too (walk-through of 14 October). */
    max-height: calc(100dvh - var(--cla-dock) - 40px);
    overflow-y: auto;
    padding: 12px 16px 16px;
    background: var(--cla-page);
    border: var(--cla-edge) solid var(--cla-ink);
    border-radius: var(--cla-r-l);
    box-shadow: var(--cla-float);
}

body.classlings-app .cla-hist-pop > p {
    margin: 0 0 12px;
    font: 700 20px / 1.2 var(--cla-display);
}

body.classlings-app .cla-hist-pop.is-kids {
    left: max(var(--cla-gutter), calc(50% - 533px));
    right: max(var(--cla-gutter), calc(50% - 533px));
}

body.classlings-app .cla-hist-kids {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.classlings-app .cla-hist-kid {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 2px 8px 2px 2px;
    font: 600 16px / 1.15 var(--cla-display);
    color: var(--cla-ink);
    text-align: left;
    background: var(--cla-wash);
    border: 2px solid transparent;
    border-radius: var(--cla-r-s);
    cursor: pointer;
}

body.classlings-app .cla-hist-kid:hover {
    border-color: var(--cla-grape);
}

body.classlings-app .cla-hist-kid .cla-hist-face {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

body.classlings-app .cla-hist-kid.is-on {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
}

body.classlings-app .cla-hist-pop.is-day {
    left: max(var(--cla-gutter), calc(50% - 283px));
    width: min(500px, calc(100vw - var(--cla-gutter) * 2));
}

body.classlings-app .cla-hist-cal-top {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
}

body.classlings-app .cla-hist-cal-top p {
    margin: 0;
    font: 700 20px / 1.2 var(--cla-display);
    text-align: center;
}

/* The month before and after: the standard's small squares (48 px on a 4 px ink base), the kit's chevrons. */
body.classlings-app .cla-hist-nav {
    appearance: none;
    display: grid;
    place-items: center;
    width: var(--ctl-small-h);
    height: var(--ctl-small-h);
    margin: 0 0 var(--ctl-small-lift);
    padding: 0;
    color: var(--cla-ink);
    background: var(--cla-page);
    border: var(--ctl-edge) solid var(--cla-ink);
    border-radius: var(--ctl-small-r);
    box-shadow: 0 var(--ctl-small-lift) 0 var(--cla-ink);
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}

body.classlings-app .cla-hist-nav:active:not(:disabled) {
    transform: translateY(var(--ctl-small-lift));
    box-shadow: 0 0 0 var(--cla-ink);
    transition-duration: var(--ctl-press);
}

body.classlings-app .cla-hist-nav:disabled {
    cursor: default;
    opacity: 0.45;
}

body.classlings-app .cla-hist-nav .cla-ic.is-left {
    transform: scaleX(-1);
}

body.classlings-app .cla-hist-pop > .cla-hist-cal-note {
    margin: 2px 0 12px;
    font: 400 17px / 1.3 var(--cla-ui);
    color: var(--cla-ink-2);
    text-align: center;
}

body.classlings-app .cla-hist-cal {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

body.classlings-app .cla-hist-cal > span {
    font: 600 16px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
    text-align: center;
}

body.classlings-app .cla-hist-cal button {
    appearance: none;
    display: grid;
    place-items: center;
    gap: 0;
    min-height: 52px;
    margin: 0;
    padding: 4px 0;
    font: 700 20px / 1 var(--cla-display);
    color: var(--cla-ink);
    background: var(--cla-wash);
    border: 2px solid transparent;
    border-radius: var(--cla-r-s);
    cursor: pointer;
}

body.classlings-app .cla-hist-cal button:hover:not(:disabled) {
    border-color: var(--cla-grape);
}

body.classlings-app .cla-hist-cal button small {
    font: 500 14px / 1.2 var(--cla-display);
    color: var(--cla-ink-2);
}

body.classlings-app .cla-hist-cal button.is-on {
    background: var(--cla-grape-tint);
    border-color: var(--cla-grape-deep);
    box-shadow: inset 0 0 0 2px var(--cla-grape-deep);
}

body.classlings-app .cla-hist-cal button:disabled {
    color: var(--cla-ink-2);
    background: var(--cla-page);
    border: 2px dashed var(--cla-wash-2);
    cursor: default;
}

body.classlings-app .cla-hist-cal button small.cla-hist-today {
    font-weight: 600;
    color: var(--cla-ink);
}

/* A short page (a school laptop's 540 to 700 px): the calendar's squares stay 44 px, the gaps and the padding close up a little,
   so all five weeks of a month are in the box with no scrolling. */
@media (max-height: 700px) {
    body.classlings-app .cla-hist-pop {
        padding: 8px 12px 12px;
    }

    body.classlings-app .cla-hist-pop > .cla-hist-cal-note {
        margin: 0 0 8px;
        font-size: 16px;
    }

    body.classlings-app .cla-hist-cal {
        gap: 6px;
    }

    body.classlings-app .cla-hist-cal button {
        min-height: 44px;
        padding: 2px 0;
    }
}

/* Focus: the look's thick ink ring. */
body.classlings-app :is(.cla-hist, #claPageBar) :is(button):focus-visible {
    outline: 4px solid var(--cla-ink);
    outline-offset: 4px;
}

/* ---------------------------------------------------------------- narrower screens */

/* A school laptop: a narrower summary, and the bar's words fold to their pictures first. */
@media (max-width: 1180px) {
    body.classlings-app .cla-hist-body {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 16px;
    }

    body.classlings-app .cla-hist-sum {
        padding: 14px 18px;
    }

    body.classlings-app .cla-hist-list {
        padding: 14px 16px 0;
    }

    body.classlings-app .cla-hist-table td {
        padding: 0 8px;
    }

    body.classlings-app .cla-hist-kids {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Smaller still: the summary above the list, and the bar on two rows. */
@media (max-width: 900px) {
    body.classlings-app #historyScreen:not(.hidden) {
        overflow-y: auto;
    }

    body.classlings-app .cla-hist-body {
        flex: none;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(420px, 1fr);
    }

    body.classlings-app .cla-hist-sum {
        overflow: visible;
    }

    body.classlings-app .cla-hist-kids {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

/* A phone: no column headings, narrower columns, and two pupils a row to pick from. In the bar, Pick a
   day and Everyone are their pictures (the calendar, and the cat with its arrow), so the whole bar
   fits on the screen with nothing past its edge. */
@media (max-width: 600px) {
    body.classlings-app #claPageBar .cla-hist-word {
        display: none;
    }
}

/* The smallest phones: a little less room round each of the bar's tools, and smaller words, so the
   whole bar still fits. */
@media (max-width: 420px) {
    body.classlings-app #claPageBar .cla-hist-tool {
        gap: 4px;
        padding: 0 8px;
    }
}

@media (max-width: 360px) {
    body.classlings-app #claPageBar .cla-hist-tool {
        padding: 0 6px;
        font-size: 16px;
    }
}

@media (max-width: 340px) {
    body.classlings-app #claPageBar .cla-hist-tool {
        padding: 0 4px;
        font-size: 15px;
    }

    body.classlings-app #claPageBar {
        gap: 2px;
    }
}

@media (max-width: 600px) {

    body.classlings-app .cla-hist-table thead {
        display: none;
    }

    body.classlings-app .cla-hist-t {
        width: 56px;
    }

    body.classlings-app .cla-hist-c {
        width: 64px;
    }

    body.classlings-app .cla-hist-kids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Where everyone's list is too narrow for four columns (a phone, and a narrow window either side of the
   summary moving above the list): each point on two lines, its reason under who it was for, so the
   points and the reason are on screen without sliding the list sideways. */
@media (max-width: 700px), (min-width: 901px) and (max-width: 1000px) {
    body.classlings-app .cla-hist-table:not(.is-pupil) thead {
        display: none;
    }

    body.classlings-app .cla-hist-table:not(.is-pupil),
    body.classlings-app .cla-hist-table:not(.is-pupil) tbody,
    body.classlings-app .cla-hist-table:not(.is-pupil) tr.cla-hist-day,
    body.classlings-app .cla-hist-table:not(.is-pupil) .cla-hist-day th {
        display: block;
    }

    body.classlings-app .cla-hist-table:not(.is-pupil) tr.cla-hist-row {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        align-items: center;
        margin-bottom: 2px;
        border-radius: var(--cla-r-s);
    }

    body.classlings-app .cla-hist-table:not(.is-pupil) tr.cla-hist-row td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        width: auto;
        height: auto;
        min-height: 50px;
        white-space: normal;
    }

    body.classlings-app .cla-hist-table:not(.is-pupil) tbody tr.cla-hist-row:nth-child(odd of .cla-hist-row) {
        background: var(--cla-wash);
    }

    body.classlings-app .cla-hist-table:not(.is-pupil) tbody tr.cla-hist-row:nth-child(odd of .cla-hist-row) td {
        background: none;
    }

    /* The reason, and when it was undone, on the second line; a new day's words stay beside its time. */
    body.classlings-app .cla-hist-table:not(.is-pupil) tr.cla-hist-row td:last-child {
        grid-column: 2 / -1;
    }

    body.classlings-app .cla-hist-table:not(.is-pupil) tr.cla-hist-row:not(.is-newday) td:last-child {
        min-height: 0;
        padding-bottom: 12px;
    }

    body.classlings-app .cla-hist-who.is-table {
        flex-wrap: wrap;
    }

    body.classlings-app .cla-hist-table:not(.is-pupil) .cla-hist-undone {
        margin-left: 0;
    }

    /* A day's points ("+9 and −1") keep together if they move under the day's name. */
    body.classlings-app .cla-hist-table:not(.is-pupil) .cla-hist-day th span {
        white-space: nowrap;
    }
}