/* =============================================================
   efeque — vanilla CSS
   Light, precise, unhurried. A quiet studio, not a dashboard.
   No framework, no shouting.
   ============================================================= */

:root {
    /* --- Surfaces: cool near-whites, so colour has somewhere to sit --- */
    --canvas:      #f6f7fa;  /* page */
    --surface:     #ffffff;  /* cards */
    --surface-2:   #f2f3f8;  /* subtle fills */
    --line:        #e7e9f0;  /* hairlines */
    --line-2:      #d7dae5;  /* stronger borders */

    /* --- Ink: near-black with a cool cast, never pure grey --- */
    --ink:         #14151a;  /* primary text */
    --ink-2:       #5c6070;  /* secondary text */
    --ink-3:       #8e93a3;  /* tertiary / placeholder */

    /* --- Brand: a single confident indigo, used sparingly --- */
    --brand:       #5b5bd6;
    --brand-deep:  #3a3a9e;
    --brand-soft:  #eeeffc;
    --brand-line:  #dcdef8;

    /* --- Rest & Joy keeps its own warm counterpoint --- */
    --amber:       #c08a3e;
    --amber-deep:  #92621f;
    --amber-soft:  #fdf4e6;
    --amber-line:  #f2e2c6;

    /* --- Type --- */
    --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
            "Helvetica Neue", Arial, sans-serif;

    /* --- Rhythm --- */
    --radius:    16px;
    --radius-sm: 10px;
    --gap:       1.5rem;

    /* Layered, low-opacity shadows read as expensive; single hard ones don't. */
    --shadow:      0 1px 2px rgba(20, 21, 26, .04), 0 6px 20px rgba(20, 21, 26, .05);
    --shadow-lift: 0 4px 12px rgba(20, 21, 26, .07), 0 20px 48px rgba(20, 21, 26, .10);
    --ring:        0 0 0 4px rgba(91, 91, 214, .14);

    /* Unhurried by design: nothing snaps. */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --t:    .42s var(--ease);
    --t-slow: .7s var(--ease);
}

* { box-sizing: border-box; }

/* Author `display` rules beat the UA stylesheet's [hidden] rule, so anything
   we lay out with flex/grid would stay visible when hidden. Restore that. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.3;
}

p { margin: 0; }

.wrap {
    width: min(1180px, 100% - 3rem);
    margin-inline: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--surface);
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------- Header */

.site-header {
    padding: 2.5rem 0 1.75rem;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* A squircle, not a circle — reads as a considered mark rather than a dot. */
/* A flat circle: one solid indigo, no gradient and no bevel. The only
   detail is the counter-form cut out of the middle. */
.brand-mark {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    position: relative;
    transition: transform var(--t-slow), background var(--t-slow);
}

/* The counter-form inside the mark: a gap left deliberately open. */
.brand-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .92);
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
}

/* On a circle only the counter-form reads the rotation, which is the point. */
.site-header:hover .brand-mark {
    transform: rotate(-12deg);
    background: var(--brand-deep);
}

.brand h1 {
    font-size: 1.35rem;
    font-weight: 620;
    letter-spacing: -.028em;
}

.brand-sub {
    color: var(--ink-2);
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: lowercase;
}

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

.btn {
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    padding: .65rem 1.3rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t),
                transform var(--t), box-shadow var(--t), opacity var(--t);
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 3px;
}

.btn-primary {
    background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 21, 26, .1), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn-primary:hover {
    background: linear-gradient(145deg, #6a6ade 0%, #33338f 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(58, 58, 158, .26), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line-2);
}
.btn-ghost:hover {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--brand);
}

.btn-soft {
    background: var(--amber-soft);
    color: #7a5117;
    border-color: #f2e2c6;
}
.btn-soft:hover {
    background: #faecd6;
    box-shadow: 0 5px 14px rgba(192, 138, 62, .16);
}

.btn-endday { padding-inline: 1.6rem; }

/* ---------------------------------------------- Panels */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: var(--gap);
    box-shadow: var(--shadow);
}

.panel-head { margin-bottom: 1.25rem; }

