/*
 * AstroCalc "Clarity" design layer. Spec: docs/design/design-system-clarity.md
 * Plan: docs/audits/design-unification.md (section 3).
 *
 * HOW A PAGE OPTS IN
 *   Load this file AFTER bootstrap + astro.css and put class="clarity" on <body>:
 *     <link rel="stylesheet" href="/css/clarity.css">
 *     <body class="clarity"> ... </body>
 *   Nothing in this file applies outside a .clarity subtree, so legacy pages are unchanged.
 *   Put .clarity on <body> (not a wrapper) so Bootstrap modals/dropdowns/toasts, which are
 *   rendered inside <body>, inherit the --bs-* bridge below.
 *
 * LAYERS
 *   1. fonts           Anek Latin + Anek Devanagari, self-hosted variable woff2
 *   2. tokens          --cl-*  (colour, type, space, radius, motion); light + dark
 *   3. bootstrap bridge  re-points --bs-* at the tokens so existing Bootstrap markup restyles itself
 *   4. base            typography, links, focus, utilities
 *   5. components      .cl-tile .cl-btn .cl-input .cl-seg .cl-chip .cl-pill .cl-meter .cl-bar
 *                      .cl-heat .cl-row .cl-details .cl-sheet .cl-toast .cl-graha
 *   6. motion          .cl-rise (stagger via --i), reduced-motion block
 *
 * THEME
 *   Dark keys off the app's existing attribute: html[data-bs-theme="dark"] (theme.js +
 *   partials/pre-paint.html). html[data-theme="dark"] is also accepted so prototype markup
 *   can be pasted verbatim. With neither attribute present the OS preference is followed.
 *
 * RULES (design-system-clarity.md section 10): no gradients, no box-shadow, no borders on
 * tiles, no blur, no purple. One accent per screen. Heat colours are never used without a word.
 *
 * ACCENT AND CONTRAST (audit R1)
 *   --cl-accent         #D9480F  large graphics, the "you are here" marker, focus ring
 *   --cl-accent-strong  #C2410C  every FILL that carries text and every link/text in accent
 *                                (white on it = 5.18:1; on --cl-tile = 4.63:1). #D9480F fails (4.30 / 3.85).
 *
 * landing-clarity.css (the pilot) defines the same values under bare names (--bg, --tile, ...).
 * Mapping, so that file can be deleted once the landing adopts this one:
 *   --bg --tile --tile-2 --rule --text --text-2 --accent --accent-soft --on-accent --inv-*  ->  --cl-<same name>
 *   --accent-text / --accent-strong -> --cl-accent-strong      --accent-hover -> --cl-accent-hover
 *   --h1..--h9 --f1..--f9 -> --cl-h1..--cl-h9 --cl-f1..--cl-f9 (identical values)
 *   .btn -> .cl-btn   .inp -> .cl-input   .seg-lang -> .cl-seg   .tile(.inv) -> .cl-tile(--inv)
 *   .ht/.heat/.s1-.s9 -> .cl-ht/.cl-heat/.cl-s1-.cl-s9   .meter -> .cl-meter   .lbl -> .cl-label
 *   .tl -> .cl-link   .sr/.skip/.wrap -> .cl-sr/.cl-skip/.cl-wrap   svg.i -> .cl-icon
 *   :focus-visible, [x-cloak], .clarity{font stack,size} base rules are reproduced in "base".
 * Intentional difference: the landing's .btn fills with #D9480F (4.30:1 with white text);
 * .cl-btn fills with --cl-accent-strong.
 */

/* ───────── 1. Fonts ───────── */
@font-face{
  font-family:"Anek Latin";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/anek/AnekLatin-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Anek Latin";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/anek/AnekLatin-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Anek Devanagari";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/anek/AnekDevanagari-devanagari.woff2") format("woff2");
  unicode-range:U+0900-097F,U+1CD0-1CF4,U+1CF7-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B0A;
}

