/*
  Today's panel and its list, on both hosts (each host's Today.razor): the ruled panel, and the
  list hanging over the panel's lower edge. The panel is Today's alone; every other page has a
  plain heading (.head, frame.css). The admin host adds the week's chart and the alarm and caution
  marks in its own today.css.
*/

/* ------------------------------------------------------------- the panel */

/* How far the list hangs over the panel: on the sheet, so the panel and the list read one value. */
.sheet:has(> .ruled) { --hang: clamp(36px, 5vw, 64px); }

.ruled {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    gap: 28px 56px;
    align-items: end;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px) calc(var(--hang) + 28px);
    border-radius: clamp(14px, 1.6vw, 22px);
    background: var(--panel);
}

/* Words alone, with no chart beside them: one column. */
.ruled:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* Ruled like a cutting mat, strongest behind the chart and fading out behind the words. */
.ruled::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(var(--rule-hi) 1px, transparent 1px), linear-gradient(90deg, var(--rule-hi) 1px, transparent 1px),
        linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 70% 120% at 80% 30%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 120% at 80% 30%, #000 20%, transparent 100%);
}

.ruled .date { margin: 0 0 10px; font-size: var(--t-small); color: var(--ink-soft); }
.ruled h1 { margin: 0; font-size: clamp(2rem, 1.3rem + 2vw, 3rem); letter-spacing: -0.035em; line-height: 1.15; }
.ruled h1 + p { margin: 12px 0 0; font-size: 1.0625rem; color: var(--ink-soft); }

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

/* ------------------------------------------------------------- the list */

.hang { position: relative; margin: calc(-1 * var(--hang)) clamp(12px, 2vw, 28px) 0; }

.today-list {
    overflow: clip;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--lift);
}

.needs { list-style: none; margin: 0; padding: 0; }

.needs li {
    display: grid;
    grid-template-columns: 16px 5.5rem minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    animation: rise calc(420ms * var(--m)) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 35ms * var(--m));
}

/* Today's one moment: the list arrives a row at a time when the page opens. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

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

/* A mark beside a line that needs someone. Its colour is the host's: a line with no class draws none. */
.needs .mk { justify-self: center; }
.needs .mk::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 999px; }

.needs .n { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; }
.needs .what b { display: block; font-weight: 650; }
.needs .what span { display: block; font-size: var(--t-small); color: var(--ink-soft); }
.needs a { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }

.list-h {
    margin: 0;
    padding: 14px 24px 8px;
    border-top: 1px solid var(--line);
    background: var(--well);
    font-size: var(--t-micro);
    font-weight: 600;
    color: var(--ink-soft);
}

.fine-list li { padding-block: 11px; }
.fine-list .n { font-size: 1.05rem; color: var(--ink-soft); }
.fine-list .what b { font-weight: 500; }

/* Nothing to list: a line in bold and a sentence under it. */
.clear { padding: 28px 24px; }
.clear b { display: block; font-size: 1.25rem; font-weight: 650; }
.clear > span { display: block; max-width: none; color: var(--ink-soft); }

@media (max-width: 640px) {
    .needs li { grid-template-columns: 12px 3.5rem minmax(0, 1fr); padding: 14px 16px; }
    .needs a { grid-column: 3; }
}