/*
 * Shared design tokens and small utility classes for the "Dolecular" mobile design system
 * (imported from the Claude Design mockup). Referenced by both hosts (Dolecular.App and
 * Dolecular.Web) as _content/Dolecular.Components/css/dolecular.css so the look stays in sync
 * without duplicating it in each host's own app.css.
 */

:root {
    --dc-primary: #6DA30D;
    --dc-primary-hover: #57840A;
    --dc-primary-dark: #33530A;
    --dc-primary-light: #82BE1E;
    --dc-primary-tint: #E3F0C9;
    --dc-alert: #C05B3A;
    --dc-alert-tint: #F5DED4;
    --dc-ink: #2C2A24;
    --dc-secondary: #6E6A5C;
    --dc-muted: #A6A190;
    --dc-line: #E8E3D6;
    --dc-bg: #FBF8F2;
    --dc-surface: #FFFFFF;
    --dc-chip-bg: #F0EDE2;
}

html, body {
    background: var(--dc-bg);
    color: var(--dc-ink);
    font-family: 'Work Sans', system-ui, sans-serif;
}

.dc-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--dc-bg);
}

.dc-topbar {
    flex-shrink: 0;
    background: var(--dc-surface);
    border-bottom: 1px solid var(--dc-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
}

.dc-topbar-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dc-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 16px 96px;
}

.dc-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dc-avatar.dc-avatar-md {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.dc-avatar.dc-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

.dc-card {
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: 10px;
    padding: 12px 14px;
}

.dc-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dc-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--dc-primary);
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    padding: 0;
}

.dc-check.dc-check-done {
    background: var(--dc-primary);
}

.dc-check.dc-check-missed {
    border-color: var(--dc-alert);
}

.dc-check.dc-check-snoozed {
    border-color: var(--dc-muted);
}

.dc-check:disabled {
    cursor: default;
}

.dc-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.dc-chip {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    background: var(--dc-chip-bg);
    color: var(--dc-ink);
    border: none;
    font-family: inherit;
    white-space: nowrap;
}

.dc-chip.dc-chip-selected {
    background: var(--dc-primary);
    color: #fff;
}

.dc-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--dc-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dc-segmented {
    display: flex;
    background: var(--dc-chip-bg);
    border-radius: 8px;
    padding: 3px;
}

.dc-segmented-item {
    flex: 1;
    text-align: center;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--dc-secondary);
    background: transparent;
    border: none;
    font-family: inherit;
}

.dc-segmented-item.dc-segmented-selected {
    background: #fff;
    color: var(--dc-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* A recipe's total time, overlaid on its own photo corner (RecipesPage's grid, the weekly meal
   plan's entry rows) - dark/translucent so it reads over any photo rather than fighting it. */
.dc-time-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(44, 42, 36, 0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
}

.dc-time-badge .mud-icon-root {
    font-size: 13px;
}

.dc-strip {
    display: flex;
    gap: 6px;
}

.dc-strip-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: inherit;
}

.dc-strip-day.dc-strip-day-selected {
    background: var(--dc-primary);
}

.dc-strip-dow {
    font-size: 10px;
    font-weight: 600;
    color: var(--dc-muted);
}

.dc-strip-day-selected .dc-strip-dow {
    color: #fff;
}

.dc-strip-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-strip-day-selected .dc-strip-num {
    color: #fff;
}

.dc-strip-dot {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--dc-primary);
}

.dc-strip-day-selected .dc-strip-dot {
    background: #fff;
}

.dc-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dc-month-weekday {
    text-align: center;
    font-size: 10px;
    color: var(--dc-muted);
    font-weight: 600;
}

.dc-month-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    background: transparent;
    border: none;
    color: var(--dc-ink);
    font-family: inherit;
}

.dc-month-cell.dc-month-cell-outside {
    opacity: 0.32;
}

.dc-month-cell.dc-month-cell-today {
    background: var(--dc-primary-tint);
    font-weight: 700;
}

.dc-month-cell.dc-month-cell-selected {
    background: var(--dc-primary);
    color: #fff;
    font-weight: 700;
}

.dc-month-cell-dot {
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--dc-primary);
}

.dc-month-cell-selected .dc-month-cell-dot {
    background: #fff;
}

/* A day whose items are all done: a grey dot instead of the green "still to do" one. On the selected
   (green) day the two are white and dark green. */
