/* Palette taken from the moai logo: its weathered blue-grey stone, near-black
   shadows, and the red heart. Red is kept for the heart, severity and anything
   destructive; everyday actions use the dark slate. */
:root {
    --ink: #1c2830;
    --muted: #56656f;
    --line: #cfdbe2;
    --accent: #c8102e;
    --primary: #2e4452;
    --stone: #a6bcc9;
    --stone-tint: #dde7ed;
    --bg: #eef3f6;
    --surface: #ffffff;
    --grid: #e6edf1;
    --series: #5d7d92;
    --series-active: #7f9db1;
    --series-prior: #bccbd5;
    --severity: #c8102e;
    --header: #1c2830;
    --header-ink: #e9f0f4;
    --header-muted: #b6c6d0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--header);
    color: var(--header-ink);
}

.brand { display: inline-flex; margin-right: auto; align-items: center; gap: .55rem; font-weight: 600; color: var(--header-ink); text-decoration: none; }

.brand img { display: block; flex: none; }

.who { color: var(--header-muted); font-size: .9rem; }

a.who:hover, a.who:focus-visible { color: var(--header-ink); }

main { max-width: 46rem; margin: 0 auto; padding: 1.5rem; }

h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; margin-top: 2.5rem; }

.log-form { display: grid; gap: .35rem; max-width: 30rem; }
.log-form label { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

.time-choice { display: grid; gap: .4rem; margin: .5rem 0 0; padding: 0; border: 0; min-width: 0; }

.time-choice legend { margin-bottom: .35rem; padding: 0; color: var(--muted); font-size: .85rem; }

/* Each option is a full-width 44px row, so the whole row is the tap target. */
.log-form .choice {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    margin-top: 0;
    padding: .4rem .75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-size: .95rem;
    cursor: pointer;
}

.log-form .choice:has(input:checked) { border-color: var(--ink); }

.choice input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; accent-color: var(--accent); }

.choice-hint { color: var(--muted); font-size: .85rem; }

.custom-time { display: grid; gap: .35rem; }

.status-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    overflow: hidden;
    border: 1px solid #b7dcb8;
    border-radius: 6px;
    background: #f2f9f2;
    color: var(--ink);
    font-size: .9rem;
    /* Height collapses with the fade, so the form does not jump when it goes. */
    max-height: 6rem;
    transition: opacity .35s ease, max-height .35s ease, margin .35s ease,
                padding .35s ease, border-width .35s ease;
}

.status-banner.is-leaving {
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .status-banner { transition: none; }
}

.status-banner span[aria-hidden] { color: #0ca30c; font-weight: 600; }

.save-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }

.save-button[disabled] { cursor: progress; opacity: .9; }

.save-button .spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
}

.save-button[aria-busy="true"] .spinner { display: inline-block; animation: spin .7s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .save-button[aria-busy="true"] .spinner { animation: none; }
}

.optional { font-weight: 400; opacity: .8; }

/* Support pages */
.support { max-width: 34rem; }

.support-amounts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }

.support-amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.5rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.support-amount:hover,
.support-amount:focus-visible { filter: brightness(1.1); }

.support-fineprint,
.support-unavailable { color: var(--muted); font-size: .85rem; }

.support-back { color: var(--accent); font-weight: 600; }

.footer-support { display: inline-block; margin-top: .5rem; color: var(--muted); }

/* The "chip in" strip under the header. It starts below the sign-in bar and,
   once that scrolls away, stays pinned to the top of the viewport. Sticky (not
   fixed) keeps it in the flow, so it never covers content; dismissing it frees
   the space. */
.chip-in {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid #c3d2db;
    background: var(--stone-tint);
    font-size: .85rem;
}

.chip-in-text { flex: 1; min-width: 0; line-height: 1.5; }

/* The name leads, the ask follows underneath: a long name then has a line of
   its own instead of pushing the strip around. */
.chip-in-name { display: block; color: var(--ink); font-weight: 600; }

.chip-in-ask { color: var(--muted); }

.chip-in-heart { color: var(--accent); }