/* ───────── 2. Tokens ───────── */
.clarity{
  /* Surface */
  --cl-bg:#FBFBFD; --cl-tile:#F2F2F5; --cl-tile-2:#E4E4E9; --cl-rule:#D8D8DD; --cl-seg-past:#BDBDC6;
  --cl-bg-rgb:251,251,253;
  /* Text */
  --cl-text:#1D1D1F; --cl-text-2:#6E6E73; --cl-text-rgb:29,29,31;
  /* Accent */
  --cl-accent:#D9480F; --cl-accent-strong:#C2410C; --cl-accent-strong-rgb:194,65,12;
  --cl-accent-hover:#B23C0B; --cl-accent-soft:#FBE3D6; --cl-on-accent:#FFFFFF;
  --cl-err:#B42318;
  /* Inverse tile / toast */
  --cl-inv-bg:#1D1D1F; --cl-inv-fg:#F5F5F7; --cl-inv-fg-2:#A1A1A6;
  --cl-inv-accent:#FF7A3D; --cl-inv-on-accent:#1D0A02; --cl-inv-field:#2C2C30;
  /* Heat scale: h9 strongest ... h1 most in need of care; f = text colour on that fill. */
  --cl-h9:#2F9E5B; --cl-h8:#7DC898; --cl-h7:#C2E7D0;
  --cl-h6:#FFF4D6; --cl-h5:#FADF8E; --cl-h4:#E0A100;
  --cl-h3:#FDE7E4; --cl-h2:#F2A9A2; --cl-h1:#C73A3A;
  --cl-f9:#05210F; --cl-f8:#05210F; --cl-f7:#05210F;
  --cl-f6:#3A2C00; --cl-f5:#3A2C00; --cl-f4:#2A1F00;
  --cl-f3:#4A1210; --cl-f2:#4A1210; --cl-f1:#FFFFFF;
  /* Three-word aliases (always shown with the word Strong / Mixed / Needs care) */
  --cl-strong:var(--cl-h9); --cl-strong-fg:var(--cl-f9);
  --cl-mixed:var(--cl-h5);  --cl-mixed-fg:var(--cl-f5);
  --cl-care:var(--cl-h2);   --cl-care-fg:var(--cl-f2);
  /* Graha persona glyph (public/images/grahas.svg) */
  --pg-disc:var(--cl-tile); --pg-a:var(--cl-text); --pg-b:#F0A27A;

  /* Shape */
  --cl-r-section:20px; --cl-r-tile:14px; --cl-r-pill:999px;
  /* Space: 4pt base */
  --cl-sp-1:.25rem; --cl-sp-2:.5rem; --cl-sp-3:.75rem; --cl-sp-4:1rem; --cl-sp-5:1.5rem;
  --cl-sp-6:2rem; --cl-sp-7:3rem; --cl-sp-8:4rem; --cl-sp-9:6rem; --cl-sp-10:10rem;
  --cl-section-gap:var(--cl-sp-8);
  /* Type (rem so user text-size preferences work) */
  --cl-font:"Anek Latin","Anek Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cl-fs-small:.875rem;
  --cl-fs-body:1.0625rem;
  --cl-fs-lead:1.1875rem;
  --cl-fs-tile-title:1.5rem;
  --cl-fs-section:clamp(1.875rem,1.2rem + 2.6vw,3rem);
  --cl-fs-h1-app:clamp(2.125rem,1.5rem + 2.4vw,3rem);
  --cl-fs-h1-marketing:clamp(2.75rem,1.2rem + 5vw,5rem);
  --cl-fs-number:3.5rem;
  --cl-fw-normal:400; --cl-fw-medium:500; --cl-fw-bold:700;
  --cl-lh:1.5; --cl-tracking:-.02em;
  /* Motion */
  --cl-ease:cubic-bezier(.2,.7,.2,1);
  --cl-d-fast:150ms; --cl-d-base:300ms; --cl-d-enter:500ms; --cl-stagger:40ms;
  /* Sizes */
  --cl-hit:2.75rem;       /* 44px minimum tap target */
  --cl-control:3.5rem;    /* 56px input */
  --cl-button:3.25rem;    /* 52px primary button */
  color-scheme:light;
}
@media (min-width:900px){
  .clarity{--cl-fs-body:1.125rem;--cl-section-gap:var(--cl-sp-9)}
}
/* Hindi: +1px and line-height 1.6 */
html.lang-hi .clarity{--cl-fs-body:1.125rem;--cl-fs-small:.9375rem;--cl-lh:1.6;--cl-tracking:0}
@media (min-width:900px){
  html.lang-hi .clarity{--cl-fs-body:1.1875rem}
}
/* Neutralise astro.css "html.lang-hi{font-size:1.2em}" only on pages that opt in. */
html.lang-hi:has(body.clarity){font-size:100%}