.dc-month-cell-dot.dc-dot-done,
.dc-strip-dot.dc-dot-done {
    background: var(--dc-muted);
}

.dc-month-cell-selected .dc-month-cell-dot.dc-dot-done,
.dc-strip-day-selected .dc-strip-dot.dc-dot-done {
    background: var(--dc-primary-dark);
}

.dc-tabbar {
    flex-shrink: 0;
    position: relative;
    background: var(--dc-surface);
    border-top: 1px solid var(--dc-line);
    display: flex;
    padding: 8px 4px 10px;
}

.dc-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 4px 2px;
    font-family: inherit;
    color: var(--dc-muted);
    text-decoration: none;
}

.dc-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--dc-muted);
}

.dc-tab.dc-tab-active {
    color: var(--dc-primary);
    font-weight: 700;
}

.dc-tab.dc-tab-active .dc-tab-dot {
    background: var(--dc-primary);
}

.dc-tab-label {
    font-size: 11px;
}

.dc-fab {
    position: fixed;
    right: 18px;
    bottom: 84px;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--dc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(109, 163, 13, 0.4);
    cursor: pointer;
    border: none;
    z-index: 5;
    color: #fff;
}

/* Sits inline in the tab bar's flex row, between the 2nd and 3rd tabs, raised above the bar with a
   negative margin so it reads as a distinct action rather than a 5th equal tab - same visual
   language as .dc-fab. flex: 0 0 auto keeps the four real tabs sharing the rest of the width evenly. */
.dc-tab-mic {
    flex: 0 0 auto;
    align-self: center;
    width: 48px;
    height: 48px;
    margin-top: -22px;
    border-radius: 999px;
    background: var(--dc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(109, 163, 13, 0.4);
    cursor: pointer;
    border: none;
    color: #fff;
    transition: transform 0.15s, background 0.15s;
    /* The mic is held, not tapped (see voice-hold.js): a touch that starts on it must not scroll the page,
       select text or raise the long-press menu. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.dc-tab-mic:disabled {
    opacity: 0.6;
    cursor: default;
}

/* While the bubble is open the mic is lifted over its backdrop, which would otherwise dim the top of it. */
.dc-tab-mic-open {
    position: relative;
    z-index: 32;
}

.dc-tab-mic-busy {
    opacity: 0.6;
}

.dc-tab-mic-listening {
    transform: scale(1.14);
    animation: dc-tab-mic-pulse 1.1s ease-in-out infinite;
}

/* The finger has slid far enough off it that letting go throws the recording away. */
.dc-tab-mic-cancel {
    background: var(--dc-alert);
}

@keyframes dc-tab-mic-pulse {
    0% { box-shadow: 0 6px 16px rgba(109, 163, 13, 0.4), 0 0 0 0 rgba(109, 163, 13, 0.5); }
    70% { box-shadow: 0 6px 16px rgba(109, 163, 13, 0.4), 0 0 0 14px rgba(109, 163, 13, 0); }
    100% { box-shadow: 0 6px 16px rgba(109, 163, 13, 0.4), 0 0 0 0 rgba(109, 163, 13, 0); }
}

/* Consent gate - covers the whole app until the required documents are accepted (see ConsentGate). */
.dc-consent-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--dc-bg);
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 40px;
}

.dc-consent-sheet {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dc-consent-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.dc-consent-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--dc-ink);
    margin: 0;
    line-height: 1.2;
}

.dc-consent-lede {
    font-size: 14px;
    color: var(--dc-secondary);
    margin: 0;
    line-height: 1.5;
}

.dc-consent-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dc-consent-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
}

.dc-consent-item input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--dc-primary);
}

.dc-consent-item > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dc-consent-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dc-ink);
}

.dc-consent-item-text {
    font-size: 13px;
    color: var(--dc-secondary);
    line-height: 1.5;
}

.dc-consent-item a {
    font-size: 13px;
    color: var(--dc-primary-dark);
    margin-top: 2px;
}

.dc-consent-item-optional {
    background: var(--dc-chip-bg);
}

.dc-consent-optional {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dc-muted);
    margin-left: 4px;
}

/* Marks a document whose wording changed since this person last accepted it. Deliberately carries
   the accent colour where "Optional" is muted grey - one is a note, this one is the reason the
   screen reappeared at all. */
.dc-consent-changed {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dc-primary);
    margin-left: 6px;
}

