@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* Tokens lifted from the Akari console design, so the cloud app and the on-premise
   console read as one product. Square corners are deliberate -- this is a working tool,
   and the rounding that suits a marketing page makes it look like a different thing.
   Black is reserved for ink; amber is the only accent. */
:root {
    --ink: #17150F;
    --paper: #FAF8F3;
    --surface: #FFFFFF;
    --rail-bg: #EEE7D6;
    --rail-hover: #E5DCC5;
    --akari: #D98A1F;
    --akari-soft: #F7E8CD;
    --stone: #8A8377;
    --stone-dim: #B4AC9C;
    --rule: #E5E0D6;
    --online: #2E7D5B;
    --offline: #AE3A35;
    --text: #17150F;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.shell { display: flex; min-height: 100vh; }

/* ---------- left rail ---------- */

.rail {
    width: 212px;
    flex: 0 0 212px;
    background: var(--rail-bg);
    border-right: 1px solid var(--rule);
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}

.rail .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rule);
}

.rail .brandmark { width: 63px; height: 26px; color: var(--ink); fill: currentColor; }

.rail-group { padding: 0 14px; margin-top: 11px; }

.rail-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 4px;
    font-weight: 500;
}

.rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    color: #5B5442;
    text-decoration: none;
    cursor: pointer;
    border-left: 2px solid transparent;
    font-size: 12.5px;
}

.rail-item:hover { background: var(--rail-hover); color: var(--ink); }

.rail-item.active {
    background: var(--akari-soft);
    color: var(--ink);
    font-weight: 500;
    border-left-color: var(--akari);
}

.rail-item .ic {
    width: 14px;
    flex: none;
    text-align: center;
    color: var(--stone);
    line-height: 20px;
}

.rail-item.active .ic { color: var(--akari); }

.rail-foot {
    margin-top: auto;
    padding: 12px 24px 0;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--stone);
}

.rail-foot .who { word-break: break-all; margin-bottom: 4px; }
.rail-foot .company { color: var(--ink); font-weight: 500; font-size: 11.5px; margin-bottom: 2px; }
.rail-foot > a.link-btn { display: inline-block; margin-bottom: 6px; text-decoration: underline; }

/* Get latest: Akari at the factory, under the menu on every page (21/10/2026). */
.akari-box {
    margin: 16px 10px 14px;
    padding: 10px 11px;
    background: #FBF8F1;
    border: 1px solid var(--rule);
}
.akari-k {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone);
    font-weight: 500;
    margin-bottom: 4px;
}
.akari-s { font-size: 11.5px; color: #5B5442; line-height: 1.45; margin-bottom: 8px; }
.akari-s strong { color: var(--ink); font-weight: 500; }
.akari-s strong.good { color: var(--online); }
.akari-s strong.bad { color: var(--offline); }
.akari-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--online);
    margin-right: 6px;
    vertical-align: 1px;
}
.akari-dot.busy { background: var(--akari); }
.akari-dot.off { background: var(--offline); }
.akari-go { width: 100%; }

/* ---------- main area ---------- */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
}

.screen-title { font-size: 15px; font-weight: 600; margin-right: auto; }

.body { padding: 18px; overflow-y: auto; flex: 1; min-height: 0; max-width: 1180px; }

/* The month grids (Punch Record, Scheduling, Attendance Report) take the whole screen:
   on a big monitor they stopped at 1180px and left half of it empty while the days
   scrolled sideways (his request, 22/10/2026). Text in them keeps its own measure. */
.body.wide { max-width: none; }

h3.sec {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--stone);
    margin: 0 0 8px;
    font-weight: 500;
}

h3.sec + * { margin-top: 0; }
.lede { color: var(--stone); margin: 0 0 16px; max-width: 74ch; }
.dim { color: var(--stone); }
.caption { font-size: 12px; color: var(--stone); margin: 12px 0 0; max-width: 74ch; }

/* ---------- panels ---------- */

.panel { border: 1px solid var(--rule); background: var(--surface); margin-bottom: 16px; }

.panel-head {
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule);
    background: #FCFBF7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stone);
    font-weight: 500;
}

.panel-body { padding: 12px; }

/* ---------- stats ---------- */

.stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--rule);
}

.stat .s-num {
    font-family: "IBM Plex Mono", monospace;
    font-size: 21px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.stat .s-lab {
    font-size: 11px;
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

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

table { width: 100%; border-collapse: collapse; background: var(--surface); }

th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--stone);
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule);
    background: #FCFBF7;
}