.chip-in-cta {
    flex: none;
    padding: .35rem .6rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.chip-in-cta:hover,
.chip-in-cta:focus-visible { text-decoration: underline; }

.activity-tag {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

.quick-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin: .15rem 0 .2rem; }

/* Overrides the page's filled submit-button style: these are choices, not actions. */
.log-form .quick-pick {
    max-width: 100%;
    min-height: 40px;
    margin: 0;
    padding: .3rem .8rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-form .quick-pick:hover { border-color: var(--muted); }

.log-form .quick-pick[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* The time field only matters for an earlier episode. Hidden with CSS alone so
   switching works without JavaScript; a browser without :has() just shows it. */
.time-choice:has(input[value="now"]:checked) .custom-time { display: none; }

input,
select {
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    background: #fff;
}

button {
    margin-top: 1rem;
    padding: .55rem 1rem;
    border: 0;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

button.provider { display: block; margin-top: .75rem; }

button.link {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--header-muted);
    text-decoration: underline;
}

/* Delete is destructive and sits beside other rows, so give it a real target
   rather than a text link: 44px is the minimum both Apple and Google advise. */
button.danger {
    margin: 0;
    min-height: 44px;
    padding: .4rem .75rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--accent);
    font-size: .85rem;
}

button.danger:hover,
button.danger:focus-visible {
    border-color: var(--accent);
    background: #fff;
}

.severity { white-space: nowrap; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
th, td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cell-when time { white-space: nowrap; }
.cell-actions { text-align: right; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.error { color: var(--accent); }
.error ul { margin: .5rem 0; padding-left: 1.2rem; }

footer {
    max-width: 46rem;
    margin: 2rem auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
}


/*
    Narrow screens. Four columns in ~375px leaves the date wrapping over four
    lines, so below this width each row becomes a card: date and severity on one
    line, the note beneath, the delete control on its own row where it is hard to
    hit by accident.
*/
@media (max-width: 600px) {
    main, footer { padding: 1rem; }

    header { gap: .6rem; padding: .75rem 1rem; }

    /* The badge and Sign out must fit beside the logo, and the header may not
       wrap; the app name is the one thing here that can go. */
    .brand span { display: none; }

    .episodes-table, .episodes-table tbody, .episodes-table tr, .episodes-table td { display: block; width: 100%; }

    .episodes-table thead { display: none; }

    .episodes-table tr {
        display: grid;
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "when severity actions"
            "what what     what";
        align-items: center;
        gap: .35rem .75rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--line);
    }

    .episodes-table td { padding: 0; border: 0; }

    .cell-when     { grid-area: when; color: var(--muted); font-size: .9rem; }
    .cell-severity { grid-area: severity; font-weight: 600; }
    .cell-what     { grid-area: what; }
    .cell-actions  { grid-area: actions; justify-self: end; }
}


/* History: view toggle and date range */
.history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 2.5rem;
}

.history-head h2 { margin: 0; }

.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.segmented a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 .85rem;
    border-radius: 6px;
    color: var(--muted);
    font-size: .9rem;
    text-decoration: none;
}

.segmented a:hover { background: rgba(31, 35, 40, .05); color: var(--ink); }

.segmented a[aria-current] { background: var(--primary); color: #fff; font-weight: 600; }

.chart-ranges { margin: .75rem 0; }

/* Paging */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1rem;
}

.pager a,
.pager-disabled {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .9rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-size: .9rem;
    text-decoration: none;
}

.pager a:hover,
.pager a:focus-visible { border-color: var(--accent); }

.pager-disabled { color: var(--muted); opacity: .45; }

.pager-status { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

.pager-top { margin: .75rem 0 .25rem; }

/* Chart */
.chart-card {
    position: relative;
    padding: .75rem .75rem .5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.chart-summary { margin: 0 0 .25rem; color: var(--muted); font-size: .9rem; }

/* Fixed heights keep loading from shifting the page; the charts set their own below. */
.chart-plot { position: relative; min-height: 344px; }

.chart-plot:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; border-radius: 4px; }

/* Refetch keeps the frame: the previous render stays, dimmed. */
.chart-card.is-loading .chart-plot { opacity: .45; transition: opacity .15s; }

.chart-svg { display: block; }

.chart-svg text { font: 12px system-ui, -apple-system, "Segoe UI", sans-serif; }

.chart-svg .chart-title { fill: var(--ink); font-size: 13px; font-weight: 600; }

.chart-tick { fill: var(--muted); font-variant-numeric: tabular-nums; }

.chart-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }

.chart-axis { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }

.chart-bar { fill: var(--series); }

.chart-bar.is-active { fill: var(--series-active); }

/* The 2px ring in the surface colour keeps overlapping dots legible. */
.chart-dot { fill: var(--severity); stroke: var(--surface); stroke-width: 2; }

.chart-highlight { fill: rgba(31, 35, 40, .05); }

.chart-hit { fill: transparent; }

.chart-tooltip {
    position: absolute;
    z-index: 1;
    padding: .45rem .6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 4px 12px rgba(31, 35, 40, .08);
    font-size: .85rem;
    white-space: nowrap;
    pointer-events: none;
}

.chart-tooltip-date { margin-bottom: .2rem; color: var(--muted); font-size: .8rem; }

.chart-tooltip-row { display: flex; align-items: center; gap: .35rem; color: var(--muted); }

/* Values lead; labels follow in muted ink. */
.chart-tooltip-row strong { color: var(--ink); font-weight: 600; }

.chart-key { flex: none; width: 12px; height: 2px; background: var(--series); }

.chart-key-severity { height: 8px; width: 8px; border-radius: 50%; background: var(--severity); }

.chart-key-prior { background: var(--series-prior); }

.chart-table { margin-top: .5rem; }

.chart-table summary { min-height: 32px; color: var(--muted); font-size: .9rem; cursor: pointer; }

.chart-table th:not(:first-child),
.chart-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Charts: by day, then week over week */
.chart-option { margin-top: .75rem; }

.chart-card h3 { margin: 0 0 .5rem; font-size: 1rem; }

.chart-card .chart-ranges { margin: 0 0 .5rem; }

.segmented button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding: 0 .85rem;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: .9rem;
}