.panel-head h2 {
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.panel-note,
.column-note {
    color: var(--ink-2);
    font-size: .86rem;
    margin-top: .2rem;
}

/* ---------------------------------------------- Fields */

.field {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: 1.25rem;
}

.field > label {
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

input[type="text"],
input[type="time"],
input[type="date"],
input[type="number"] {
    font: inherit;
    color: var(--ink);
    background: #fcfcfe;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    width: 100%;
    /* Safari otherwise renders date/time fields with its own chrome. */
    -webkit-appearance: none;
    appearance: none;
    /* A fixed line-height is what makes a date field the same height as a
       text field — their internal line boxes differ otherwise. */
    line-height: 1.45;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

input[type="text"]::placeholder { color: #a2a7b8; }

input[type="text"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="number"]:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: var(--ring);
}

/* The native calendar/clock button: tone it down to match everything else. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: .45;
    cursor: pointer;
    border-radius: 5px;
    transition: opacity var(--t), background var(--t);
}

/* Keep the inner date/time spinner from adding its own vertical padding. */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: .9;
    background: var(--brand-soft);
}

/* An empty date field should read like a placeholder, not like a value. */
input[type="date"]:not(:focus):invalid,
input[type="date"]:not(:focus)[value=""] { color: var(--ink-3); }

/* Range slider */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 26px;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--line-2) 0 90%, var(--brand-soft) 90% 100%);
}
input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--line-2) 0 90%, var(--brand-soft) 90% 100%);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand);
    box-shadow: 0 2px 6px rgba(20, 21, 26, .12);
    transition: transform var(--t), border-color var(--t), background var(--t);
}
input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand);
    box-shadow: 0 2px 6px rgba(20, 21, 26, .12);
    transition: transform var(--t), border-color var(--t);
}

input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--brand-deep); }

.is-above-line input[type="range"]::-webkit-slider-thumb {
    background: var(--brand);
    border-color: var(--brand-deep);
}
.is-above-line input[type="range"]::-moz-range-thumb {
    background: var(--brand);
    border-color: var(--brand-deep);
}

#excitementOut {
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink-2);
    transition: color var(--t);
}
.is-above-line #excitementOut { color: var(--brand-deep); }

.slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: .74rem;
    color: #8e93a3;
    letter-spacing: .02em;
}
.scale-mark { color: var(--brand-deep); }

.slider-verdict {
    font-size: .84rem;
    color: var(--ink-2);
    margin-top: .45rem;
    transition: color var(--t);
}
.is-above-line .slider-verdict { color: var(--brand-deep); }

/* Checkbox */

.field-check {
    flex-direction: row;
    align-items: flex-start;
    gap: .8rem;
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
}

.field-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: .18rem;
    border: 1.5px solid var(--brand);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    transition: background var(--t), border-color var(--t);
}

.field-check input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px) scale(.4);
    opacity: 0;
    transition: opacity var(--t), transform var(--t);
}

.field-check input[type="checkbox"]:checked {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
}
.field-check input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(45deg) translateY(-1px) scale(1);
}
.field-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 3px;
}

.field-check > label {
    font-size: .88rem;
    color: #2f3142;
    line-height: 1.55;
    cursor: pointer;
}
.field-check strong { color: var(--brand-deep); }

.check-affirm {
    display: block;
    font-size: .78rem;
    color: #5c6070;
    margin-top: .2rem;
}

/* ---------------------------------------------- Rest panel */

.rest-panel { border-left: 3px solid var(--amber); }

.rest-warning {
    background: var(--amber-soft);
    color: #7a5117;
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-size: .88rem;
    margin-bottom: 1.1rem;
    animation: settle var(--t-slow) both;
}

.rest-list {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.rest-list:empty { margin-bottom: 0; }

.rest-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--amber-soft);
    border: 1px solid #f2e2c6;
    border-radius: 999px;
    padding: .45rem .5rem .45rem 1rem;
    font-size: .85rem;
    color: #7a5117;
    animation: settle var(--t-slow) both;
    transition: box-shadow var(--t), transform var(--t);
}
.rest-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 138, 62, .18);
}

.rest-chip time,
.rest-chip .rest-mins {
    color: #a5793a;
    font-size: .78rem;
}

.chip-remove {
    font: inherit;
    line-height: 1;
    background: transparent;
    border: 0;
    color: #b98f6d;
    cursor: pointer;
    padding: .25rem .45rem;
    border-radius: 50%;
    transition: background var(--t), color var(--t);
}
.chip-remove:hover { background: #f2e2c6; color: #7a5117; }

.rest-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .9rem;
}
.rest-form .field { margin-bottom: 0; }
.field-grow  { flex: 1 1 16rem; }
.field-time  { flex: 0 0 8rem; }
.field-mins  { flex: 0 0 7rem; }

/* ---------------------------------------------- Board */

.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-bottom: 3rem;
    align-items: start;
}

.column {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.35rem;
    min-height: 320px;
    box-shadow: var(--shadow);
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}

.column-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.column-head h3 {
    font-size: .96rem;
    letter-spacing: .01em;
}

.head-sub {
    font-weight: 400;
    color: var(--ink-2);
    font-size: .85em;
}

