/* Courier — outreach follow-up interface.

   The app is a spine and a sheet of paper: an inked sidebar the brand mark sits on,
   and warm paper on the right where the work happens. Content lives on white sheets
   lifted by shadow rather than boxed in by borders — thirty hairline rectangles is
   what made the first pass read as unfinished. */

:root {
    --paper: #EEF0EA;
    --paper-2: #F6F7F3;
    --card: #FFF;

    --ink: #141C18;
    --ink-2: #55615A;
    --ink-3: #8A948C;
    --line: #E1E4DC;
    --line-2: #EDEFE9;

    --pine: #1E5A47;
    --pine-soft: #E4EEE8;
    --rust: #A8452C;
    --rust-soft: #F8E9E4;
    --amber: #8A6410;
    --amber-soft: #F8EFDD;
    --blue: #1B4F84;
    --blue-soft: #E3ECF6;

    --r: 12px;
    --r-sm: 9px;

    --lift: 0 1px 2px rgba(20, 28, 24, .04), 0 1px 3px rgba(20, 28, 24, .03);
    --lift-2: 0 2px 4px rgba(20, 28, 24, .05), 0 8px 20px -10px rgba(20, 28, 24, .22);
    --lift-3: 0 24px 60px -18px rgba(20, 28, 24, .34), 0 4px 12px rgba(20, 28, 24, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0 }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums }
h1, h2 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 500; letter-spacing: -.025em; line-height: 1.15 }
a { color: inherit }

/* Spine -------------------------------------------------------------------- */

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh }

.side {
    background: var(--ink);
    color: rgba(255, 255, 255, .66);
    padding: 24px 14px 18px;
    display: flex; flex-direction: column; gap: 24px;
    position: sticky; top: 0; height: 100vh;
}

.brand { display: flex; align-items: baseline; gap: 8px; padding-left: 10px; text-decoration: none }
.brand b {
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700;
    letter-spacing: -.035em; color: #F7F8F4;
}
.brand span { font-size: 10px; color: rgba(255, 255, 255, .42); letter-spacing: .14em; text-transform: uppercase }

nav { display: flex; flex-direction: column; gap: 1px }
.nav-i {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-sm);
    color: rgba(255, 255, 255, .62); text-decoration: none;
    border: none; background: none; font: inherit; font-size: 13.5px;
    text-align: left; width: 100%; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.nav-i .lbl { flex: 1 }
.nav-i svg { flex: none; opacity: .55 }
.nav-i:hover { background: rgba(255, 255, 255, .07); color: #fff }
.nav-i:hover svg { opacity: .85 }
.nav-i.on { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 500 }
.nav-i.on svg { opacity: 1 }
.nav-i .cnt {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums;
}
.nav-i.on .cnt { color: rgba(255, 255, 255, .75) }

.side .sec-t { color: rgba(255, 255, 255, .32); padding-left: 10px }

.side select {
    width: 100%; font: inherit; font-size: 12.5px; padding: 7px 9px;
    background: rgba(255, 255, 255, .07); color: #fff;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff88' d='M6 8.5 2.5 5h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
    padding-right: 26px;
}
.side select option { color: var(--ink); background: #fff }
.side select:hover { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2) }
/* The generic field styling is built for white paper — on the inked sidebar it would
   turn this control white-on-white and ring it in a colour that does not belong here. */
.side select:focus,
.side select:focus-visible {
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, .45);
    outline-offset: 1px;
}