.segmented button:hover { background: rgba(31, 35, 40, .05); color: var(--ink); }

.segmented button[aria-pressed="true"] { background: var(--primary); color: #fff; font-weight: 600; }

/* Fixed heights, matching weekly-charts.js, so loading never shifts the page. */
.chart-plot-short { min-height: 260px; }

.chart-plot-wow { min-height: 214px; }

.chart-trend { min-height: 158px; margin-top: .75rem; }

.chart-bar-prior { fill: var(--series-prior); }

.chart-svg .is-future { opacity: .45; }

.chart-svg .is-today { fill: var(--ink); font-weight: 600; }

.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 0; color: var(--muted); font-size: .8rem; }

.chart-key-block { width: 12px; height: 12px; border-radius: 3px; background: var(--series); }

.chart-key-block.chart-key-prior { background: var(--series-prior); }

.chart-key-block + .chart-key-block { margin-left: .5rem; }

.severity-scale { display: inline-flex; align-items: center; gap: .3rem; }

.severity-scale i { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: linear-gradient(to right, #bccbd5, #c8102e); }

/* Week-over-week lines: the current week in heart red, last week in slate and
   the week before in stone blue. Line weight is a second cue besides colour. */
.wow-line path { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wow-line circle { stroke: var(--surface); stroke-width: 1.5; }
.wow-line.wk-0 path { stroke-width: 3; }

.wk-0 { --wk: #c8102e; }
.wk-1 { --wk: #2e4452; }
.wk-2 { --wk: #5d7d92; }

.wow-line path { stroke: var(--wk); }
.wow-line circle { fill: var(--wk); }

.wow-results h4 { margin: 0 0 .25rem; font-size: .9rem; }

.wow-results-list { margin: 0 0 .6rem; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; }

/* One week per line; each is a toggle that shows only that week. */
.wow-legend { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: .4rem; }

.wow-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 36px;
    margin: 0;
    padding: 0 .6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--ink);
    font-size: .85rem;
    text-align: left;
}

.wow-legend-item:hover { background: rgba(31, 35, 40, .05); }

.wow-legend-item[aria-pressed="true"] { border-color: var(--line); background: var(--surface); font-weight: 600; }

.wow-legend-item.is-muted { opacity: .45; }
.wow-key { width: 16px; height: 3px; border-radius: 2px; background: var(--wk); }

/* Profile */
.profile-section { margin-top: 2rem; }

.profile-section h2 { margin: 0 0 .35rem; }

.profile-note { margin: .15rem 0; color: var(--muted); font-size: .85rem; }

.profile-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: .5rem 0 0; }

.profile-facts dt { color: var(--muted); font-size: .85rem; }

.profile-facts dd { margin: 0; }

.profile-downloads { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }

/* A download is a real link, styled as a target big enough to tap. */
.download {
    display: grid;
    gap: .1rem;
    min-height: 44px;
    padding: .5rem .85rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-size: .95rem;
    text-decoration: none;
}

.download:hover, .download:focus-visible { border-color: var(--primary); }

.profile-donations { margin: .35rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; }

/* Admin */
.stat-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1rem; }

.stat {
    display: grid;
    gap: .15rem;
    min-width: 9rem;
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.stat-value { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.stat-label { color: var(--muted); font-size: .8rem; }

.admin-search { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }

.admin-search input { flex: 1 1 16rem; min-height: 44px; }

.admin-search button { margin: 0; }

/* Privacy pages */
.policy { max-width: 40rem; }

.policy h2 { margin-top: 2rem; }

.policy li { margin: .25rem 0; }

.policy table { margin: .5rem 0 1rem; }

.policy td, .policy th { font-size: .9rem; }

.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; }

.footer-links a { color: var(--muted); }

/* Deleting an account is the only thing here that cannot be undone, so the
   section is unmistakably not the rest of the page. */
.danger-zone {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--accent);
    border-left-width: 5px;
    border-radius: 8px;
    background: #fdf3f4;
}

.danger-zone h2 { margin-top: .25rem; color: var(--accent); }

.danger-headline { margin: .25rem 0 .5rem; font-weight: 600; }

.danger-list { margin: 0 0 .75rem; padding-left: 1.2rem; font-size: .9rem; }

.danger-list li { margin: .15rem 0; }

.danger-form { display: grid; gap: .2rem; max-width: 22rem; margin-top: 1rem; }

.danger-form label { font-size: .85rem; color: var(--ink); }

.danger-form input { border-color: var(--accent); background: var(--surface); }

.danger-form .profile-note { margin: .1rem 0 .4rem; }

/* Filled, not outlined: this is the one control on the page that destroys
   something, and it should not look like a quiet secondary action. */
.danger-button {
    min-height: 44px;
    margin-top: .25rem;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.danger-button:hover:not([disabled]),
.danger-button:focus-visible:not([disabled]) { filter: brightness(1.08); }

.danger-button[disabled] { background: #d9a5ad; cursor: not-allowed; }

/* The signed-in badge in the header. Initials keep the header one line however
   long the name is; a supporter's badge wears the heart colour. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--primary);
    color: var(--header-ink);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
}

.avatar.is-donor { background: var(--accent); }

.avatar:hover, .avatar:focus-visible { outline: 2px solid var(--header-muted); outline-offset: 2px; }

/* The account menu: one control in the header, holding the name, the profile,
   admin and sign out. */
.account { position: relative; }

.account-summary {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
    padding-left: .25rem;
    color: var(--header-muted);
    list-style: none;
    cursor: pointer;
}

/* Safari draws its own triangle unless both of these are cleared. */
.account-summary::-webkit-details-marker { display: none; }

.account-summary::marker { content: ""; }

.account-summary:focus-visible { outline: 2px solid var(--header-muted); outline-offset: 2px; border-radius: 6px; }

.account-chevron { font-size: .7rem; }

.account[open] .account-chevron { transform: rotate(180deg); }

.account-menu {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 12rem;
    margin-top: .35rem;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(28, 40, 48, .18);
}

.account-name {
    margin: 0;
    padding: .4rem .6rem .3rem;
    color: var(--muted);
    font-size: .78rem;
    /* A long name wraps here rather than stretching the menu off the screen. */
    overflow-wrap: anywhere;
}

.account-menu a,
.account-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 .6rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
    text-align: left;
    text-decoration: none;
}

.account-menu a:hover,
.account-menu button:hover,
.account-menu a:focus-visible,
.account-menu button:focus-visible { background: rgba(31, 35, 40, .06); }

/* A plain note at the top of a page - not an error, just something to know. */
.notice {
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    font-size: .9rem;
}

/* Safety notes. The quiet one states what the app is; the urgent one appears
   when someone logs a severe episode. */
.callout {
    margin: .75rem 0 1rem;
    padding: .65rem .85rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--stone);
    border-radius: 0;
    background: var(--surface);
    color: var(--muted);
    font-size: .88rem;
}

.callout strong { color: var(--ink); }

.callout-urgent {
    border-color: #f0c2c9;
    border-left-color: var(--accent);
    background: #fdf3f4;
    color: var(--ink);
}

.log-form .callout { margin: .35rem 0 .15rem; }

/* A heading inside the account menu, separating the account from the documents. */
.account-group {
    margin: .35rem 0 .1rem;
    padding: .3rem .6rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Consent: the two boxes are the decision on the page, so give them room. */
.consent-form { max-width: none; margin-top: 1.25rem; }

.consent-form .choice { align-items: flex-start; padding: .7rem .85rem; }

.consent-form .choice input { margin-top: .15rem; }

.consent-form .choice span { font-size: .95rem; line-height: 1.5; }

/* A control that has to be a form - sign out posts - but reads as a link
   because it sits inside a sentence. */
.inline-form { display: inline; }

.link-inline {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: LinkText;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.link-inline:hover, .link-inline:focus-visible { color: var(--accent); }

/* Profile summary: four plain numbers, then a bar per month. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }

.tile { display: grid; gap: .1rem; padding: .85rem 1rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }

.tile-value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tile-label { color: var(--muted); font-size: .8rem; }

/* Matches the height the chart draws itself at, so loading shifts nothing. */
.months-plot { min-height: 182px; }

.month-bar { fill: var(--series); }

/* The reminder a user set for themselves: a standing note while the count
   holds, and a toast at the moment a save reaches it. */
.callout-reminder { border-left-color: var(--primary); }

.callout-reminder a { margin-left: .35rem; }

.toast {
    margin: .75rem 0 0;
    padding: .7rem .9rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    background: var(--surface);
    color: var(--ink);
    font-size: .9rem;
    /* Height collapses with the fade, so the page does not jump when it goes. */
    max-height: 8rem;
    transition: opacity .4s ease, max-height .4s ease, margin .4s ease,
                padding .4s ease, border-width .4s ease;
}

.toast.is-leaving {
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .toast { transition: none; }
}

.reminder-form { max-width: none; }

.reminder-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 .25rem; }

.reminder-numbers input { width: 5rem; }

.reminder-numbers span { color: var(--muted); font-size: .9rem; }

/* The off-screen element used to measure a label before drawing it. */
.chart-probe { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Sign in by email. The address and the code are the only text fields on the
   page, so they get the full width rather than sitting beside anything. */
.signin-email { margin-top: .75rem; }

.signin-email label {
    display: block;
    margin-bottom: .35rem;
    font-size: .85rem;
    color: var(--muted);
}

.signin-email input {
    display: block;
    width: 100%;
    max-width: 22rem;
    box-sizing: border-box;
}

/* Typed from an email, a digit at a time: wide spacing makes a misread 8 or 0
   obvious before it is submitted. */
.signin-code {
    font-size: 1.25rem;
    letter-spacing: .25em;
}

/* The "nothing arrived?" note is a separate thought from the form above it, and
   without this the two paragraphs read as one. */
.signin-email + .profile-note { margin-top: 1.25rem; }

/* "or" with a rule either side, separating the provider buttons from the email
   form so they read as alternatives rather than steps. */
.signin-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 .25rem;
    color: var(--muted);
    font-size: .85rem;
}

.signin-or::before,
.signin-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}

/* ---- filtering the history ------------------------------------------------ */

/* Collapsed by default, so the log form and the list stay the page. It opens
   itself when something is filtered - a filtered list that looked like a short
   list would be alarming on a log of episodes. */
.history-filters {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    margin: .5rem 0 .75rem;
}

.history-filters > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--muted);
    list-style: none;
}