.count {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    background: var(--canvas);
    border-radius: 999px;
    padding: .15rem .65rem;
    transition: background var(--t), color var(--t);
}

.column-active { border-color: #dcdef8; background: #fcfcfe; }
.column-active .count { background: var(--brand-soft); color: var(--brand-deep); }
.column-active.is-full .count { background: #faecd6; color: #92621f; }

.column-done { background: #fafbfe; }

/* Drop feedback */
.column.is-dropping {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(91, 91, 214, .13), var(--shadow);
}
.column.is-blocked {
    border-color: #eed9b4;
    box-shadow: 0 0 0 4px rgba(192, 138, 62, .14), var(--shadow);
}

.stack {
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 90px;
}

.column-total {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--line-2);
    font-size: .8rem;
    color: var(--ink-2);
}

/* ---------------------------------------------- Cards */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .95rem 1rem;
    cursor: grab;
    animation: settle var(--t-slow) both;
    transition: transform var(--t), box-shadow var(--t), opacity var(--t),
                border-color var(--t), background var(--t);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line-2);
}

.card.is-dragging {
    opacity: .45;
    cursor: grabbing;
    transform: scale(.985);
}

.card-title {
    font-size: .93rem;
    line-height: 1.5;
    margin-bottom: .5rem;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .7rem;
}

.tag {
    font-size: .72rem;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: .18rem .6rem;
    background: var(--canvas);
    color: var(--ink-2);
    white-space: nowrap;
}

.tag-yes    { background: var(--brand-soft); color: var(--brand-deep); }
.tag-maybe  { background: var(--amber-soft); color: #92621f; }
.tag-buffer { background: #eeeffc; color: #63705f; }

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.mini {
    font: inherit;
    font-size: .76rem;
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .28rem .75rem;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.mini:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}
.mini-quiet:hover {
    background: var(--amber-soft);
    border-color: #f0dcbe;
    color: #92621f;
}
.mini:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 2px;
}

/* Active card gets a little more presence */
.column-active .card {
    border-left: 3px solid var(--brand);
    background: #ffffff;
}

/* Done cards relax */
.column-done .card {
    background: var(--brand-soft);
    border-color: #dcdef8;
    cursor: default;
}
.column-done .card-title {
    color: #2f3142;
}
.column-done .card:hover { transform: none; box-shadow: var(--shadow); }

.empty-note {
    color: #a2a7b8;
    font-size: .84rem;
    font-style: italic;
    padding: 1.4rem .25rem;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------- Modals */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 21, 26, .32);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 50;
    animation: fade var(--t) both;
}
.overlay[hidden] { display: none; }

.modal {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2rem;
    width: min(480px, 100%);
    box-shadow: 0 24px 70px rgba(20, 21, 26, .22);
    animation: rise var(--t-slow) both;
}

.modal h2 {
    font-size: 1.15rem;
    margin-bottom: .7rem;
}

.modal p { color: var(--ink-2); font-size: .92rem; }
.modal p strong { color: var(--ink); }

.modal-aside {
    font-size: .82rem;
    color: #8e93a3;
    margin-top: .9rem;
    padding-left: .9rem;
    border-left: 2px solid var(--line);
}

.modal form { margin-top: 1.4rem; }

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
}

.buffer-preview {
    background: var(--brand-soft);
    color: var(--brand-deep);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
    transition: background var(--t);
}

/* ---------------------------------------------- Toasts */

.toast-tray {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    z-index: 60;
    pointer-events: none;
}

