/* finesse · register=product · shell=component-daily-desk
 * A=white+charcoal · B=editorial-sans · C=functional-motion-components
 * D=feedback+FLIP+local-inertia+radial-route · E=ink-on-paper · SOUL=7 SPECTACLE=5 DENSITY=7 */
:root {
  --charcoal: #242424;
  --charcoal-hover: #383838;
  --on-charcoal: #ffffff;
  --secondary-on-dark: #c4c4c4;
  --dark-line: rgba(255,255,255,.19);
}
.button.primary { color: var(--on-charcoal); background: var(--charcoal); border-color: var(--charcoal); box-shadow: 0 4px 9px -6px rgba(0,0,0,.4); }
.button.primary:hover { color: var(--on-charcoal); background: var(--charcoal-hover); border-color: var(--charcoal-hover); }
.button.primary:disabled { opacity: .8; }
.profile-button { color: var(--on-charcoal); background: var(--charcoal); border-color: var(--charcoal); }
.profile-button i { background: var(--on-charcoal); border-color: var(--charcoal); }
.chip.active { color: var(--on-charcoal); background: var(--charcoal); border-color: var(--charcoal); }
.mood-option[aria-pressed="true"] .mood-face { color: var(--on-charcoal); background: var(--charcoal); border-color: var(--charcoal); }
.calendar-grid .today { color: var(--on-charcoal); background: var(--charcoal); }
.calendar-grid .today.has-entry::after { background: var(--on-charcoal); }
.template-choice.active { color: var(--on-charcoal); background: var(--charcoal); border-color: var(--charcoal); }
.daily-feelings .quote-panel { color: var(--on-charcoal); background: var(--charcoal); border-color: var(--charcoal); }
.quote-panel .quote-label { color: var(--secondary-on-dark); }
.quote-panel .quote-bottom { color: var(--secondary-on-dark); }
.quote-panel .icon-button { color: var(--on-charcoal); }
.quote-panel .icon-button:hover { background: transparent; color: var(--on-charcoal); box-shadow: inset 0 0 0 1px var(--dark-line); }

/* A successful button is tied to a confirmed local save or a generated download. */
.button[data-feedback="success"] { opacity: 1; cursor: default; overflow: hidden; }
.feedback-check { width: 21px !important; height: 21px !important; flex-shrink: 0; stroke: currentColor; stroke-width: 1.8; }
.feedback-check circle { opacity: .45; }
.feedback-check path { stroke-dasharray: 1; animation: feedback-draw .42s cubic-bezier(.22,1,.36,1) both; }
.feedback-label { animation: feedback-label .3s ease both; }
@keyframes feedback-draw { from {stroke-dashoffset:1;} to {stroke-dashoffset:0;} }
@keyframes feedback-label { from {opacity:0;transform:translateY(7px);} to {opacity:1;transform:translateY(0);} }

/* Native checkboxes drive the count, the bar and the completion message together. */
.ritual-card { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,2.3fr); gap: 30px; align-items: center; margin-top: 20px; padding: 24px; color: var(--on-charcoal); background: var(--charcoal); border: 1px solid var(--charcoal); border-radius: var(--r); }
.ritual-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 9px; }
.ritual-heading h2 { font-size: 17px; }
.ritual-count { color: var(--secondary-on-dark); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ritual-count strong { color: var(--on-charcoal); font-weight: 500; font-size: 19px; }
.ritual-summary > p { font-size: 10px; line-height: 1.7; color: var(--secondary-on-dark); }
.ritual-progress { margin-top: 15px; height: 3px; background: var(--dark-line); border-radius: 4px; overflow: hidden; }
.ritual-progress > span { display: block; height: 100%; width: 100%; background: var(--on-charcoal); transform: scaleX(var(--progress,0)); transform-origin: left; transition: transform .52s cubic-bezier(.22,1,.36,1); }
.ritual-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.ritual-option { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 75px; position: relative; padding: 14px 13px; border: 1px solid var(--dark-line); border-radius: 13px; cursor: pointer; transition: border-color .2s,transform .25s; }
.ritual-option:has(input:checked) { border-color: rgba(255,255,255,.7); }
.ritual-option:has(input:focus-visible) { outline: 2px solid var(--on-charcoal); outline-offset: 4px; }
.ritual-option input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.ritual-box { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.6); border-radius: 7px; flex-shrink: 0; pointer-events: none; transition: transform .35s var(--spring),background .2s; }
.ritual-box svg { width: 15px; height: 15px; stroke: var(--charcoal); stroke-width: 2.2; }
.ritual-box path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease; }
.ritual-option input:checked + .ritual-box { background: var(--on-charcoal); transform: rotate(-5deg) scale(1.06); }
.ritual-option input:checked + .ritual-box path { stroke-dashoffset: 0; transition-delay: .08s; }
.ritual-option-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; pointer-events: none; }
.ritual-option-copy strong { font-size: 11px; font-weight: 500; }
.ritual-option-copy small { font-size: 9px; line-height: 1.6; color: var(--secondary-on-dark); }
.ritual-card[data-complete="true"] .ritual-heading h2 { animation: feedback-label .3s ease; }