.dc-consent-whats-new {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dc-ink);
    background: var(--dc-chip-bg);
    border-left: 3px solid var(--dc-primary);
    border-radius: 0 8px 8px 0;
    padding: 10px 12px;
    margin: 8px 0 4px;
}

.dc-consent-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.dc-consent-signout {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--dc-muted);
    cursor: pointer;
    padding: 6px;
}

/* ---- Voice bubble ----
   Opens above the tab bar's mic. The dimmed backdrop stops where the tab bar starts (--dc-tabbar-h, set by
   voice-hold.js when the bubble opens) so the tabs stay tappable, and the mic itself is lifted above it. */
.dc-voice-backdrop {
    position: fixed;
    inset: 0 0 var(--dc-tabbar-h, 60px) 0;
    background: rgba(44, 42, 36, 0.45);
    z-index: 30;
}

.dc-voice-bubble {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--dc-tabbar-h, 60px) + 34px);
    z-index: 31;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    max-height: min(62vh, 520px);
    background: var(--dc-surface);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 14px 14px 10px;
}

/* The tail: points down at the mic. */
.dc-voice-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 16px;
    height: 16px;
    background: var(--dc-surface);
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
}

/* Hangs off the corner rather than taking a row of its own, so the log gets the full width. */
.dc-voice-close {
    position: absolute;
    top: -12px;
    right: -6px;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--dc-line);
    border-radius: 50%;
    background: var(--dc-surface);
    color: var(--dc-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.dc-voice-close:hover {
    background: var(--dc-chip-bg);
}

.dc-voice-log {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 2px 2px 10px;
}

.dc-voice-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-ink);
    cursor: pointer;
}

.dc-voice-btn:hover {
    background: var(--dc-chip-bg);
}

.dc-voice-hints {
    padding: 4px 2px 2px;
}

.dc-voice-hints-lead {
    font-size: 16px;
    font-weight: 700;
    color: var(--dc-ink);
    margin-bottom: 14px;
}

.dc-voice-hints-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dc-muted);
    margin-bottom: 6px;
}

.dc-voice-hint-item {
    font-size: 13px;
    color: var(--dc-secondary);
    padding: 4px 0;
}