.toast {
    background: #1c1e28;
    color: #f2f3f8;
    border-radius: 999px;
    padding: .7rem 1.4rem;
    font-size: .87rem;
    box-shadow: 0 12px 30px rgba(20, 21, 26, .2);
    animation: rise var(--t) both;
    max-width: min(38rem, 90vw);
    text-align: center;
}
.toast.is-leaving { animation: fadeOut var(--t) both; }
.toast-warm { background: #92621f; }
.toast-calm { background: var(--brand-deep); }

/* ---------------------------------------------- Footer */

.site-footer {
    text-align: center;
    color: #a2a7b8;
    font-size: .82rem;
    padding: 1rem 0 3.5rem;
    letter-spacing: .03em;
}

/* ==============================================================
   Accounts: sign-in gate, admin console, account settings
   ============================================================== */

.wrap-narrow { width: min(680px, 100% - 3rem); }

/* ---------------------------------------------- Header nav */

.header-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.whoami {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    color: var(--ink-2);
    margin-right: .35rem;
}

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

.btn-sm { padding: .45rem 1rem; font-size: .82rem; }

.btn-block { width: 100%; display: block; margin-top: .5rem; }

/* ---------------------------------------------- Pills */

.pill-admin,
.pill-you,
.pill-ok,
.pill-paused {
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .15rem .55rem;
    white-space: nowrap;
}

.pill-admin  { background: var(--brand-soft); color: var(--brand-deep); }
.pill-you    { background: var(--canvas);      color: var(--ink-2); }
.pill-ok     { background: var(--brand-soft); color: var(--brand-deep); }
.pill-paused { background: var(--amber-soft); color: #92621f; }

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

.muted-line {
    display: block;
    font-size: .76rem;
    color: #8e93a3;
    margin-top: .1rem;
}

.opt { font-weight: 400; color: #8e93a3; }

.field-hint {
    font-size: .78rem;
    color: #8e93a3;
}

/* ---------------------------------------------- Banners */

.banner {
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-size: .88rem;
    margin-bottom: var(--gap);
    animation: settle var(--t-slow) both;
}

.banner-calm { background: var(--brand-soft);  color: var(--brand-deep); }
.banner-warm { background: var(--amber-soft); color: #7a5117; }

.banner-nudge {
    background: var(--amber-soft);
    color: #7a5117;
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-size: .88rem;
    margin-bottom: var(--gap);
}
.banner-nudge a { color: #7a5117; }

/* ---------------------------------------------- The gate (login/setup) */

.gate-body {
    display: flex;
    min-height: 100vh;
    background:
        radial-gradient(60rem 40rem at 50% -10%, #eeeffc 0%, transparent 60%),
        var(--canvas);
}

.gate {
    margin: auto;
    padding: 2rem 1.25rem;
    width: min(28rem, 100%);
}

.gate-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.25rem;
    box-shadow: var(--shadow);
    text-align: center;
    animation: rise var(--t-slow) both;
}

.gate-card h1 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.brand-mark-lg {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 1.15rem;
}

.gate-lede {
    color: var(--ink-2);
    font-size: .89rem;
    margin-bottom: 1.6rem;
}

.gate-card form { text-align: left; }

.gate-error {
    background: var(--amber-soft);
    color: #7a5117;
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    font-size: .86rem;
    margin-bottom: 1.2rem;
    text-align: left;
    animation: settle var(--t) both;
}

.gate-foot {
    margin-top: 1.5rem;
    font-size: .8rem;
    color: #8e93a3;
    line-height: 1.8;
}

a { color: var(--brand-deep); }
a:hover { color: #2b2b7e; }

input[type="password"] {
    font: inherit;
    color: var(--ink);
    background: #fcfcfe;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    width: 100%;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input[type="password"]:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(91, 91, 214, .15);
}

/* ---------------------------------------------- Admin console */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.1rem;
}

.check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: .25rem 0 1.4rem;
}

.check-inline {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    color: var(--ink-2);
    cursor: pointer;
}

.check-inline input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    border: 1.5px solid var(--brand);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    transition: background var(--t), border-color var(--t);
}
.check-inline input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px) scale(.4);
    opacity: 0;
    transition: opacity var(--t), transform var(--t);
}
.check-inline input[type="checkbox"]:checked {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
}
.check-inline input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(45deg) translateY(-1px) scale(1);
}

.table-scroll {
    overflow-x: auto;
    margin: 0 -.35rem;
    padding: 0 .35rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
    min-width: 44rem;
}

.admin-table th {
    text-align: left;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8e93a3;
    font-weight: 500;
    padding: 0 .8rem .7rem;
    border-bottom: 1px solid var(--line);
}

