/*
 * The employee and approver screens. The admin screens still use app.css until they are redone.
 */
@font-face {
    font-family: 'Poppins';
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-latin-500-normal-AuPgurU.woff2") format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-latin-600-normal-RV1hfMj.woff2") format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-latin-700-normal-5ePuYxR.woff2") format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/open-sans-latin-400-normal-wXCs6kL.woff2") format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/open-sans-latin-600-normal-wHwATTd.woff2") format('woff2');
}

:root {
    --ink: #004236;
    --green: #00694C;
    --muted: #3F625A;
    --faint: #5F7D75;
    --ground: #F4F7F5;
    --surface: #FFFFFF;
    --line: #DCE7E1;
    --line-soft: #EEF3F0;
    --mint: #E8F0EC;
    --accent: #7AB648;
    --light-green: #D4E8C7;
    --approved: #E3F0D9;
    --on-approved: #24501A;
    --waiting: #FBF5C4;
    --on-waiting: #5E5400;
    --danger: #9B1C1C;
    --danger-ground: #FDE8E8;
    --away: #A9CF8C;
    --on-away: #1E4314;
    --weekend: #F2F5F3;
    --today: #E9F3E1;
    --holiday: #FFF4CC;
    --radius: 20px;
    --radius-sm: 14px;
    --heading: 'Poppins', Arial, sans-serif;
    --body: 'Open Sans', Arial, sans-serif;

    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--heading);
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: clamp(26px, 5vw, 34px);
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 16px;
}

p {
    margin: 0;
}

a {
    color: var(--green);
    font-weight: 600;
}

a:hover {
    color: var(--ink);
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

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

.muted {
    color: var(--muted);
}

.small {
    font-size: 13px;
}

.danger {
    color: var(--danger);
}

.hours {
    font-variant-numeric: tabular-nums;
}

.icon {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Top bar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 32px;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.brand span {
    font-weight: 500;
    color: var(--green);
}

.topnav {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
}

.topnav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.topnav a:hover {
    background: var(--ground);
    color: var(--ink);
}

.topnav a[aria-current='page'] {
    background: var(--mint);
    color: var(--ink);
}

.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--surface);
    font-size: 12px;
    font-weight: 600;
}

.me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-weight: 600;
}

.avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--light-green);
    color: var(--ink);
    font-family: var(--heading);
    font-size: 13px;
    font-weight: 600;
}

.avatar.small {
    width: 30px;
    height: 30px;
    background: var(--mint);
    font-size: 11px;
}

.environment {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--waiting);
    color: var(--on-waiting);
    font-size: 12px;
    font-weight: 600;
}

/* Page */

.page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 32px 64px;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

.page-head .lede {
    margin-top: 6px;
    max-width: 44rem;
    color: var(--muted);
}

.eyebrow {
    margin-bottom: 4px;
    color: var(--muted);
}

.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    text-decoration: none;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.columns > .wide {
    flex: 999 1 560px;
    min-width: 0;
}

.columns > .narrow {
    flex: 1 1 320px;
    min-width: 0;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.columns > .full {
    flex: 1 1 100%;
    min-width: 0;
}

.start {
    align-self: flex-start;
}

/* A short list of a name and a when. */
.pairs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pairs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.stack.tight {
    gap: 12px;
}

/* A label and its figure on one line. */
.line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    font-weight: 600;
}

.big-icon .icon {
    width: 40px;
    height: 40px;
    color: var(--accent);
}

/* Cards */

.card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.card.dark {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--surface);
}

.card.dark h2 {
    color: var(--surface);
}

.card.dark .muted {
    color: var(--light-green);
}

.card .label {
    font-family: var(--heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
}

/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--surface);
    font: 600 15px/1 var(--heading);
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    border-color: var(--green);
    background: var(--green);
    color: var(--surface);
}

.button.secondary {
    background: var(--surface);
    color: var(--ink);
}

.button.secondary:hover {
    background: var(--mint);
    color: var(--ink);
}

.button.quiet {
    border-color: transparent;
    background: transparent;
    color: var(--ink);
}

.button.quiet:hover {
    background: var(--mint);
}

.button.danger {
    border-color: var(--danger);
    background: var(--surface);
    color: var(--danger);
}

.button.danger:hover {
    background: var(--danger-ground);
}

.button.wide {
    width: 100%;
}

.button.small {
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
}