/* What was said, and what came back for it - a short chat log. */
.dc-voice-turn {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dc-voice-turn-user {
    align-self: flex-end;
    background: var(--dc-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.dc-voice-turn-assistant {
    align-self: flex-start;
    background: var(--dc-chip-bg);
    color: var(--dc-ink);
    border-bottom-left-radius: 4px;
}

.dc-voice-turn-error {
    background: var(--dc-alert-tint);
    color: var(--dc-alert);
}

/* A question back: outlined, so it reads as waiting for an answer rather than as more news. */
.dc-voice-turn-question {
    background: var(--dc-surface);
    border: 1px solid var(--dc-primary);
}

.dc-voice-answer-hint {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--dc-primary-dark);
}

.dc-voice-working {
    color: var(--dc-muted);
    animation: dc-voice-fade 1.1s ease-in-out infinite;
}

/* What is being heard right now, words appearing as they are said. */
.dc-voice-live {
    min-width: 96px;
}

.dc-voice-live-cancel {
    background: var(--dc-alert);
}

.dc-voice-listening-dots {
    animation: dc-voice-fade 1.1s ease-in-out infinite;
}

@keyframes dc-voice-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* A thing that was made: tapping it goes there. */
.dc-voice-result {
    align-self: flex-start;
    width: 92%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 10px 10px;
    border: 1px solid var(--dc-line);
    border-radius: 14px;
    background: var(--dc-primary-tint);
    color: var(--dc-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dc-voice-result:hover {
    border-color: var(--dc-primary);
}

/* A choice already being resolved: dimmed and inert, so a second tap while the request is in flight cannot double it up. */
.dc-voice-result:disabled {
    opacity: 0.55;
    cursor: default;
}

.dc-voice-result-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dc-primary);
    color: #fff;
}

.dc-voice-result-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dc-voice-result-title {
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dc-voice-result-where {
    font-size: 11px;
    color: var(--dc-muted);
}

/* An answer with its speaker button beside it. */
.dc-voice-result-row {
    align-self: flex-start;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dc-voice-result-row > .dc-voice-result {
    width: auto;
    flex: 1;
    min-width: 0;
}

.dc-voice-speak {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--dc-line);
    border-radius: 50%;
    background: var(--dc-surface, #fff);
    color: var(--dc-primary);
    cursor: pointer;
}

.dc-voice-speak:hover,
.dc-voice-speak-on {
    border-color: var(--dc-primary);
    background: var(--dc-primary-tint);
}

.dc-voice-speak-inline {
    width: 30px;
    height: 30px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Undo beside a result that was deleted by voice, for a few seconds. */
.dc-voice-undo {
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid var(--dc-primary);
    border-radius: 999px;
    background: var(--dc-surface, #fff);
    color: var(--dc-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dc-voice-undo:disabled {
    opacity: 0.55;
    cursor: default;
}

.dc-voice-undone {
    flex-shrink: 0;
    padding: 0 6px;
    font-size: 12px;
    color: var(--dc-muted);
}

/* Kitchen timers: the cards (same shape as a note), the Android-style keypad in the add sheet, and the alert that rings over whatever page is open. */
.dc-timer {
    align-items: center;
}

.dc-timer-play {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--dc-ink);
    cursor: pointer;
}

.dc-timer-play:disabled {
    opacity: 0.55;
    cursor: default;
}

.dc-timer-label {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-timer-clock {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.dc-timer-sub {
    font-size: 12px;
    color: var(--dc-muted);
}

.dc-timer-paused .dc-timer-clock {
    color: var(--dc-muted);
}

.dc-timer-done {
    border-color: var(--dc-primary);
    background: var(--dc-primary-tint);
}

.dc-timer-done .dc-timer-clock {
    color: var(--dc-primary);
}

.dc-timer-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}

.dc-timer-display > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dc-timer-digits {
    font-size: 52px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dc-timer-dim {
    color: var(--dc-muted);
    opacity: 0.6;
}

.dc-timer-unit {
    font-size: 12px;
    color: var(--dc-muted);
}

.dc-timer-chips {
    display: flex;
    gap: 8px;
}

.dc-timer-chips .dc-chip {
    flex: 1;
    justify-content: center;
    min-height: 40px;
}

.dc-timer-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.dc-timer-key {
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--dc-ink);
    font: inherit;
    font-size: 26px;
    font-weight: 500;
    cursor: pointer;
}

.dc-timer-key:hover,
.dc-timer-key:active {
    background: var(--dc-primary-tint);
}

.dc-timer-ring {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.45);
}

.dc-timer-ring-card {
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px 20px;
    border-radius: 24px;
    background: var(--dc-surface);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.dc-timer-ring-icon {
    font-size: 56px !important;
    width: 56px !important;
    height: 56px !important;
    color: var(--dc-primary);
}

@media (prefers-reduced-motion: no-preference) {
    .dc-timer-ring-icon {
        animation: dc-timer-shake 0.9s ease-in-out infinite;
    }
}

@keyframes dc-timer-shake {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30%, 50% { transform: rotate(-12deg); }
    20%, 40% { transform: rotate(12deg); }
}

.dc-timer-ring-title {
    font-size: 22px;
    font-weight: 700;
}

.dc-timer-ring-more {
    font-size: 13px;
    color: var(--dc-muted);
}

.dc-timer-ring-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Live mode: a banner while it is listening, and the bar of tap buttons for following a recipe. */
.dc-voice-live-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 0 6px;
    border-radius: 12px;
    background: var(--dc-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.dc-voice-live-actions {
    display: flex;
    gap: 6px;
}

.dc-voice-live-banner button {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    padding: 4px 12px;
    font: inherit;
    cursor: pointer;
}

.dc-voice-cook {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    margin: 6px 0;
    border: 1px solid var(--dc-primary);
    border-radius: 14px;
    background: var(--dc-primary-tint);
}

.dc-voice-cook-title {
    font-size: 13px;
    font-weight: 600;
}

.dc-voice-cook-buttons {
    display: flex;
    gap: 6px;
}

.dc-voice-cook-buttons button {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--dc-line);
    border-radius: 12px;
    background: var(--dc-surface, #fff);
    color: var(--dc-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dc-voice-cook-buttons button:hover {
    border-color: var(--dc-primary);
}

.dc-voice-cook-buttons .dc-voice-cook-next {
    flex: 1.4;
    background: var(--dc-primary);
    border-color: var(--dc-primary);
    color: #fff;
}

.dc-voice-notice {
    align-self: center;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--dc-muted);
    text-align: center;
}

.dc-voice-footer {
    margin-top: 8px;
    font-size: 11px;
    color: var(--dc-muted);
    text-align: center;
}

.dc-voice-type-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.dc-voice-type-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--dc-line);
    background: var(--dc-bg);
    color: var(--dc-ink);
    font-size: 14px;
    min-width: 0;
}

.dc-voice-type-input:focus {
    outline: 2px solid var(--dc-primary);
    outline-offset: -1px;
}

.dc-voice-btn-primary {
    flex: 0 0 auto;
    background: var(--dc-primary);
    color: #fff;
    border-color: var(--dc-primary);
}

.dc-voice-btn-primary:disabled {
    opacity: 0.5;
    cursor: default;
}

.dc-voice-btn-primary:hover {
    background: var(--dc-primary);
    filter: brightness(1.05);
}

.dc-drawer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--dc-secondary);
    text-decoration: none;
}

.dc-drawer-row.dc-drawer-row-active {
    background: var(--dc-chip-bg);
    color: var(--dc-ink);
    font-weight: 600;
}

.dc-drawer-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--dc-line);
    flex-shrink: 0;
}

.dc-drawer-row-active .dc-drawer-dot {
    background: var(--dc-primary);
}

/* The "download the app" banner on app.dolecular.com (InstallPrompt.razor, web host only). Sits
   inline at the top of the content area rather than as a fixed overlay - it competes for attention
   with real content on purpose, once, then stays dismissed via localStorage same as the marketing
   site's cookie banner. */
.dc-install-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--dc-primary-tint);
    border: 1px solid var(--dc-primary-light);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.dc-install-banner-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    color: var(--dc-primary-dark);
}

.dc-install-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-install-banner-text {
    font-size: 13px;
    color: var(--dc-secondary);
    line-height: 1.5;
    margin-top: 2px;
}

.dc-install-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.dc-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--dc-muted);
    font-size: 13px;
}