/* Dark: keyed off the app attribute. Written once, emitted for each selector below by the build comment. */
[data-bs-theme="dark"] .clarity,
.clarity[data-bs-theme="dark"],
:root[data-theme="dark"] .clarity{
  --cl-bg:#0B0B0D; --cl-tile:#1A1A1E; --cl-tile-2:#27272C; --cl-rule:#2E2E34; --cl-seg-past:#4B4B53;
  --cl-bg-rgb:11,11,13;
  --cl-text:#F5F5F7; --cl-text-2:#A1A1A6; --cl-text-rgb:245,245,247;
  --cl-accent:#FF7A3D; --cl-accent-strong:#FF7A3D; --cl-accent-strong-rgb:255,122,61;
  --cl-accent-hover:#FF9460; --cl-accent-soft:#3A2013; --cl-on-accent:#1D0A02;
  --cl-err:#FF8A80;
  --cl-inv-bg:#F5F5F7; --cl-inv-fg:#1D1D1F; --cl-inv-fg-2:#6E6E73;
  --cl-inv-accent:#C2410C; --cl-inv-on-accent:#FFFFFF; --cl-inv-field:#E4E4E9;
  --cl-h9:#2A7D4F; --cl-h8:#1F5E3B; --cl-h7:#173F29;
  --cl-h6:#3B3216; --cl-h5:#5E4A0F; --cl-h4:#7D6000;
  --cl-h3:#3A1E1D; --cl-h2:#5C2625; --cl-h1:#8F2D2D;
  --cl-f9:#F5F5F7; --cl-f8:#F5F5F7; --cl-f7:#F5F5F7; --cl-f6:#F5F5F7; --cl-f5:#F5F5F7;
  --cl-f4:#F5F5F7; --cl-f3:#F5F5F7; --cl-f2:#F5F5F7; --cl-f1:#F5F5F7;
  --pg-b:#C2602F;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html:not([data-bs-theme]):not([data-theme]) .clarity{
    --cl-bg:#0B0B0D; --cl-tile:#1A1A1E; --cl-tile-2:#27272C; --cl-rule:#2E2E34; --cl-seg-past:#4B4B53;
    --cl-bg-rgb:11,11,13;
    --cl-text:#F5F5F7; --cl-text-2:#A1A1A6; --cl-text-rgb:245,245,247;
    --cl-accent:#FF7A3D; --cl-accent-strong:#FF7A3D; --cl-accent-strong-rgb:255,122,61;
    --cl-accent-hover:#FF9460; --cl-accent-soft:#3A2013; --cl-on-accent:#1D0A02;
    --cl-err:#FF8A80;
    --cl-inv-bg:#F5F5F7; --cl-inv-fg:#1D1D1F; --cl-inv-fg-2:#6E6E73;
    --cl-inv-accent:#C2410C; --cl-inv-on-accent:#FFFFFF; --cl-inv-field:#E4E4E9;
    --cl-h9:#2A7D4F; --cl-h8:#1F5E3B; --cl-h7:#173F29;
    --cl-h6:#3B3216; --cl-h5:#5E4A0F; --cl-h4:#7D6000;
    --cl-h3:#3A1E1D; --cl-h2:#5C2625; --cl-h1:#8F2D2D;
    --cl-f9:#F5F5F7; --cl-f8:#F5F5F7; --cl-f7:#F5F5F7; --cl-f6:#F5F5F7; --cl-f5:#F5F5F7;
    --cl-f4:#F5F5F7; --cl-f3:#F5F5F7; --cl-f2:#F5F5F7; --cl-f1:#F5F5F7;
    --pg-b:#C2602F;
    color-scheme:dark;
  }
}

/* ───────── 3. Bootstrap bridge ─────────
 * Bootstrap 5.3 reads colour and radius from --bs-* at element level, so re-pointing them here
 * restyles accordion, modal, dropdown, form-control, toast and .btn-primary without touching markup. */