.side-foot {
    margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 14px; display: flex; align-items: center; gap: 10px;
}
.side-foot .nm { font-size: 12.5px; font-weight: 500; color: #fff }
.side-foot .rl { font-size: 10.5px; color: rgba(255, 255, 255, .42) }
.ava {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: rgba(255, 255, 255, .1); color: #fff;
    display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.ava.adm { background: var(--pine); color: #fff }

/* Sheet -------------------------------------------------------------------- */

main { padding: 34px 40px 80px; max-width: 1480px; width: 100% }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap }
.head h1 { font-size: 29px }
.head p { color: var(--ink-2); font-size: 13px; margin-top: 5px }
.sec-t { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 11px 2px }

/* Tiles -------------------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; max-width: 860px }
.tile {
    background: var(--card); border-radius: var(--r); padding: 14px 16px;
    box-shadow: var(--lift); position: relative; overflow: hidden;
}
.tile.warn::before, .tile.good::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px }
.tile.warn::before { background: var(--rust) }
.tile.good::before { background: var(--pine) }
.tile .k { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); font-weight: 500 }
.tile .v {
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 500;
    margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.03em;
}
/* A zero is information, not an alarm — only colour it when there is something there. */
.tile.warn .v:not(.zero) { color: var(--rust) }
.tile.good .v:not(.zero) { color: var(--pine) }
.tile .v.zero { color: #C3CAC2 }

/* Queue -------------------------------------------------------------------- */

.rows { display: flex; flex-direction: column; gap: 7px }

/* A labelled break between what is late and what is merely due, so thirty rows stop
   reading as one undifferentiated pile. */
.group-h {
    display: flex; align-items: center; gap: 9px;
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500; margin: 0 0 11px 2px;
}
.group-h.spaced { margin-top: 30px }
.group-h b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--ink-2) }
.group-h .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); flex: none }
.group-h.late, .group-h.late b { color: var(--rust) }
.group-h.late .dot { background: var(--rust) }

.row {
    background: var(--card); border-radius: var(--r); box-shadow: var(--lift);
    padding: 13px 16px; cursor: pointer;
    display: grid; align-items: center; gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto minmax(118px, 148px) minmax(92px, auto) auto;
    transition: box-shadow .14s ease, transform .14s ease;
    position: relative;
}
.row::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    border-radius: var(--r) 0 0 var(--r); background: transparent;
}
.row:hover { box-shadow: var(--lift-2); transform: translateY(-1px) }
.row.late::before { background: var(--rust) }

