/* ============================================================
   Today's habits as rings, all in one panel (v248, his pick from the habit styles). One small ring per
   habit, five to a row (v251: the whole day on one screen, his ask; four at 58px before), no groups: the
   whole tile is the button, a held press opens the habit. A done ring fills
   with the accent where it is; the streak rides on its rim. Builds on the v171 grid rules (.dg-*),
   which these override, and keeps their streak rims (premium.css) and done bloom (minimal.css).
   ============================================================ */
.dg-console { --console: color-mix(in srgb, var(--card) 60%, var(--bg)); margin: 0 0 6px; padding: 8px 4px 8px; border-radius: 28px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 60%, transparent); }
[data-skin="ember"] .dg-console { --console: #0b0c11; border-color: rgba(160, 185, 255, .1); background: #0b0c11; }   /* v256: near-black on the black ground */
/* (v261's horizon rim above the panel gave way to v265's ground, css/ember.css) */
:root[data-palette] .dg-console { --console: var(--card); border-color: var(--line-2); background: var(--card); }   /* each palette's own surface */
.dg-console .dg-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin: 0; }

.dg-console .dg-tile { width: 20%; min-width: 0; gap: 5px; padding: 0 2px; box-sizing: border-box; border: 0; background: none; color: var(--tx); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.dg-console .dg-tile:disabled { cursor: default; }
.dg-console .dg-tile:focus-visible { outline: 2px solid var(--blue-2, var(--accent)); outline-offset: 4px; border-radius: 16px; }

.dg-console .dg-ring { position: relative; display: grid; place-items: center; width: 48px; height: 48px; box-sizing: border-box; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--tx-2) 24%, transparent); background: color-mix(in srgb, var(--tx) 5%, var(--bg)); color: var(--tone, var(--tx-2)); transition: background .2s, border-color .2s, box-shadow .3s, transform .12s; }
[data-skin="ember"] .dg-console .dg-ring { background: #14161d; }
:root[data-palette] .dg-console .dg-ring { background: var(--card-2); }
.dg-console .dg-tile:active .dg-ring { transform: scale(.93); }
.dg-console .dg-ico, .dg-console .dg-tile .dg-ring .dg-tick { grid-area: 1 / 1; }
.dg-console .dg-ico { width: 19px; height: 19px; color: inherit; }
.dg-console .dg-ico svg { width: 18px; height: 18px; }
/* the check draws itself in when the ring is kept */
.dg-console .dg-tile .dg-ring .dg-tick { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transform: none; transition: stroke-dashoffset .3s ease .1s; }
.dg-console .dg-tile.done .dg-ring .dg-tick { stroke-dashoffset: 0; }

.dg-console .dg-tile.done .dg-ring { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #1d0e05); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 36%, transparent); }
/* the minimum version keeps the ring open: the rim and the check in the accent */
.dg-console .dg-tile.min .dg-ring { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); color: var(--accent); box-shadow: none; }

/* the badge stands off the ring on a sliver of the panel, so it never merges into a done ring's fill */
.dg-console .dg-streak { top: -5px; right: -9px; min-width: 0; padding: 0 5px; border-radius: 9px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 0 2px var(--console); color: var(--accent-3, var(--accent)); font-size: 10px; line-height: 1.4; }

.dg-console .dg-name { max-width: 100%; margin: 0; padding: 0; color: var(--tx-2); font-size: 10px; font-weight: 600; line-height: 1.15; text-align: center; }
.dg-console .dg-name > span { -webkit-line-clamp: 3; }   /* "Say your affirmation out loud" keeps its last word */
.dg-console .dg-tile.done .dg-name { color: var(--tx); }
.dg-console .dg-name small { display: block; margin-top: 1px; color: var(--accent); font-size: 10px; font-weight: 600; }
.dg-console .dg-tile.skipped .dg-name small { color: var(--tx-3); }
/* "Clean today" under an open ring is the tap's name, not a state: quiet, not in the done colour (v249) */
.dg-console .dg-tile:not(.done, .min, .skipped) .dg-name small { color: var(--tx-3); }

@media (max-width: 359px) { .dg-console .dg-tile { width: 25%; } }   /* a 320pt phone keeps long words whole */
@media (prefers-reduced-motion: reduce) { .dg-console .dg-ring, .dg-console .dg-tile .dg-ring .dg-tick { transition: none; } }

/* today's quote under the habits (v263, his ask: the tasks left Today for their own tab), set as at the foot of
   the opening: an italic serif line, its source in small capitals. v264: a tap turns it over to today's journal
   question (the turn: .fc in today-halo.css), the pen beside it opens the writing. */
.dg-quote-card { margin: 8px 0 0; }
.dg-quote { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 0 14px; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
figure.dg-quote { margin: 8px 0 0; }
.dg-quote blockquote, .dg-q-text { display: block; margin: 0; font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; font-size: 14.5px; font-style: italic; font-weight: 400; line-height: 1.35; text-wrap: balance; color: var(--tx); }
.dg-quote figcaption, .dg-q-src { display: block; margin-top: 5px; font-size: 9px; font-weight: 600; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--tx-3); }
.dg-question { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 14px; }
.dg-q-turn { flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--tx); font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.35; text-align: left; text-wrap: balance; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dg-q-write { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dg-q-write svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dg-q-write:active { transform: scale(.94); }
.dg-quote:focus-visible, .dg-q-turn:focus-visible, .dg-q-write:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

/* the 90 days before the quote (v283, his ask: "los cuadritos"): three months of thirty side by side, a square a
   day lit by how much of it was kept; the panel is the habits' own surface in every look */
.dg-days { margin: 0 0 8px; padding: 11px 14px 13px; border-radius: 22px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 60%, transparent); }
[data-skin="ember"] .dg-days { border-color: rgba(160, 185, 255, .1); background: #0b0c11; }
:root[data-palette] .dg-days { border-color: var(--line-2); background: var(--card); }
.dd-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 9px; }
.dd-head small { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-2); }
.dd-head span { font-size: 12px; color: var(--tx-3); }
.dd-head b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tx); }
.dd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dd-month { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3.5px; }
.dd-month i { display: block; aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--tx) 9%, transparent); }
.dd-month i.l1 { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.dd-month i.l2 { background: color-mix(in srgb, var(--accent) 66%, transparent); }
.dd-month i.l3 { background: linear-gradient(135deg, #ffc18f, var(--accent) 70%); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent); }
:root[data-palette] .dd-month i.l3 { background: var(--accent); }
.dd-month i.missed { background: color-mix(in srgb, var(--tx) 14%, transparent); }
.dd-month i.f, .dd-month i.rest { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 13%, transparent); }
.dd-month i.now { position: relative; box-shadow: 0 0 0 1.5px var(--tx); }
.dd-month i.now::after { content: ''; position: absolute; inset: -3px; border-radius: 5px; box-shadow: 0 0 6px 1px color-mix(in srgb, var(--tx) 50%, transparent); animation: btNow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dd-month i.now::after { animation: none; } }
[data-motion="reduced"] .dd-month i.now::after { animation: none; }

/* the photo by the greeting (v283, his ask: in place of the Tasks button) */
.today-header .today-ava { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; overflow: hidden; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.today-header .today-ava:active { transform: scale(.94); }
/* the steps as taps (v283) */
.tr-step-picks { margin: 0 0 18px; }