/* ============================================================
   ks.css
   KNOW YOUR SUBSTANCES, the components the four concepts share.

   LOADED AFTER /appts-shell.css and /nx.css. It adds nothing to the
   token layer: every colour, radius, shadow, easing and font below
   is a token from the shell, so these components cannot drift from
   the client app when the app's palette moves. A hex value typed
   into this file means we are building beside the site again.

   Colour discipline:
     magenta  the emotional accent and the primary action
     teal     a live, positive or confirmed state
     gold     a warning
     red      999 and nothing else
   ============================================================ */

/* ---- the pop-out. A substance profile is a long document, so it
   gets a wider sheet than the house default. ---------------------- */
.ks-sheet { width: min(1080px, 100%); }
.ks-sheet .sheet-body { padding: 26px 30px 46px; }
.ks-sheet-act { width: min(560px, 100%); }
@media (max-width: 700px) { .ks-sheet .sheet-body { padding: 20px 18px 40px; } }
/* ---- typography helpers --------------------------------------- */
.ks-h3 { font-family: var(--display); font-size: 21px; font-weight: 650; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 10px; margin: 34px 0 8px; color: var(--ink); }
.ks-h3 svg { color: var(--secondary-soft); flex: none; }
html[data-theme="light"] .ks-h3 svg { color: var(--secondary); }
.ks-h4 { font-family: var(--display); font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  margin: 20px 0 8px; color: var(--ink); }
.ks-h4:first-child { margin-top: 0; }
.ks-lede { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 74ch; margin-bottom: 14px; }
.ks-p { font-size: 14.8px; line-height: 1.62; color: var(--ink-2); max-width: 74ch; }
.ks-foot { margin-top: 26px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.ks-999 { color: var(--system-error); font-weight: 700; }
.ks-ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ks-ul li { position: relative; padding-left: 18px; font-size: 14.6px; line-height: 1.58; color: var(--ink-2); }
.ks-ul li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--hair-2); }
/* A TICK, NOT A CHEVRON.
   This was 9px by 9px with border-left and border-bottom rotated -45deg, which
   is a SYMMETRIC V, and on a page full of collapsible sections it read as a
   dropdown arrow rather than as a tick. A tick needs unequal arms: a short one
   and a long one, made from border-right and border-bottom, rotated the other
   way. The box is 5 by 10 rather than square, which is the whole fix. */
.ks-ul-tick li { padding-left: 22px; }
.ks-ul-tick li::before { content: ""; left: 4px; top: 5px; width: 5px; height: 10px;
  border-radius: 1px; background: none;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); }