.row-who { min-width: 0 }
.row .co {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 15.5px;
    letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .who { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.row-rail { display: flex; align-items: center; gap: 8px; flex: none }
.rail-n { font-size: 10.5px; color: var(--ink-3) }

.row-step { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.step-name { font-size: 12.5px; font-weight: 500 }
.row-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.row-sub.li-on { color: var(--blue) }
.row-sub.li-wait { color: var(--amber) }

.row-due { display: flex; flex-direction: column; gap: 2px; text-align: right; flex: none }
.row-act { display: flex; align-items: center; gap: 8px; flex: none }

.due { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; font-weight: 500 }
.due.late { color: var(--rust) }

/* Tags --------------------------------------------------------------------- */

.tag {
    font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
    padding: 3px 9px; border-radius: 6px; white-space: nowrap; display: inline-block;
    background: var(--line-2); color: var(--ink-2);
}
.tag.pine { background: var(--pine-soft); color: var(--pine) }
.tag.rust { background: var(--rust-soft); color: var(--rust) }
.tag.amber { background: var(--amber-soft); color: var(--amber) }
.tag.blue { background: var(--blue-soft); color: var(--blue) }

/* Step rail — one node per step row, never a fixed count -------------------- */

.rail { display: inline-flex; align-items: center; vertical-align: middle }
.node {
    width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 1.5px solid #CBD2C9; background: var(--card);
    display: grid; place-items: center; font-size: 8px; color: transparent;
}
.node.li { border-radius: 3px }
.node.done { background: var(--pine); border-color: var(--pine) }
/* The current step is the one thing the eye must find first. */
.node.now { border-color: var(--ink); border-width: 3px; width: 15px; height: 15px }
.node.late { border-color: var(--rust); background: var(--rust-soft) }
.node.off { opacity: .3; border-style: dashed }
.link { width: 9px; height: 2px; background: #DEE2D9; flex: none }
.link.done { background: var(--pine) }

/* Buttons ------------------------------------------------------------------ */

button.act, a.act {
    font: inherit; font-size: 13px; font-weight: 500;
    padding: 8px 15px; border-radius: var(--r-sm);
    border: 1px solid var(--ink); background: var(--ink); color: #fff;
    cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
    box-shadow: var(--lift); transition: opacity .12s ease, background .12s ease, box-shadow .12s ease;
}
button.act:hover, a.act:hover { opacity: .88; box-shadow: var(--lift-2) }
button.ghost, a.ghost { background: var(--card); color: var(--ink); border-color: var(--line) }
button.ghost:hover, a.ghost:hover { background: #fff; border-color: var(--ink-3); opacity: 1 }
button.win { background: var(--pine); border-color: var(--pine); color: #fff }
button.danger { background: var(--card); color: var(--rust); border-color: #E9CFC7 }
button.danger:hover { background: var(--rust-soft); opacity: 1 }
button[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none }
a.act.sm, button.act.sm { font-size: 12px; padding: 5px 11px }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--pine); outline-offset: 2px;
}

.mini {
    font: inherit; font-size: 11px; padding: 4px 10px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
}
.mini:hover { background: var(--paper-2); color: var(--ink) }
.side-foot .mini { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8) }
.side-foot .mini:hover { background: rgba(255, 255, 255, .16); color: #fff }

.icon-btn {
    width: 31px; height: 31px; border-radius: var(--r-sm); border: 1px solid transparent;
    background: var(--blue-soft); color: var(--blue);
    display: grid; place-items: center; flex: none; text-decoration: none;
    transition: background .12s ease;
}
.icon-btn:hover { background: #D4E3F2 }

/* Tables ------------------------------------------------------------------- */

table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--lift);
}
th {
    text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500; padding: 12px 16px;
    border-bottom: 1px solid var(--line); background: var(--paper-2);
}
td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-size: 13px; vertical-align: middle }
tr:last-child td { border-bottom: none }
tr.clickable { transition: background .1s ease }
tr.clickable:hover td { background: var(--paper-2); cursor: pointer }
td .co-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: -.01em }

/* Selection ---------------------------------------------------------------- */

input[type=checkbox] { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--pine); vertical-align: middle }
tr:has(input[data-courier-select]:checked) td { background: var(--pine-soft) }

.bulk-bar {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    background: var(--ink); color: #fff; border-radius: var(--r);
    padding: 10px 14px; margin-bottom: 11px; box-shadow: var(--lift-2);
}
.bulk-bar .bulk-n { font-size: 13px; font-weight: 500 }
.bulk-bar .mini { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85) }
.bulk-bar .mini:hover { background: rgba(255, 255, 255, .18); color: #fff }
.bulk-bar .act.danger { background: var(--rust); color: #fff; border-color: var(--rust) }
.bulk-bar .act.danger:hover { opacity: .88; background: var(--rust) }

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

.card { background: var(--card); border-radius: var(--r); padding: 20px 22px; margin-bottom: 14px; box-shadow: var(--lift) }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px }
.f label { display: block; font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 6px }

input[type=text], input[type=password], input[type=email], textarea, select {
    width: 100%; font: inherit; font-size: 13.5px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--paper-2); color: var(--ink); resize: vertical;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.f input, .f select { padding: 9px 11px }
textarea { min-height: 180px; line-height: 1.7 }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--pine);
    /* background-color, not the `background` shorthand: the shorthand also resets
       background-image, which would wipe the custom arrow off any styled select. */
    background-color: #fff;
    box-shadow: 0 0 0 3px var(--pine-soft);
}
.err { color: var(--rust); font-size: 12px; margin-top: 6px; display: none }
.f.bad input { border-color: var(--rust); background: #FFFBFA }
.f.bad .err { display: block }

.note { background: var(--paper-2); border-radius: var(--r-sm); padding: 10px 13px; font-size: 12.5px; color: var(--ink-2) }
.note.blue { background: var(--blue-soft); color: var(--blue) }
.note.rust { background: var(--rust-soft); color: var(--rust) }
.note.amber { background: var(--amber-soft); color: var(--amber) }

.fld { margin-bottom: 15px }
.fld-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px }
.fld-h label { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); font-weight: 500 }

/* Step blocks on the contact form ------------------------------------------ */

