/* finesse · register=product · shell=responsive-floating-glass
 * A=sky-blue+deep-blue · B=readable-sans · C=component-daily-desk
 * D=functional-motion+quiet-cloud-drift · E=frosted-glass+soft-SVG-clouds · SOUL=7 SPECTACLE=5 DENSITY=7
 * User-directed sky revision. Clouds are inline SVG; only transforms animate. */
:root {
  --ink: #1c374c;
  --body: #314f64;
  --muted: #365166;
  --accent: #264d69;
  --accent-hover: #173c57;
  --info: #385b74;
  --charcoal: #173b54;
  --charcoal-hover: #244e69;
  --secondary-on-dark: #d7e9f7;
  --dark-line: rgba(231,246,255,.24);
  --line: rgba(25,66,95,.1);
  --line-strong: rgba(25,66,95,.19);
  --glass-fill: rgba(255,255,255,.48);
  --glass-edge: rgba(255,255,255,.88);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.32), 0 14px 36px -26px rgba(29,84,123,.27);
  --glass-blur: 20px;
  --smoke-fill: rgba(26,69,101,.84);
  --smoke-edge: rgba(255,255,255,.24);
  --smoke-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(12,41,63,.14), 0 14px 32px -22px rgba(23,65,97,.34);
  --header-h: 76px;
}
body {
  isolation: isolate;
  background-color: #b7def7;
  background-image: linear-gradient(180deg,#8acbf5 0%,#b3dcf6 42%,#d9eefc 100%);
  background-attachment: fixed;
}
.sky-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: paint; }
.sky-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sky-cloud { position: absolute; display: block; height: auto; aspect-ratio: 26/11; pointer-events: none; filter: blur(2px); }
.sky-cloud-one { width: clamp(340px,42vw,640px); left: -11%; top: 3%; opacity: .7; animation: cloud-drift-near 88s ease-in-out -23s infinite alternate; }
.sky-cloud-two { width: clamp(340px,38vw,580px); right: -13%; top: 27%; opacity: .61; animation: cloud-drift-far 108s ease-in-out -55s infinite alternate; }
.sky-cloud-three { width: clamp(400px,50vw,760px); left: -9%; top: 64%; opacity: .51; animation: cloud-drift-near 122s ease-in-out -66s infinite alternate-reverse; }
.sky-cloud-four { width: clamp(320px,36vw,550px); right: -7%; top: 82%; opacity: .48; animation: cloud-drift-far 96s ease-in-out -19s infinite alternate; }
@keyframes cloud-drift-near { from { transform: translate3d(0,0,0); } to { transform: translate3d(14vw,-2vh,0); } }
@keyframes cloud-drift-far { from { transform: translate3d(0,0,0); } to { transform: translate3d(-15vw,3vh,0); } }
.site-header {
  top: 14px; width: min(1180px,calc(100% - 48px)); margin: 14px auto 0;
  border: 1px solid var(--glass-edge); border-radius: 23px;
  background: rgba(255,255,255,.52); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
}
.header-inner { padding-inline: 24px; }
.brand img { border-radius: 14px; box-shadow: 0 3px 8px -5px rgba(0,0,0,.18); }
.main-nav { height: 49px; padding: 4px; gap: 4px; border: 1px solid rgba(255,255,255,.66); border-radius: 17px; background: rgba(255,255,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.main-nav .nav-link { min-height: 39px; padding: 0 16px; border-radius: 12px; font-size: 12px; }
.main-nav .nav-link::after { display: none; }
.main-nav .nav-link.active { color: var(--on-charcoal); background: rgba(22,49,70,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -6px rgba(15,54,82,.48); }
.app-main { padding-top: 30px; }

/* One frosted layer per panel; controls inside it use translucent fills without another blur. */
.surface,.mood-panel,.tool-quick,.pocket-tool,.knowledge-card,.studio-preview,.gentle-prompts,.day-overview {
  background: var(--glass-fill); border-color: var(--glass-edge); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.overview-item { background: transparent; }
.overview-item + .overview-item { border-color: rgba(37,37,37,.065); }
.quick-note-card textarea,.journal-text,.composer-title { background: transparent; }
.privacy-pill,.tool-icon,.tool-icon.blue,.tool-icon.peach,.tool-icon.lilac,.mood-face,.chip,.starter-prompt,.template-choice,.photo-choice,.upload-choice {
  background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84),0 4px 12px -9px rgba(0,0,0,.2);
}
.input,.mood-select,.search-field input {
  background: rgba(255,255,255,.42); border-color: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 4px rgba(37,37,37,.035),0 1px 0 rgba(255,255,255,.5);
}
.button.secondary,.button.soft,.button.danger {
  background: rgba(255,255,255,.4); border-color: rgba(255,255,255,.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94),0 4px 12px -9px rgba(0,0,0,.25);
}
.button.primary,.profile-button,.chip.active,.template-choice.active {
  color: var(--on-charcoal); background: rgba(22,49,70,.94); border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.23),inset 0 -1px 0 rgba(0,0,0,.2),0 7px 15px -10px rgba(0,0,0,.55);
}
.button.primary:hover { background: rgba(32,68,95,.96); border-color: rgba(255,255,255,.3); }
.profile-button i { border-color: #234862; }
.mood-option[aria-pressed="true"] .mood-face,.calendar-grid .today {
  color: var(--on-charcoal); background: rgba(22,49,70,.92); border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 4px 10px -7px rgba(0,0,0,.5);
}
.photo-choice.active { border-color: rgba(32,32,32,.58); }
.photo-choice.active::after { background: rgba(255,255,255,.72); }

/* Smoked glass supplies the contrast while sharing the same edge and depth treatment. */
.daily-feelings .quote-panel,.ritual-card,.deck-card:nth-child(1) {
  color: var(--on-charcoal); background: var(--smoke-fill); border-color: var(--smoke-edge);
  box-shadow: var(--smoke-shadow); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.ritual-option { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.ritual-option:has(input:checked) { background: rgba(255,255,255,.065); border-color: rgba(255,255,255,.5); }
.deck-card { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.95); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.knowledge-deck[data-expanded="true"] .deck-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.85),0 7px 18px -15px rgba(0,0,0,.25); }
.knowledge-deck[data-expanded="true"] .deck-card:first-child { box-shadow: var(--smoke-shadow); }
.knowledge-art,.knowledge-art.blue,.knowledge-art.peach { background: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.5); }
.caption-shelf { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.wheel-selection { background: rgba(22,49,70,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 5px 12px -8px rgba(14,54,83,.4); }
.canvas-wrap { background: #ffffff; box-shadow: 0 18px 35px -20px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.025); }
.app-dialog { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 30px 90px -30px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.app-dialog::backdrop { background: rgba(25,25,25,.17); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.toast { background: rgba(255,255,255,.8); border-color: rgba(255,255,255,.94); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.upload-zone,.dialog-callout,.article-example,.file-row { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.74); }
.site-footer > div { border-color: rgba(37,37,37,.08); }

@media (hover:hover) and (pointer:fine) {
  .tool-quick:hover,.pocket-tool:hover { background: rgba(255,255,255,.64); border-color: rgba(255,255,255,.98); box-shadow: inset 0 1px 0 rgba(255,255,255,1),0 16px 30px -23px rgba(0,0,0,.32); }
  .button.secondary:hover,.button.soft:hover { background: rgba(255,255,255,.7); border-color: rgba(255,255,255,1); }
  .icon-button:hover { background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
  .quote-panel .icon-button:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
  .main-nav .nav-link:not(.active):hover { background: rgba(255,255,255,.3); }
  .starter-prompt:hover { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.95); }
}
@media (max-width:1000px) {
  .main-nav .nav-link { padding-inline: 12px; }
  .header-inner { gap: 15px; padding-inline: 20px; }
}
@media (max-width:760px) {
  :root { --header-h: 68px; --glass-blur: 12px; }
  .site-header { top: 12px; width: calc(100% - 28px); margin-top: 12px; border-radius: 21px; }
  .header-inner { padding-inline: 14px; gap: 8px; }
  .brand { gap: 9px; }
  .brand img { width: 34px; height: 34px; }
  .brand-copy strong { font-size: 15px; }
  .app-main { padding-top: 27px; }
  .mobile-nav {
    left: 16px; right: 16px; bottom: max(12px,env(safe-area-inset-bottom)); padding: 8px 9px;
    border: 1px solid rgba(255,255,255,.9); border-radius: 23px; background: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 12px 35px -18px rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); gap: 4px;
  }
  .mobile-nav .nav-link { min-height: 48px; border-radius: 16px; gap: 3px; }
  .mobile-nav .nav-link.active { color: var(--on-charcoal); background: rgba(22,49,70,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 4px 10px -6px rgba(14,54,83,.45); }
  .mobile-nav .nav-link::after { display: none; }
  .daily-feelings .quote-panel,.ritual-card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .toast-stack { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .sky-cloud-one { width: 370px; left: -45%; top: 9%; opacity: .68; }
  .sky-cloud-two { width: 340px; right: -52%; top: 37%; opacity: .6; }
  .sky-cloud-three { width: 430px; left: -45%; top: 73%; opacity: .48; }
  .sky-cloud-four { display: none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .surface,.mood-panel,.tool-quick,.pocket-tool,.knowledge-card,.studio-preview,.gentle-prompts,.day-overview,.site-header,.mobile-nav,.deck-card { background: #f9f9f9; }
  .daily-feelings .quote-panel,.ritual-card,.deck-card:first-child { background: #234d6c; }
  .app-dialog,.toast { background: #fafafa; }
}
@media (prefers-reduced-transparency:reduce) {
  .surface,.mood-panel,.tool-quick,.pocket-tool,.knowledge-card,.studio-preview,.gentle-prompts,.day-overview,.site-header,.mobile-nav,.app-dialog,.toast,.deck-card { background: #fafafa; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .daily-feelings .quote-panel,.ritual-card,.deck-card:first-child { background: #234d6c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion:reduce) {
  .sky-cloud { animation: none; transform: none; }
}