/* Today page (daily brief). Lives outside the compiled Tailwind bundle, so it
   only uses the app's theme tokens (--color-*) plus the few locals below. */

.today {
    /* concentric with the card: card radius minus the 12px inset, floored so it never goes square */
    --td-inset-radius: max(var(--radius-card) - 12px, 4px);
    --td-faint: #a2a4ab;
    --td-soon: #d8695c;
    --td-icon-dark-1: #46464c;
    --td-icon-dark-2: #0c0c0e;
    --td-icon-light-1: #f4f4f6;
    --td-icon-light-2: #a4a5ac;
    --td-green-bg: #eaf5e7;
    --td-green-ink: #3a8a3e;
    --td-blue-bg: #e9f0fd;
    --td-blue-ink: #2c5fcc;
    --td-warm-bg: #fdf1e2;
    --td-warm-ink: #6b4416;
    --td-neutral-bg: #f4f4f6;
    --td-skeleton: #eceef1;

    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    padding: 12px 12px 28px;
    animation: var(--animate-fade-in);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--color-ink);
    font-size: 15px;
    line-height: 22px;
}

:root[data-theme=dark] .today {
    --td-faint: #6f717c;
    --td-soon: #f08c80;
    --td-icon-dark-1: #ffffff;
    --td-icon-dark-2: #b9bbc6;
    --td-icon-light-1: #7b7d88;
    --td-icon-light-2: #3d3f48;
    --td-green-bg: #4ab45a26;
    --td-green-ink: #8fd694;
    --td-blue-bg: #4699fe26;
    --td-blue-ink: #89bdfc;
    --td-warm-bg: #f9b97d26;
    --td-warm-ink: #f9b97d;
    --td-neutral-bg: #303338;
    --td-skeleton: #2b2d33;
}

.today-toggle {
    border-radius: max(var(--radius-card) - 12px, 4px);
}

/* ---- banner: same box and artwork as the Integrations banner ---- */

.today-hero {
    flex-shrink: 0;
}

.today-brief {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    height: 202px;
    padding: 0 36px;
    overflow: hidden;
    /* same radius as the meeting bar below, so the block is rounded evenly on all four corners */
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    /* hero-*.jpg are the Integrations banner artwork with its baked-in rounded corners cropped off */
    background: var(--color-hero-ground) url(/assets/hero-light.jpg) center / cover no-repeat;
}

:root[data-theme=dark] .today-brief {
    background-image: url(/assets/hero-dark.jpg);
}

.today-brief::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 380px;
    height: 380px;
    border: 70px solid var(--color-hero-ring);
    border-radius: 50%;
    filter: blur(52px);
    transform: translate(-50%, -50%);
}

/* sits above the banner, beside the run-panel button (which occupies the first 24px) */
.today-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    margin-bottom: 12px;
    padding-left: 36px;
    font-size: var(--text-caption);
    color: var(--color-ink-muted);
}

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

.today-greeting {
    font-size: 13px;
    line-height: 16px;
    color: var(--color-ink);
}

.today-headline {
    margin-top: 12px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: var(--color-ink-strong);
}

.today-headline span {
    display: block;
    white-space: nowrap;
}

.today-headline i {
    font-style: normal;
    opacity: 0.55;
}

.today-headline svg {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0 4px 0 6px;
    vertical-align: -6px;
}

/* an icon that opens a headline line sits flush with the lines above and below */
.today-headline span > svg:first-child {
    margin-left: 0;
}

.today-next {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 35px;
    border: 1px solid var(--color-line);
    border-top: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

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

.today-next h2 {
    overflow: hidden;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-ink-strong);
}

.today-next p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 15px;
    color: var(--color-ink-muted);
}

.today-soon {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--td-soon);
}

/* same box as the app Button, variant solid, one step above size md */
.today-prepare {
    flex-shrink: 0;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-card);
    background: var(--color-solid);
    color: var(--color-page);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: scale 0.32s var(--ease-spring), background-color 0.16s var(--ease-out-strong);
}

.today-prepare:hover {
    background: var(--color-solid-hover);
}

.today-prepare:active {
    background: var(--color-solid-press);
    scale: 0.975;
    transition-duration: 80ms, 0.16s;
    transition-timing-function: var(--ease-out-strong);
}

/* same feel as the app icon Button (the sidebar "New agent" +): ghost hover, spring squash on press */
.today-icon-btn {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-badge);
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: scale 0.32s var(--ease-spring), background-color 0.16s var(--ease-out-strong), color 0.16s var(--ease-out-strong);
}

.today-icon-btn:hover,
summary:hover .today-icon-btn {
    background: var(--color-ghost-hover);
    color: var(--color-ink);
}