.admin-table td {
    padding: .95rem .8rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.admin-table tr:last-child td { border-bottom: 0; }

.admin-table tbody tr {
    transition: background var(--t);
}
.admin-table tbody tr:hover { background: #ffffff; }

.row-paused { opacity: .6; }

.admin-table .num { font-variant-numeric: tabular-nums; }

/* Per-row disclosure with the management forms */

.row-tools summary {
    list-style: none;
    display: inline-block;
    user-select: none;
}
.row-tools summary::-webkit-details-marker { display: none; }

.row-tools[open] summary {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}

.row-tools-body {
    margin-top: .85rem;
    padding: 1rem;
    background: var(--canvas);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-width: 15rem;
    animation: settle var(--t) both;
}

.tool-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tool-inline { flex-direction: row; }

.tool-label {
    font-size: .78rem;
    color: var(--ink-2);
    line-height: 1.5;
}

.tool-label code {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: .05rem .35rem;
    font-size: .95em;
}

.tool-form input {
    font-size: .84rem;
    padding: .5rem .7rem;
}

.tool-danger {
    border-top: 1px dashed var(--line-2);
    padding-top: .9rem;
}

.admin-form { margin-top: .25rem; }

/* ==============================================================
   Categories, points, delegation, archive
   ============================================================== */

/* ---------------------------------------------- Category accents */

.accent-indigo  { --accent: #3a3a9e; --accent-bg: #eeeffc; --accent-line: #d2d5f6; }
.accent-emerald { --accent: #0f6f57; --accent-bg: #e6f4ee; --accent-line: #cdeadd; }
.accent-amber   { --accent: #92621f; --accent-bg: #fdf4e6; --accent-line: #f2e2c6; }
.accent-rose    { --accent: #b03a6b; --accent-bg: #fdecf3; --accent-line: #f7d6e4; }
.accent-slate   { --accent: #4a5163; --accent-bg: #eef0f5; --accent-line: #dde1ea; }

.tag-cat {
    background: var(--accent-bg, var(--canvas));
    color: var(--accent, var(--ink-2));
}

.cat-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
    background: var(--accent, var(--brand));
}

/* ---------------------------------------------- Nav links */

.navlink {
    font: inherit;
    font-size: .85rem;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .45rem .95rem;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.navlink:hover { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.navlink.is-current { background: var(--brand-soft); color: var(--brand-deep); }
.navlink-quiet { color: #8e93a3; }

/* ---------------------------------------------- Dashboard / scores */

.score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.score-grid-compact { grid-template-columns: repeat(2, 1fr); margin-top: 1.4rem; }

.score {
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    transition: transform var(--t), box-shadow var(--t);
}
.score:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.score-task { background: var(--brand-soft); border-color: #dcdef8; }
.score-rest { background: var(--amber-soft); border-color: #f2e2c6; }

.score-label {
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.score-task .score-label { color: #4a4ac4; }
.score-rest .score-label { color: #a5793a; }

.score-value {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.score-task .score-value { color: var(--brand-deep); }
.score-rest .score-value { color: #92621f; }

.score-sub { font-size: .78rem; color: var(--ink-2); }

.meter {
    height: 5px;
    border-radius: 999px;
    background: rgba(20, 21, 26, .09);
    overflow: hidden;
    margin: .35rem 0 .15rem;
}

.meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--brand);
    width: 0;
    transition: width var(--t-slow);
}
.meter-fill.is-met { background: var(--brand-deep); }
.score-rest .meter-fill { background: var(--amber); }

/* ---------------------------------------------- New card tags */

.tag-points {
    background: #eeeffc;
    color: #3a3a9e;
    font-weight: 500;
}

.tag-due          { background: var(--canvas); color: var(--ink-2); }
.tag-due-later    { background: var(--canvas); color: var(--ink-2); }
.tag-due-soon     { background: var(--amber-soft); color: #92621f; }
.tag-due-today    { background: #faecd6; color: #7a5117; font-weight: 500; }
.tag-due-overdue  { background: #fbe9e9; color: #b03a6b; font-weight: 500; }

.tag-delegated { background: #eef0f5; color: #4a5163; }

/* ---------------------------------------------- Ownership choice */

.field-own {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
}

.field-own legend {
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink-2);
    padding: 0;
    margin-bottom: .55rem;
}

.own-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .7rem;
}

.own-option {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.own-option:hover { border-color: var(--brand); }

.own-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: .15rem;
    border: 1.5px solid var(--brand);
    border-radius: 50%;
    background: var(--surface);
    position: relative;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}
.own-option input[type="radio"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface);
    transform: scale(0);
    transition: transform var(--t);
}
.own-option input[type="radio"]:checked {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
}
.own-option input[type="radio"]:checked::after { transform: scale(1); }
.own-option input[type="radio"]:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }

.own-option:has(input:checked) {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.own-option strong { display: block; font-size: .9rem; color: var(--ink); font-weight: 500; }
.own-option em { display: block; font-style: normal; font-size: .78rem; color: var(--ink-2); margin-top: .1rem; }

/* ---------------------------------------------- Selects */

select {
    font: inherit;
    color: var(--ink);
    background: #fcfcfe;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    width: 100%;
    cursor: pointer;
    /* Matches the inputs, so a row of mixed controls lines up exactly. */
    line-height: 1.45;
    transition: border-color var(--t), box-shadow var(--t);
}
select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.field-cat { flex: 1 1 11rem; }

/* ---------------------------------------------- To Delegate lane */

.column-delegate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid #a9aec4;
    border-radius: var(--radius);
    padding: 1.35rem;
    margin-bottom: var(--gap);
    box-shadow: var(--shadow);
}

.column-delegate .count { background: #eef0f5; color: #4a5163; }

.stack-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    min-height: 0;
}

.column-delegate .card { border-left: 3px solid #a9aec4; }

/* ---------------------------------------------- Rest chip extras */

.rest-cat {
    font-size: .72rem;
    background: var(--accent-bg, var(--surface));
    color: var(--accent, #92621f);
    border-radius: 999px;
    padding: .1rem .55rem;
}

.rest-points {
    font-size: .74rem;
    font-weight: 500;
    color: #92621f;
}

/* ---------------------------------------------- Categories page */

.cat-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.cat-row {
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    transition: border-color var(--t);
}
.cat-row:hover { border-color: var(--line-2); }

.cat-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
}

.cat-name { font-size: .93rem; font-weight: 500; }

.cat-rate {
    font-size: .78rem;
    background: var(--brand-soft);
    color: var(--brand-deep);
    border-radius: 999px;
    padding: .15rem .7rem;
}

.cat-meta { font-size: .76rem; color: #8e93a3; }

.cat-tools { margin-top: .7rem; }
.cat-tools summary { list-style: none; display: inline-block; }
.cat-tools summary::-webkit-details-marker { display: none; }
.cat-tools[open] summary { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }

.cat-tools-body {
    margin-top: .85rem;
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    animation: settle var(--t) both;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0 1rem;
}

.cat-grid .field { margin-bottom: .9rem; }
.cat-grid .field span {
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink-2);
    display: block;
    margin-bottom: .35rem;
}

.cat-delete {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--line-2);
}

.cat-add {
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.goal-form .grid-2 { margin-bottom: .5rem; }

/* ---------------------------------------------- Archive */

.arc-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.arc-views { display: flex; gap: .4rem; }

.arc-view {
    font-size: .84rem;
    color: var(--ink-2);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem 1.1rem;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.arc-view:hover { background: var(--canvas); color: var(--ink); }
.arc-view.is-current {
    background: var(--brand-deep);
    color: #ffffff;
    border-color: var(--brand-deep);
}

.arc-period {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.arc-heading {
    font-size: .98rem;
    font-weight: 600;
    min-width: 12rem;
    text-align: center;
}

.mini.is-disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

a.mini { text-decoration: none; display: inline-block; }

.arc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.arc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1.1rem;
    transition: transform var(--t), border-color var(--t);
}
.arc-item:hover { transform: translateX(3px); border-color: var(--line-2); }

.arc-delegated { background: #f4f5fa; border-color: #e2e5ee; }

.arc-item-main { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.arc-title { font-size: .92rem; }
.arc-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

.arc-points {
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--brand-deep);
    white-space: nowrap;
}
.arc-points-rest { color: #92621f; }

.handoff-panel { border-left: 3px solid var(--brand); }

.handoff-quote {
    font-size: 1.05rem;
    color: #2f3142;
    padding-left: 1rem;
    border-left: 2px solid var(--brand-soft);
}

/* ---------------------------------------------- Charts */

.chart-wrap { margin-top: 1.5rem; overflow-x: auto; }

/* Never stretch: the SVG carries its own width/height, CSS only caps it. */
.chart { width: auto; max-width: 100%; height: auto; display: block; }

.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-goal { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 4 4; }

.chart-tick {
    fill: #a2a7b8;
    font-size: 8px;
    text-anchor: end;
    font-family: var(--font);
}

.chart-label {
    fill: var(--ink-2);
    font-size: 9px;
    text-anchor: middle;
    font-family: var(--font);
}

.bar { transition: opacity var(--t); }
.bar:hover { opacity: .78; }
.bar-task { fill: var(--brand); }
.bar-rest { fill: var(--amber); }

.chart-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    font-size: .78rem;
    color: var(--ink-2);
    margin-top: .9rem;
}

.key {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: -.6rem;
    vertical-align: -1px;
}
.key-task { background: var(--brand); }
.key-rest { background: var(--amber); }
.key-goal { background: transparent; border-top: 2px dashed var(--brand); border-radius: 0; height: 0; }

/* ---------------------------------------------- Rewards */

.reward-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.reward {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.reward:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

/* Earned rewards get the only piece of shine in the whole product. */
.reward.is-earned {
    background:
        linear-gradient(135deg, rgba(192, 138, 62, .10) 0%, rgba(192, 138, 62, 0) 42%),
        var(--surface);
    border-color: var(--amber-line);
}

.reward-main { flex: 1; min-width: 0; }

.reward-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .3rem;
}

.reward-medal {
    font-size: 1rem;
    line-height: 1;
    color: var(--ink-3);
}
.is-earned .reward-medal { color: var(--amber); }

.reward-name {
    font-size: .98rem;
    font-weight: 560;
    letter-spacing: -.01em;
}

.reward-threshold {
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    background: var(--brand-soft);
    color: var(--brand-deep);
    border-radius: 999px;
    padding: .15rem .7rem;
}
.is-earned .reward-threshold { background: var(--amber-soft); color: var(--amber-deep); }

.reward-note {
    font-size: .84rem;
    color: var(--ink-2);
    margin-bottom: .5rem;
}

.reward-sub {
    font-size: .77rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    margin-top: .35rem;
}

.reward .meter { max-width: 26rem; }

.reward-tools { flex: none; }
.reward-tools summary { list-style: none; display: inline-block; }
.reward-tools summary::-webkit-details-marker { display: none; }
.reward-tools[open] summary {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}

.reward-tools-body {
    margin-top: .85rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    width: min(30rem, 70vw);
    animation: settle var(--t) both;
}

/* The reward panel and its banner carry the warm accent, not the indigo. */
.panel-earned { border-top: 2px solid var(--amber-line); }

.banner-earned {
    background: linear-gradient(135deg, var(--amber-soft) 0%, #fffaf1 60%);
    border: 1px solid var(--amber-line);
    color: var(--amber-deep);
    border-radius: var(--radius-sm);
    padding: .95rem 1.15rem;
    font-size: .89rem;
    margin-bottom: var(--gap);
    animation: settle var(--t-slow) both;
}

.score-next { background: var(--brand-soft); border-color: var(--brand-line); }
.score-next .score-label { color: var(--brand-deep); }
.score-next .meter-fill { background: var(--brand); }

.score-value-sm { font-size: 1.05rem; line-height: 1.35; }
.score-of { font-size: .95rem; color: var(--ink-3); font-weight: 500; }

/* Rewards earned, shown in the end-of-day modal */
.verdict-rewards {
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.verdict-reward {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: linear-gradient(135deg, var(--amber-soft) 0%, #fffaf1 60%);
    border: 1px solid var(--amber-line);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    animation: rise var(--t-slow) both;
}

.verdict-reward-medal { font-size: 1.1rem; color: var(--amber); line-height: 1; }
.verdict-reward strong { font-size: .93rem; color: var(--amber-deep); }
.verdict-reward em { font-style: normal; font-size: .78rem; color: var(--ink-3); display: block; }

/* ==============================================================
   Queues, bins, routines, filters, due strip
   ============================================================== */

/* ---------------------------------------------- Board layout */

/* The working board leads: what you are doing, and what you finished. */
.board-work {
    grid-template-columns: 1.15fr 1fr;
}

/* The three deferral queues sit below the filter bar, equal width. */
.board-queues {
    grid-template-columns: repeat(3, 1fr);
}

.lane-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    margin-bottom: var(--gap);
    align-items: start;
}

.bins { margin-top: .5rem; }

.column-queue  { background: var(--surface); }
.column-bin    { background: var(--surface-2); border-style: dashed; }
.column-bin .count { background: var(--surface); color: var(--ink-3); }

.column-delegated { border-left: 3px solid var(--brand); }
.column-delegated .count { background: var(--brand-soft); color: var(--brand-deep); }

/* ---------------------------------------------- Collapsing */

.col-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
.col-toggle:hover .col-chevron { border-color: var(--brand); }
.col-toggle:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }

.col-chevron {
    width: 7px;
    height: 7px;
    flex: none;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform var(--t), border-color var(--t);
}
.is-collapsed .col-chevron { transform: rotate(-45deg); }

/* A collapsed lane must actually shrink — the column min-height would
   otherwise hold it open at full size and save nothing. */
.column.is-collapsed { min-height: 0; }

/* Collapsed lanes keep a shallow strip so a card can still be dropped in. */
.is-collapsed .stack {
    min-height: 0;
    height: 3rem;
    margin-top: .75rem;
    display: grid;
    place-items: center;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.is-collapsed .stack > * { display: none; }
.is-collapsed .stack::after {
    content: attr(data-hidden);
    font-size: .78rem;
    color: var(--ink-3);
}
.is-collapsed .column-note,
.is-collapsed .column-total { display: none; }

/* ---------------------------------------------- Filter bar */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    margin-bottom: var(--gap);
    box-shadow: var(--shadow);
}
.filter-bar .field { margin-bottom: 0; }

input[type="search"] {
    font: inherit;
    color: var(--ink);
    background: #fcfcfe;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: .6rem .9rem;
    width: 100%;
    transition: border-color var(--t), box-shadow var(--t);
}
input[type="search"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.filter-note {
    font-size: .78rem;
    color: var(--ink-3);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------- Due strip */

.due-strip {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--line-2);
    animation: settle var(--t) both;
}

.due-strip-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: .3rem;
    flex: none;
}

.due-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.due-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--amber-soft);
    border: 1px solid var(--amber-line);
    border-radius: 999px;
    padding: .3rem .5rem .3rem .9rem;
    font-size: .83rem;
}
.due-item.due-overdue { background: #fbe9e9; border-color: #f3d3d3; }

.due-link {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: var(--amber-deep);
    cursor: pointer;
    text-align: left;
}
.due-link:hover { text-decoration: underline; }
.due-overdue .due-link { color: #a33b3b; }

.due-when {
    font-size: .72rem;
    background: var(--surface);
    border-radius: 999px;
    padding: .1rem .55rem;
    color: var(--ink-3);
}

/* ---------------------------------------------- Routines */

.routine-panel { border-left: 3px solid var(--brand); }

.routine-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .6rem;
}

.routine {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: background var(--t), border-color var(--t);
}
.routine:hover { border-color: var(--line-2); }

.routine.is-done {
    background: var(--accent-bg, var(--brand-soft));
    border-color: var(--accent-line, var(--brand-line));
}

.routine-label {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .95rem;
    cursor: pointer;
}

.routine-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: .1rem;
    border: 1.5px solid var(--line-2);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    transition: background var(--t), border-color var(--t);
}
.routine-label input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px) scale(.4);
    opacity: 0;
    transition: opacity var(--t), transform var(--t);
}
.routine-label input[type="checkbox"]:checked {
    background: var(--accent, var(--brand));
    border-color: var(--accent, var(--brand));
}
.routine-label input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(45deg) translateY(-1px) scale(1);
}
.routine-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 3px;
}

.routine-body { min-width: 0; }
.routine-name { display: block; font-size: .9rem; }
.routine-meta { display: block; font-size: .74rem; color: var(--ink-3); margin-top: .1rem; }
.is-done .routine-name { color: var(--accent, var(--brand-deep)); }

/* ---------------------------------------------- Who it went to */

.tag-who { background: var(--brand-soft); color: var(--brand-deep); }

/* ---------------------------------------------- Category bars (archive) */

.cbars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cbar {
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) 1fr auto auto;
    align-items: center;
    gap: .8rem;
    font-size: .84rem;
}

.cbar-name {
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cbar-track {
    height: 12px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.cbar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent, var(--brand));
    opacity: .85;
    transition: width var(--t-slow);
}

.cbar-value {
    font-variant-numeric: tabular-nums;
    font-weight: 560;
    color: var(--ink);
    min-width: 3rem;
    text-align: right;
}

.cbar-count { font-size: .74rem; color: var(--ink-3); min-width: 2.2rem; text-align: right; }

/* ---------------------------------------------- Routine stats (archive) */

.routine-stats {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.rstat {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) 1fr auto;
    align-items: center;
    gap: .8rem;
    font-size: .85rem;
}
.rstat-name { color: var(--ink-2); }
.rstat-freq { font-size: .72rem; color: var(--ink-3); display: block; }
.rstat-value { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 5rem; text-align: right; }

/* ---------------------------------------------- Wide modal */

.modal-wide { width: min(560px, 100%); }

/* ---------------------------------------------- Motion */

@keyframes settle {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateY(6px); }
}

@keyframes sway {
    0%, 100% { transform: none; }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.sway { animation: sway .7s var(--ease); }

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

@media (max-width: 940px) {
    .board,
    .board-work,
    .board-queues { grid-template-columns: 1fr; }
    .lane-row { grid-template-columns: 1fr; }
    .column { min-height: 0; }
    .cbar { grid-template-columns: minmax(5rem, 7rem) 1fr auto; }
    .cbar-count { display: none; }
}

@media (max-width: 620px) {
    .wrap,
    .wrap-narrow { width: min(1180px, 100% - 1.75rem); }
    .panel { padding: 1.35rem; }
    .header-inner { align-items: flex-start; }
    .rest-form { gap: .75rem; }
    .field-time, .field-mins { flex: 1 1 8rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .header-nav { width: 100%; }
    .gate-card { padding: 1.6rem; }
    .score-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
    .score-grid-compact { grid-template-columns: 1fr; }
    .arc-controls { flex-direction: column; align-items: stretch; }
    .arc-period { justify-content: space-between; }
    .arc-heading { min-width: 0; font-size: .88rem; }
    .own-choice { grid-template-columns: 1fr; }
    .stack-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Sub-heading inside a panel column (archive breakdown). */
.sub-head {
    font-size: .78rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
    margin-bottom: .9rem;
}