td { padding: 9px 12px; border-bottom: 1px solid #F0ECE2; font-size: 12.5px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #FDFBF6; }
tbody tr.sel td { background: var(--akari-soft); }

.mono {
    font-family: "IBM Plex Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

.empty { padding: 30px 12px; text-align: center; color: var(--stone); font-size: 12.5px; }

/* ---------- controls ---------- */

.btn {
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 13px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.btn:hover { border-color: #C8C0AE; background: #FBF9F4; }
.btn.primary { background: var(--akari); border-color: #BE7714; color: #FFF; }
.btn.primary:hover { background: #C87D19; }
.btn:focus-visible { outline: 2px solid var(--akari); outline-offset: 1px; }
.btn:disabled { opacity: .55; cursor: default; }

.link-btn {
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    background: none;
    border: none;
    color: var(--akari);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
}

.link-btn:disabled { color: var(--stone-dim); text-decoration: none; cursor: default; }

.inp {
    border: 1px solid var(--rule);
    background: var(--surface);
    padding: 5px 9px;
    font: inherit;
    font-size: 12px;
    color: var(--text);
}

.inp:focus-visible { outline: 2px solid var(--akari); outline-offset: -1px; }

.filters { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--stone); }
.field label { font-size: 11.5px; color: var(--stone); }

/* ---------- chips and messages ---------- */

.chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border: 1px solid var(--rule);
    color: var(--stone);
    background: #FBFAF6;
}

.chip.in { border-color: #BFD9CB; background: #ECF5F0; color: var(--online); }
.chip.out { border-color: #D9D3C5; background: #F6F3EC; color: #6E685C; }
.chip.hold { border-color: #E2C9A0; background: #FBF1DE; color: #8A5F13; }
.chip.fire { border-color: #E8C0BC; background: #FBECEA; color: var(--offline); }
/* Settled by a person, not by the scans: calm, and unlike Complete's green. */
.chip.accepted { border-color: #CDD3DB; background: #F0F2F5; color: #4E5A69; }

.banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    margin-bottom: 12px;
    border: 1px solid #E2C9A0;
    background: #FBF1DE;
    font-size: 12px;
    color: #6E4E10;
}

.banner.bad { border-color: #E8C0BC; background: #FBECEA; color: #7C2B24; }
.banner .grow { flex: 1; }

/* ---------- two-column editor ---------- */

.split { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.split > * { min-width: 0; }

.pick {
    padding: 8px 12px;
    border-bottom: 1px solid #F0ECE2;
    cursor: pointer;
    font-size: 12.5px;
    border-left: 2px solid transparent;
}

.pick:last-child { border-bottom: none; }
.pick:hover { background: #FBF9F4; }
.pick.on { background: var(--akari-soft); border-left-color: var(--akari); font-weight: 500; }
.pick .sub { font-size: 10.5px; color: var(--stone); font-weight: 400; }

/* ---------- dense month grids (scheduling, punches) ---------- */

.grid-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }

/* Two facts about one person, stacked, because they are read together and split across
   two columns they would be twice the width for no extra meaning.

   A real button rather than a clickable cell, so the column can be reached by tab like
   every other control on the row. It is styled back down to look like the text it holds,
   which is the point -- what it says is the manager, not "edit manager". */
td.boss { padding: 0; }

td.boss button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    padding: 7px 12px;
    line-height: 1.35;
    cursor: pointer;
}

td.boss button:hover .nm { color: var(--akari); }
td.boss button:focus-visible { outline: 2px solid var(--akari); outline-offset: -2px; }

td.boss .nm { display: block; font-size: 12px; }
td.boss .mono { display: block; font-size: 11px; }

table.grid { border-collapse: collapse; min-width: max-content; background: var(--surface); }

table.grid th,
table.grid td {
    border: 1px solid #EFEBE1;
    padding: 4px 7px;
    text-align: center;
    white-space: nowrap;
    font-size: 11px;
    vertical-align: top;
}

table.grid th {
    background: #FCFBF7;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--stone);
    line-height: 1.3;
}

/* The name column stays put while a month scrolls past it. */
table.grid th.emp,
table.grid td.emp {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    border-right: 1px solid var(--rule);
    min-width: 168px;
}

table.grid th.emp { background: #FCFBF7; }
table.grid td.emp .who { font-weight: 600; font-size: 12px; }

/* Ticking people is how a shift gets assigned, so the checkbox sits in the row itself
   rather than in a dialog that repeats the list you are already looking at. */
table.grid td.emp .who,
table.grid th.emp .pickall {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

table.grid th.emp .pickall { font-weight: 500; }
table.grid td.emp.picked { background: var(--akari-soft); }
table.grid td.emp.picked .sub { color: #8A5F13; }

table.grid td.emp .sub {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    color: var(--stone);
}

table.grid tbody td:not(.emp) { cursor: pointer; }

.times {
    display: flex;
    flex-direction: column;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    line-height: 1.45;
}

.times .ot { color: var(--offline); }

/* A punch somebody typed in, marked wherever it appears beside the machine's own. */
.times .added { color: var(--akari); font-weight: 500; }

/* A scan somebody set aside: still shown, so the record of what the terminal said stays
   in front of whoever reads the day, but plainly not counted. */
.times .ignored,
td .ignored { color: var(--stone-dim); text-decoration: line-through; }

.times .tag {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--akari);
    margin-top: 1px;
}

/* Named rather than only tinted. The tint alone says "something is different about this
   day"; the word says which, and survives being printed or read by somebody who cannot
   tell the two ambers apart. */
.times .tag.ph { color: #8A5F13; margin: 0 0 2px; font-weight: 500; }

.cell-rest { background: #F5F2EA; color: var(--stone-dim); }
.cell-ph { background: #FBF1DE; }
.cell-leave { background: #ECF5F0; }
.cell-none { color: var(--stone-dim); }
.cell-over { outline: 2px solid var(--akari); outline-offset: -2px; }
.cell-miss { background: #FBECEA; }
.cell-pick { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- a list with a checkbox per row ---------- */

.acl { border: 1px solid var(--rule); max-height: 252px; overflow-y: auto; }

.acl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid #F0ECE2;
    font-size: 12.5px;
    cursor: pointer;
}

.acl-row:last-child { border-bottom: none; }
.acl-row:hover { background: #FBF9F4; }
.acl-row .grow { flex: 1; }

.acl-row .sub {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    color: var(--stone);
    margin-left: 6px;
}

/* ---------- sub-tabs within a screen ---------- */

.subtabs { display: flex; gap: 4px; margin-bottom: 12px; }

.subtab {
    font: inherit;
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    color: var(--stone);
}

.subtab:hover { color: var(--ink); }
.subtab.on { border-color: var(--rule); background: var(--surface); color: var(--ink); font-weight: 500; }

/* ---------- shift day grid ---------- */

.crumb { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 12.5px; }
.crumb .sep { color: var(--stone-dim); }
.crumb .now { font-weight: 600; }

.acl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

.daygrid-wrap { overflow-x: auto; min-width: 0; border: 1px solid var(--rule); background: var(--surface); }
.daygrid { display: flex; }

.daycol {
    flex: 1 1 0;
    min-width: 84px;
    border-right: 1px solid var(--rule);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 210px;
}

.daycol:last-child { border-right: none; }

.daycol .dh {
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule);
    background: #FCFBF7;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.daycol .dh .tick {
    width: 12px;
    height: 12px;
    border: 1px solid var(--stone-dim);
    background: var(--surface);
    flex: none;
}

.daycol .dbody { padding: 7px 6px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.daycol:hover { background: #FDFBF6; }
.daycol.on { background: var(--akari-soft); }
.daycol.on .dh { background: #F2E2C2; }
.daycol.on .dh .tick { background: var(--akari); border-color: #BE7714; position: relative; }

.daycol.on .dh .tick::after {
    content: "✓";
    color: #FFF;
    font-size: 9px;
    position: absolute;
    top: -2px;
    left: 1px;
}

.daycol.rest .dbody { align-items: center; justify-content: center; }

.pchip {
    font-family: "IBM Plex Mono", monospace;
    font-size: 9.5px;
    text-align: center;
    padding: 3px 4px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.pchip:hover { border-color: var(--akari); }
.pchip.ot { background: #FBECEA; border-color: #E8C0BC; color: var(--offline); }
.pchip.ph { background: #FBF1DE; border-color: #E2C9A0; color: #8A5F13; }
.pchip.ph.ot { background: #FBF1DE; border-color: #D9A44C; color: var(--offline); }
.pchip.picked { outline: 2px solid var(--akari); outline-offset: -2px; }
.pchip .ptime { display: block; }

/* One break among a period's breaks, in the side panel. */
.brk { border: 1px solid var(--rule); background: #FDFCF8; padding: 10px; margin-bottom: 10px; }

.brk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 500;
}

.pchip .brknote {
    display: block;
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px dashed currentColor;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 8.5px;
    line-height: 1.35;
    opacity: 0.72;
}

.pchip .brknote .hm { font-family: "IBM Plex Mono", monospace; }

.pchip.rest {
    background: #F5F2EA;
    border-color: var(--rule);
    color: var(--stone);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 10.5px;
    font-style: italic;
}

.editor { width: 340px; flex: none; }

/* In a grid the column decides the width. A fixed 340px panel in a 300px column ran off
   the right edge of the Shifts screen and was cut off there (14/10/2026). */
.split > .editor { width: auto; }

/* ---------- pages under a long list ---------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
    font-size: 12px;
}

.pager .grow { flex: 1; }
.pager label { color: var(--stone); font-size: 11px; }
.pager select.inp { width: auto; padding-top: 3px; padding-bottom: 3px; }
.pager .pages { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.pager .pg {
    font: inherit;
    min-width: 30px;
    padding: 4px 8px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.pager .pg:hover:not(:disabled) { border-color: var(--akari); }
.pager .pg.on { background: var(--ink); border-color: var(--ink); color: #FFF; }
.pager .pg:disabled { color: var(--stone-dim); cursor: default; }
.pager .gap { color: var(--stone); padding: 0 2px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--stone); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 11px; border: 1px solid var(--rule); display: inline-block; }

/* ---------- label/control grid ---------- */

.fields {
    display: grid;
    grid-template-columns: 116px minmax(120px, 1fr);
    gap: 9px 14px;
    align-items: center;
}

.fields > label { font-size: 11.5px; color: var(--stone); }
.fields .wide { grid-column: 2 / -1; }
.fields .inp { width: 100%; }
.fields.narrow { grid-template-columns: 86px 1fr; }
.fields .pair select.inp { width: auto; text-align: left; }

.fields .pair .inp {
    width: 62px;
    flex: none;
    text-align: right;
    padding-left: 5px;
    padding-right: 7px;
}

/* The spinner buttons sit inside the box, on the right, which is exactly where
   right-aligned digits are -- so 60 rendered as 6 with the zero underneath the arrows.
   Widening alone never fixes it, because the spinner grows with the box. These are
   minutes typed once and read often, and a stray scroll over a spinner silently
   changing a pay tolerance is worth being rid of anyway. */
/* A time in a row of words ("from 11:00"): the 62px above is for minutes, and cut a time
   down to "11:0" with the AM/PM and clock icon gone (his screenshot, 23/10/2026). */
.fields .pair .inp[type="time"] { width: 124px; text-align: left; }

.fields .pair .inp[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.fields .pair .inp[type="number"]::-webkit-outer-spin-button,
.fields .pair .inp[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

tbody tr.rowlink { cursor: pointer; }

/* ---------- modal dialog ---------- */

.modal-back {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(23, 21, 15, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal {
    background: var(--surface);
    border: 1px solid #B9B1A0;
    box-shadow: 0 26px 64px rgba(23, 21, 15, 0.34);
    width: 560px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-head {
    padding: 11px 15px;
    border-bottom: 1px solid var(--rule);
    background: var(--rail-bg);
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-head .t { font-weight: 600; font-size: 13.5px; flex: 1; }

.modal-head .x {
    font: inherit;
    font-size: 14px;
    background: none;
    border: none;
    color: var(--stone);
    cursor: pointer;
    padding: 0 3px;
}

.modal-head .x:hover { color: var(--ink); }
.modal-body { padding: 16px; overflow-y: auto; flex: 1; }

.modal-foot {
    padding: 11px 15px;
    border-top: 1px solid var(--rule);
    background: #FCFBF7;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-foot .grow { flex: 1; font-size: 11.5px; color: var(--stone); }

/* ---------- picking days on a calendar (Assign shift) ---------- */

.modal.wide { width: 700px; }

/* ---------- one day's scans (Punch Record) ---------- */

.dayline { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; }
table.mini.scans { width: 100%; }
table.mini.scans td.act { text-align: right; white-space: nowrap; }
table.mini.scans tr.asking td { background: #FCFBF7; }
.why-row { display: flex; gap: 8px; align-items: center; }
.why-row .grow { flex: 1; min-width: 0; }

.cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.cal-h,
.cal-day { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.cal-h {
    padding: 5px 7px;
    background: #FCFBF7;
    font-size: 11px;
    font-weight: 500;
    color: var(--stone);
}

.cal-day {
    min-height: 52px;
    padding: 5px 7px;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
}

.cal-day:hover { background: #FDFBF6; }
.cal-day.on { background: var(--akari-soft); box-shadow: inset 0 0 0 2px var(--akari); }
.cal-day.out { background: #F7F5EF; cursor: default; }
.cal-day .n { font-size: 12px; font-weight: 500; }

.cal-day .p {
    margin-top: 4px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 9.5px;
    overflow-wrap: anywhere;
}

.cal-day .p.rest { color: var(--stone); font-style: italic; }

/* ---------- settings rows ---------- */

.opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid #F0ECE2;
}

.opt:last-child { border-bottom: none; }

.opt .k { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.opt .d { font-size: 11px; color: var(--stone); max-width: 52ch; margin-top: 5px; }

/* The "i" that holds a setting's explanation. Small and quiet until asked: the reasons
   are worth having and are read once, and six of them open at once is an essay where a
   list of six settings should be. */
.info {
    width: 15px;
    height: 15px;
    flex: none;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: none;
    color: var(--stone);
    font: italic 600 10px/1 Georgia, "Times New Roman", serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.info:hover { border-color: var(--akari); color: var(--akari); }
.info:focus-visible { outline: 2px solid var(--akari); outline-offset: 1px; }
.info.on { background: var(--akari); border-color: #BE7714; color: #FFF; }

/* The "i" beside a title or heading, and the box it opens (Info.razor). The box resets
   what it inherits -- a panel heading is small capitals, a screen title is bold. */
.infowrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 7px; }
.info-back { position: fixed; inset: 0; z-index: 40; }

.info-pop {
    position: absolute;
    top: calc(100% + 7px);
    left: -8px;
    z-index: 41;
    width: 380px;
    max-width: calc(100vw - 32px);
    padding: 11px 13px;
    border: 1px solid #D9D2C3;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(23, 21, 15, 0.16);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    white-space: normal;
    text-align: left;
}

.info-pop.right { left: auto; right: -8px; }
.info-pop p { margin: 0 0 8px; }
.info-pop p:last-child { margin-bottom: 0; }

.checks { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.checks.inline { flex-direction: row; align-items: center; }

/* A flexible break (23/10/2026): the switch stands out while on. The clock rules it
   replaces are hidden until it is turned off. */
.brk .flex-on { background: var(--akari-soft); border: 1px solid #E2C9A0; padding: 2px 7px; font-weight: 600; }

/* "from" and "until" the same width, so the two times stand one above the other. */
.brk .pair .lead { width: 30px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }

/* Wraps rather than clips: a cramped panel drops "after" onto its own line instead of
   cutting a digit off the number beside it. */
.pair { display: flex; gap: 4px 5px; align-items: center; flex-wrap: wrap; }
.pair span { font-size: 10px; color: var(--stone); white-space: nowrap; }

.inp.num { width: 54px; text-align: right; }

/* A break is drawn inside its period, because that is where it belongs. */
.nested {
    border: 1px solid var(--rule);
    background: #FCFBF7;
    padding: 4px 12px;
    margin: 4px 0 4px 14px;
}

details.adv { margin-top: 10px; border-top: 1px dashed var(--rule); padding-top: 6px; }

details.adv > summary {
    font-size: 11.5px;
    color: var(--akari);
    cursor: pointer;
    padding: 4px 0;
    list-style-position: inside;
}

details.adv[open] > summary { margin-bottom: 4px; }

/* ---------- a day opened up: which scan counted as what ---------- */

.twist { color: var(--stone-dim); margin-right: 5px; font-size: 9px; }
tr.sel .twist { color: var(--akari); }

tr.detail > td { padding: 0; background: #FCFBF7; border-bottom: 1px solid var(--rule); }
tr.detail:hover > td { background: #FCFBF7; }

.ledger { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 13px 16px 15px 30px; }
.ledger .lg { flex: 1 1 320px; min-width: 0; }

.ledger h4 {
    margin: 0 0 7px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--stone);
}

.ledger-empty { padding: 14px 16px 14px 30px; font-size: 12px; color: var(--stone); }

/* Sits inside a cell of the table above it, so every inherited padding and rule has to
   be taken back off or the nested rows read as more month rows. */
table.mini { border: 1px solid var(--rule); background: var(--surface); }
table.mini th { padding: 5px 8px; font-size: 10px; letter-spacing: 0.05em; }
table.mini td { padding: 5px 8px; font-size: 11.5px; border-bottom: 1px solid #F4F1E8; }
table.mini tbody tr:last-child td { border-bottom: none; }
table.mini .mono { font-size: 11.5px; }

/* A scan that never came, and a block that paid nothing: greyed rather than hidden,
   because what the day expected is half of why the figures look the way they do. */
table.mini tr.gone td { color: var(--stone-dim); }
table.mini tr.gone td .chip { color: var(--offline); }
table.mini tr.stray td { background: #FBF1DE; }
table.mini tr.ignored td { color: var(--stone-dim); }
table.mini tr.away td { color: #8A5F13; }

/* A day holding a scan that fits nothing: an amber edge on the row, so it is seen in a
   long month without opening every day. His request (19/10/2026). */
tbody tr.has-extra td:first-child { box-shadow: inset 3px 0 0 #E2C9A0; }
.stat .s-num.extra { color: #8A5F13; }

.btn.sm { padding: 2px 9px; font-size: 11px; }

/* What somebody decided about the day's scans, each with its own way back. */
.ledger /* What the Give this day a shift box says the day would pay, under its preview. */
.modal p.pays { margin: 12px 0 0; font-size: 12.5px; }

ul.decided { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ledger ul.decided li { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: var(--stone); }

/* The Settle box: one choice, and the one detail that choice needs under it. */
.choices { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.choices > label { display: inline-flex; align-items: center; gap: 7px; }
.choices .sub-choice { margin-left: 22px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--stone); }

/* The day's arithmetic in three lines: paid, present, and the gap between them. A
   figure somebody can check against the scans listed next to it, rather than a table
   of components they have to add up themselves. */
.ledger .tally { flex: 0 1 300px; }

.ledger dl.sum {
    display: grid;
    grid-template-columns: auto max-content;
    gap: 2px 14px;
    margin: 0;
    border: 1px solid var(--rule);
    background: var(--surface);
    padding: 10px 12px;
}

.ledger dl.sum dt { font-size: 12px; align-self: baseline; }
.ledger dl.sum dd { margin: 0; font-size: 12.5px; text-align: right; }

.ledger dl.sum dd.why {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 10.5px;
    color: var(--stone);
    margin: -1px 0 5px;
}

.ledger dl.sum .tot {
    border-top: 1px solid var(--rule);
    margin-top: 4px;
    padding-top: 6px;
    font-weight: 600;
}

.ledger .dir {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--stone-dim);
    margin-left: 5px;
}

.ledger .note { margin: 7px 0 0; font-size: 11px; color: var(--stone); max-width: 46ch; }
.ledger .note-acts { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- dashboard: range picker ---------- */

/* One control, four mutually exclusive answers. A row of buttons rather than a dropdown
   because all four fit, and a dropdown hides three quarters of the choice behind a click
   for no gain. */
.seg { display: flex; border: 1px solid var(--rule); background: var(--surface); }

.seg-btn {
    border: none;
    border-right: 1px solid var(--rule);
    background: none;
    padding: 4px 11px;
    font: inherit;
    font-size: 12px;
    color: var(--stone);
    cursor: pointer;
    white-space: nowrap;
}

.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: #FBF9F4; color: var(--ink); }
.seg-btn.on { background: var(--akari-soft); color: var(--ink); font-weight: 500; }
.seg-btn:focus-visible { outline: 2px solid var(--akari); outline-offset: -2px; }

.range-bar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 12px;
}

.range-bar .mono { font-size: 12.5px; font-weight: 500; }
.range-bar .link-btn { margin-left: auto; }

/* ---------- dashboard: the four figures ---------- */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-bottom: 16px;
}

.kpi {
    background: var(--surface);
    padding: 12px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

/* Square, ink-coloured, quiet. The circular pastel badge that usually sits here is the
   one thing on a tile nobody reads, and it costs the figure beside it a third of its
   width. */
.kpi .ico {
    position: absolute;
    top: 11px;
    right: 12px;
    font-size: 15px;
    line-height: 1;
    color: var(--stone-dim);
}

.kpi .lab {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--stone);
    font-weight: 500;
}

.kpi .num {
    font-family: "IBM Plex Mono", monospace;
    font-size: 25px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.kpi .sub { font-size: 11px; color: var(--stone); display: flex; gap: 6px; flex-wrap: wrap; }
.kpi .sub .warn { color: var(--offline); }

.kpi .move { font-weight: 500; font-variant-numeric: tabular-nums; }
.kpi .move.good { color: var(--online); }
.kpi .move.bad { color: var(--offline); }

/* ---------- dashboard: attendance heat map ---------- */

.heat-wrap { overflow-x: auto; }

.heat { table-layout: fixed; }
.heat th, .heat td { text-align: center; padding: 6px 4px; }
.heat th { min-width: 56px; }

.heat th .d1 { display: block; font-size: 10px; letter-spacing: 0.06em; }
.heat th .d2 { display: block; font-size: 9.5px; color: var(--stone-dim); letter-spacing: 0; }

.heat th.side, .heat td.side {
    text-align: left;
    min-width: 138px;
    width: 138px;
    position: sticky;
    left: 0;
    background: var(--surface);
    font-weight: 500;
    font-size: 12px;
}

.heat thead th.side { background: #FCFBF7; }
.heat th.end, .heat td.end { border-left: 1px solid var(--rule); font-weight: 600; }
.heat tbody tr:hover td { background: inherit; }

.heat td {
    font-family: "IBM Plex Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}

/* Four bands and a blank, the same ones named in the key underneath. Colour is doubled up
   with the number in every cell, so nothing here depends on telling two greens apart. */
.heat td.g4 { background: #DCEBE2; color: #1F5C41; }
.heat td.g3 { background: #EDF5F0; color: #2E7D5B; }
.heat td.g2 { background: #FBF1DE; color: #8A5F13; }
.heat td.g1 { background: #F7DCD9; color: #8E2A25; }
.heat td.g0 { background: #F7F5EF; color: var(--stone-dim); }

.heat-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--stone);
}

.heat-key span { display: inline-flex; align-items: center; gap: 6px; }
.heat-key i { width: 11px; height: 11px; display: inline-block; border: 1px solid var(--rule); }
.heat-key i.g4 { background: #DCEBE2; }
.heat-key i.g3 { background: #EDF5F0; }
.heat-key i.g2 { background: #FBF1DE; }
.heat-key i.g1 { background: #F7DCD9; }
.heat-key i.g0 { background: #F7F5EF; }

/* ---------- dashboard: charts ---------- */

/* Four tones, named rather than numbered, so a series says what it is at the call site:
   amber is the house accent and carries the main figure, green and red are the two
   verdicts, ink is a second neutral series drawn beside the accent. */
.chart .s-amber { fill: var(--akari); stroke: var(--akari); }
.chart .s-green { fill: var(--online); stroke: var(--online); }
.chart .s-red { fill: var(--offline); stroke: var(--offline); }
.chart .s-ink { fill: #6E685C; stroke: #6E685C; }

/* Capped, because the drawing scales with its width and a chart the whole width of a
   wide screen ends up taller than the screen. */
.chart { width: 100%; max-width: 880px; height: auto; display: block; }

.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .grid.floor { stroke: var(--stone-dim); }

.chart .axis {
    fill: var(--stone);
    font-family: "IBM Plex Mono", monospace;
    font-size: 8.5px;
}

.chart .line { fill: none; stroke-width: 1.8; }
.chart .bar { stroke: none; }

.chart-key {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--stone);
}

.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key i { width: 10px; height: 10px; display: inline-block; }

/* A series drawn as a line is keyed as one, so the shape in the legend matches the shape
   on the chart and nobody hunts for a bar that was never there. */
.chart-key .as-line i { height: 2px; width: 13px; }

.chart-key .k-amber i { background: var(--akari); }
.chart-key .k-green i { background: var(--online); }
.chart-key .k-red i { background: var(--offline); }
.chart-key .k-ink i { background: #6E685C; }

/* ---------- dashboard: sparklines ---------- */

/* Stretched rather than scaled: the height is fixed at the tile's bottom edge and the
   width is whatever the tile is, which is fine for a shape nobody measures. */
.spark { width: 100%; height: 22px; display: block; margin-top: 6px; }

.spark polyline {
    fill: none;
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

.spark .s-amber { stroke: var(--akari); }
.spark .s-green { stroke: var(--online); }
.spark .s-red { stroke: var(--offline); }
.spark .s-stone { stroke: var(--stone-dim); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- a button that opens a short list of choices (Punch Record's Export) ---------- */

.menuwrap { position: relative; display: inline-flex; }

.menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    width: 340px;
    max-width: calc(100vw - 32px);
    border: 1px solid #D9D2C3;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(23, 21, 15, 0.16);
    display: flex;
    flex-direction: column;
}

.menu a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 13px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-soft, #F0ECE2);
}

.menu a:last-child { border-bottom: none; }
.menu a:hover, .menu a:focus-visible { background: #FBF9F4; outline: none; }
.menu a strong { font-size: 12.5px; font-weight: 600; }
.menu a span { font-size: 11px; color: var(--stone); }

/* ---------- rounding: the block, then which way, each with what it does ---------- */

.rounding { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 360px; }
.rounding > select.inp { width: auto; }
.ways { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.way {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    align-items: baseline;
    padding: 7px 10px;
    border: 1px solid var(--rule);
    background: var(--surface);
    cursor: pointer;
}

.way input { grid-row: span 2; margin: 0; align-self: center; accent-color: var(--akari); }
.way.on { border-color: var(--akari); background: #FFFBF3; }
.way .w-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.w-eg { font-size: 11.5px; color: var(--stone); line-height: 1.4; }

/* ---------- the report's figures that tell good from bad by colour ---------- */

/* Given away: paid for time nobody was there (red), or there longer than paid (green). */
.away-over { color: var(--offline); }
.away-under { color: var(--online); }

/* Late at least once: yellow, no box. A darker yellow than a highlighter, to stay readable. */
td.late { color: #B58900; font-weight: 600; }

/* What using a scan in a slot would bring, said in the Settle box before saving: a long
   break or a late return reads in the Late column's colour. */
.modal .late { color: #B58900; }


/* ---------- Punch Record: a line for each scan the shift expects ----------
   His request (20/10/2026, layout picked 21/10/2026): see what is missing for each person
   at a glance. Every scan the shift expects has its own line, so a missing one is a red gap
   in its own place rather than something worked out by counting times. */

table.grid.card th.emp,
table.grid.card td.emp { width: 184px; min-width: 184px; max-width: 184px; white-space: normal; }

table.grid.card td.emp .sum { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

table.grid.card th.lab,
table.grid.card td.lab {
    position: sticky;
    left: 184px;
    z-index: 2;
    background: #FCFBF7;
    text-align: right;
    min-width: 76px;
    border-right: 1px solid var(--rule);
}

table.grid.card td.lab .ln {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--stone);
}

table.grid.card td.lab .ln.ot { color: var(--stone-dim); }
table.grid.card th { min-width: 60px; }
table.grid.card th.today { box-shadow: inset 0 3px 0 var(--akari); color: var(--ink); }
table.grid.card tbody tr td { border-bottom: 2px solid var(--rule); }
table.grid.card td.d { padding: 4px 6px; }
table.grid.card td.d.rest { background: #F5F2EA; }
table.grid.card td.d.blank { cursor: default; }
table.grid.card td.d:hover:not(.blank) { box-shadow: inset 0 0 0 1px var(--stone-dim); }

.ln { height: 18px; line-height: 18px; }

table.grid.card td.d .ln {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

table.grid.card td.d .ln.st { font-size: 9.5px; color: var(--stone-dim); }
table.grid.card td.d .ln.st.night { color: #5B5442; }
table.grid.card td.d.rest .ln.st { color: var(--stone); }
table.grid.card td.d .ln.none { font-family: "IBM Plex Sans", sans-serif; font-size: 10px; color: var(--stone); }

/* What each scan was: the same colours on the Month view, the Day view and the day box. */
.ln.miss,
table.dayview td.t.miss,
table.mini.daybox td.miss {
    background: #FBECEA;
    color: var(--offline);
    font-family: "IBM Plex Sans", sans-serif !important;
    font-size: 10px;
    font-weight: 500;
}

table.grid.card td.d .ln.miss { margin: 0 -6px; padding: 0 6px; }

/* Late in or early out, past the shift's grace: the times the report's Late and Early
   columns count. His request (21/10/2026): a colour of its own. */
.ln.late,
table.dayview td.late,
table.mini.daybox td.late,
.sw.late { color: #2F5D8A; font-weight: 600; }

.ln.hand,
table.dayview td.hand,
table.mini.daybox td.hand,
.sw.hand { color: var(--akari); font-weight: 500; }

.ln.no-ot,
table.dayview td.no-ot,
table.mini.daybox td.no-ot,
.sw.no-ot { color: #CFC8B8; }

.ln.waived,
table.dayview td.waived,
table.mini.daybox td.waived { color: var(--stone); }

.ext { color: #8A5F13; font-family: "IBM Plex Sans", sans-serif; font-size: 10px; font-weight: 500; }

/* The extra scans behind a hover. Opens upwards, inside the day it belongs to, so the last
   row of the table never pushes the grid into scrolling. */
.tipped { position: relative; cursor: default; }

.tipped .tipbox {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: var(--surface);
    border: 1px solid #B9B1A0;
    box-shadow: 0 8px 22px rgba(23, 21, 15, 0.16);
    padding: 7px 10px;
    text-align: left;
    white-space: nowrap;
    line-height: 1.5;
}

.tipped:hover .tipbox { display: block; }
.tipbox .h { display: block; font-size: 11px; font-weight: 600; color: var(--ink); }
.tipbox .times { display: block; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #8A5F13; white-space: pre; }

.legend .sw {
    display: inline-block;
    width: auto;
    min-width: 30px;
    height: 16px;
    padding: 0 4px;
    border: 1px solid var(--rule);
    background: var(--surface);
    font-family: "IBM Plex Mono", monospace;
    font-size: 9.5px;
    font-style: normal;
    line-height: 14px;
    text-align: center;
}

.legend .sw.miss { background: #FBECEA; border-color: #E8C0BC; color: var(--offline); font-family: "IBM Plex Sans", sans-serif; }
.legend .sw.ext { color: #8A5F13; }
.legend .sw.rest { background: #F5F2EA; color: var(--stone); font-family: "IBM Plex Sans", sans-serif; }

.seg-btn .n { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--stone); margin-left: 4px; }
.seg-btn .n.miss { color: var(--offline); }

/* Day view: one table, a heading and columns for each shift. */
.daysum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 10px; font-size: 12px; color: #5B5442; }
.daysum strong { color: var(--ink); }
.daysum .r,
table.dayview .r { color: var(--offline); font-weight: 500; }

.tablebox { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
table.dayview td,
table.dayview th { padding: 7px 10px; border-bottom: 1px solid #F0ECE2; font-size: 12.5px; vertical-align: middle; }
table.dayview tr.grp td { background: var(--rail-bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 8px 10px; }
table.dayview tr.grp .nm { font-weight: 600; }
table.dayview tr.grp .tm { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #5B5442; margin-left: 8px; }
table.dayview tr.grp .cnt { float: right; font-size: 11.5px; color: #5B5442; }

table.dayview tr.cols th {
    background: #FCFBF7;
    text-align: center;
    font-weight: 500;
    padding: 5px 6px;
    border-bottom: 1px solid var(--rule);
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
}

table.dayview tr.cols th .k { display: block; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
table.dayview tr.cols th .t { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink); }
table.dayview tr.cols th.ot .k,
table.dayview tr.cols th.ot .t { color: var(--stone-dim); }
table.dayview tr.cols th.left { text-align: left; }
table.dayview td.t { text-align: center; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 12px; min-width: 70px; }
table.dayview td.t.miss { font-size: 11px; }
table.dayview td.t.none { color: #CFC8B8; }
table.dayview td.ex { text-align: center; font-size: 11px; white-space: nowrap; }
table.dayview td.ex .dim { margin-left: 4px; }
table.dayview td.st { width: 98px; }
table.dayview td.who .mono { font-size: 11px; margin-left: 5px; }
table.dayview td.scans { color: #8A5F13; }
table.dayview tr.quiet td.who { color: var(--stone); }

/* The day box: the day lined up against its shift. */
table.mini.daybox td.k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); width: 96px; }
table.mini.daybox td.e { width: 56px; }
table.mini.daybox td .note { display: block; font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; color: var(--stone); font-weight: 400; }
table.mini.daybox tr.miss td { background: #FBECEA; }
table.mini.daybox tr.sec td { background: #FCFBF7; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A5F13; font-weight: 500; padding-top: 8px; }
table.mini.daybox tr.stray td { background: #FFFBF2; }
table.mini.daybox td.ext { font-size: 11.5px; font-family: "IBM Plex Mono", monospace; }
table.mini.daybox tr.ignored td { color: var(--stone); }

/* ---------- rest day work (23/10/2026) ----------
   Somebody called in on a rest day. One colour wherever it appears -- Scheduling, Punch
   Record, the Attendance Report and the shift editor -- so it is never taken for an
   ordinary day, and plum so it is not confused with a public holiday's amber. */

.chip.rdw { border-color: #D6C8DE; background: #F4EEF7; color: #6B4A80; }
.cell-rdw { background: #F4EEF7; }
.times .tag.rdw { color: #6B4A80; font-weight: 500; }
.pchip.rd { background: #F4EEF7; border-color: #D6C8DE; color: #6B4A80; }
.pchip.rd.ot { border-color: #B79BC8; color: var(--offline); }
.legend i.rdw-swatch { background: #F4EEF7; border-color: #D6C8DE; }
.legend .sw.rdw { background: #F4EEF7; border-color: #D6C8DE; color: #6B4A80; font-family: "IBM Plex Sans", sans-serif; font-weight: 600; }
table.grid.card td.d.rdw { background: #F4EEF7; }

.rdmark {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6B4A80;
    margin-left: 3px;
}

table.grid td .rdmark { display: block; margin: 0 0 1px; text-align: right; }
table.grid.card td .rdmark { display: inline; margin-left: 5px; }
.abs { font-family: "IBM Plex Sans", sans-serif; font-size: 10px; font-weight: 600; color: var(--offline); }

/* ---------- the report's grouped columns (23/10/2026) ----------
   Normal days, then each kind of hours paid on top, each with scheduled beside worked.
   A rule down the left of each group, so a row reads group by group. */

.table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }

table.grid.grouped th.grp {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}

table.grid.grouped th.grp.rd { color: #6B4A80; }
table.grid.grouped th.grp.ph { color: #8A5F13; }
/* The start of each group (Normal days, Normal OT, Rest day work...): thicker and darker
   than the line between columns, so the groups read apart (his pick, 26/10/2026). */
table.grid.grouped .gl { border-left: 2px solid #B9B1A0; }
table.grid td.absent { color: var(--offline); font-weight: 600; }

/* Columns: tick what the table shows, and the payroll file follows. */
.colpick {
    border: 1px solid var(--rule);
    background: var(--surface);
    padding: 12px 14px;
    margin: 0 0 10px;
    display: grid;
    gap: 10px;
}

.colgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px; }
.colgroups fieldset { border: none; padding: 0; margin: 0; display: grid; gap: 3px; min-width: 0; }
.colgroups legend { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); padding: 0; margin-bottom: 3px; }
.colgroups legend.rd { color: #6B4A80; }
.colgroups legend.ph { color: #8A5F13; }
.colgroups label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.colgroups input { accent-color: var(--akari); margin: 0; }
.colacts { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }

/* Pay as, in Override and Give a shift: what the choice picked means, under it only. */
.payas { display: grid; gap: 4px; }
.payas > label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.payas > label input { accent-color: var(--akari); margin: 0; }
.payas .says { margin: 0 0 4px 21px; font-size: 11.5px; color: var(--stone); }

/* ---------- Settings › Users (27/10/2026) ---------- */

table.grid.users { width: 100%; }
table.grid.users th,
table.grid.users td { text-align: left; vertical-align: middle; font-size: 12px; padding: 6px 9px; }
table.grid.users td.acts { text-align: right; }
table.grid.users td.acts > * + * { margin-left: 6px; }

/* Full access or view only (27/10/2026): a row whose access is picked but not saved yet. */
select.inp.acc { width: 120px; padding-block: 3px; font-size: 12px; }
table.grid.users tr.changing td { background: #FFFBF2; }

/* A button hidden from somebody with view only stays hidden, whatever its own display says. */
[hidden] { display: none !important; }

/* What somebody with view only sees: the same boxes, plainly not for typing in. */
.inp:disabled,
.view-only input:disabled,
.view-only select:disabled { background: #F6F3EC; color: #6E685C; cursor: default; }
.chip.view { border-color: #D9D3C5; background: #F6F3EC; color: #6E685C; }
.viewtag { display: inline-flex; align-items: center; margin-left: auto; }

/* Clients: everybody who can sign in to a company, opened under its row. */
.people-btn { display: block; margin-top: 4px; font-size: 11.5px; }
table.grid.clients tr.people > td { background: #FCFBF7; padding: 8px 14px; }
table.grid.clients table.inner { border-collapse: collapse; width: 100%; }
table.grid.clients table.inner th { font-size: 11px; color: var(--stone); font-weight: 500; text-align: left; padding: 3px 12px 3px 0; border: none; background: none; }
table.grid.clients table.inner td { border: none; border-top: 1px solid #EFEBE1; padding: 5px 12px 5px 0; font-size: 12px; background: none; }
table.grid.clients table.inner td.act { text-align: right; padding-right: 0; white-space: nowrap; }
table.grid.clients .sent { font-size: 11.5px; color: var(--online); }
.rail-foot .company .chip.view { margin-left: 4px; font-weight: 500; vertical-align: 1px; }
.said { font-size: 12px; margin-bottom: 8px; }
.said.ok { color: var(--online); }
.said.bad { color: var(--offline); }
/* Settings' tabs are links (/settings/users), so each tab has its own address. */
a.subtab { text-decoration: none; display: inline-block; }

/* ---------- Settings › History (27/10/2026) ---------- */

table.grid.history { width: 100%; }
table.grid.history th,
table.grid.history td { text-align: left; vertical-align: top; white-space: normal; font-size: 12px; padding: 6px 9px; }
table.grid.history td.when { white-space: nowrap; font-size: 11.5px; }
table.grid.history td.who { min-width: 120px; }
table.grid.history td.who .chip { margin-top: 3px; }
table.grid.history td.what { min-width: 280px; }
table.grid.history .chg { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }
table.grid.history .chg s { color: var(--offline); }
table.grid.history .chg ins { color: var(--online); text-decoration: none; font-weight: 500; }
table.grid.history .why { font-size: 11.5px; color: var(--stone); font-style: italic; }
table.grid.history .pay { font-size: 10.5px; color: #8A5F13; font-weight: 500; }
table.grid.history summary { cursor: pointer; color: var(--akari); font-size: 11.5px; margin-top: 2px; }
table.grid.history table.inner { margin-top: 6px; border-collapse: collapse; }
table.grid.history table.inner td { border: none; border-top: 1px solid #EFEBE1; padding: 4px 14px 4px 0; font-size: 11.5px; }

/* ---------- Akari admin and support access (27/10/2026) ---------- */

/* Across the top of every page while support access is asked for or open. */
.supbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 18px;
          background: #FBF1DE; border-bottom: 1px solid #E2C9A0; color: #6E4E10; font-size: 12px; }
.supbar .grow { flex: 1; min-width: 220px; }
.supbar form { display: flex; gap: 6px; margin: 0; }

/* A company in the Akari admin's menu is a form button that looks like a menu item. */
.rail-btn { width: 100%; background: none; border: none; border-left: 2px solid transparent;
            font: inherit; font-size: 12.5px; text-align: left; }

/* On/off switches, one size everywhere. */
.sw { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 11.5px; color: #5B5442;
      background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap; }
.sw .track { width: 32px; height: 18px; border-radius: 9px; background: #D9D3C5; position: relative; flex: none; transition: background .15s; }
.sw .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
                    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.sw.on .track { background: var(--online); }
.sw.on .track::after { left: 16px; }
.sw:disabled { opacity: .55; cursor: default; }
.sw:focus-visible { outline: 2px solid var(--akari); outline-offset: 2px; }

/* Wraps to the box rather than growing to its longest line (table.grid's max-content):
   a long status like "Last checked in yesterday ... until it's back" pushed Switches and
   Go in out of sight at 1280 wide. */
table.grid.clients { width: 100%; min-width: 0; }
table.grid.clients .chip { margin-left: 6px; }
table.grid.clients th,
table.grid.clients td { text-align: left; vertical-align: middle; white-space: normal; font-size: 12px; padding: 7px 9px; }
table.grid.clients td.co { min-width: 140px; }
table.grid.clients td.swc { white-space: nowrap; }
table.grid.clients td.sup { min-width: 160px; }
table.grid.clients .sub { font-size: 11px; color: var(--stone); }
table.grid.clients .st b { display: flex; align-items: center; gap: 6px; font-weight: 500; }
table.grid.clients .note { min-width: 140px; max-width: 220px; color: #3F3A2E; font-size: 11.5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot.ok { background: var(--online); } .dot.warn { background: var(--akari); }
.dot.off { background: var(--offline); } .dot.new { background: var(--stone-dim); }
.confirm { margin-top: 6px; padding: 8px 10px; background: #FBF1DE; border: 1px solid #E2C9A0; color: #6E4E10; font-size: 11.5px; white-space: normal; }
.confirm .acts { display: flex; gap: 6px; margin-top: 6px; }

/* ---------- Clients: a company's logins, and Clients on a phone (28/10/2026) ----------
   Under a company's name its logins open with Change email, Turn off or on and Send reset
   link, and a row at the bottom to add another (his design). On a phone the table gives way
   to a card per company: status, the two switches and Go in, its logins stacked under it. */

.cl-out { display: none; margin: 0; }
.cl-cards { display: none; }

.chip.off { border-color: #E8C0BC; background: #FBECEA; color: var(--offline); }

/* A login turned off in this company: dimmed, with its Off tag. */
table.grid.clients table.inner tr.isoff td { color: var(--stone); }
table.grid.clients table.inner tr.addrow td { background: #FDFCF9; border-top: 1px solid var(--rule); padding-top: 7px; padding-bottom: 7px; }
table.grid.clients table.inner tr.addrow .inp { width: 100%; min-width: 120px; }
table.grid.clients table.inner tr.addrow select.inp.acc { width: 120px; min-width: 0; }

.cl-links { display: inline-flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.cl-edit { display: inline-flex; gap: 6px; align-items: center; }
.cl-edit .inp { width: 220px; }
.cl-warn { margin: 6px 0 0 auto; padding: 7px 10px; max-width: 520px; background: #FBECEA; border: 1px solid #E8C0BC;
           color: var(--offline); font-size: 11.5px; white-space: normal; text-align: left; }

.cl-supbtns { display: flex; gap: 6px; }
.cl-supbtns form { margin: 0; }

.cl-new { margin-top: 14px; gap: 6px; }
.cl-new strong { font-size: 12px; margin-right: 4px; }
.cl-w170 { width: 170px; }
.cl-w200 { width: 200px; }
.cl-w220 { width: 220px; }

@media (max-width: 760px) {
    /* Clients is outside any company: no menu down the side, and Sign out beside the title. */
    .shell:not(.co) .rail { display: none; }
    .cl-out { display: block; margin-left: auto; }
    .cl-out .link-btn { font-size: 14px; min-height: 40px; color: var(--akari-ink); }

    .cl-desk { display: none; }
    .cl-panel { border: 0; background: none; }
    .cl-panel > .panel-head { padding: 0 2px 8px; border: 0; background: none; }
    .cl-panel > .panel-body { padding: 0; }

    .cl-cards { display: grid; gap: 12px; }
    .cl-cards > * { min-width: 0; }
    .cl-card { display: grid; min-width: 0; background: var(--surface); border: 1px solid var(--rule); font-size: 15px; }
    .cl-card .chip { font-size: 12px; padding: 2px 8px; }

    .cl-h { padding: 12px 14px 6px; }
    .cl-h b { display: block; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
    .cl-h span { font-size: 13.5px; color: var(--stone); }
    .cl-status { padding: 0 14px 10px; font-size: 14px; }
    .cl-status .dot { margin-right: 6px; vertical-align: 1px; }
    .cl-status small { display: block; font-size: 13px; color: var(--stone); }
    .cl-note { padding: 0 14px 10px; font-size: 13px; color: #3F3A2E; overflow-wrap: anywhere; }

    /* A switch, or People, along the card: the label left, the thing to press right. */
    .cl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px;
              padding: 6px 14px; border: 0; border-top: 1px solid var(--soft-rule); background: none;
              font: inherit; font-size: 15px; color: var(--ink); text-align: left; }
    .cl-row .sw { min-height: 44px; }
    .cl-row .sw .track { width: 46px; height: 28px; border-radius: 14px; }
    .cl-row .sw .track::after { top: 3px; left: 3px; width: 22px; height: 22px; }
    .cl-row .sw.on .track::after { left: 21px; }
    .cl-peoplebtn { font-weight: 600; cursor: pointer; }
    .cl-peoplebtn:focus-visible { outline: 2px solid var(--akari); outline-offset: -2px; }
    .cl-chev { color: var(--stone); font-weight: 400; }

    .cl-pad { padding: 0 14px 10px; }
    .cl-cards .confirm { font-size: 13px; }
    .cl-cards .confirm .btn { flex: 1; min-height: 40px; font-size: 14px; }

    .cl-acts { padding: 10px 14px 14px; border-top: 1px solid var(--soft-rule); }
    .cl-acts .cl-supbtns { gap: 8px; }
    .cl-acts .cl-supbtns > *,
    .cl-acts .cl-sup > form { flex: 1; min-width: 0; }
    .cl-acts .ph-btn { width: 100%; }
    .cl-acts .sub { margin-top: 6px; font-size: 13px; color: var(--stone); }

    /* A login: who, its email, when, and its buttons under it. */
    .cl-person { display: grid; gap: 6px; min-width: 0; padding: 12px 14px; border-top: 1px solid var(--soft-rule); }
    .cl-person.isoff { background: var(--paper); }
    .cl-person.isoff .cl-who b,
    .cl-person.isoff .cl-mail { color: var(--stone); }
    .cl-who { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
    .cl-who b { font-weight: 500; overflow-wrap: anywhere; }
    .cl-mail { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere; }
    .cl-person .sub { font-size: 13px; color: var(--stone); }
    .cl-person .inp { width: 100%; padding: 10px; }
    .cl-person .sent { align-self: center; font-size: 14px; color: var(--online); }
    .cl-btns { display: flex; flex-wrap: wrap; gap: 8px; }
    .cl-btns .ph-btn { flex: 1 1 auto; width: auto; min-height: 44px; font-size: 14px; }
    .cl-warn { margin: 0; max-width: none; font-size: 13px; }

    /* New company: one box per line. */
    .cl-new { flex-direction: column; align-items: stretch; }
    .cl-new .inp { width: 100%; }
    .cl-new .btn { min-height: 44px; font-size: 15px; }
}

/* ---------- phones (his phone design, 27/10/2026) ----------
   On a phone the menu gives way to a bar across the top and five tabs along the bottom,
   and the tabs open screens made for a thumb: Today, To fix, People, Roster, More. Big
   enough to press (48px), text a phone won't zoom into (16px), changes in sheets that
   slide up from the bottom. Every other screen still opens from More, as it is on a
   computer. A computer sees none of this. */

:root {
    --akari-ink: #8F560A;
    --soft-rule: #F0ECE2;
    --hold-soft: #FBF1DE;
    --night: #4E5A69;
}

.ph-bar,
.ph-tabs { display: none; }

/* A phone screen on a computer: a column down the middle, as wide as a big phone. */
.ph-page {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 16px;
    line-height: 1.45;
    -webkit-tap-highlight-color: transparent;
}
.ph-page > * { min-width: 0; flex: none; }
.ph-page a { color: inherit; text-decoration: none; }

.ph-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.ph-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph-title h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; }
.ph-title > span { font-size: 14px; color: var(--stone); white-space: nowrap; }
.ph-title .infowrap .info { width: 22px; height: 22px; font-size: 13px; }

.ph-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 -10px; color: var(--akari-ink) !important; font-weight: 500; }

.ph-hero h1 { margin: 0; font-size: 22px; font-weight: 600; }
.ph-hero > span { color: var(--stone); font-size: 14px; }

.ph-note { margin: 0; padding: 0 2px; font-size: 14px; color: var(--stone); }
.ph-hint { margin: 0; font-size: 14px; color: var(--stone); }

/* ---------- the four figures on Today ---------- */

.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-tile { background: var(--surface); border: 1px solid var(--rule); padding: 10px 12px; min-height: 78px; }
.ph-tile .n { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ph-tile .l { font-size: 14px; color: var(--stone); line-height: 1.3; }
.ph-tile.good .n { color: var(--online); }
.ph-tile.warn .n { color: var(--akari-ink); }
.ph-tile.bad .n { color: var(--offline); }

/* ---------- lists ---------- */

.ph-group { background: var(--surface); border: 1px solid var(--rule); }
.ph-ghead {
    padding: 10px 12px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--stone);
    font-weight: 600;
    border-bottom: 1px solid var(--rule);
}

.ph-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--soft-rule);
    background: none;
    font: inherit;
    font-size: 16px;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}
.ph-item:last-child { border-bottom: 0; }
.ph-item:disabled { cursor: default; opacity: 1; }
.ph-item:focus-visible { outline: 2px solid var(--akari); outline-offset: -2px; }
.ph-item-form { margin: 0; }

.ph-av {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--akari-soft);
    color: var(--akari-ink);
    font-size: 13px;
    font-weight: 600;
}

.ph-who { flex: 1; min-width: 0; }
.ph-who b { display: block; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.ph-who > span { font-size: 14px; color: var(--stone); }
.ph-chev { flex: none; color: var(--stone-dim); font-size: 20px; }

.ph-page .chip,
.ph-sheet .chip,
.ph-bar .chip {
    flex: none;
    font-size: 13px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 13px;
    white-space: nowrap;
}

.ph-more {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-top: 1px solid var(--soft-rule);
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--akari-ink);
    cursor: pointer;
}
.ph-more.ph-group { border: 1px solid var(--rule); }

.ph-empty { padding: 28px 16px; text-align: center; color: var(--stone); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ph-empty b { color: var(--ink); font-size: 18px; font-weight: 600; }

.ph-link {
    align-self: flex-start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--akari-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ph-link:disabled { color: var(--stone-dim) !important; cursor: default; }

/* ---------- search, filters, months ---------- */

.ph-search { display: flex; gap: 8px; }
.ph-input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #CFC7B6;
    border-radius: 0;
    background: var(--surface);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
}
.ph-input:focus { outline: 2px solid var(--akari); outline-offset: -1px; border-color: var(--akari); }
.ph-time { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 20px; }

.ph-filter {
    flex: none;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #CFC7B6;
    background: var(--surface);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}
.ph-filter.on { border-color: var(--akari); background: #FFFBF3; color: var(--akari-ink); }

.ph-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    background: var(--surface);
    border: 1px solid var(--rule);
    font-weight: 500;
}
.ph-month button,
.ph-step {
    width: 48px;
    height: 48px;
    flex: none;
    border: 0;
    background: none;
    font-size: 22px;
    color: var(--akari-ink);
    cursor: pointer;
}
.ph-month button:disabled { color: var(--stone-dim); cursor: default; }

.ph-seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ph-seg button {
    flex: none;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--rule);
    border-radius: 20px;
    background: var(--surface);
    font: inherit;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}
.ph-seg button.on { background: var(--ink); border-color: var(--ink); color: #FFF; }

/* ---------- To fix ---------- */

.ph-fix {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--offline);
}
.ph-fix.extra { border-left-color: var(--akari); }
.ph-fix .h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.ph-fix .h b { font-size: 17px; font-weight: 500; }
.ph-fix .h > span { font-size: 14px; color: var(--stone); }
.ph-fix p { margin: 0; font-size: 15px; }
.ph-fix .ph-link { min-height: 36px; font-size: 14px; }
.ph-earlier { width: 100%; text-align: left; font: inherit; cursor: pointer; border-left-color: var(--akari); }

.ph-acts { display: flex; gap: 8px; }
.ph-btn {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    border: 1px solid #CFC7B6;
    background: var(--surface);
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
}
.ph-btn.primary { background: var(--akari); border-color: #BE7714; color: #FFF; }
.ph-btn:active:not(:disabled) { transform: translateY(1px); }
.ph-btn:disabled { opacity: .45; cursor: default; }
.ph-btn:focus-visible { outline: 2px solid var(--akari); outline-offset: 2px; }
.ph-stack { display: grid; gap: 8px; }

/* ---------- a person's month ---------- */

.ph-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--rule); }
.ph-stats div { padding: 8px 4px; text-align: center; border-right: 1px solid var(--soft-rule); min-width: 0; }
.ph-stats div:last-child { border-right: 0; }
.ph-stats b { display: block; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-stats b.bad { color: var(--offline); }
.ph-stats b.good { color: var(--online); }
.ph-stats span { font-size: 12.5px; color: var(--stone); }

.ph-day {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--soft-rule);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ph-day:last-child { border-bottom: 0; }
.ph-day.bad { background: #FFF7F6; }
.ph-day .d { text-align: center; line-height: 1.15; }
.ph-day .d b { display: block; font-size: 18px; font-weight: 600; }
.ph-day .d span { font-size: 11.5px; color: var(--stone); text-transform: uppercase; }
.ph-day .t { font-size: 15px; min-width: 0; }
.ph-day .t small { display: block; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 13.5px; color: var(--stone); }

/* ---------- Roster ---------- */

.ph-week { display: grid; grid-template-columns: 32px repeat(7, minmax(0, 1fr)) 32px; gap: 4px; }
.ph-week button {
    min-height: 54px;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--surface);
    font: inherit;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.ph-week button span { display: block; font-size: 12px; color: var(--stone); }
.ph-week button b { font-size: 17px; font-weight: 500; }
.ph-week button.today b { text-decoration: underline; text-underline-offset: 3px; }
.ph-week button.on { background: var(--ink); border-color: var(--ink); color: #FFF; }
.ph-week button.on span { color: #D9D3C5; }
.ph-week .ph-step { width: auto; border: 0; background: none; font-size: 22px; color: var(--akari-ink); }

.ph-shiftrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 62px;
    padding: 0 12px 0 0;
    border: 0;
    border-bottom: 1px solid var(--soft-rule);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ph-shiftrow .bar { width: 5px; align-self: stretch; background: var(--akari); flex: none; }
.ph-shiftrow .bar.night { background: var(--night); }
.ph-shiftrow .bar.rest { background: var(--stone-dim); }
.ph-shiftrow .s { flex: 1; min-width: 0; }
.ph-shiftrow .s b { display: block; font-size: 16px; font-weight: 500; }
.ph-shiftrow .s span { font-size: 14px; color: var(--stone); }
.ph-sub { padding: 0 0 4px 17px; border-bottom: 1px solid var(--soft-rule); }
.ph-sub .ph-item { min-height: 54px; }

/* ---------- sheets ---------- */

.ph-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(23, 21, 15, .45); }

.ph-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    max-width: 560px;
    max-height: 88vh;
    max-height: 88dvh;
    margin: 0 auto;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    display: grid;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
}
.ph-sheet > * { min-width: 0; }
.ph-grab { width: 40px; height: 4px; border-radius: 3px; background: #D6D0C3; justify-self: center; }
.ph-sheet-head { display: flex; align-items: flex-start; gap: 8px; }
.ph-sheet-head h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 600; }
.ph-x { flex: none; width: 40px; height: 40px; margin: -8px -8px 0 0; border: 0; background: none; font-size: 18px; color: var(--stone); cursor: pointer; }
.ph-subt { margin-top: -10px; font-size: 14px; color: var(--stone); }
.ph-problem { padding: 10px 12px; background: var(--offline-soft, #FBECEA); border: 1px solid #E8C0BC; color: var(--offline); font-size: 15px; }

/* Cancel and Save stay under the thumb however long the sheet is. */
.ph-sheet-acts {
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
    margin: 0 -16px calc(-16px - env(safe-area-inset-bottom, 0px));
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--rule);
}

.ph-field { display: grid; gap: 6px; }
.ph-lab { font-size: 14px; color: var(--stone); }

.ph-choices { display: grid; gap: 8px; }
.ph-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    background: var(--surface);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
.ph-choice.on { border-color: var(--akari); background: #FFFBF3; }
.ph-r { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 2px solid #BDB5A4; border-radius: 50%; }
.ph-choice.on .ph-r { border-color: var(--akari); }
.ph-choice.on .ph-r::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--akari); }
.ph-c { flex: 1; min-width: 0; }
.ph-c b { display: block; font-weight: 500; }
.ph-c > span { font-size: 14px; color: var(--stone); }

.ph-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-quick button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--rule);
    border-radius: 20px;
    background: #FBF9F4;
    font: inherit;
    font-size: 15px;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
.ph-quick button.on { border-color: var(--akari); background: var(--akari-soft); color: var(--akari-ink); }

.ph-toggle { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.ph-box { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 2px solid #BDB5A4; }
.ph-toggle.on .ph-box { background: var(--akari); border-color: var(--akari); }
.ph-toggle.on .ph-box::after { content: "✓"; color: #FFF; font-size: 15px; line-height: 1; }

.ph-says { padding: 10px 12px; background: #FBF8F1; border: 1px solid var(--rule); font-size: 14.5px; }
.ph-says b { font-weight: 600; }
.ph-says.ph-warn { background: #FFF7F6; border-color: #E8C0BC; }

.ph-mini { width: 100%; border-collapse: collapse; font-size: 15px; }
.ph-mini td { padding: 8px 4px; border-bottom: 1px solid var(--soft-rule); vertical-align: top; }
.ph-mini td:last-child { text-align: right; white-space: nowrap; }
.ph-gone { color: var(--offline); }
.ph-ignored td { color: var(--stone); }

.ph-scans { display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; }
.ph-scans span { padding: 2px 8px; border: 1px solid var(--rule); }
.ph-scans span.extra { border-color: #E2C9A0; background: var(--hold-soft); }
.ph-scans span.this { border-color: var(--akari); background: var(--akari-soft); font-weight: 600; }

/* ---------- the message after a change ---------- */

.ph-toast {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 20px;
    z-index: 60;
    max-width: 536px;
    margin: 0 auto;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: #FFF;
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.ph-toast span { flex: 1; min-width: 0; }
.ph-toast button { flex: none; min-height: 40px; padding: 0 6px; border: 0; background: none; font: inherit; font-weight: 600; color: #F4C27C; cursor: pointer; }

/* ---------- the bar across the top, and the tabs along the bottom ---------- */

.ph-co { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; }
.ph-co small { color: var(--stone); font-weight: 400; font-size: 12px; }

.ph-pc {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: 20px;
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: var(--stone);
    white-space: nowrap;
    cursor: pointer;
}
.ph-pc .akari-dot { width: 9px; height: 9px; margin: 0; vertical-align: 0; }

.ph-tab {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    min-height: 54px;
    font-size: 12px;
    color: var(--stone);
    text-decoration: none;
    touch-action: manipulation;
}
.ph-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph-tab.on { color: var(--ink); font-weight: 600; }
.ph-tab.on svg { stroke: var(--akari); }

@media (max-width: 760px) {
    /* The menu on the left gives way to the bars. The Akari admin's Clients, in no company,
       keeps its short menu across the top instead. */
    .shell.co .rail { display: none; }
    .shell:not(.co) { flex-direction: column; }
    .shell:not(.co) .rail { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--rule); }

    .ph-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: sticky;
        top: 0;
        /* Above the tabs, so the Get latest sheet that opens from it covers them too. */
        z-index: 35;
        min-height: 56px;
        padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px;
        background: var(--surface);
        border-bottom: 1px solid var(--rule);
    }

    .ph-tabs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        padding: 2px 2px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 1px solid var(--rule);
    }

    .shell.co .main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .ph-page { padding: 14px 14px 24px; }
    .ph-toast { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
    .supbar { padding: 8px 12px; }

    /* The full screens opened from More: the whole width, wide grids scrolling inside
       their own box, and nothing squeezed into a column a word wide. */
    .toolbar { flex-wrap: wrap; padding: 10px 12px; row-gap: 8px; }
    .body { padding: 12px; max-width: none; overflow: visible; }
    .filters > * { min-width: 0; }
    .split { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subtabs { overflow-x: auto; }
    .heat { width: max-content; }

    /* Boxes at 16px: smaller, and a phone zooms the page in when one is pressed. */
    input.inp,
    select.inp,
    textarea.inp { font-size: 16px; }

    .opt { flex-wrap: wrap; }
    .opt:has(.rounding, .ways) { flex-direction: column; align-items: stretch; }

    /* Lists (Shifts, Employees, Manual Punch): each row a small card, its name first and
       each other column labelled. */
    table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: auto !important; }
    table.stack thead { display: none; }
    table.stack tr { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
    table.stack td { border: none; padding: 0; height: auto; font-size: 12.5px; }
    table.stack td.lead { flex-basis: 100%; font-size: 14px; font-weight: 600; }
    table.stack td.tail { flex-basis: 100%; margin-top: 4px; }
    table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--stone); font-size: 11px; font-family: "IBM Plex Sans", system-ui, sans-serif; }
    .hide-phone { display: none !important; }

    /* A dialog takes the whole screen. */
    .modal-back { padding: 0; align-items: stretch; }
    .modal,
    .modal.wide { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border: none; }
}

@media (max-width: 360px) {
    .ph-pc-l { display: none; }
    .ph-week { grid-template-columns: 24px repeat(7, minmax(0, 1fr)) 24px; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-btn:active:not(:disabled) { transform: none; }
}

/* ---------- Password checklist ----------
   The rule for a new password, line by line, on the set-password page and in Settings >
   Your account. A line goes green once it's met, and red while it isn't once typing starts. */

.pw-rules { list-style: none; margin: -6px 0 14px; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.pw-rules li { display: flex; gap: 7px; align-items: center; color: var(--stone); }
.pw-rules li::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--stone-dim); border-radius: 50%; flex: none; }
.pw-rules li.ok { color: var(--online); }
.pw-rules li.ok::before { border-color: var(--online); background: var(--online); box-shadow: inset 0 0 0 2.5px var(--surface); }
.pw-rules li.no { color: var(--offline); }
.pw-rules li.no::before { border-color: var(--offline); }
.pw-rules.in-panel { margin: 10px 0 0; }