.step-b { border-radius: var(--r); margin-bottom: 8px; overflow: hidden; background: var(--card); box-shadow: var(--lift) }
.step-h { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; user-select: none }
.step-h:hover { background: var(--paper-2) }
.step-h .num { width: 23px; height: 23px; border-radius: 7px; background: var(--line-2); color: var(--ink-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none }
.step-h .num.li { border-radius: 50% }
.step-h .nm { flex: 1; font-size: 13.5px; font-weight: 500 }
.step-h .dl { font-size: 12px; color: var(--ink-3) }
.step-c { padding: 0 16px 16px; display: none }
.step-b.open .step-c { display: block }
.step-b.filled .num { background: var(--pine); color: #fff }
.step-b.locked .num { background: var(--ink); color: #fff }

/* Modal -------------------------------------------------------------------- */

.veil {
    position: fixed; inset: 0; background: rgba(20, 28, 24, .5);
    display: none; align-items: flex-start; justify-content: center;
    padding: 40px 18px; overflow-y: auto; z-index: 9;
    backdrop-filter: blur(3px);
}
.veil.on { display: flex; animation: courier-fade .14s ease }
@keyframes courier-fade { from { opacity: 0 } to { opacity: 1 } }
.modal {
    background: var(--card); border-radius: 16px; width: 100%; max-width: 720px;
    overflow: hidden; box-shadow: var(--lift-3);
    display: flex; flex-direction: column; max-height: calc(100vh - 80px);
    animation: courier-rise .18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes courier-rise { from { transform: translateY(8px); opacity: .6 } to { transform: none; opacity: 1 } }
/* The header and the action bar stay put while a long message scrolls between them. */
.modal > form { display: flex; flex-direction: column; min-height: 0 }

.m-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: flex-start; flex: none; background: var(--paper-2) }
.m-who { flex: 1; min-width: 0 }
.m-head .co { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em }
.m-person { color: var(--ink-2); font-size: 12.5px; margin-top: 3px }
.m-mail { font-size: 11.5px; color: var(--ink-3); margin-top: 4px }
.m-step { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: none }
.m-rail { display: flex }

.m-body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0 }

/* Confirmation dialog ------------------------------------------------------ */

/* Sits above the send dialog, which may well be what opened it. */
#courierConfirm { z-index: 12; align-items: center }
.confirm-modal { max-width: 430px }
.confirm-modal .m-body { padding: 24px 24px 20px }
.confirm-title {
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 500;
    letter-spacing: -.02em; margin-bottom: 9px;
}
/* pre-line so the paragraph breaks written in the message are honoured — the browser's
   own confirm() printed them as literal characters. */
.confirm-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; white-space: pre-line }
.confirm-modal .m-foot { background: var(--card); border-top: 1px solid var(--line-2) }
.m-foot { padding: 15px 24px; border-top: 1px solid var(--line); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; flex: none; background: var(--paper-2) }
.m-foot .sp { flex: 1 }

/* Sent-message history ----------------------------------------------------- */

.hist { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 18px; overflow: hidden }
.hist-h { padding: 10px 14px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--paper-2); border-bottom: 1px solid var(--line) }
.hi { padding: 11px 14px; cursor: pointer; font-size: 13px; display: flex; gap: 11px; align-items: center; border-bottom: 1px solid var(--line-2); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; font-family: inherit; text-align: left }
.hi:hover { background: var(--paper-2) }
.hi .chev { color: var(--ink-3); font-size: 10px; transition: transform .15s }
.hi.open .chev { transform: rotate(90deg) }
.hi .sj { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hi .dt { color: var(--ink-3); font-size: 11.5px; flex: none }
.hi-c { display: none; padding: 2px 14px 16px; border-bottom: 1px solid var(--line-2); background: var(--paper-2) }
.hi-c.on { display: block }
.hc-lb { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 12px 0 6px }
.hc-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word }
.hc-box.sj { font-weight: 600 }
.hist .hi:last-of-type, .hist .hi-c:last-child { border-bottom: none }

/* Statistics --------------------------------------------------------------- */

.stats-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: start }

.bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 13px }
.bar-row:last-child { margin-bottom: 0 }
.bar-row .lb { width: 118px; font-size: 12.5px; color: var(--ink-2); flex: none; display: flex; align-items: center; gap: 5px }
.bar-row .off-mark { color: var(--ink-3); font-size: 15px; line-height: 1 }
.track { flex: 1; background: var(--line-2); border-radius: 5px; height: 10px; overflow: hidden; min-width: 60px }
.fill { height: 100%; background: var(--pine); border-radius: 5px; min-width: 3px; transition: width .35s cubic-bezier(.2, .8, .3, 1) }
.bar-row .n { width: 34px; text-align: right; font-size: 13.5px; flex: none; font-weight: 600 }
.bar-row .pct { width: 44px; text-align: right; font-size: 11.5px; flex: none; color: var(--ink-3) }
.bar-row .n.zero, .bar-row .pct.zero { color: #C3CAC2; font-weight: 400 }

/* Number tables — figures right-aligned so the eye can compare them down a column. */
.table-scroll { overflow-x: auto; border-radius: var(--r) }
.num-table th.num, .num-table td.num { text-align: right; white-space: nowrap }
.num-table td.num { font-variant-numeric: tabular-nums }
.num-table td.nil { color: #C9CFC7 }
.num-table td.late { color: var(--rust); font-weight: 600 }
.num-table td.good { color: var(--pine); font-weight: 600 }
/* A hairline that separates the per-step columns from the totals beside them. */
.num-table th.divide, .num-table td.divide { border-left: 1px solid var(--line) }
.rate { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--line-2); color: var(--ink-3) }
.rate.good { background: var(--pine-soft); color: var(--pine) }

/* Misc --------------------------------------------------------------------- */

.empty { background: var(--card); border-radius: var(--r); box-shadow: var(--lift); padding: 46px; text-align: center; color: var(--ink-2) }
.empty b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 6px; letter-spacing: -.02em }
/* A utility has to beat whatever it is applied to. Without !important any rule
   declared further down the file with the same specificity wins instead, and the
   element stays on screen while the markup believes it is hidden. */
.hide { display: none !important }

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
    background: var(--ink); color: #fff; font-size: 13px; padding: 11px 20px;
    border-radius: 24px; z-index: 20; opacity: 0; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease; box-shadow: var(--lift-3);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0) }
.toast.bad { background: var(--rust) }

/* Larajax stamps this on an element while its request is in flight. */
[data-ajax-updating], .courier-busy { opacity: .5; pointer-events: none; transition: opacity .1s ease }

/* Login -------------------------------------------------------------------- */

.login {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: var(--ink);
}
/* A band of warmth behind the mark, so the page reads as a doorway rather than a
   form floating on grey. */
.login::before {
    content: ''; position: fixed; inset: 0;
    background:
        radial-gradient(760px 380px at 50% 8%, rgba(30, 90, 71, .34) 0%, transparent 68%),
        radial-gradient(600px 300px at 50% 100%, rgba(168, 69, 44, .12) 0%, transparent 70%);
    pointer-events: none;
}
.login-box { width: 100%; max-width: 384px; position: relative }
.login .brand { justify-content: center; margin-bottom: 8px; padding-left: 0 }
.login .brand b { font-size: 28px }
.login p.sub { text-align: center; color: rgba(255, 255, 255, .5); font-size: 13px; margin-bottom: 28px }
.login .card { padding: 26px; border-radius: 14px; box-shadow: var(--lift-3) }
.login .act { width: 100%; padding: 11px }
.login .remember {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px;
}
.login .remember input { width: 15px; height: 15px }

/* Inline error — shown inside the card, where the user is already looking. */
.form-error {
    display: flex; align-items: flex-start; gap: 9px;
    background: var(--rust-soft); color: var(--rust);
    border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 18px;
    font-size: 12.5px; line-height: 1.5;
    animation: courier-shake .32s cubic-bezier(.36, .07, .19, .97);
}
.form-error svg { flex: none; margin-top: 1px }
@keyframes courier-shake {
    10%, 90% { transform: translateX(-1px) }
    20%, 80% { transform: translateX(2px) }
    30%, 50%, 70% { transform: translateX(-3px) }
    40%, 60% { transform: translateX(3px) }
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1100px) {
    .stats-grid { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr }
    .side { position: static; height: auto; flex-direction: row; align-items: center; gap: 14px; overflow-x: auto; padding: 12px 14px }
    .side nav { flex-direction: row }
    .side .sec-t, .side-foot .rl { display: none }
    .side-foot { margin-top: 0; border-top: 0; padding-top: 0 }
    main { padding: 22px 16px 60px }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none }
    .row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px }
    .row-step, .row-due { display: none }
}