/* An empty page is a new household's first impression, so it gets room to explain itself rather than
   one muted line. Still quiet - this is a prompt, not a billboard. */
.dc-empty-state {
    text-align: center;
    padding: 36px 20px;
}

.dc-empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dc-ink);
}

.dc-empty-state-hint {
    font-size: 13px;
    color: var(--dc-secondary);
    line-height: 1.5;
    margin: 6px auto 0;
    max-width: 34ch;
}

.dc-empty-state-lead {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dc-muted);
}

.dc-empty-state-voice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--dc-chip-bg);
    color: var(--dc-secondary);
    font-size: 13px;
    font-style: italic;
}

.dc-getting-started {
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
}

.dc-getting-started-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dc-getting-started-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dc-ink);
    margin-top: 2px;
}

.dc-getting-started-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.dc-getting-started-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: var(--dc-primary);
}

.dc-getting-started-step-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--dc-ink);
}

.dc-getting-started-step-hint {
    font-size: 12px;
    color: var(--dc-muted);
    line-height: 1.4;
}

/* Done steps stay visible rather than vanishing - seeing what you've already finished is the part
   that makes a checklist feel like progress instead of a list of nags. */
.dc-getting-started-done .dc-getting-started-step-title {
    color: var(--dc-muted);
    text-decoration: line-through;
}