.clarity{
  --bs-body-bg:var(--cl-bg); --bs-body-bg-rgb:var(--cl-bg-rgb);
  --bs-body-color:var(--cl-text); --bs-body-color-rgb:var(--cl-text-rgb);
  --bs-emphasis-color:var(--cl-text); --bs-emphasis-color-rgb:var(--cl-text-rgb);
  --bs-secondary-color:var(--cl-text-2); --bs-tertiary-color:var(--cl-text-2);
  --bs-secondary-bg:var(--cl-tile); --bs-tertiary-bg:var(--cl-tile);
  --bs-border-color:transparent; --bs-border-color-translucent:transparent;
  --bs-border-radius:var(--cl-r-tile); --bs-border-radius-lg:var(--cl-r-section);
  --bs-border-radius-xl:var(--cl-r-section); --bs-border-radius-pill:var(--cl-r-pill);
  --bs-primary:var(--cl-accent-strong); --bs-primary-rgb:var(--cl-accent-strong-rgb);
  --bs-link-color:var(--cl-accent-strong); --bs-link-color-rgb:var(--cl-accent-strong-rgb);
  --bs-link-hover-color:var(--cl-accent-hover);
  --bs-body-font-family:var(--cl-font);
  --bs-focus-ring-color:rgba(var(--cl-accent-strong-rgb),.35);
}
.clarity .btn-primary{
  --bs-btn-bg:var(--cl-accent-strong); --bs-btn-border-color:var(--cl-accent-strong); --bs-btn-color:var(--cl-on-accent);
  --bs-btn-hover-bg:var(--cl-accent-hover); --bs-btn-hover-border-color:var(--cl-accent-hover); --bs-btn-hover-color:var(--cl-on-accent);
  --bs-btn-active-bg:var(--cl-accent-hover); --bs-btn-active-border-color:var(--cl-accent-hover); --bs-btn-active-color:var(--cl-on-accent);
  --bs-btn-disabled-bg:var(--cl-accent-strong); --bs-btn-disabled-border-color:var(--cl-accent-strong);
  --bs-btn-focus-shadow-rgb:var(--cl-accent-strong-rgb);
}
.clarity .btn-outline-secondary,.clarity .btn-light{
  --bs-btn-bg:var(--cl-tile-2); --bs-btn-border-color:transparent; --bs-btn-color:var(--cl-text);
  --bs-btn-hover-bg:var(--cl-rule); --bs-btn-hover-border-color:transparent; --bs-btn-hover-color:var(--cl-text);
  --bs-btn-active-bg:var(--cl-rule); --bs-btn-active-border-color:transparent; --bs-btn-active-color:var(--cl-text);
}
.clarity .modal-content,.clarity .dropdown-menu,.clarity .toast,.clarity .offcanvas{
  --bs-modal-bg:var(--cl-tile); --bs-dropdown-bg:var(--cl-tile); --bs-offcanvas-bg:var(--cl-tile);
  --bs-modal-border-width:0; --bs-dropdown-border-width:0; --bs-modal-border-radius:var(--cl-r-section);
  --bs-dropdown-link-hover-bg:var(--cl-tile-2); --bs-dropdown-link-color:var(--cl-text); --bs-dropdown-color:var(--cl-text);
  box-shadow:none; outline:1px solid var(--cl-rule);
}
.clarity .modal-content{border-radius:var(--cl-r-section)}
.clarity .accordion{
  --bs-accordion-bg:var(--cl-tile); --bs-accordion-border-width:0; --bs-accordion-border-radius:var(--cl-r-tile);
  --bs-accordion-inner-border-radius:var(--cl-r-tile); --bs-accordion-btn-bg:var(--cl-tile);
  --bs-accordion-active-bg:var(--cl-tile); --bs-accordion-active-color:var(--cl-text);
  --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-color:var(--cl-text);
}
.clarity .form-control,.clarity .form-select{
  background-color:var(--cl-tile); color:var(--cl-text); border:0; border-radius:var(--cl-r-tile); box-shadow:none;
}
.clarity .form-control:focus,.clarity .form-select:focus{
  background-color:var(--cl-tile); color:var(--cl-text); outline:2px solid var(--cl-accent); outline-offset:0; box-shadow:none;
}
.clarity .progress{--bs-progress-bg:var(--cl-tile-2);--bs-progress-bar-bg:var(--cl-text);--bs-progress-border-radius:6px}

