/* Calm 2.42. Existing element IDs and event handlers retain their behaviour. */
html.dark body {
  --bg:#12100d; --ink:#ece6d8; --heading:#fbf6ea; --sub:#b9af9b;
  --muted:#a39a86; --accent:#d99a55; --accent-text:#e6a866;
  --green:#7cc47a; --edge:rgba(255,248,235,.13); --hair:rgba(255,248,235,.08);
  --card:rgba(255,248,235,.045); --well:rgba(0,0,0,.24);
}
body { background:var(--bg); }
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at 25% 15%,#ff7d5233,transparent 45%),
    radial-gradient(ellipse at 80% 30%,#f5c45119,transparent 45%),
    radial-gradient(ellipse at 75% 95%,#5fd0b814,transparent 45%);
}
.sidebar {width:228px; min-width:228px; transition:width .45s cubic-bezier(.16,1,.3,1),min-width .45s; background:rgba(20,17,14,.72); backdrop-filter:blur(22px);}
.sidebar .logo-row {position:relative; padding-right:22px;}
#calm-sidebar-toggle {position:absolute; right:-8px; top:-8px; width:28px; height:28px; border:1px solid var(--edge); border-radius:9px; background:var(--card); color:var(--ink); cursor:pointer;}
.nav button {position:relative; border-radius:12px; min-height:39px;}
.nav button.on::before {content:""; position:absolute; left:0; height:22px; width:3px; border-radius:2px; background:var(--accent);}
.side-foot {display:grid; gap:12px; margin-top:auto;}
.side-foot #ver {display:inline;font-size:11.5px;font-weight:600;color:var(--sub);white-space:nowrap;}
.calm-bottom-links {display:flex; gap:6px;}
.calm-bottom-links button {flex:1; color:var(--sub); background:none; border:0; padding:8px 3px; cursor:pointer; border-radius:8px;}
.calm-bottom-links svg {width:16px; height:16px; margin-right:5px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.7;}
.calm-view {display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--sub);}
.calm-view button {border:0; background:none; color:inherit; padding:6px 9px; border-radius:999px; cursor:pointer;}
.calm-view button[aria-pressed="true"] {background:var(--accent); color:#191714; font-weight:700;}
body[data-rail="true"] .sidebar {width:72px; min-width:72px; padding-left:10px; padding-right:10px;}
body[data-rail="true"] .logo-copy, body[data-rail="true"] .calm-nav-label,
body[data-rail="true"] .calm-view-label, body[data-rail="true"] #srv-label {display:none;}
body[data-rail="true"] .logo-row {padding:0; min-height:42px;}
body[data-rail="true"] .nav button {justify-content:center; padding:10px;}
body[data-rail="true"] .calm-bottom-links {flex-direction:column;}
body[data-rail="true"] .calm-bottom-links button {font-size:0;}
body[data-rail="true"] .calm-bottom-links svg {margin:0;}
body[data-rail="true"] .calm-view {gap:0;}
body[data-rail="true"] .calm-view button {padding:6px;}
body[data-rail="true"] #connection-button {justify-content:center;}
.card, .group, .voice-step, .voice-off-hero, .home-hero {
  background:linear-gradient(160deg,rgba(255,248,235,.085),rgba(255,248,235,.042) 45%);
  border:1px solid var(--edge); border-radius:20px;
  backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px -32px rgba(0,0,0,.7);
}
.group {padding:20px 22px; margin-bottom:16px;}
.group.bare {background:linear-gradient(160deg,rgba(255,248,235,.06),rgba(255,248,235,.025));}
.row {border-color:var(--hair);}
.row .d, .gd {font-size:12.5px; color:var(--sub);}
h1, .page-head h1 {font:400 40px/1.1 'EB Garamond',serif; color:var(--heading);}
.home-head h1 {font-size:42px;}
#greeting, .page h1 {font-family:'EB Garamond',serif; font-weight:400;}
#greeting span {font-family:inherit; font-style:italic; font-weight:400;}
.home-head {position:relative; z-index:5;}
.home-hero {background:radial-gradient(at 0% 0%,#ff8a5c33,transparent 58%),radial-gradient(at 100% 100%,#f5c45119,transparent 60%),linear-gradient(160deg,#fff8eb17,#fff8eb0a); border-color:#ffbe8c38;}
.home-tile {--tint:240,166,94; position:relative; overflow:hidden; background:radial-gradient(at 0% 0%,rgba(var(--tint),.22),transparent 62%),linear-gradient(160deg,#fff8eb17,#fff8eb09); border:1px solid rgba(var(--tint),.30); box-shadow:inset 0 1px 0 #ffffff19,0 18px 40px -26px #000d; transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s;}
.home-tile:nth-child(2) {--tint:255,125,82;}.home-tile:nth-child(3) {--tint:199,125,255;}.home-tile:nth-child(4) {--tint:124,196,122;}
.home-tile::after {content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 35%,#ffffff19 50%,transparent 65%); transform:translateX(-130%); transition:transform 1s;}
.home-tile:hover {transform:translateY(-3px);}.home-tile:hover::after {transform:translateX(130%);}
.page.on > .card, .page.on > .group, .tab-panel.on > .group {animation:calm-rise .6s cubic-bezier(.16,1,.3,1) both;}
.page.on > :nth-child(2), .tab-panel.on > :nth-child(2) {animation-delay:.05s;}
.page.on > :nth-child(3), .tab-panel.on > :nth-child(3) {animation-delay:.1s;}
@keyframes calm-rise {from {opacity:0; transform:translateY(14px);} to {opacity:1; transform:translateY(0);}}
select {color-scheme:dark;} option {background:#221d18; color:#ece6d8;}
textarea {field-sizing:content; min-height:96px; max-height:340px; resize:vertical; border-radius:12px;}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {outline:2px solid #e6a866; outline-offset:3px;}
.sw {width:40px; height:24px;}.sw i {border-radius:999px;}
.tabs {display:flex; gap:4px; background:var(--well); border:1px solid var(--edge); border-radius:999px; padding:4px;}
.tabs button {border:0!important; border-radius:999px; padding:9px 14px;}
.tabs button.on {background:var(--accent); color:#191714; font-weight:700;}
.calm-advanced-hidden, .calm-row-hidden, .calm-profile-hidden {display:none!important;}
.calm-custom {display:inline-flex; align-items:center; gap:7px; border:1px solid var(--edge); background:var(--well); color:var(--accent-text,var(--accent)); border-radius:999px; padding:5px 10px; margin:5px 0; font:600 12px Figtree; cursor:pointer;}
.calm-changed {display:inline-block; padding:2px 6px; margin-left:8px; border-radius:6px; font:600 10px Figtree; color:var(--accent-text,var(--accent)); background:#d99a5519;}
.calm-more {font-size:12.5px; color:var(--sub); padding:8px;}.calm-more button {border:0; background:none; color:var(--accent-text,var(--accent)); text-decoration:underline; cursor:pointer;}
.calm-profile-tip {display:none; position:absolute; right:0; top:100%; width:320px; padding:16px; border:1px solid var(--edge); border-radius:16px; background:#28231bf5; color:#ece6d8; box-shadow:0 16px 40px #0008; z-index:20; font-size:12.5px; text-align:left;}
#profile-card {position:relative;}.calm-profile-tip p {margin:8px 0;}.calm-profile-tip .excluded {opacity:.38;}
#profile-card:focus-within .calm-profile-tip, #profile-card:hover .calm-profile-tip {display:block;}
.calm-home-toggle {border:1px solid var(--edge); border-radius:999px; background:var(--well); color:var(--sub); padding:5px 10px; cursor:pointer;}
.calm-section-summary {font-size:13px; color:var(--sub); padding:12px;}
.calm-ai-chip {display:inline-flex; align-items:center; gap:6px; border:1px solid var(--edge); border-radius:999px; background:var(--well); padding:6px 10px; color:var(--ink); cursor:pointer; font:600 12px Figtree;}
.calm-ai-chip[aria-pressed="true"]::before {content:"✓"; color:var(--green);}
.calm-family-columns {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.calm-family-columns section {padding:12px; border:1px solid var(--edge); border-radius:12px; overflow-wrap:anywhere;}
.calm-feedback-history {white-space:pre-wrap; max-height:280px; overflow:auto; border:1px solid var(--edge); border-radius:12px; padding:12px;}
dialog, .setup-box {background:linear-gradient(160deg,#28221ef9,#191714fa); color:var(--ink); border:1px solid var(--edge); border-radius:20px; box-shadow:0 24px 70px #0009;}
dialog::backdrop {background:#0008; backdrop-filter:blur(8px);}
dialog h2, .setup-box h2 {font:400 28px 'EB Garamond',serif;}
#toast {border-radius:999px; padding:12px 20px; background:linear-gradient(#342e27f2,#191714f7); color:#fbf6ea; border:1px solid #fff8eb24; box-shadow:0 16px 40px -14px #000c;}
.calm-help-group {font:400 22px 'EB Garamond',serif; color:var(--heading); margin:18px 0 8px;}
.reading-panel {grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
#reading-panel .reading-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.calm-help-group {grid-column:1/-1;}
#group-speech[data-conn="hosted"] .conn-server {display:none!important;}
.calm-setup-demo {display:block!important;width:240px;max-width:100%;margin:18px auto;}
@media(max-width:760px) {#reading-panel .reading-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
html:not(.dark) body .sidebar {background:#fff8eddd;}
html:not(.dark) body .card, html:not(.dark) body .group, html:not(.dark) body .home-hero, html:not(.dark) body .home-tile {background:var(--card); color:var(--ink);}
html:not(.dark) body select {color-scheme:light;}html:not(.dark) body option {background:#fff8ed; color:#2b2b2b;}
@media(max-width:760px) {.sidebar {width:190px; min-width:190px;} .tabs {flex-wrap:wrap; border-radius:18px;} .tabs button {padding:7px 10px;} .calm-family-columns {grid-template-columns:1fr;} .reading-panel {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important; transition:none!important; scroll-behavior:auto!important;}}