.history-filters > summary::-webkit-details-marker { display: none; }

/* A chevron that turns, rather than the browser's own marker, which differs
   between them and sits oddly in a flex row. */
.history-filters > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.history-filters[open] > summary::before { transform: rotate(90deg); }

.filter-badge {
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .6rem .75rem;
    padding: 0 .85rem .85rem;
    border-top: 1px solid var(--line);
    padding-top: .75rem;
}

.filter-field label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.filter-field input,
.filter-field select { width: 100%; box-sizing: border-box; }

/* Spans the row: what someone wrote is longer than a number or a date. */
.filter-wide { grid-column: 1 / -1; }

.filter-pair { display: flex; align-items: center; gap: .4rem; }
.filter-pair input { min-width: 0; }
.filter-pair span { color: var(--muted); font-size: .85rem; }

.filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-actions button { margin-top: 0; }
.filter-actions .filter-clear { color: var(--muted); font-size: .9rem; }

.filter-count { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.filter-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* A heading per day, so a long list is scannable rather than a wall of rows. */
.episodes-table .day-row th {
    padding: .75rem .5rem .3rem;
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
    text-align: left;
}

.day-name { font-weight: 600; color: var(--ink); }
.day-meta { color: var(--muted); font-weight: 400; margin-left: .5rem; }

/* The span control sits beside the heading it applies to, and wraps under it
   on a phone rather than squeezing both. */
.tiles-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem .75rem;
}

.tiles-head h2 { margin-bottom: .4rem; }

/* The two week-over-week controls. They sit above the thing they change, and
   wrap rather than scroll on a narrow phone. */
.wow-measures { margin-bottom: .5rem; }
.wow-spans { margin: .75rem 0 .25rem; }