.card.dark .button {
    border-color: var(--surface);
    background: var(--surface);
    color: var(--ink);
}

.round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
}

.round:hover {
    background: var(--mint);
}

.pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager strong {
    padding: 0 8px;
    font-family: var(--heading);
    font-weight: 600;
}

/* A choice that is a link per option, such as the kind of leave. */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--ground);
}

.segmented a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
}

.segmented a[aria-current='true'] {
    background: var(--surface);
    box-shadow: 0 1px 3px rgb(0 66 54 / 15%);
    color: var(--ink);
}

/* Status chips: the icon tells them apart without their colour. */

.status {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.status .icon {
    width: 14px;
    height: 14px;
}

.status.done {
    background: var(--approved);
    color: var(--on-approved);
}

.status.waiting {
    background: var(--waiting);
    color: var(--on-waiting);
}

.status.refused {
    background: var(--danger-ground);
    color: var(--danger);
}

/* Messages */

.msg,
.flash,
.note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--mint);
}

.msg-warning,
.flash-warning {
    background: var(--waiting);
    color: var(--on-waiting);
}

.msg-error,
.flash-error,
.flash-danger {
    background: var(--danger-ground);
    color: var(--danger);
}

.flash-success {
    background: var(--approved);
    color: var(--on-approved);
}

.messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Forms */

label,
.field-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--heading);
    font-size: 14px;
    font-weight: 600;
}

input:not([type='checkbox'], [type='radio'], [type='hidden']),
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font: 15px/1.4 var(--body);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 0;
}

textarea {
    min-height: 80px;
    resize: vertical;
    field-sizing: content;
}

.decide textarea {
    min-height: 48px;
    max-height: 240px;
}

.form-group {
    min-width: 0;
}

.fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.fields > .form-group {
    flex: 1 1 12rem;
}

.errors {
    display: block;
    margin-top: 6px;
}

.errors .msg,
.text-danger {
    display: block;
    padding: 0;
    background: none;
    color: var(--danger);
    font-weight: 600;
}

.help {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

/* Lists of requests and sick reports */

.items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 16px 0;
    border-top: 1px solid var(--line-soft);
}

.item:first-child {
    border-top: 0;
}

.item .what {
    flex: 1 1 240px;
    min-width: 0;
}

.item .what p {
    color: var(--muted);
}

/* The whole item opens it, not only its dates. */
.item .open::after {
    content: '';
    position: absolute;
    inset: 0;
}

.item:hover {
    background: linear-gradient(90deg, transparent, var(--ground) 8%, var(--ground) 92%, transparent);
}

.date-tile {
    flex: none;
    width: 64px;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    background: var(--ground);
    text-align: center;
}

.date-tile .month {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.date-tile .day {
    font-family: var(--heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.empty {
    color: var(--muted);
}

/* Balance */

.big {
    font-family: var(--heading);
    font-size: clamp(44px, 9vw, 64px);
    font-weight: 600;
    line-height: 1;
}

.big small {
    font-size: 0.45em;
    font-weight: 500;
}

.balance {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
}

.balance > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    flex: 1 1 300px;
    gap: 12px;
    align-self: center;
    min-width: 0;
    max-width: 480px;
    margin: 0;
}

/* The hours come first in the text and stand out on top. */
.tile {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--ground);
}

.tile dt {
    font-family: var(--heading);
    font-size: 20px;
    font-weight: 600;
}

.tile dd {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.tile.urgent {
    background: var(--waiting);
}

.tile.urgent dd {
    color: var(--on-waiting);
}

.tile.gone {
    opacity: 0.7;
}

details.more {
    min-width: 0;
}

details.more summary {
    width: fit-content;
    color: var(--green);
    font-weight: 600;
    cursor: pointer;
}

details.more[open] summary {
    margin-bottom: 12px;
}

/* Tables */

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

table.plain {
    width: 100%;
    border-collapse: collapse;
}

table.plain th,
table.plain td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}

table.plain th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

table.plain .hours {
    text-align: right;
    white-space: nowrap;
}

table.plain tr.muted td {
    color: var(--muted);
}

table.plain tfoot th,
table.plain tfoot td {
    border-bottom: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

/* Two columns of figures, such as the balance before and after a request. */
.sums {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 6px 0;
    margin: 0;
}

.sums dt,
.sums dd {
    margin: 0;
}

.sums dd {
    padding-left: 24px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sums .total {
    padding-top: 6px;
    border-top: 1px solid var(--line);
    font-weight: 600;
}

.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 0;
}

.facts dt {
    color: var(--muted);
}

.facts dd {
    margin: 0;
}

/* The days of a request, each with its hours or why it costs none. */
.day-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.day-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    min-height: 52px;
    padding: 6px 0;
    border-top: 1px solid var(--line-soft);
}

.day-list li:first-child {
    border-top: 0;
}

.day-list .free {
    color: var(--muted);
}

.day-list input {
    width: 5.5rem;
    text-align: right;
}

.day-list .form-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Plan leave: a month to pick the first and the last day in */

.months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px 32px;
}