/* Real knowledge cards: a compact deck unfolds into individually reachable articles. */
.reading-panel { overflow: hidden; }
.deck-toggle { font-size: 10px !important; gap: 6px; }
.deck-toggle svg { width: 14px; height: 14px; transition: transform .3s; }
.deck-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.knowledge-deck { position: relative; height: 233px; margin-top: 24px; isolation: isolate; }
.deck-card { position: absolute; inset: 0 12px auto; min-width: 0; height: 183px; text-align: left; padding: 23px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--page); box-shadow: 0 6px 18px -14px rgba(0,0,0,.28); display: flex; flex-direction: column; align-items: flex-start; transform-origin: 50% 12%; }
.deck-card:nth-child(1) { z-index: 4; color: var(--on-charcoal); background: var(--charcoal); border-color: var(--charcoal); }
.deck-card:nth-child(2) { z-index: 3; transform: translateY(15px) rotate(-3deg); }
.deck-card:nth-child(3) { z-index: 2; transform: translateY(29px) rotate(2deg); }
.deck-card:nth-child(4) { z-index: 1; transform: translateY(43px) rotate(-1deg); }
.deck-card-top { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; margin-bottom: 16px; }
.deck-mark { font: italic 27px/1 var(--serif); }
.deck-card-top small { font-size: 10px; color: var(--muted); }
.deck-card:first-child small { color: var(--secondary-on-dark); }
.deck-card > strong { font-size: 15px; font-weight: 500; line-height: 1.7; margin-bottom: 7px; }
.deck-card > span:last-of-type { font-size: 11px; color: var(--muted); }
.deck-card:first-child > span:last-of-type { color: var(--secondary-on-dark); }
.deck-card > svg { position: absolute; right: 21px; bottom: 20px; width: 16px; height: 16px; }
.knowledge-deck[data-expanded="false"] .deck-card:not(:first-child) > * { visibility: hidden; }
.knowledge-deck[data-expanded="false"] .deck-card:not(:first-child) { pointer-events: none; }
.knowledge-deck[data-expanded="true"] { height: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 19px; }
.knowledge-deck[data-expanded="true"] .deck-card { position: relative; inset: auto; width: 100%; height: auto; min-height: 190px; padding: 19px; transform: none; box-shadow: none; }
.knowledge-deck[data-expanded="true"] .deck-card > strong { font-size: 12px; padding-right: 5px; }
.knowledge-deck[data-expanded="true"] .deck-card > span:last-of-type { font-size: 10px; padding-bottom: 20px; }
.knowledge-deck[data-expanded="true"] .deck-card-top { margin-bottom: 12px; }
.deck-footnote { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; margin-top: 4px; }
.deck-footnote svg { width: 12px; height: 12px; }

/* Pointer attraction and a perimeter drawn in the card's actual measured dimensions. */
.tool-quick,.pocket-tool { translate: var(--magnet-x,0px) var(--magnet-y,0px); rotate: var(--magnet-turn,0deg); }
.card-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; border-radius: inherit; fill: none; color: var(--charcoal); }
.card-outline rect { stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .65s cubic-bezier(.22,1,.36,1); }
.tool-quick:focus-visible .card-outline rect,.pocket-tool:focus-visible .card-outline rect { stroke-dashoffset: 0; }