html[data-theme="light"] .ks-ul-tick li::before { border-color: #05716A; }
/* ---- risk pill. Glyph plus word plus colour, never colour alone - */
.ks-rl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; white-space: nowrap; border: 1px solid transparent; }
.ks-rl.sm { padding: 3px 9px; font-size: 11.5px; }
.ks-rl-hi { background: rgba(180,35,24,.14); border-color: rgba(180,35,24,.36); color: #FF9C93; }
.ks-rl-md { background: rgba(185,138,47,.16); border-color: rgba(185,138,47,.4); color: var(--gold); }
.ks-rl-lo { background: rgba(0,164,153,.14); border-color: rgba(0,164,153,.34); color: var(--teal-soft); }
html[data-theme="light"] .ks-rl-hi { background: #FDECEA; border-color: #F3C6C1; color: #8E1A11; }
html[data-theme="light"] .ks-rl-md { background: #FBF1DC; border-color: #EBD5A4; color: var(--amber); }
html[data-theme="light"] .ks-rl-lo { background: #E1F6F3; border-color: #A9E2DA; color: #05716A; }
.ks-flag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--hair); background: var(--raise-2);
  color: var(--ink-2); white-space: nowrap; }
.ks-flag-hi { color: #FF9C93; border-color: rgba(180,35,24,.3); }
.ks-flag-md { color: var(--gold); border-color: rgba(185,138,47,.32); }
.ks-flag-ok { color: var(--teal-soft); border-color: rgba(0,164,153,.3); }
html[data-theme="light"] .ks-flag-hi { color: #8E1A11; }
html[data-theme="light"] .ks-flag-ok { color: #05716A; }
.ks-facet { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--raise-2);
  border: 1px solid var(--hair); white-space: nowrap; }
.ks-facet svg { opacity: .7; }
/* ---- directory card ------------------------------------------- */
.ks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ks-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 17px 18px;
  border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--raise);
  transition: transform .2s var(--spring), border-color .2s var(--ease), background .2s var(--ease); }
.ks-card:hover { transform: translateY(-2px); border-color: var(--hair-2); background: var(--raise-2); }
.ks-card:active { transform: scale(.99); }
.ks-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ks-card-name { font-family: var(--display); font-size: 17px; font-weight: 650; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.2; }
.ks-card-aka { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.ks-card-one { font-size: 13.6px; line-height: 1.5; color: var(--ink-2); }
.ks-card-facets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ks-card-alert { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px;
  font-weight: 650; color: var(--gold); }
.ks-card-why { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--hair);
  font-size: 12.4px; color: var(--ink-3); line-height: 1.45; }
.ks-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px;
  border: 1px solid var(--hair); border-radius: var(--r-sm); background: var(--raise);
  transition: background .2s var(--ease), border-color .2s var(--ease); }
.ks-row:hover { background: var(--raise-2); border-color: var(--hair-2); }
.ks-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-row-main b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.ks-row-main span { font-size: 12.8px; color: var(--ink-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ks-row-chev { color: var(--ink-3); flex: none; }
/* ---- search ---------------------------------------------------- */
.ks-search { position: relative; display: flex; align-items: center; gap: 11px; padding: 0 16px;
  border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--raise);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.ks-search:focus-within { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(181,37,85,.14); }
.ks-search svg { color: var(--ink-3); flex: none; }
.ks-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink);
  font: inherit; font-size: 15.5px; padding: 15px 0; }
.ks-search input::placeholder { color: var(--ink-3); }
.ks-search-big input { padding: 21px 0; font-size: 19px; }
/* ON THE HERO PHOTOGRAPH. --hero-glass is dark in both themes by design, so
   the search that sits on it carries its own light-on-dark colours rather than
   inheriting the page's, which in light mode left the placeholder invisible. */
.ks-search-hero { background: var(--hero-glass); border-color: var(--hero-hair);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.ks-search-hero svg { color: rgba(255,255,255,.72); }
.ks-search-hero input { color: #fff; }
.ks-search-hero input::placeholder { color: rgba(255,255,255,.6); }
.ks-search-hero .ks-search-clear { background: rgba(255,255,255,.16); color: #fff; }
.ks-search-hero .ks-search-clear:hover { background: rgba(255,255,255,.28); }
.ks-search-hero:focus-within { border-color: var(--secondary-soft);
  box-shadow: 0 0 0 4px rgba(224,86,138,.24); }
.ks-search-clear { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--raise-2); color: var(--ink-2); flex: none; }
.ks-search-clear:hover { background: var(--hair); }
.ks-didyou { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 11px 15px;
  border-radius: var(--r-sm); background: rgba(0,164,153,.1); border: 1px solid rgba(0,164,153,.28);
  font-size: 13.8px; color: var(--ink-2); }
.ks-didyou b { color: var(--teal-soft); }
html[data-theme="light"] .ks-didyou { background: #E1F6F3; border-color: #A9E2DA; }
html[data-theme="light"] .ks-didyou b { color: #05716A; }
.ks-none { padding: 26px 22px; border-radius: var(--r-md); border: 1px dashed var(--hair);
  background: var(--raise); text-align: left; }
.ks-none b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); margin-bottom: 6px; }
.ks-none span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
/* ---- facet rail and chips -------------------------------------- */
.ks-rail { border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--raise);
  overflow: hidden; }
.ks-rail-h { padding: 15px 18px; border-bottom: 1px solid var(--hair); background: var(--raise-2); }
.ks-rail-h .k { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.ks-rail-h b { font-family: var(--display); font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.ks-rail-b { padding: 6px; }
.ks-grp { border-bottom: 1px solid var(--hair); }
.ks-grp:last-child { border-bottom: none; }
.ks-grp > summary { display: flex; align-items: center; gap: 9px; padding: 12px 12px; cursor: pointer;
  font-size: 13.4px; font-weight: 650; color: var(--ink); list-style: none; border-radius: var(--r-sm); }
.ks-grp > summary::-webkit-details-marker { display: none; }
.ks-grp > summary:hover { background: var(--raise-2); }
.ks-grp > summary svg:first-child { color: var(--ink-3); flex: none; }
.ks-grp > summary .n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.ks-grp > summary .cv { color: var(--ink-3); transition: transform .2s var(--ease); }
.ks-grp[open] > summary .cv { transform: rotate(180deg); }
.ks-grp-b { padding: 2px 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ks-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--raise-2); color: var(--ink-2); font-size: 12.8px;
  font-weight: 600; transition: background .18s var(--ease), color .18s var(--ease),
  border-color .18s var(--ease), transform .18s var(--bounce); }
.ks-chip:hover { background: var(--hair); color: var(--ink); }
.ks-chip:active { transform: scale(.96); }
.ks-chip.on { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.ks-chip.on:hover { filter: brightness(1.1); background: var(--secondary); color: #fff; }
.ks-chip .n { font-size: 11px; opacity: .72; font-variant-numeric: tabular-nums; }
.ks-chip[disabled] { opacity: .38; pointer-events: none; }
.ks-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* ---- A to Z ---------------------------------------------------- */
.ks-az { display: flex; flex-wrap: wrap; gap: 5px; }
.ks-az button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--hair); background: var(--raise); color: var(--ink-2); font-size: 13.5px;
  font-weight: 700; transition: background .16s var(--ease), color .16s var(--ease); }
.ks-az button:hover { background: var(--raise-2); color: var(--ink); }
.ks-az button.on { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.ks-az button[disabled] { opacity: .3; pointer-events: none; }
.ks-azgrp { margin-top: 22px; }
.ks-azgrp-h { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.ks-azgrp-h .l { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--secondary); color: #fff; font-family: var(--display); font-size: 16px; font-weight: 700; }
.ks-azgrp-h .r { flex: 1; height: 1px; background: var(--hair); }
/* ---- street name index ---------------------------------------- */
.ks-street { columns: 3; column-gap: 22px; }
@media (max-width: 900px) { .ks-street { columns: 2; } }
@media (max-width: 560px) { .ks-street { columns: 1; } }
.ks-street-i { break-inside: avoid; display: block; width: 100%; padding: 9px 12px; border-radius: var(--r-sm);
  margin-bottom: 4px; transition: background .16s var(--ease); }
.ks-street-i:hover { background: var(--raise-2); }
.ks-street-i b { display: block; font-size: 14px; font-weight: 650; color: var(--ink); }
.ks-street-i span { display: block; font-size: 12.2px; color: var(--ink-3); margin-top: 1px; }
/* ---- the profile ----------------------------------------------- */
.ks-prof-head { padding-bottom: 18px; border-bottom: 1px solid var(--hair); margin-bottom: 18px; }
.ks-prof-cat { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--secondary-soft); margin-bottom: 7px; }
html[data-theme="light"] .ks-prof-cat { color: var(--secondary); }
.ks-prof-name { font-family: var(--display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -.032em; line-height: 1.1; color: var(--ink); margin-bottom: 8px; }
.ks-prof-one { font-size: 15.5px; line-height: 1.58; color: var(--ink-2); max-width: 72ch; }
.ks-prof-flags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ks-prof-alerts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.ks-prof-secs { display: flex; flex-direction: column; gap: 10px; }
.ks-sec { border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--raise);
  overflow: hidden; }
.ks-sec[open] { border-color: var(--hair-2); }
.ks-sec-h { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer;
  list-style: none; transition: background .18s var(--ease); }
.ks-sec-h::-webkit-details-marker { display: none; }
.ks-sec-h:hover { background: var(--raise-2); }
.ks-sec-n { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: var(--raise-2); border: 1px solid var(--hair); color: var(--ink-3); font-size: 12.5px;
  font-weight: 700; }
.ks-sec[open] .ks-sec-n { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.ks-sec-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-sec-t b { font-family: var(--display); font-size: 16.5px; font-weight: 650; letter-spacing: -.02em;
  color: var(--ink); }
.ks-sec-t span { font-size: 12.8px; color: var(--ink-3); line-height: 1.4; }
.ks-sec-chev { color: var(--ink-3); flex: none; transition: transform .22s var(--ease); }
.ks-sec[open] .ks-sec-chev { transform: rotate(180deg); }
.ks-sec-b { padding: 4px 18px 20px; border-top: 1px solid var(--hair); padding-top: 18px; }
/* at a glance */
.ks-glance { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden; }
.ks-g-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 12px 15px;
  background: var(--raise); }
@media (max-width: 700px) { .ks-g-row { grid-template-columns: 1fr; gap: 3px; } }
.ks-g-k { display: flex; align-items: center; gap: 8px; font-size: 12.6px; font-weight: 650;
  color: var(--ink-3); text-transform: none; }
.ks-g-k svg { color: var(--ink-3); flex: none; }
.ks-g-v { font-size: 14.4px; line-height: 1.5; color: var(--ink); }
/* what people may be seeking */
.ks-seek { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
  margin-bottom: 16px; }
.ks-seek-i { padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--hair);
  background: var(--raise-2); }
.ks-seek-i b { display: block; font-size: 14.2px; font-weight: 650; color: var(--ink); margin-bottom: 3px; }
.ks-seek-i span { display: block; font-size: 12.8px; line-height: 1.5; color: var(--ink-2); }
/* short term effects, three ways */
.ks-st { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.ks-st-b { padding: 15px 16px; border-radius: var(--r-sm); border: 1px solid var(--hair);
  background: var(--raise-2); }
.ks-st-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ks-st-h b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.ks-st-want { border-color: rgba(0,164,153,.3); }
.ks-st-want .ks-st-h { color: var(--teal-soft); }
.ks-st-un { border-color: rgba(185,138,47,.32); }
.ks-st-un .ks-st-h { color: var(--gold); }
.ks-st-bad { border-color: rgba(180,35,24,.34); }
.ks-st-bad .ks-st-h { color: #FF9C93; }
html[data-theme="light"] .ks-st-want .ks-st-h { color: #05716A; }
html[data-theme="light"] .ks-st-bad .ks-st-h { color: #8E1A11; }
/* longer term harms */
.ks-lt { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.ks-lt-b { padding: 15px 16px; border-radius: var(--r-sm); border: 1px solid var(--hair);
  background: var(--raise-2); }
.ks-lt-h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; color: var(--ink); }
.ks-lt-h svg { color: var(--cyan-soft); flex: none; }
html[data-theme="light"] .ks-lt-h svg { color: var(--cyan); }
.ks-lt-h b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
/* mixing */
.ks-mix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ks-mix-b { padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--hair);
  background: var(--raise-2); }
.ks-mix-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ks-mix-h b { font-size: 13.6px; font-weight: 700; }
.ks-mix-danger { border-color: rgba(180,35,24,.34); }
.ks-mix-danger .ks-mix-h { color: #FF9C93; }
.ks-mix-care { border-color: rgba(185,138,47,.32); }
.ks-mix-care .ks-mix-h { color: var(--gold); }
.ks-mix-lower { border-color: rgba(0,164,153,.3); }
.ks-mix-lower .ks-mix-h { color: var(--teal-soft); }
html[data-theme="light"] .ks-mix-danger .ks-mix-h { color: #8E1A11; }
html[data-theme="light"] .ks-mix-lower .ks-mix-h { color: #05716A; }
/* duration */
.ks-dur { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.ks-dur-r { padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--hair);
  background: var(--raise-2); }
.ks-dur-k { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3); margin-bottom: 5px; }
.ks-dur-v { display: block; font-size: 13.8px; line-height: 1.5; color: var(--ink); }
/* harm reduction, ranked */
.ks-hr { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ks-hr-b { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--hair); background: var(--raise-2); }
.ks-hr-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px;
  font-family: var(--display); font-size: 15px; font-weight: 700; color: #fff; }
.ks-hr-hi { border-color: rgba(180,35,24,.34); }
.ks-hr-hi .ks-hr-n { background: var(--system-error); }
.ks-hr-md { border-color: rgba(185,138,47,.32); }
.ks-hr-md .ks-hr-n { background: var(--amber); }
.ks-hr-ok { border-color: rgba(0,164,153,.3); }
.ks-hr-ok .ks-hr-n { background: var(--teal); }
.ks-hr-c { flex: 1; min-width: 0; }
.ks-hr-c > b { display: block; font-family: var(--display); font-size: 15.5px; font-weight: 650;
  letter-spacing: -.015em; color: var(--ink); }
.ks-hr-c > span { display: block; font-size: 12.8px; color: var(--ink-3); margin: 2px 0 10px; }
.ks-help { margin-top: 18px; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--hair);
  background: var(--raise-2); }
.ks-help-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--secondary-soft); }
html[data-theme="light"] .ks-help-h { color: var(--secondary); }
.ks-help-h b { font-family: var(--display); font-size: 16px; font-weight: 650; letter-spacing: -.02em;
  color: var(--ink); }
.ks-help p { font-size: 14.2px; line-height: 1.6; color: var(--ink-2); margin-bottom: 14px; }
.ks-help-acts { display: flex; flex-wrap: wrap; gap: 9px; }
/* notes and interlocks */
.ks-note { display: flex; gap: 14px; padding: 15px 17px; border-radius: var(--r-md); margin: 16px 0;
  border: 1px solid var(--hair); background: var(--raise-2); }
.ks-note svg { flex: none; margin-top: 1px; }
.ks-note b { display: block; font-size: 14.4px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.ks-note p { font-size: 13.8px; line-height: 1.58; color: var(--ink-2); }
.ks-note ul { margin: 6px 0; }
.ks-note-quiet svg { color: var(--ink-3); }
.ks-note-warn { border-color: rgba(185,138,47,.4); background: rgba(185,138,47,.1); }
.ks-note-warn svg { color: var(--gold); }
.ks-note-warn b { color: var(--gold); }
.ks-note-stop { border-color: rgba(180,35,24,.4); background: rgba(180,35,24,.1); }
.ks-note-stop svg, .ks-note-stop b { color: #FF9C93; }
.ks-note-999 { border-color: rgba(180,35,24,.4); background: rgba(180,35,24,.1); }
.ks-note-999 svg, .ks-note-999 b { color: #FF9C93; }
html[data-theme="light"] .ks-note-warn { background: #FBF1DC; border-color: #EBD5A4; }
html[data-theme="light"] .ks-note-warn svg, html[data-theme="light"] .ks-note-warn b { color: var(--amber); }
html[data-theme="light"] .ks-note-stop, html[data-theme="light"] .ks-note-999 { background: #FDECEA;
  border-color: #F3C6C1; }
html[data-theme="light"] .ks-note-stop svg, html[data-theme="light"] .ks-note-stop b,
html[data-theme="light"] .ks-note-999 svg, html[data-theme="light"] .ks-note-999 b { color: #8E1A11; }
/* ---- connect actions ------------------------------------------- */
.ks-connect { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 9px;
  margin-top: 12px; }
.ks-act { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--raise);
  transition: transform .2s var(--spring), background .2s var(--ease), border-color .2s var(--ease); }
.ks-act:hover { transform: translateY(-2px); background: var(--raise-2); border-color: var(--hair-2); }
.ks-act:active { transform: scale(.98); }
.ks-act-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: var(--raise-2); border: 1px solid var(--hair); color: var(--secondary-soft); }
html[data-theme="light"] .ks-act-ic { color: var(--secondary); }
.ks-act-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ks-act-t b { font-size: 14.2px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.ks-act-t span { font-size: 12.4px; color: var(--ink-3); line-height: 1.4; }
.ks-act-chev { color: var(--ink-3); flex: none; }
.ks-act.on { border-color: rgba(0,164,153,.4); background: rgba(0,164,153,.09); }
.ks-act.on .ks-act-ic { color: var(--teal-soft); border-color: rgba(0,164,153,.34); }
html[data-theme="light"] .ks-act.on { background: #E1F6F3; border-color: #A9E2DA; }
html[data-theme="light"] .ks-act.on .ks-act-ic { color: #05716A; }
/* ---- drug alerts ------------------------------------------------ */
.ks-al { position: relative; padding: 20px 22px; border-radius: var(--r-lg);
  border: 1px solid rgba(185,138,47,.4); background: rgba(185,138,47,.1); }
html[data-theme="light"] .ks-al { background: #FBF1DC; border-color: #EBD5A4; }
.ks-al-high { border-color: rgba(180,35,24,.4); background: rgba(180,35,24,.1); }
html[data-theme="light"] .ks-al-high { background: #FDECEA; border-color: #F3C6C1; }
.ks-al-top { display: flex; gap: 14px; }
.ks-al-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px;
  background: var(--gold); color: #1A1206; }
.ks-al-high .ks-al-ic { background: var(--system-error); color: #fff; }
.ks-al-head { flex: 1; min-width: 0; }
.ks-al-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--gold); margin-bottom: 5px; }
.ks-al-high .ks-al-k { color: #FF9C93; }
html[data-theme="light"] .ks-al-k { color: var(--amber); }
html[data-theme="light"] .ks-al-high .ks-al-k { color: #8E1A11; }
.ks-al-head h3 { font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -.024em;
  line-height: 1.24; color: var(--ink); }
.ks-al-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.ks-al-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.4px;
  color: var(--ink-2); }
.ks-al-meta svg { color: var(--ink-3); }
.ks-al-ver { font-weight: 650; }
.ks-al-ver-confirmed { color: var(--teal-soft); }
.ks-al-ver-confirmed svg { color: var(--teal-soft); }
html[data-theme="light"] .ks-al-ver-confirmed, html[data-theme="light"] .ks-al-ver-confirmed svg { color: #05716A; }
.ks-al-sum { margin-top: 13px; font-size: 14.6px; line-height: 1.6; color: var(--ink-2); max-width: 78ch; }
.ks-al-subj { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
.ks-al-subj > span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3); }
.ks-al-chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--hair-2);
  background: var(--raise); color: var(--ink); font-size: 12.8px; font-weight: 650;
  transition: background .16s var(--ease); }
.ks-al-chip:hover { background: var(--raise-2); }
.ks-al-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
  margin-top: 16px; }
.ks-al-act { padding: 14px 15px; border-radius: var(--r-sm); background: var(--raise);
  border: 1px solid var(--hair); }
.ks-al-act > b { display: block; font-size: 13.4px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ks-al-act-1 { border-color: rgba(180,35,24,.32); }
.ks-al-act-1 > b { color: #FF9C93; }
html[data-theme="light"] .ks-al-act-1 > b { color: #8E1A11; }
.ks-al-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 15px; padding-top: 14px;
  border-top: 1px solid var(--hair); }
.ks-al-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.4px; font-weight: 650;
  color: var(--ink); transition: opacity .18s var(--ease); }
.ks-al-link:hover { opacity: .7; }
.ks-al-link svg { color: var(--ink-3); }
.ks-al-compact { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px;
  border-radius: var(--r-md); transition: transform .18s var(--spring); }
.ks-al-compact:hover { transform: translateY(-1px); }
.ks-al-compact .ks-al-ic { width: 32px; height: 32px; border-radius: 11px; }
.ks-al-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-al-c b { font-size: 14.4px; font-weight: 650; letter-spacing: -.012em; color: var(--ink); line-height: 1.3; }
.ks-al-k, .ks-al-when { font-size: 11.4px; }
.ks-al-when { color: var(--ink-3); font-weight: 600; }
.ks-al-go { color: var(--ink-3); flex: none; }
/* ---- the quiet strip -------------------------------------------
   Deliberately the same height in all three states, so a quiet week
   does not read as a page with nothing on it. Hairline and tinted
   glyph, never a filled block: the filled treatment is reserved for
   the alerts page and for the top of a profile an alert concerns. */
.ks-strip { display: flex; align-items: center; gap: 13px; padding: 13px 18px;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--raise);
  min-height: 54px; transition: background .18s var(--ease), border-color .18s var(--ease); }
a.ks-strip:hover { background: var(--raise-2); border-color: var(--hair-2); }
.ks-strip-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--raise-2); border: 1px solid var(--hair); color: var(--ink-3); }
.ks-strip-t { flex: 1; min-width: 0; font-size: 13.8px; line-height: 1.45; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; }
.ks-strip-t b { color: var(--ink); font-weight: 650; }
.ks-strip-go { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13px;
  font-weight: 650; color: var(--ink-3); }
a.ks-strip:hover .ks-strip-go { color: var(--ink); }
.ks-strip-ok { border-color: rgba(0,164,153,.3); }
.ks-strip-ok .ks-strip-ic { color: var(--teal-soft); border-color: rgba(0,164,153,.34);
  background: rgba(0,164,153,.1); }
html[data-theme="light"] .ks-strip-ok .ks-strip-ic { color: #05716A; background: #E1F6F3;
  border-color: #A9E2DA; }
.ks-strip-on { border-color: rgba(185,138,47,.42); }
.ks-strip-on .ks-strip-ic { color: var(--gold); border-color: rgba(185,138,47,.44);
  background: rgba(185,138,47,.14); }
.ks-strip-on .ks-strip-go { color: var(--gold); }
html[data-theme="light"] .ks-strip-on .ks-strip-ic { color: var(--amber); background: #FBF1DC;
  border-color: #EBD5A4; }
html[data-theme="light"] .ks-strip-on .ks-strip-go { color: var(--amber); }
.ks-strip-hi { border-color: rgba(180,35,24,.4); }
.ks-strip-hi .ks-strip-ic { color: #FF9C93; border-color: rgba(180,35,24,.4);
  background: rgba(180,35,24,.13); }
.ks-strip-hi .ks-strip-go { color: #FF9C93; }
html[data-theme="light"] .ks-strip-hi .ks-strip-ic { color: #8E1A11; background: #FDECEA;
  border-color: #F3C6C1; }
html[data-theme="light"] .ks-strip-hi .ks-strip-go { color: #8E1A11; }
.ks-strip-wait .ks-strip-t { color: var(--ink-3); }
@media (max-width: 620px) {
  .ks-strip { align-items: flex-start; }
  .ks-strip-go span { display: none; }
}
/* ---- the standalone alerts page --------------------------------- */
.ks-alsub { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-alsub-i { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px;
  border-radius: 999px; border: 1px solid var(--hair); background: var(--raise); color: var(--ink);
  font-size: 13.4px; font-weight: 650; transition: background .18s var(--ease); }
.ks-alsub-i:hover { background: var(--raise-2); }
.ks-alsub-i .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: rgba(185,138,47,.18); color: var(--gold); font-size: 11.4px;
  font-weight: 700; }
html[data-theme="light"] .ks-alsub-i .n { background: #FBF1DC; color: var(--amber); }
/* Four equal cards. THE HEADER IS A FIXED HEIGHT BAND, not a flex row that
   grows: a title that wrapped to two lines pushed its own paragraph down and
   its icon out of line with the other three, so the row read as four
   different components rather than one set. The band holds two lines, the
   icon is centred in the band rather than on the text, and the paragraphs
   therefore start on the same line across the whole row whatever the titles
   do. `auto-fit` is deliberately NOT used here: at four items it drops to
   three-plus-one on a mid width, which is the untidiest possible result. */
.ks-prov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1080px) { .ks-prov { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ks-prov { grid-template-columns: minmax(0, 1fr); } }
.ks-prov-i { display: flex; flex-direction: column; padding: 18px 20px; border-radius: var(--r-md);
  border: 1px solid var(--hair); background: var(--raise); }
.ks-prov-i .h { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 11px;
  align-items: center; min-height: 46px; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.ks-prov-i .h .ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px;
  background: var(--raise-2); border: 1px solid var(--hair); color: var(--secondary-soft); }
html[data-theme="light"] .ks-prov-i .h .ic { color: var(--secondary); }
.ks-prov-i .h b { font-size: 14.2px; font-weight: 650; letter-spacing: -.014em; line-height: 1.25;
  color: var(--ink); }
.ks-prov-i p { font-size: 13.4px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 620px) { .ks-prov-i .h { min-height: 0; } }
.ks-lookup { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--hair); background: var(--raise); flex-wrap: wrap; }
.ks-lookup .ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--raise-2); border: 1px solid var(--hair);
  color: var(--secondary-soft); }
html[data-theme="light"] .ks-lookup .ic { color: var(--secondary); }
.ks-lookup .t { flex: 1; min-width: 240px; }
.ks-lookup .t b { display: block; font-family: var(--display); font-size: 17px; font-weight: 650;
  letter-spacing: -.02em; color: var(--ink); }
.ks-lookup .t span { display: block; font-size: 13.4px; color: var(--ink-2); margin-top: 3px; }
.ks-al-areas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.ks-al-area { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--raise); color: var(--ink-2); font-size: 13px;
  font-weight: 600; transition: background .18s var(--ease), color .18s var(--ease); }
.ks-al-area:hover { background: var(--raise-2); color: var(--ink); }
.ks-al-area.on { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.ks-al-area span { font-size: 11px; opacity: .72; font-variant-numeric: tabular-nums; }
.ks-al-list { display: flex; flex-direction: column; gap: 14px; }
.ks-al-none { display: flex; gap: 14px; padding: 20px 22px; border-radius: var(--r-lg);
  border: 1px solid rgba(0,164,153,.3); background: rgba(0,164,153,.09); }
html[data-theme="light"] .ks-al-none { background: #E1F6F3; border-color: #A9E2DA; }
.ks-al-none svg { color: var(--teal-soft); flex: none; }
html[data-theme="light"] .ks-al-none svg { color: #05716A; }
.ks-al-none b { display: block; font-size: 15.5px; font-weight: 650; color: var(--ink); margin-bottom: 4px; }
.ks-al-none p { font-size: 14px; line-height: 1.58; color: var(--ink-2); }
.ks-al-load { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-radius: var(--r-md);
  border: 1px dashed var(--hair); color: var(--ink-3); font-size: 14px; }
.ks-al-older { margin-top: 14px; }
.ks-al-older > summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; border: 1px solid var(--hair); background: var(--raise); cursor: pointer;
  font-size: 13.4px; font-weight: 650; color: var(--ink-2); list-style: none; }
.ks-al-older > summary::-webkit-details-marker { display: none; }
.ks-al-older > summary:hover { background: var(--raise-2); }
.ks-al-olderlist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ks-al-prov { margin-top: 14px; font-size: 12.8px; line-height: 1.6; color: var(--ink-3); max-width: 82ch; }
/* ---- action sheet ---------------------------------------------- */
.ks-actsheet { text-align: center; padding: 8px 0 4px; }
.ks-actsheet-ic { width: 62px; height: 62px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(0,164,153,.15); border: 1px solid rgba(0,164,153,.34);
  color: var(--teal-soft); }
html[data-theme="light"] .ks-actsheet-ic { background: #E1F6F3; border-color: #A9E2DA; color: #05716A; }
.ks-actsheet-p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; margin: 0 auto; }
.ks-actsheet-sub { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 7px 14px;
  border-radius: 999px; background: var(--raise-2); border: 1px solid var(--hair); font-size: 13px;
  font-weight: 650; color: var(--ink); }
.ks-actsheet-note { margin-top: 18px; font-size: 12.6px; color: var(--ink-3); }
/* ---- shared page furniture -------------------------------------- */
.ks-panel { border: 1px solid var(--hair); border-radius: var(--r-xl); background: var(--raise);
  padding: 22px 24px; }
.ks-panel-tight { padding: 18px 20px; }
.ks-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .ks-split { grid-template-columns: minmax(0, 1fr); } }
.ks-sticky { position: sticky; top: 18px; }
@media (max-width: 1000px) { .ks-sticky { position: static; } }
.ks-count { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ks-empty { padding: 30px 24px; text-align: center; border: 1px dashed var(--hair);
  border-radius: var(--r-md); color: var(--ink-3); font-size: 14px; }
.ks-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 5px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--raise); }
.ks-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: 999px;
  font-size: 13.6px; font-weight: 650; color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease); }
.ks-tab:hover { background: var(--raise-2); color: var(--ink); }
.ks-tab.on { background: var(--secondary); color: #fff; }
.ks-tab .n { font-size: 11px; opacity: .74; font-variant-numeric: tabular-nums; }
/* the hero glass panel, matching the house pattern */
.ks-glass { background: var(--hero-glass); backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hero-hair); border-radius: var(--r-lg);
  padding: 22px 24px; width: 340px; max-width: 100%; color: #fff; }
.ks-glass .k { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.66); margin-bottom: 9px; }
.ks-glass h3 { font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -.024em;
  line-height: 1.26; margin-bottom: 8px; }
.ks-glass p { font-size: 13.6px; line-height: 1.55; color: rgba(255,255,255,.8); }
.ks-glass .ks-glass-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
/* the concept index, shared by ks-index.html */
.ks-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ks-door { display: block; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--hair);
  background: var(--raise); transition: transform .22s var(--spring), border-color .2s var(--ease); }
.ks-door:hover { transform: translateY(-3px); border-color: var(--secondary); }
.ks-door .l { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--secondary); color: #fff; font-family: var(--display); font-size: 16px; font-weight: 700;
  margin-bottom: 13px; }
.ks-door h3 { font-family: var(--display); font-size: 20px; font-weight: 650; letter-spacing: -.026em;
  margin-bottom: 7px; color: var(--ink); }
.ks-door .one { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-bottom: 11px; }
.ks-door .trade { font-size: 12.8px; line-height: 1.5; color: var(--ink-3); padding-top: 11px;
  border-top: 1px dashed var(--hair); }
/* ---- the home page door ----------------------------------------
   Lives in ks.css rather than in companion.html's own <style> so the home
   container and the substances page share one definition. companion.html links
   this sheet for exactly that reason: the alert line below the door is the
   same .ks-strip component the library uses, not a second copy of it. */
.kysdoor { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.kysdoor-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 16px; background: var(--secondary); color: #fff; }
.kysdoor-t { flex: 1; min-width: 0; }
.kysdoor-t b { display: block; color: var(--ink); margin-bottom: 4px; }
.kysdoor-t span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.kysdoor-go { flex: none; white-space: nowrap; }
@media (max-width: 720px) {
  .kysdoor { flex-wrap: wrap; gap: 14px; }
  .kysdoor-go { width: 100%; justify-content: center; }
}

/* The .ks-toast rules were removed when the seven toast implementations became
   one. Nothing renders that class any more: NX.notify in nx-core.js builds a
   single .toast .nx-toast for every surface, and its look is in
   appts-shell.css where one definition serves all of them. */