/* ───────── 4. Base ───────── */
.clarity,.clarity *,.clarity *::before,.clarity *::after{box-sizing:border-box}
.clarity{
  background:var(--cl-bg); color:var(--cl-text);
  font-family:var(--cl-font); font-size:var(--cl-fs-body); line-height:var(--cl-lh); font-weight:var(--cl-fw-normal);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
html .clarity :is(h1,h2,h3,h4),
html.lang-hi .clarity :is(h1,h2,h3,h4){
  font-family:var(--cl-font); font-weight:var(--cl-fw-bold); letter-spacing:var(--cl-tracking);
  line-height:1.15; text-wrap:balance; color:var(--cl-text);
}
html.lang-hi .clarity :is(h1,h2,h3,h4){line-height:1.35}
.clarity h1{font-size:var(--cl-fs-h1-app)}
.clarity h2{font-size:var(--cl-fs-section)}
.clarity h3{font-size:var(--cl-fs-tile-title)}
.clarity h4{font-size:var(--cl-fs-lead)}
.clarity .cl-h1-marketing{font-size:var(--cl-fs-h1-marketing);line-height:1.04}
.clarity .cl-number{font-size:var(--cl-fs-number);line-height:1.05;font-weight:var(--cl-fw-bold);letter-spacing:-.025em}
.clarity .cl-lead{font-size:var(--cl-fs-lead);color:var(--cl-text-2)}
.clarity .cl-small{font-size:var(--cl-fs-small);line-height:1.4}
.clarity .cl-muted{color:var(--cl-text-2)}
.clarity a{color:var(--cl-accent-strong)}
.clarity a:hover{color:var(--cl-accent-hover)}
.clarity :focus-visible{outline:2px solid var(--cl-accent);outline-offset:2px;border-radius:6px}
.clarity hr{border:0;border-top:1px solid var(--cl-rule);opacity:1}
.clarity table{border-collapse:collapse}
.clarity :is(th,td){border-color:var(--cl-rule)}
.clarity ::selection{background:var(--cl-accent-soft);color:var(--cl-text)}
html[data-bs-theme="dark"].lang-hi .clarity{font-weight:var(--cl-fw-medium)}
.clarity [x-cloak]{display:none!important}
.clarity .cl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.clarity .cl-skip{position:absolute;left:.5rem;top:-4rem;background:var(--cl-text);color:var(--cl-bg);padding:.625rem .875rem;border-radius:.5rem;z-index:100;text-decoration:none}
.clarity .cl-skip:focus{top:.5rem}
.clarity .cl-wrap{max-width:72.5rem;margin:0 auto;padding:0 1.25rem}
@media (min-width:900px){.clarity .cl-wrap{padding:0 2rem}}
.clarity .cl-section{padding:var(--cl-sp-8) 0}
@media (min-width:900px){.clarity .cl-section{padding:var(--cl-sp-9) 0}}
.clarity .cl-icon{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.clarity .cl-label{display:block;font-size:var(--cl-fs-small);line-height:1.35;color:var(--cl-text-2);font-weight:var(--cl-fw-medium)}

/* ───────── 5. Components ───────── */

/* Tile: flat fill, no border, no shadow. Header = .cl-label + headline (h3) + one sentence. */
.clarity .cl-tile{background:var(--cl-tile);border-radius:var(--cl-r-section);padding:1.5rem;--pg-disc:var(--cl-bg)}
@media (min-width:900px){.clarity .cl-tile{padding:2rem}}
.clarity .cl-tile--sm{border-radius:var(--cl-r-tile);padding:1rem 1.25rem}
.clarity .cl-tile--inv{background:var(--cl-inv-bg);color:var(--cl-inv-fg);--pg-disc:var(--cl-tile)}
.clarity .cl-tile--inv :is(.cl-label,.cl-lead,.cl-muted){color:var(--cl-inv-fg-2)}
.clarity .cl-tile--inv :is(h1,h2,h3,h4){color:var(--cl-inv-fg)}
.clarity .cl-tile--inv .cl-btn{background:var(--cl-inv-accent);color:var(--cl-inv-on-accent)}
.clarity .cl-tile--inv .cl-link{color:var(--cl-inv-accent)}
.clarity .cl-tile-grid{display:grid;gap:.75rem}
@media (min-width:760px){.clarity .cl-tile-grid{grid-template-columns:repeat(3,1fr)}}
/* Locked tile: same tile, one short line and a sign-in link. No blur. */
.clarity .cl-tile--locked{display:flex;flex-direction:column;gap:.5rem}
.clarity .cl-tile--locked p{color:var(--cl-text-2);flex:1}

/* Button: primary = kesari pill (fill uses --cl-accent-strong for contrast). */
.clarity .cl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:var(--cl-button);padding:0 1.75rem;border:0;border-radius:var(--cl-r-pill);
  background:var(--cl-accent-strong);color:var(--cl-on-accent);
  font:inherit;font-weight:var(--cl-fw-bold);font-size:1.1875rem;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--cl-d-fast) var(--cl-ease);
}
.clarity .cl-btn:hover{background:var(--cl-accent-hover);color:var(--cl-on-accent)}
.clarity .cl-btn:active{background:var(--cl-accent-hover)}
.clarity .cl-btn:focus-visible{outline:2px solid var(--cl-accent);outline-offset:2px;border-radius:var(--cl-r-pill)}
.clarity .cl-btn:disabled,.clarity .cl-btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;pointer-events:none}
.clarity .cl-btn[aria-busy="true"]{opacity:.6;cursor:progress}
.clarity .cl-btn--lg{min-height:3.5rem}
.clarity .cl-btn--block{display:flex;width:100%}
/* Tertiary: --cl-tile-2 pill */
.clarity .cl-btn--tertiary{background:var(--cl-tile-2);color:var(--cl-text)}
.clarity .cl-btn--tertiary:hover{background:var(--cl-rule);color:var(--cl-text)}
/* Secondary = text link with an arrow */
.clarity .cl-link{display:inline-flex;gap:.375rem;align-items:center;color:var(--cl-accent-strong);font-weight:600;text-decoration:none;min-height:var(--cl-hit)}
.clarity .cl-link:hover{color:var(--cl-accent-hover);text-decoration:underline;text-underline-offset:3px}
.clarity .cl-link--arrow::after{content:"\2192"}