.month h2 {
    margin-bottom: 12px;
    font-size: 16px;
}

.weekdays,
.month-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px 0;
    text-align: center;
}

.weekdays {
    margin-bottom: 4px;
    color: var(--faint);
    font-size: 12px;
    font-weight: 600;
}

.month-days a,
.month-days span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.month-days a::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 12px;
}

.month-days {
    isolation: isolate;
}

.month-days a:hover::before {
    background: var(--mint);
}

.month-days .rest {
    color: var(--faint);
    font-weight: 400;
}

.month-days .holiday::before {
    background: var(--holiday);
}

.month-days .planned::after {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

.month-days .planned.waiting::after {
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--on-waiting);
}

.month-days .today {
    text-decoration: underline 2px var(--accent);
    text-underline-offset: 4px;
}

.month-days .in-range::before {
    inset: 2px 0;
    border-radius: 0;
    background: var(--light-green);
}

.month-days .first::before,
.month-days .last::before {
    inset: 2px;
    border-radius: 12px;
    background: var(--ink);
}

.month-days .first,
.month-days .last {
    color: var(--surface);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: var(--muted);
    font-size: 13px;
}

.legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legend i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--swatch);
}

.legend i.pick {
    background: var(--ink);
}

.legend i.holiday {
    background: var(--holiday);
}

.legend i.bar {
    width: 22px;
    height: 10px;
    border-radius: 999px;
    background: var(--bar);
}

.legend i.bar.own {
    background: var(--ink);
}

.legend i.rest {
    background: var(--weekend);
    box-shadow: inset 0 0 0 1px var(--line);
}

.legend i.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.legend i.waiting {
    border: 1.5px dashed var(--on-waiting);
    background: repeating-linear-gradient(45deg, var(--surface) 0 3px, var(--away) 3px 6px);
}

/* Team calendar: leave shows as calm bars, weekends and today as tinted columns. */

.calendar-wrap {
    max-width: 100%;
    overflow-x: auto;
}

/* Wide enough for a month, while the few days of a request do not stretch into long bars. */
table.calendar {
    width: min(100%, calc(190px + var(--days, 31) * 64px));
    min-width: calc(190px + var(--days, 31) * 28px);
    border-collapse: collapse;
    table-layout: fixed;
}

table.calendar .name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 190px;
    padding: 0 12px 0 0;
    overflow: hidden;
    background: var(--surface);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.calendar tbody th.name {
    font-weight: 600;
}