.dc-loading {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.dc-switch {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    padding: 3px;
    box-sizing: border-box;
    display: flex;
    cursor: pointer;
    background: var(--dc-line);
    border: none;
}

.dc-switch.dc-switch-on {
    background: var(--dc-primary);
    justify-content: flex-end;
}

.dc-switch:not(.dc-switch-on) {
    justify-content: flex-start;
}

.dc-switch-thumb {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
}

.dc-switch.dc-switch-sm {
    width: 32px;
    height: 19px;
}

.dc-switch.dc-switch-sm .dc-switch-thumb {
    width: 15px;
    height: 15px;
}

/* ---- Notes: category chips with an inline "New category" (Shared/NoteCategoryPicker.razor) ---- */

.dc-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dc-chip-new {
    display: inline-flex;
    align-items: center;
}

/* Collapsed: one dashed chip. It is a <label> for the input inside the editor, so tapping it focuses the
   input natively, and :focus-within below opens the editor in place. */
.dc-chip-add {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-left: 8px;
    background: transparent;
    border: 1.5px dashed var(--dc-muted);
    color: var(--dc-secondary);
}

.dc-chip-add:hover {
    border-color: var(--dc-primary);
    color: var(--dc-primary-hover);
}

.dc-chip-add .mud-icon-root {
    width: 16px;
    height: 16px;
}

/* The editor is always in the page - clipped to nothing, not display:none, so the label can still focus its
   input. Focus opens it and hides the chip. */
.dc-chip-new-editor {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    background: var(--dc-surface);
    border: 0 solid var(--dc-primary);
    border-radius: 999px;
    transition: max-width 0.2s ease, opacity 0.15s ease;
}

.dc-chip-new:focus-within {
    flex: 1 1 200px;
    max-width: 340px;
}

.dc-chip-new:focus-within .dc-chip-add {
    display: none;
}

.dc-chip-new:focus-within .dc-chip-new-editor {
    max-width: 340px;
    padding: 2px 3px 2px 14px;
    opacity: 1;
    border-width: 1.5px;
}

/* 16px so iPhones do not zoom the page when the field is focused. */
.dc-chip-new-editor input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 0;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--dc-ink);
    background: transparent;
    border: 0;
    outline: 0;
}

.dc-chip-new-editor input::placeholder {
    color: var(--dc-muted);
    font-weight: 400;
}

.dc-chip-new-editor button {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--dc-secondary);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.dc-chip-new-editor button .mud-icon-root {
    width: 18px;
    height: 18px;
}

.dc-chip-new-editor .dc-chip-new-ok {
    color: #fff;
    background: var(--dc-primary);
}

/* Nothing to add yet: looks inactive without being disabled (see NoteCategoryPicker.razor). */
.dc-chip-new-editor .dc-chip-new-ok.is-empty,
.dc-chip-new-editor .dc-chip-new-ok:disabled {
    color: var(--dc-muted);
    background: var(--dc-line);
    cursor: default;
}

/* A plain switch-with-a-label, used for "Show done" in the Notes header. */
.dc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font: inherit;
    font-size: 12px;
    color: var(--dc-secondary);
    background: none;
    border: 0;
    cursor: pointer;
}

/* ---- Notes: categories as drag-and-drop lists (js/src/sortable-lists.js drives them) ---- */

.dc-note-sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Each category is one list: its header plus its notes. The whole box is a place a note can land, and
   the minimum height keeps an empty category a target you can actually hit. */
.dc-note-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 72px;
}

.dc-note-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dc-secondary);
}

/* The grip is the only part of a card that starts a drag, so touching anywhere else on the card
   scrolls the page as usual. touch-action: none belongs here and nowhere else for that reason.
   The negative margins stretch it over the card's full height and its left padding, which makes it
   a comfortable thumb target without making the card any taller. */
.dc-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    width: 30px;
    margin: -12px 0 -12px -10px;
    color: var(--dc-secondary);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* While a note is held: no text selection, and every category shows its edges so it is clear where
   the note can be put down. */
body.dc-sorting {
    -webkit-user-select: none;
    user-select: none;
    cursor: grabbing;
}

body.dc-sorting .dc-note-section {
    outline: 2px dashed var(--dc-line);
    outline-offset: 6px;
    border-radius: 10px;
}

/* The placeholder left in the list where the note will land... */
.dc-note-ghost {
    opacity: 0.45;
    border-style: dashed;
    border-color: var(--dc-primary);
}

/* ...and the copy that follows the finger. SortableJS sets an inline opacity on it. */
.dc-note-drag {
    opacity: 0.96 !important;
    box-shadow: 0 10px 28px rgba(44, 42, 36, 0.22);
}

/* ---- Grocery ---- */

/* Sticks under the app bar; the negative margins cancel the page padding so it spans edge to edge. */
.dc-gro-head {
    position: sticky;
    top: -16px;
    z-index: 4;
    background: var(--dc-bg);
    margin: -16px -16px 0;
    padding: 10px 8px 10px;
    border-bottom: 1px solid var(--dc-line);
}

.dc-gro-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dc-gro-navbtn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dc-secondary);
    cursor: pointer;
}

.dc-gro-navbtn:hover {
    background: var(--dc-chip-bg);
}

.dc-gro-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    font: inherit;
    color: var(--dc-ink);
    cursor: pointer;
}