/* Input: 56px filled tile, label above, no border, 2px accent ring on focus. */
.clarity .cl-field{display:block;min-width:0}
.clarity .cl-field>.cl-label{margin:0 0 .375rem .125rem}
.clarity .cl-input{
  display:block;width:100%;min-width:0;height:var(--cl-control);padding:0 1rem;border:0;border-radius:var(--cl-r-tile);
  background:var(--cl-tile);color:var(--cl-text);font:inherit;font-size:1.0625rem;font-weight:var(--cl-fw-medium);text-align:left;
  appearance:none;-webkit-appearance:none;
}
.clarity .cl-input::placeholder{color:var(--cl-text-2);font-weight:var(--cl-fw-normal)}
.clarity .cl-input:focus{outline:2px solid var(--cl-accent);outline-offset:0}
.clarity .cl-input:disabled{opacity:.45}
.clarity .cl-input[aria-invalid="true"]{outline:2px solid var(--cl-err);outline-offset:0}
.clarity textarea.cl-input{height:auto;min-height:7rem;padding:1rem;line-height:var(--cl-lh)}
.clarity .cl-field-error{color:var(--cl-err);font-size:var(--cl-fs-small);margin-top:.375rem}
.clarity .cl-check{display:inline-flex;gap:.625rem;align-items:center;color:var(--cl-text-2);cursor:pointer;min-height:var(--cl-hit)}
.clarity .cl-check input{width:1.25rem;height:1.25rem;accent-color:var(--cl-accent-strong);margin:0;flex:none}
/* Typeahead list: 56px rows */
.clarity .cl-list{list-style:none;margin:.25rem 0 0;padding:.25rem;background:var(--cl-tile);border-radius:var(--cl-r-tile);outline:1px solid var(--cl-rule)}
.clarity .cl-list>li,.clarity .cl-list>button{
  display:flex;align-items:center;width:100%;min-height:var(--cl-control);padding:0 1rem;border:0;background:transparent;
  color:var(--cl-text);font:inherit;text-align:left;border-radius:.625rem;cursor:pointer;
}
.clarity .cl-list>:is(li,button):hover,.clarity .cl-list>:is(li,button)[aria-selected="true"]{background:var(--cl-tile-2)}