.today-icon-btn:active,
summary:active .today-icon-btn {
    background: var(--color-ghost-press);
    scale: 0.92;
    transition-duration: 80ms, 0.16s, 0.16s;
    transition-timing-function: var(--ease-out-strong);
}

.today-icon-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.today-prepare:focus-visible,
.today-section summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* ---- sections ---- */

.today-section {
    flex-shrink: 0;
    padding: 0 36px;
}

.today-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.01em;
    color: var(--td-faint);
    list-style: none;
    cursor: pointer;
}

.today-section[open] summary {
    margin-bottom: 12px;
}

/* opening a section: its content arrives with the app pop-in */
.today-section[open] > :not(summary) {
    animation: var(--animate-pop-in);
    animation-duration: 0.2s;
}

/* browsers that can animate to auto height also slide the section open and closed */
@supports (interpolate-size: allow-keywords) {
    .today-section {
        interpolate-size: allow-keywords;
    }

    .today-section::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.24s var(--ease-morph), content-visibility 0.24s allow-discrete;
    }

    .today-section[open]::details-content {
        height: auto;
    }
}

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

.today-section summary svg {
    transition: transform 0.24s var(--ease-morph);
}

.today-section:not([open]) summary svg {
    transform: rotate(180deg);
}

.today-rows li {
    display: grid;
    grid-template-columns: 45% 25% 21% 1fr;
    align-items: center;
    height: 36px;
}

/* the whole row is the target: the highlight bleeds 12px past the text so the text stays aligned */
.today-rows li {
    margin: 0 -12px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: background-color 0.16s var(--ease-out-strong);
}

.today-rows li:hover {
    background: var(--color-ghost-hover);
}

.today-rows li:active {
    background: var(--color-ghost-press);
}

.today-rows li:hover .today-icon-btn {
    color: var(--color-ink);
}

.today-rows li > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-rows,
.today-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.today-rows small {
    font-size: 12px;
    color: var(--color-ink-subtle);
}

.today-rows em {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
}

.today-rows li > button {
    justify-self: end;
}

.today-app {
    white-space: nowrap;
}

.today-app svg,
.today-app img {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
}

.today-notes {
    gap: 0;
    padding-top: 5px;
}

.today-notes li {
    line-height: 36px;
}

.today-notes li > * {
    margin-right: 9px;
}

/* Worth noting is ranked by urgency, so its rows are numbered */
.today-notes.is-numbered {
    counter-reset: note;
}

.today-notes.is-numbered li::before {
    counter-increment: note;
    content: counter(note);
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 9px;
    border-radius: 50%;
    /* the section title colour, so the numbers read as part of the heading */
    background: var(--td-faint);
    color: var(--color-surface);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.today-notes .today-punct {
    margin-left: -7px;
}

/* same box as the app Badge, neutral tone */
.today-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--color-neutral-line);
    border-radius: var(--radius-badge);
    background: var(--color-neutral-surface);
    color: var(--color-neutral-ink);
    font-size: var(--text-caption);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
}

.today-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px 0 5px;
    line-height: 1;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--td-neutral-bg);
    font-size: 13px;
    white-space: nowrap;
}

.today-chip img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.today-chip svg {
    width: 14px;
    height: 14px;
    margin-left: 4px;
}

.today-chip.is-green {
    background: var(--td-green-bg);
    color: var(--td-green-ink);
}

.today-chip.is-blue {
    background: var(--td-blue-bg);
    color: var(--td-blue-ink);
}

.today-chip.is-warm {
    background: var(--td-warm-bg);
    color: var(--td-warm-ink);
}

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

/* ---- hover cards on chips ---- */

.today [data-tip] {
    cursor: pointer;
    outline: none;
}

.today [data-tip]:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* appended to <body>, so it only uses global tokens */
.today-tip {
    position: fixed;
    z-index: 60;
    width: 300px;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--elevation-pop);
    color: var(--color-ink);
    font-size: var(--text-body);
    line-height: 18px;
}

/* same entrance and exit as the app popovers */
.today-tip.is-entering {
    animation: var(--animate-pop-in);
}

.today-tip.is-leaving {
    animation: var(--animate-pop-out);
    animation-fill-mode: forwards;
}

.today-tip-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.today-tip-head > img,
.today-tip-tile {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.today-tip-tile {
    display: grid;
    place-items: center;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-field);
    color: var(--color-ink-muted);
}

.today-tip-tile svg {
    width: 16px;
    height: 16px;
}

.today-tip-head > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.today-tip b {
    font-weight: 500;
}