.dc-gro-title:hover {
    background: var(--dc-chip-bg);
}

.dc-gro-range {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.dc-gro-rel {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dc-muted);
}

.dc-gro-rel.is-now {
    color: var(--dc-primary-hover);
}

.dc-gro-rel .mud-icon-root {
    font-size: 16px;
}

/* The date picker opens from the title, so its own field is folded away to nothing. */
.dc-gro-picker {
    position: absolute;
    left: 50%;
    top: 56px;
    width: 0;
    height: 0;
    overflow: hidden;
}

.dc-gro-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 0 8px;
    padding: 6px 12px 6px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--dc-primary-tint);
    color: var(--dc-primary-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dc-gro-body {
    padding-top: 16px;
    transition: opacity 0.15s;
}

.dc-gro-body.is-switching {
    opacity: 0.55;
}

/* What was left unbought in earlier weeks: a warm callout, not an error. */
.dc-gro-left {
    margin-bottom: 14px;
    border: 1px solid var(--dc-alert-tint);
    border-radius: 12px;
    background: color-mix(in srgb, var(--dc-alert-tint) 45%, var(--dc-surface));
    overflow: hidden;
}

.dc-gro-left-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px 12px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--dc-ink);
    cursor: pointer;
}

.dc-gro-left-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dc-alert-tint);
    color: var(--dc-alert);
}

.dc-gro-left-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dc-gro-left-title {
    font-size: 14px;
    font-weight: 600;
}

.dc-gro-left-preview {
    font-size: 12px;
    color: var(--dc-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-gro-left-week {
    padding: 4px 14px 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dc-muted);
}

.dc-gro-left-items {
    list-style: none;
    margin: 0;
    padding: 0 14px 6px;
}

.dc-gro-left-items li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
}

.dc-gro-left-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 12px 12px;
}

.dc-gro-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--dc-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dc-gro-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.dc-gro-btn.dc-gro-btn-primary {
    background: var(--dc-primary);
    border-color: var(--dc-primary);
    color: #fff;
}

.dc-gro-btn .mud-icon-root {
    font-size: 18px;
}

/* A small dropdown under a pill button (the photo's Take photo / Choose from gallery): a transparent backdrop closes it on any outside tap. */
.dc-menu-anchor {
    position: relative;
    display: inline-block;
}

.dc-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
}

.dc-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1301;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--dc-line);
    border-radius: 16px;
    background: var(--dc-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.dc-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--dc-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.dc-menu button:hover,
.dc-menu button:active {
    background: var(--dc-primary-tint);
}

/* A small round button in the corner of a picture (turn photo) - same dark translucent look as .dc-time-badge. */
.dc-photo-corner {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(44, 42, 36, 0.72);
    color: #fff;
    cursor: pointer;
}

.dc-photo-corner:disabled {
    opacity: 0.55;
    cursor: default;
}

.dc-photo-corner .mud-icon-root {
    font-size: 17px;
}

/* One field, one row: the name takes the width, the quantity is a small companion, Enter adds. */
.dc-gro-add {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px 4px 4px 14px;
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    background: var(--dc-surface);
}

.dc-gro-add:focus-within {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 3px var(--dc-primary-tint);
}

.dc-gro-add input {
    min-width: 0;
    height: 38px;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    color: var(--dc-ink);
}

.dc-gro-add input::placeholder {
    color: var(--dc-muted);
}

.dc-gro-add .dc-gro-add-name {
    flex: 1;
}

.dc-gro-add .dc-gro-add-qty {
    width: 64px;
    padding-left: 12px;
    border-left: 1px solid var(--dc-line);
    font-size: 14px;
}

.dc-gro-add-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--dc-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.dc-gro-add-btn.is-empty {
    background: var(--dc-chip-bg);
    color: var(--dc-muted);
}

.dc-gro-progress {
    margin-bottom: 14px;
}

.dc-gro-progress-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dc-secondary);
}

.dc-gro-progress-text .mud-icon-root {
    color: var(--dc-primary);
}

.dc-gro-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--dc-chip-bg);
    overflow: hidden;
}

.dc-gro-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--dc-primary);
    transition: width 0.25s ease;
}

.dc-gro-section {
    margin: 18px 2px 8px;
}

/* The week's items share one surface with hairlines between them - a list, not a stack of boxes. */
.dc-gro-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dc-line);
    border-radius: 12px;
    background: var(--dc-surface);
    overflow: hidden;
}