/* Segmented control: pill track, selected = text/bg inverted. */
.clarity .cl-seg{display:inline-flex;background:var(--cl-tile);border-radius:var(--cl-r-pill);padding:.1875rem;gap:0}
.clarity .cl-seg>:is(button,a){
  border:0;background:transparent;color:var(--cl-text-2);font:inherit;font-size:.875rem;font-weight:600;
  min-height:2.5rem;min-width:var(--cl-hit);padding:0 .875rem;border-radius:var(--cl-r-pill);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
.clarity .cl-seg>:is(button,a):hover{color:var(--cl-text)}
.clarity .cl-seg>:is([aria-pressed="true"],[aria-selected="true"],[aria-current="true"],.is-active){background:var(--cl-text);color:var(--cl-bg)}

/* Chip: filters and sort. */
.clarity .cl-chip{
  display:inline-flex;align-items:center;gap:.5rem;min-height:var(--cl-hit);padding:0 1rem;border:0;border-radius:var(--cl-r-pill);
  background:var(--cl-tile-2);color:var(--cl-text);font:inherit;font-size:.9375rem;font-weight:500;cursor:pointer;white-space:nowrap;
}
.clarity .cl-chip:hover{background:var(--cl-rule)}
.clarity .cl-chip[aria-pressed="true"],.clarity .cl-chip.is-active{background:var(--cl-text);color:var(--cl-bg)}
.clarity .cl-chip-rail{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}
.clarity .cl-chip-rail::-webkit-scrollbar{display:none}

/* Status pill: always a word. Add .cl-pill--mark for the optional shape. */
.clarity .cl-pill{
  display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:.625rem;
  font-size:var(--cl-fs-small);font-weight:600;line-height:1.3;background:var(--cl-tile-2);color:var(--cl-text);
}
.clarity .cl-pill--strong{background:var(--cl-strong);color:var(--cl-strong-fg)}
.clarity .cl-pill--mixed{background:var(--cl-mixed);color:var(--cl-mixed-fg)}
.clarity .cl-pill--care{background:var(--cl-care);color:var(--cl-care-fg)}
.clarity .cl-pill--mark.cl-pill--strong::before{content:"\25CF"}
.clarity .cl-pill--mark.cl-pill--mixed::before{content:"\25D0"}
.clarity .cl-pill--mark.cl-pill--care::before{content:"\25CB"}

/* Meter (9 cells) and bar (continuous). Set role="meter" + aria-valuetext in markup. */
.clarity .cl-meter{display:flex;gap:4px;--cl-mc:var(--cl-text)}
.clarity .cl-meter>i{flex:1;height:12px;border-radius:4px;background:var(--cl-tile-2);display:block}
.clarity .cl-meter>i.on{background:var(--cl-mc)}
.clarity .cl-bar{height:12px;border-radius:6px;background:var(--cl-tile-2);overflow:hidden;--cl-mc:var(--cl-text)}
.clarity .cl-bar>span{display:block;height:100%;width:var(--cl-v,0%);background:var(--cl-mc);border-radius:inherit;transition:width var(--cl-d-enter) var(--cl-ease)}
.clarity :is(.cl-meter,.cl-bar).cl-strong{--cl-mc:var(--cl-strong)}
.clarity :is(.cl-meter,.cl-bar).cl-mixed{--cl-mc:var(--cl-h4)}
.clarity :is(.cl-meter,.cl-bar).cl-care{--cl-mc:var(--cl-h1)}

/* Heat tiles: .cl-ht sits on --cl-bg; the word label is mandatory. State via .cl-s1 ... .cl-s9. */
.clarity .cl-heat{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media (min-width:900px){.clarity .cl-heat{gap:.625rem}}
.clarity .cl-ht{
  appearance:none;border:0;text-align:left;border-radius:var(--cl-r-tile);padding:.875rem .875rem .75rem;min-height:6rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;background:var(--cl-hc,var(--cl-tile));color:var(--cl-fc,var(--cl-text));
  font:inherit;font-weight:500;
}
.clarity .cl-ht__name{font-size:.9375rem;line-height:1.25;font-weight:600;letter-spacing:-.005em}
.clarity .cl-ht__word{font-size:.8125rem;font-weight:500}
@media (min-width:900px){
  .clarity .cl-ht{min-height:6.25rem;padding:.875rem 1rem .75rem}
  .clarity .cl-ht__name{font-size:1.0625rem}
  .clarity .cl-ht__word{font-size:.875rem}
}
.clarity button.cl-ht{cursor:pointer}
.clarity button.cl-ht:hover{filter:brightness(.96)}
.clarity .cl-ht[aria-pressed="true"]{outline:3px solid var(--cl-text);outline-offset:2px}
.clarity .cl-s9{--cl-hc:var(--cl-h9);--cl-fc:var(--cl-f9)}
.clarity .cl-s8{--cl-hc:var(--cl-h8);--cl-fc:var(--cl-f8)}
.clarity .cl-s7{--cl-hc:var(--cl-h7);--cl-fc:var(--cl-f7)}
.clarity .cl-s6{--cl-hc:var(--cl-h6);--cl-fc:var(--cl-f6)}
.clarity .cl-s5{--cl-hc:var(--cl-h5);--cl-fc:var(--cl-f5)}
.clarity .cl-s4{--cl-hc:var(--cl-h4);--cl-fc:var(--cl-f4)}
.clarity .cl-s3{--cl-hc:var(--cl-h3);--cl-fc:var(--cl-f3)}
.clarity .cl-s2{--cl-hc:var(--cl-h2);--cl-fc:var(--cl-f2)}
.clarity .cl-s1{--cl-hc:var(--cl-h1);--cl-fc:var(--cl-f1)}
.clarity .cl-legend{display:flex;flex-wrap:wrap;gap:.375rem 1.125rem;font-size:var(--cl-fs-small);color:var(--cl-text-2)}
.clarity .cl-legend>span{display:inline-flex;align-items:center;gap:.4375rem}
.clarity .cl-legend i{width:.875rem;height:.875rem;border-radius:5px;display:block;background:var(--cl-hc)}

/* List row: hairline divider only. */
.clarity .cl-row{display:flex;align-items:center;gap:.75rem;min-height:var(--cl-hit);padding:.75rem 0;border-bottom:1px solid var(--cl-rule)}
.clarity .cl-row:last-child{border-bottom:0}

/* Disclosure: native <details class="cl-details">. */
.clarity .cl-details{border-bottom:1px solid var(--cl-rule)}
.clarity .cl-details>summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;padding:.5rem 0;
  list-style:none;cursor:pointer;font-weight:600;
}
.clarity .cl-details>summary::-webkit-details-marker{display:none}
.clarity .cl-details>summary::after{
  content:"";width:.5rem;height:.5rem;flex:none;border-right:2px solid var(--cl-text-2);border-bottom:2px solid var(--cl-text-2);
  transform:rotate(45deg);transition:transform var(--cl-d-base) var(--cl-ease);
}
.clarity .cl-details[open]>summary::after{transform:rotate(-135deg)}
.clarity .cl-details>:not(summary){padding-bottom:1rem;color:var(--cl-text-2)}

/* Bottom sheet. Behaviour (inert on page, focus trap, Esc, focus restore) lives in JS (story F-3);
 * state is data-open="true". Mobile: slides up. Desktop: centred 560px. Outline, never a shadow. */
.clarity .cl-sheet-backdrop{
  position:fixed;inset:0;z-index:1040;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;
  transition:opacity var(--cl-d-base) var(--cl-ease),visibility 0s linear var(--cl-d-base);
}
.clarity .cl-sheet-backdrop[data-open="true"]{opacity:1;visibility:visible;transition-delay:0s}
.clarity .cl-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:1050;max-height:90vh;overflow-y:auto;
  background:var(--cl-tile);color:var(--cl-text);border-radius:var(--cl-r-section) var(--cl-r-section) 0 0;
  outline:1px solid var(--cl-rule);padding:.5rem 1.25rem 1.5rem;
  transform:translateY(100%);visibility:hidden;
  transition:transform 250ms var(--cl-ease),visibility 0s linear 250ms;
}
.clarity .cl-sheet[data-open="true"]{transform:none;visibility:visible;transition-delay:0s}
.clarity .cl-sheet__handle{width:2.5rem;height:.3125rem;border-radius:var(--cl-r-pill);background:var(--cl-rule);margin:.25rem auto .75rem}
.clarity .cl-sheet__title{font-size:var(--cl-fs-tile-title);margin:0 0 .5rem}
@media (min-width:900px){
  .clarity .cl-sheet{
    left:50%;right:auto;bottom:auto;top:50%;width:min(35rem,92vw);max-height:85vh;border-radius:var(--cl-r-section);padding:1.5rem 2rem 2rem;
    transform:translate(-50%,-46%);opacity:0;
    transition:transform 250ms var(--cl-ease),opacity 250ms var(--cl-ease),visibility 0s linear 250ms;
  }
  .clarity .cl-sheet[data-open="true"]{transform:translate(-50%,-50%);opacity:1}
  .clarity .cl-sheet__handle{display:none}
}

