/* ══════════════════════════════════════════════════════════════════
CHILL · the parts Sukoon and Tanaffus share (Version 2)
Sits on site.css and reads only its tokens, so all three owl themes
follow. The tools are the heroes: controls stay quiet (soft filled
pills, an Apple-style segmented control, white slider knobs), the
type is big and gentle, and motion is slow.
Components read a small "panel" palette (--p-*), so one button,
slider or segmented control works on the page and on a sage panel
(.ch-sage) without extra variants.
══════════════════════════════════════════════════════════════════ */
:root {
--ch-sage: var(--tile-chill); /* the Chill plane */
--ch-ink: var(--tile-ink); /* ink on sage */
--ch-sage-text: var(--sage); /* sage as text or a line on the page */
/* Breath phases (Tanaffus) */
--ch-in: var(--accent);
--ch-hold: var(--gold);
--ch-out: var(--lilac);
--ch-radius: 22px;
--ch-slow: 1.2s;
/* Panel palette: on the page by default */
--p-bg: var(--bg);
--p-fg: var(--fg);
--p-fg-2: var(--fg-2);
--p-fg-3: var(--fg-3);
--p-line: var(--line-2);
--p-fill: var(--bg-3);
--p-fill-2: var(--bg-4);
--p-raise: var(--bg-4);
}
:root[data-palette="snowy-owl"] { --p-fill: #E8E8ED; --p-fill-2: #DCDCE1; --p-raise: #FFFFFF; }
:root[data-palette="midnight"] { --p-raise: #3A3A3F; }
/* A sage plane with ink on it */
.ch-sage {
--p-bg: var(--ch-sage);
--p-fg: var(--ch-ink);
--p-fg-2: color-mix(in srgb, var(--ch-ink) 76%, transparent);
--p-fg-3: color-mix(in srgb, var(--ch-ink) 60%, transparent);
--p-line: color-mix(in srgb, var(--ch-ink) 18%, transparent);
--p-fill: color-mix(in srgb, var(--ch-ink) 8%, transparent);
--p-fill-2: color-mix(in srgb, var(--ch-ink) 14%, transparent);
--p-raise: color-mix(in srgb, #FFFFFF 70%, var(--ch-sage));
background: var(--ch-sage);
color: var(--ch-ink);
color-scheme: light;
}
/* ── Icons (inline SVG sprite: ) ── */
.ch-i {
width: 20px; height: 20px; flex-shrink: 0; display: block;
fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ch-i--fill { fill: currentColor; stroke: none; }
.ch-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ── Buttons: soft filled pills (Apple's secondary buttons) ─────── */
.ch-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 18px; border: 0; border-radius: 980px;
background: var(--p-fill); color: var(--p-fg);
font: 500 15px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap;
cursor: pointer; text-decoration: none !important;
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
transition: background-color .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), opacity .3s var(--ease);
}
.ch-btn:hover { background: var(--p-fill-2); }
.ch-btn:active { transform: scale(0.97); }
.ch-btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none; background: var(--p-fill); }
.ch-btn .ch-i { width: 18px; height: 18px; }
.ch-btn--solid { background: var(--p-fg); color: var(--p-bg); }
.ch-btn--solid:hover { background: var(--p-fg); opacity: 0.86; }
.ch-btn--lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.ch-btn--bare { background: transparent; padding: 0 12px; }
.ch-btn--bare:hover { background: var(--p-fill); }
.ch-icon-btn { padding: 0; width: 44px; }
.ch-btn:focus-visible, .ch-seg button:focus-visible, .ch-dialog :focus-visible {
outline: 2px solid var(--p-fg); outline-offset: 3px;
}
/* ── Segmented control (Apple's: a track, the choice raised on it) ─ */
.ch-seg {
display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
border-radius: 12px; background: var(--p-fill);
}
.ch-seg button {
min-width: 44px; min-height: 34px; padding: 0 13px;
border: 0; border-radius: 9px; background: transparent; color: var(--p-fg-2);
font: 500 14px/1 var(--font); letter-spacing: -0.006em; font-variant-numeric: tabular-nums;
cursor: pointer; touch-action: manipulation;
transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.ch-seg button:hover { color: var(--p-fg); }
.ch-seg button[aria-pressed="true"] {
background: var(--p-raise); color: var(--p-fg);
box-shadow: 0 1px 2px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
}
/* ── Slider (a thin track and a white knob) ──────────────────────── */
.ch-range {
--fill: 50%;
--tint: var(--p-fg);
--track: var(--p-line);
-webkit-appearance: none; appearance: none;
width: 100%; height: 28px; margin: 0; background: transparent;
cursor: pointer; touch-action: pan-y;
}
.ch-range:focus-visible { outline: none; } /* the knob carries the focus ring */
.ch-range::-webkit-slider-runnable-track {
height: 4px; border-radius: 4px;
background: linear-gradient(to right, var(--tint) 0 var(--fill), var(--track) var(--fill) 100%);
}
.ch-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; border: 0;
background: #FFFFFF;
box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.22);
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ch-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ch-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.22), 0 0 0 4px color-mix(in srgb, var(--tint) 40%, transparent); }
.ch-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--track); }
.ch-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--tint); }
.ch-range::-moz-range-thumb {
width: 20px; height: 20px; border: 0; border-radius: 50%;
background: #FFFFFF; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.22);
}
.ch-range:focus-visible::-moz-range-thumb { box-shadow: 0 2px 6px rgba(0,0,0,0.22), 0 0 0 4px color-mix(in srgb, var(--tint) 40%, transparent); }
/* ── The name of a tool, with its Arabic beside it ──────────────── */
.ch-title-ar {
font-family: var(--font-ar); font-weight: 600; letter-spacing: 0;
font-size: 0.6em; line-height: 1; color: var(--ch-sage-text);
direction: rtl; unicode-bidi: isolate;
}
/* small facts under a lead: plain text, a dot between */
.ch-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; font-size: 14px; line-height: 1.4; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ch-meta > span { white-space: nowrap; }
.ch-meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: currentColor; vertical-align: 0.24em; opacity: 0.7; }
.ch-meta b { font-weight: 600; color: var(--fg-2); }
/* ── Section head: a number, a headline, and a note beside it ───── */
.ch-sec { padding-block: clamp(80px, 10vw, 140px) 0; }
.ch-sec-head {
display: grid; gap: 14px 40px; align-items: end;
margin-bottom: clamp(28px, 3.4vw, 44px);
}
@media (min-width: 834px) { .ch-sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } }
.ch-sec-idx { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--ch-sage-text); font-variant-numeric: tabular-nums; }
.ch-sec-head h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.024em; font-weight: 600; }
.ch-sec-head p { max-width: 40ch; color: var(--fg-3); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.42; }
@media (min-width: 834px) { .ch-sec-head p { justify-self: end; text-align: right; } }
/* ── Toast (a small dark HUD, with an optional action) ──────────── */
.ch-toast {
position: fixed; left: 50%; z-index: 1000;
bottom: calc(20px + env(safe-area-inset-bottom) + var(--dock-space, 0px));
display: flex; align-items: center; gap: 6px;
width: max-content; max-width: min(calc(100vw - 32px), 520px); min-height: 46px; padding: 6px 6px 6px 20px;
border-radius: 980px; background: var(--fg); color: var(--bg);
font-size: 15px; line-height: 1.35; letter-spacing: -0.01em; box-shadow: var(--shadow-sm);
opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
transition: opacity .4s var(--ease), transform .5s var(--ease-out), bottom .4s var(--ease);
}
.ch-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ch-toast-msg { padding: 6px 12px 6px 0; min-width: 0; }
.ch-toast-act {
min-height: 34px; padding: 0 16px; border: 0; border-radius: 980px;
background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg);
font: 600 14px/1 var(--font); cursor: pointer;
}
.ch-toast-act:hover { background: color-mix(in srgb, var(--bg) 26%, transparent); }
.ch-toast-act[hidden] { display: none; }
.ch-toast:not(:has(.ch-toast-act:not([hidden]))) { padding-right: 20px; }
.ch-toast:not(:has(.ch-toast-act:not([hidden]))) .ch-toast-msg { padding-right: 0; }
/* ── Dialog (native