.dc-gro-list li + li {
    border-top: 1px solid var(--dc-line);
}

.dc-gro-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 12px;
}

.dc-gro-tick {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--dc-primary);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.12s;
}

.dc-gro-tick.is-done {
    background: var(--dc-primary);
}

.dc-gro-tick .mud-icon-root {
    font-size: 16px;
}

/* Forces whatever follows (the "carried over" tag, the notes) onto a line of its own. */
.dc-gro-break {
    flex-basis: 100%;
    height: 0;
}

/* The name is a button too, so the whole row is a target you can hit with a full cart. */
.dc-gro-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 2px 8px;
    padding: 14px 8px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--dc-ink);
    cursor: pointer;
}

.dc-gro-item-name {
    font-size: 16px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dc-gro-item-notes {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--dc-muted);
}

.dc-gro-qty {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--dc-chip-bg);
    color: var(--dc-secondary);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dc-gro-edit {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--dc-muted);
    cursor: pointer;
}

.dc-gro-edit:hover {
    color: var(--dc-primary-hover);
}

.dc-gro-list.is-bought .dc-gro-item-name {
    color: var(--dc-muted);
    text-decoration: line-through;
    text-decoration-color: var(--dc-line);
}

.dc-gro-list.is-bought .dc-gro-qty {
    background: transparent;
    color: var(--dc-muted);
}

/* The item a link from the voice bubble pointed at (a grocery item, a note, a todo): a glow that fades, so the
   eye finds it in the list. */
.dc-flash {
    animation: dc-flash 2.4s ease-out;
}

@keyframes dc-flash {
    0%, 35% { background: var(--dc-primary-tint); }
    100% { background: var(--dc-surface); }
}

/* Marks an item that was carried forward from an earlier week, in the same warm colour as the leftovers callout. */
.dc-gro-carried {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px 1px 5px;
    border-radius: 999px;
    background: var(--dc-alert-tint);
    color: var(--dc-alert);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dc-gro-carried .mud-icon-root {
    font-size: 14px;
}

.dc-gro-list.is-bought .dc-gro-carried {
    background: transparent;
    color: var(--dc-muted);
}

/* The "just this time" block at the top of a repeating todo's edit sheet: tinted, so it reads as a different kind of change from the fields below it. */
.dc-thistime {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--dc-primary-tint);
}

.dc-thistime-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dc-thistime-hint {
    font-size: 12px;
    color: var(--dc-secondary);
}

.dc-thistime-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* A row of filter chips that scrolls sideways instead of wrapping into a wall - on a phone a long tag list otherwise
   pushes everything it filters off the screen. On a wide screen there is room, so it wraps as before. */
.dc-chip-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dc-chip-strip::-webkit-scrollbar {
    display: none;
}

.dc-chip-strip .dc-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (min-width: 700px) {
    .dc-chip-strip {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* The small round + at the end of a day's heading (Meal plan). */
.dc-sec-add {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--dc-primary);
    cursor: pointer;
}

.dc-sec-add .mud-icon-root {
    font-size: 20px;
}

/* The recipe picker: one compact row per recipe. */
.dc-pick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 58vh;
    overflow-y: auto;
}

.dc-pick-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px;
    border: 1px solid var(--dc-line);
    border-radius: 12px;
    background: var(--dc-surface);
    color: var(--dc-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dc-pick-thumb {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.dc-pick-thumb-empty {
    background: var(--dc-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-pick-text {
    flex: 1;
    min-width: 0;
}

.dc-pick-title {
    font-size: 14px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc-pick-meta {
    display: flex;
    gap: 8px;
    color: var(--dc-muted);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Notification choices while the device can't receive notifications: visibly off and not operable. */
.dc-push-choices-off {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

/* Voice opened from a quick-access surface: Done / Cancel while listening, or one "Tap to speak" button while not. */
.dc-voice-handsfree {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 4px 12px 10px;
}

/* A small quiet label ("No recipe") on a recipe that is only a name - muted, so it informs without shouting. */
.dc-quiet-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    color: var(--dc-muted);
    font-size: 11px;
    line-height: 1.6;
}

/* "Completed today, 3:20 pm" under a finished note. */
.dc-done-stamp {
    font-size: 12px;
    color: var(--dc-muted);
    margin-top: 2px;
}