/* Toast: single implementation (story F-3 wires Astro.toast). Bottom centre, inverse colours, outline. */
.clarity .cl-toast-region{position:fixed;left:0;right:0;bottom:1rem;z-index:2000;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0 1rem;pointer-events:none}
.clarity .cl-toast{
  pointer-events:auto;display:inline-flex;align-items:center;gap:.75rem;max-width:min(32rem,100%);
  padding:.75rem 1.25rem;border-radius:var(--cl-r-pill);background:var(--cl-inv-bg);color:var(--cl-inv-fg);
  outline:1px solid var(--cl-rule);font-size:.9375rem;font-weight:500;animation:cl-rise var(--cl-d-base) var(--cl-ease) both;
}
.clarity .cl-toast__action{color:var(--cl-inv-accent);font-weight:700;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.clarity .cl-toast__action:hover{text-decoration:underline}

/* Graha persona glyph: <svg class="cl-graha cl-graha--48"><use href="/images/grahas.svg#pg-saturn"/></svg> */
.clarity .cl-graha{width:3rem;height:3rem;flex:none;display:inline-block}
.clarity .cl-graha--20{width:1.25rem;height:1.25rem}
.clarity .cl-graha--32{width:2rem;height:2rem}
.clarity .cl-graha--48{width:3rem;height:3rem}
.clarity .cl-graha--96{width:6rem;height:6rem}

/* ───────── 6. Motion ───────── */
@keyframes cl-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cl-slide{from{left:0;opacity:0}to{left:var(--pos,50%);opacity:1}}
.clarity .cl-rise{animation:cl-rise var(--cl-d-enter) var(--cl-ease) both;animation-delay:calc(var(--i,0) * var(--cl-stagger))}
@media (prefers-reduced-motion:reduce){
  .clarity *,.clarity *::before,.clarity *::after{
    animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important;
  }
}