table.calendar .name a,
table.calendar .name span.person {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

table.calendar .name .text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.calendar .name a:hover {
    text-decoration: underline;
}

table.calendar thead th {
    padding: 4px 0 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

table.calendar thead th.weekend {
    color: var(--faint);
    font-weight: 400;
}

table.calendar thead th.today span {
    display: block;
    margin: 0 2px;
    padding: 2px 0;
    border-radius: 8px;
    background: var(--ink);
    color: var(--surface);
}

table.calendar tbody tr {
    border-top: 1px solid var(--line-soft);
}

table.calendar tbody td {
    position: relative;
    height: 52px;
    padding: 0;
}

table.calendar td.weekend,
table.calendar td.off,
table.calendar td.out {
    background: var(--weekend);
}

table.calendar td.holiday {
    background: var(--holiday);
}

table.calendar td.today {
    background: var(--today);
}

/* A run of days away joins into one bar, rounded at its ends. */
table.calendar td.away::before {
    content: '';
    position: absolute;
    inset: 13px 0;
    background: var(--bar);
}

table.calendar td.start::before {
    left: 3px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

table.calendar td.end::before {
    right: 3px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

table.calendar td.waiting::before {
    border: 1.5px dashed var(--on-waiting);
    background: repeating-linear-gradient(45deg, var(--surface) 0 3px, var(--bar) 3px 6px);
}

table.calendar td.waiting:not(.start)::before {
    border-left: 0;
}

table.calendar td.waiting:not(.end)::before {
    border-right: 0;
}

.absent,
.vacation {
    --bar: var(--away);
}

.parental {
    --bar: #8CC7BA;
}

.special {
    --bar: #E6DC8A;
}

.sick {
    --bar: #EFB8AC;
}

table.calendar tr.own td.away:not(.sick)::before {
    --bar: var(--ink);
}

table.calendar tr.own td.waiting::before {
    --bar: var(--muted);
}

.calendar-empty {
    padding: 16px 0;
    color: var(--muted);
}

/* A request: its days, who else is away, the decision and the history. */

.request-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    grid-template-areas:
        'main side'
        'away side'
        'history side';
    gap: 24px;
    align-items: start;
}

.area-main {
    grid-area: main;
}

.area-away {
    grid-area: away;
}

.area-side {
    grid-area: side;
}

.area-history {
    grid-area: history;
}

select.compact {
    width: auto;
}

/* A week of one request, for the approver */

.week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.week div {
    padding: 8px 0;
    border-radius: 12px;
    background: var(--ground);
    text-align: center;
}

.week .name {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.week .number {
    display: block;
    font-family: var(--heading);
    font-weight: 600;
}

.week .asked {
    background: var(--ink);
    color: var(--surface);
}

.week .asked .name {
    color: var(--light-green);
}

/* Approvals */

.request-card .who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.request-card .who > div {
    flex: 1 1 220px;
    min-width: 0;
}

.request-card .who p {
    color: var(--muted);
}

.request-card .split {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
}

.request-card .split > * {
    flex: 1 1 260px;
    min-width: 0;
}

blockquote {
    margin: 0;
    padding: 12px 16px;
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--ground);
    white-space: pre-line;
}

.decide {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.decide details summary {
    list-style: none;
}

.decide details summary::-webkit-details-marker {
    display: none;
}

.decide details[open] summary {
    display: none;
}

.decide details > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* History */

.timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--line);
    list-style: none;
}

.timeline li {
    position: relative;
}

.timeline li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: -24px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent);
}

.timeline blockquote {
    margin-top: 6px;
}

/* Dialogs */

.dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 28px;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 20px 60px rgb(0 66 54 / 25%);
}

.dialog::backdrop {
    background: rgb(0 66 54 / 30%);
}

.dialog form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sign in */

.sign-in {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 16px;
}

.sign-in .card {
    width: min(460px, 100%);
}

.sign-in .brand {
    margin-bottom: 8px;
    font-size: 26px;
}

.narrow-card {
    max-width: 640px;
}

@media (max-width: 900px) {
    /* On a phone the approver sees who else is away before deciding, and the history last. */
    .request-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'main'
            'away'
            'side'
            'history';
    }
}

@media (max-width: 720px) {
    table.calendar .name {
        width: 130px;
    }

    table.calendar {
        min-width: calc(130px + var(--days, 31) * 28px);
    }

    table.calendar .avatar {
        display: none;
    }

    body {
        font-size: 16px;
    }

    .topbar-inner {
        padding: 8px 16px;
    }

    .topnav a {
        padding: 0 12px;
    }

    .topnav {
        order: 3;
        flex-basis: 100%;
        margin: 0 -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .me .name {
        display: none;
    }

    .page {
        gap: 20px;
        padding: 24px 16px 96px;
    }

    .card {
        padding: 20px;
    }

    .page-head .actions {
        width: 100%;
    }

    .page-head .actions .button {
        flex: 1 1 auto;
    }

    /* The button that sends stays in reach of the thumb. */
    .sticky-action {
        position: sticky;
        bottom: 0;
        margin: 0 -20px -20px;
        padding: 12px 20px 20px;
        border-radius: 0 0 var(--radius) var(--radius);
        background: var(--surface);
    }

    .sticky-action .button {
        width: 100%;
    }

    .item .date-tile {
        width: 56px;
    }

    /* One month at a time, so the request comes into view sooner. */
    .month + .month {
        display: none;
    }

    .segmented {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .segmented a {
        white-space: nowrap;
    }
}