.today-tip small,
.today-tip dt,
.today-tip h4 {
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
    color: var(--color-ink-subtle);
}

.today-tip p {
    margin-top: 10px;
    color: var(--color-ink-muted);
}

.today-tip dl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-line-soft);
}

.today-tip dl > div {
    display: flex;
    gap: 12px;
}

.today-tip dt {
    flex-shrink: 0;
    width: 76px;
    line-height: 18px;
}

.today-tip h4 {
    margin-top: 10px;
}

.today-tip ul {
    margin-top: 4px;
    padding-left: 16px;
    list-style: disc;
    color: var(--color-ink-muted);
}

.today-tip .today-tip-open {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-line-soft);
    font-size: var(--text-caption);
    color: var(--color-link);
}

.today-tip .today-tip-open:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.today-tip .today-tip-open:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .today-tip.is-entering,
    .today-tip.is-leaving {
        animation: none;
    }
}

/* ---- states other than the typical day ---- */

.today-chip.is-alert {
    padding: 0 11px;
    background: var(--color-frontend-surface);
    color: var(--color-frontend-ink);
    box-shadow: inset 0 0 0 1px var(--color-frontend-line);
}

/* a source is missing or failed: sits between the banner block and the sections */
.today-notice {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0 36px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--color-frontend-line);
    border-radius: var(--radius-card);
    background: var(--color-frontend-surface);
    color: var(--color-frontend-ink);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
}

.today-notice svg {
    flex-shrink: 0;
}

.today-notice span {
    min-width: 0;
    flex: 1;
}

/* same box as the app Button, variant secondary */
.today-btn {
    flex-shrink: 0;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    box-shadow: var(--elevation-chip);
    color: var(--color-ink);
    font-size: var(--text-body);
    cursor: pointer;
    transition: scale 0.32s var(--ease-spring), background-color 0.16s var(--ease-out-strong);
}

.today-btn:hover {
    background: var(--color-secondary-hover);
}

.today-btn:active {
    background: var(--color-secondary-press);
    scale: 0.975;
    transition-duration: 80ms, 0.16s;
    transition-timing-function: var(--ease-out-strong);
}

.today-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.today-empty {
    font-size: 14px;
    line-height: 36px;
    color: var(--color-ink-subtle);
}

.today-skeleton {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0;
}

.today-brief .today-skeleton {
    flex: none;
    padding-top: 16px;
}

.today-skeleton li {
    height: 14px;
    border-radius: var(--radius-badge);
    background: var(--td-skeleton);
    animation: today-pulse 1.4s ease-in-out infinite;
}

.today-brief .today-skeleton li {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

@keyframes today-pulse {
    50% {
        opacity: 0.45;
    }
}

/* floating state picker, bottom right of the card */
.today-state-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--elevation-pop);
    color: var(--color-ink);
    font-size: var(--text-body);
    cursor: pointer;
    outline: none;
    transition: scale 0.32s var(--ease-spring), background-color 0.16s var(--ease-out-strong);
}

.today-state-btn small {
    font-size: var(--text-caption);
    color: var(--color-ink-subtle);
}

.today-state-btn[data-hovered] {
    background: var(--color-secondary-hover);
}

.today-state-btn[data-pressed] {
    background: var(--color-secondary-press);
    scale: 0.975;
    transition-duration: 80ms, 0.16s;
    transition-timing-function: var(--ease-out-strong);
}

.today-state-btn[data-focus-visible] {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* narrow card (chat panel open, small window): rows stack time under title */
@container (max-width: 860px) {
    .today-rows li {
        grid-template-columns: minmax(0, 1fr) auto 24px;
        grid-template-areas: "title starts go" "when starts go";
        align-content: center;
        gap: 2px 12px;
        height: 48px;
    }

    .today-rows li > span {
        grid-area: title;
    }

    .today-rows li > small {
        grid-area: when;
    }

    .today-rows li > em {
        grid-area: starts;
    }

    .today-rows li > button {
        grid-area: go;
    }

    .today-next h2 {
        white-space: normal;
    }
}

@container (max-width: 520px) {
    .today-brief,
    .today-next,
    .today-section {
        padding-right: 20px;
        padding-left: 20px;
    }

    .today-headline {
        font-size: 24px;
        line-height: 32px;
    }

    .today-headline svg {
        width: 24px;
        height: 24px;
        vertical-align: -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .today,
    .today-section[open] > :not(summary),
    .today-skeleton li {
        animation: none;
    }

    .today-section::details-content {
        transition: none;
    }

    .today-rows li,
    .today-section summary svg,
    .today-icon-btn,
    .today-btn,
    .today-state-btn,
    .today-prepare {
        transition: none;
    }
}