/* A local roller chooses actual card copy. Page scrolling remains native. */
.caption-shelf { margin: 16px 0 22px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; }
.caption-shelf-label { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 11px; margin-bottom: 8px; }
.caption-shelf-label small { font-size: 9px; color: var(--muted); }
.caption-roller { position: relative; }
.wheel-selection { position: absolute; left: 0; right: 0; top: 48px; height: 48px; border-radius: 9px; background: var(--charcoal); pointer-events: none; }
.caption-wheel { position: relative; z-index: 1; height: 144px; overflow-y: auto; overflow-x: hidden; padding: 48px 0; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; border-radius: 9px; }
.caption-wheel::-webkit-scrollbar { display: none; }
.caption-wheel.is-coasting { scroll-snap-type: none; }
.caption-option { display: flex; justify-content: center; align-items: center; height: 48px; min-height: 48px; padding: 0 14px; text-align: center; color: var(--muted); font-size: 11px; scroll-snap-align: center; cursor: pointer; transition: color .2s; white-space: nowrap; }
.caption-option.is-center { color: var(--on-charcoal); }
.caption-wheel:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 4px; }

/* View Transitions reveal the next real route from the selected control. */
html[data-route-transition] .page { animation: none; }
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root) { animation: none; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; mix-blend-mode: normal; }
::view-transition { pointer-events: none; }

@media (hover:hover) and (pointer:fine) {
  .tool-quick:hover .card-outline rect,.pocket-tool:hover .card-outline rect { stroke-dashoffset: 0; }
  .ritual-option:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.6); }
  .knowledge-deck[data-expanded="false"]:hover .deck-card:nth-child(2) { transform: translateY(19px) rotate(-4deg); }
  .knowledge-deck[data-expanded="false"]:hover .deck-card:nth-child(3) { transform: translateY(35px) rotate(3deg); }
  .knowledge-deck[data-expanded="true"] .deck-card:hover { transform: translateY(-3px); border-color: var(--charcoal); }
}
@media (max-width:1000px) {
  .ritual-card { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .ritual-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 25px; align-items: center; }
  .ritual-heading { margin-bottom: 0; }
  .ritual-summary > p { grid-column: 1; margin-top: 6px; }
  .ritual-progress { grid-column: 2; grid-row: 1/3; margin: 0; }
  .knowledge-deck[data-expanded="true"] { grid-template-columns: minmax(0,1fr); }
  .knowledge-deck[data-expanded="true"] .deck-card { min-height: 165px; }
}
@media (max-width:760px) {
  .ritual-card { padding: 21px; }
  .knowledge-deck[data-expanded="true"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  .ritual-summary { display: block; }
  .ritual-heading { margin-bottom: 8px; }
  .ritual-summary > p { margin-top: 0; }
  .ritual-progress { margin-top: 15px; }
  .ritual-options { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .ritual-option { min-height: 63px; padding: 12px 14px; }
  .ritual-option-copy strong { font-size: 12px; }
  .ritual-option-copy small { font-size: 10px; }
  .knowledge-deck { height: 250px; }
  .deck-card { height: 200px; inset-inline: 7px; padding: 22px; }
  .deck-card > strong { font-size: 14px; }
  .knowledge-deck[data-expanded="true"] { grid-template-columns: minmax(0,1fr); }
  .knowledge-deck[data-expanded="true"] .deck-card { min-height: 162px; }
  .caption-shelf { padding: 13px; }
  .caption-shelf-label { flex-wrap: wrap; gap: 4px; }
  .caption-option { font-size: 10px; padding-inline: 4px; }
}
@media (prefers-reduced-motion:reduce) {
  .tool-quick,.pocket-tool { translate: none !important; rotate: none !important; }
  .card-outline rect { transition: none; }
  .feedback-check path { stroke-dashoffset: 0; }
  .feedback-label { opacity: 1; transform: none; }
  .ritual-option input:checked + .ritual-box { transform: none; }
  .caption-wheel { scroll-behavior: auto; }
}