/* Lato is self-hosted (public/fonts/) for the portal's own chrome, not pulled from
   Google. The @import that used to sit here made a render-blocking third-party call on
   every visit — wrong for a private, noindex portal and slow on neighbour-island
   connections. Files are Google's own woff2, split latin / latin-ext with unicode-range
   preserved so the Hawaiian ʻokina and kahakō (macrons) still resolve, and latin-ext only
   downloads when such a glyph is actually on the page. font-display: swap keeps text visible
   while the face loads. Above-the-fold weights (400, 900) are preloaded in head.ejs.
   Note: the CSP in server.js still permits fonts.googleapis.com / fonts.gstatic.com,
   because the archived plans and instruments served inline at /library/file/:id are
   self-contained HTML that reference Google Fonts themselves — tightening the CSP would
   strip their fonts. Self-hosting here removes the call from the portal's own pages only. */

@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400.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: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/lato-700.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: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/lato-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/fonts/lato-900.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: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/fonts/lato-900-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400i.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: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/lato-400i-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Theme carried from independentlivinghawaii.org and the Independent Living Data
   Library (data.hawaiisilc.org), so every SILC web property reads as one site.
   Brand cyan #12A0D1 is kept for large display and decorative fills; a deeper
   step (#0B7FA8, 4.55:1 on white) carries anything with small text on it, since
   white on the parent site's cyan measures only 3.01:1 and AA asks for 4.5:1.
   Variable names are held from the previous theme so component styles below need
   no rewiring — only the values change. */

:root {
  --cyan: #12A0D1;
  --cyan-wash: #E8F5FB;
  --paper: #F1F1F1;
  --panel: #FFFFFF;
  --panel-alt: #EDEDED;
  --ink: #3E3B3B;
  --ink-head: #555555;
  --ink-soft: #6B6868;
  --kai: #0B7FA8;        /* cyan-deep — links, accents, small text on white */
  --kai-deep: #096A8C;   /* cyan-dark — buttons, active states, hovers */
  --rule: #DEDEDE;
  --rule-soft: #EDEDED;
  --note-bg: #FFF6E2;
  --note-ink: #6B4200;
  --note-rule: #D6A63F;
  --add: #215741;
  --add-bg: #E4EFE9;
  --cut: #8A3520;
  --cut-bg: #FBE9E4;
  --move: #3F3A72;
  --move-bg: #EAE8F4;
  --focus: #B34700;
  --sans: "Lato", -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif: "Lato", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(18, 33, 43, .05), 0 4px 14px rgba(18, 33, 43, .05);

  /* Light only, by request. This also stops the browser painting form controls,
     scrollbars and autofill backgrounds from the OS dark palette, which is what
     otherwise makes a "light" page look half-converted on a dark-mode machine. */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--kai-deep); color: #fff;
  padding: .75rem 1.25rem; z-index: 100;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

a { color: var(--kai); text-underline-offset: .18em; }
a:hover { color: var(--kai-deep); }

/* ---------------------------------------------------------- band header */
/* The cyan wave band is the signature element carried across every SILC site.
   The pattern is an inline SVG so there is no asset to host or cache. */

.band {
  background-color: var(--cyan);
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56' viewBox='0 0 160 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='3'%3E%3Cpath d='M-20 12 Q 0 2 20 12 T 60 12 T 100 12 T 140 12 T 180 12'/%3E%3Cpath d='M-20 30 Q 0 20 20 30 T 60 30 T 100 30 T 140 30 T 180 30'/%3E%3Cpath d='M-20 48 Q 0 38 20 48 T 60 48 T 100 48 T 140 48 T 180 48'/%3E%3C/g%3E%3C/svg%3E");
}
.band__inner {
  max-width: 76rem; margin: 0 auto;
  padding: 1.35rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.logotype {
  margin: 0; color: #fff; font-weight: 900; line-height: 1.08;
  font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .02em;
  text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  text-decoration: none; display: inline-block;
}
.logotype span { display: block; }
.eyebrow {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kai);
  margin: 0 0 .3rem;
}

/* --------------------------------------------------------------- nav */

.nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav a {
  color: #fff; text-decoration: none; font-size: .85rem; font-weight: 700;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 3px;
  padding: .4rem .75rem; background: rgba(11, 127, 168, .55);
  min-height: 2.75rem; display: inline-flex; align-items: center;
}
.nav a:hover, .nav a[aria-current="page"] { background: #fff; color: var(--kai-deep); border-color: #fff; }

/* Collapsible nav. The button is hidden until nav.js unhides it, so a no-JS
   visitor still gets the full nav (tall, but every link reachable). The collapse
   only applies below the mobile breakpoint AND only once JS has marked the header,
   so desktop and no-JS are both untouched. */
.navtoggle { display: none; }

@media (max-width: 48rem) {
  .band.js-nav .navtoggle {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 2.75rem; padding: .4rem .9rem;
    color: #fff; font: inherit; font-size: .9rem; font-weight: 700;
    background: rgba(11, 127, 168, .55);
    border: 2px solid rgba(255, 255, 255, .9); border-radius: 3px; cursor: pointer;
  }
  .band.js-nav .navtoggle__bars {
    width: 1.15rem; height: 2px; background: #fff; display: inline-block; position: relative;
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
  }
  .band.js-nav .navtoggle[aria-expanded="true"] { background: #fff; color: var(--kai-deep); }
  .band.js-nav .navtoggle[aria-expanded="true"] .navtoggle__bars {
    background: var(--kai-deep); box-shadow: 0 -6px 0 var(--kai-deep), 0 6px 0 var(--kai-deep);
  }
  .band.js-nav .nav { display: none; flex-basis: 100%; margin-top: .4rem; }
  .band.js-nav .nav.is-open { display: flex; flex-direction: column; gap: .4rem; }
  .band.js-nav .nav.is-open a { width: 100%; }

  /* Identity bar: let name/role/account/sign-out flow together instead of being
     pushed apart by space-between, which forced a wrap to two or three rows. */
  .who__inner { justify-content: flex-start; gap: .2rem .85rem; }
}

/* -------------------------------------------------- who / identity bar */

.who { background: var(--kai); color: #fff; }
.who__inner {
  max-width: 76rem; margin: 0 auto; padding: .45rem 1.5rem;
  font-size: .85rem; display: flex; gap: 1rem;
  justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.who strong { color: #fff; }
.who a { color: #fff; }
.linkbtn {
  background: none; border: 0; color: #fff; font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; min-height: 2.75rem; padding: 0;
}

/* ------------------------------------------------------------- layout */

.wrap { max-width: 76rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.wrap--narrow { max-width: 52rem; }

h1 {
  font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 900; line-height: 1.15; margin: 0 0 .5rem; color: var(--ink-head);
}
h2 {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 900;
  margin: 2.75rem 0 1rem; letter-spacing: -.01em; color: var(--ink-head);
  padding-bottom: .5rem; border-bottom: 2px solid var(--rule);
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
h2 .num {
  font-family: var(--mono); font-size: .68rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kai);
  border: 1px solid var(--rule); padding: .2rem .5rem; border-radius: 3px;
}
h3 { font-family: var(--serif); font-size: 1.08rem; margin: 1.6rem 0 .5rem; }
.lede {
  font-size: 1.1rem; color: var(--ink-soft);
  max-width: 46rem; margin: 0 0 2rem;
}

/* --------------------------------------------------------------- cards */

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 8px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .5rem;
}
.card h3 { margin: 0; font-size: 1.05rem; }
.card p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.card .meta {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kai); margin: 0;
}
.card .go { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: .92rem; }

/* --------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: 0 0 2rem; }
.stat {
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 4px solid var(--kai); border-radius: 6px; padding: .8rem 1rem;
}
.stat b { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; }
.stat span { font-size: .78rem; color: var(--ink-soft); display: block; margin-top: .2rem; }
.stat--warn { border-left-color: var(--note-rule); }
.stat--alert { border-left-color: var(--cut); }

/* ---------------------------------------------------------------- tags */

.tag {
  display: inline-block; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; padding: .22rem .5rem; border-radius: 3px;
  border: 1px solid currentColor; white-space: nowrap;
}
.tag--ok    { color: var(--add);  background: var(--add-bg); }
.tag--warn  { color: var(--note-ink); background: var(--note-bg); }
.tag--alert { color: var(--cut);  background: var(--cut-bg); }
.tag--info  { color: var(--move); background: var(--move-bg); }
.tag--plain { color: var(--ink-soft); background: var(--panel-alt); }

.tagrow { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- notes */

.note {
  background: var(--note-bg); color: var(--note-ink);
  border: 1px solid var(--note-rule); border-left-width: 4px;
  border-radius: 5px; padding: .85rem 1rem; margin: 1.25rem 0;
  font-size: .92rem;
}
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }
.note strong { color: inherit; }
.note--alert { background: var(--cut-bg); color: var(--cut); border-color: var(--cut); }

/* ------------------------------------------------------------ timeline */

.track { margin: 0 0 3rem; }
.track__head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; border-radius: 8px 8px 0 0;
  background: var(--panel); border: 1px solid var(--rule); border-bottom: 0;
}
.track__head h2 { margin: 0; border: 0; padding: 0; }

.tl { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 0 0 8px 8px; background: var(--panel); }
.tl__phase {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kai);
  padding: .75rem 1.25rem .3rem; background: var(--panel-alt);
  border-top: 1px solid var(--rule);
}
.tl li.ms {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 0 1.25rem;
  padding: 1rem 1.25rem; border-top: 1px solid var(--rule-soft);
}
.tl li.ms:first-of-type { border-top: 0; }
.ms__when { font-size: .82rem; }
.ms__date { font-family: var(--mono); font-weight: 700; font-size: .8rem; display: block; }
.ms__rel { color: var(--ink-soft); font-size: .76rem; display: block; margin-top: .15rem; }
.ms__title { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; margin: 0 0 .35rem; }
.ms__title a { color: inherit; text-decoration: none; }
.ms__title a:hover { text-decoration: underline; text-decoration-color: var(--kai); }
.ms__body { margin: 0 0 .5rem; font-size: .92rem; color: var(--ink-soft); }
.ms__owner { font-size: .78rem; color: var(--ink-soft); font-style: italic; }

.ms--past .ms__when { opacity: .55; }
.ms--soon { background: var(--note-bg); }
.ms--soon .ms__body, .ms--soon .ms__rel, .ms--soon .ms__owner { color: var(--note-ink); }
.ms--critical { border-left: 4px solid var(--cut); }

@media (max-width: 40rem) {
  .tl li.ms { grid-template-columns: 1fr; gap: .4rem; }
}

/* --------------------------------------------------------------- table */

.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
caption { text-align: left; padding: .85rem 1rem; color: var(--ink-soft); font-size: .85rem; border-bottom: 1px solid var(--rule); }
th, td { text-align: left; padding: .65rem .9rem; border-top: 1px solid var(--rule-soft); vertical-align: top; }
thead th {
  border-top: 0; background: var(--cyan-wash);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kai-deep); font-weight: 700;
}
tbody tr:hover { background: var(--panel-alt); }

/* Stacked tables on mobile. A .tablewrap marked .stack turns each row into a
   card below the breakpoint: the column headings are read out per cell from
   data-label, and the row header (usually a name or ID) becomes the card
   title. Above the breakpoint the real <table> is untouched. This replaces the
   horizontal scroll that otherwise hides whole columns off the right edge of a
   phone. */
@media (max-width: 48rem) {
  .tablewrap.stack { border: 0; background: transparent; overflow: visible; border-radius: 0; }
  .tablewrap.stack caption { padding: 0 0 .6rem; border: 0; color: var(--ink-soft); }
  .tablewrap.stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tablewrap.stack table { font-size: .95rem; }
  .tablewrap.stack tbody tr {
    display: block; background: var(--panel); border: 1px solid var(--rule);
    border-radius: 8px; box-shadow: var(--shadow); padding: .85rem 1rem; margin: 0 0 .8rem;
  }
  .tablewrap.stack tbody tr:hover { background: var(--panel); }
  .tablewrap.stack td, .tablewrap.stack th {
    display: block; border: 0; padding: .25rem 0; text-align: left;
  }
  .tablewrap.stack th[scope="row"] {
    font-weight: 700 !important; font-size: 1.02rem;
    padding-bottom: .4rem; margin-bottom: .35rem; border-bottom: 1px solid var(--rule-soft);
  }
  .tablewrap.stack td[data-label]::before {
    content: attr(data-label) ": "; font-family: var(--mono); font-size: .62rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--kai-deep);
    font-weight: 700; display: block; margin-bottom: .15rem;
  }
  .tablewrap.stack tbody tr td:last-child { padding-bottom: 0; }
}

/* --------------------------------------------------------------- forms */

form { margin: 0; }
label { display: block; font-weight: 700; font-size: .88rem; margin: 0 0 .3rem; }
.hint { font-size: .82rem; color: var(--ink-soft); font-weight: 400; margin: .2rem 0 .4rem; }

input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--panel); color: var(--ink);
}
textarea { min-height: 6rem; resize: vertical; }

.field { margin: 0 0 1.1rem; }
.fieldrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }

.btn {
  font: inherit; font-weight: 700; font-size: .92rem;
  background: var(--kai-deep); color: #fff;
  border: 2px solid var(--kai-deep); border-radius: 5px;
  padding: .55rem 1.1rem; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.btn:hover { background: var(--kai); border-color: var(--kai); color: #fff; }
.btn--ghost { background: transparent; color: var(--kai-deep); }
.btn--ghost:hover { background: var(--panel-alt); color: var(--kai-deep); }
.btn--small { font-size: .8rem; padding: .35rem .7rem; }
.btn--danger { background: var(--cut); border-color: var(--cut); }

/* Tap targets: form controls reach 44px (selects/date inputs measured ~41.7px). */
input[type=text], input[type=email], input[type=password], input[type=date], select {
  min-height: 2.75rem;
}

/* Show / hide password (revealed by reveal.js; no-JS users just never see it).
   Typing a 12+ character passphrase blind on a phone is where sign-in mistakes
   come from, and there is no self-service reset behind this portal. */
.pw { display: flex; align-items: stretch; gap: .4rem; }
.pw input { flex: 1 1 auto; }
.pw-toggle {
  flex: 0 0 auto; min-height: 2.75rem; padding: 0 .85rem;
  font: inherit; font-weight: 700; font-size: .85rem;
  background: var(--panel-alt); color: var(--kai-deep);
  border: 1px solid var(--rule); border-radius: 5px; cursor: pointer;
}
.pw-toggle:hover { border-color: var(--kai); }

fieldset { border: 1px solid var(--rule); border-radius: 6px; padding: .9rem 1rem; margin: 0 0 1.1rem; }
legend { font-weight: 700; font-size: .88rem; padding: 0 .4rem; }
.radios { display: flex; gap: 1rem; flex-wrap: wrap; }
.radios label { font-weight: 400; display: flex; gap: .4rem; align-items: center; margin: 0; }
.radios input { width: auto; }

.errorbox {
  background: var(--cut-bg); color: var(--cut);
  border: 1px solid var(--cut); border-left-width: 4px;
  border-radius: 5px; padding: .8rem 1rem; margin: 0 0 1.25rem; font-size: .92rem;
}
.okbox {
  background: var(--add-bg); color: var(--add);
  border: 1px solid var(--add); border-left-width: 4px;
  border-radius: 5px; padding: .8rem 1rem; margin: 0 0 1.25rem; font-size: .92rem;
}

/* --------------------------------------------------------------- login */

.loginpage { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1.25rem; }
.loginbox {
  width: 100%; max-width: 25rem;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 10px; padding: 2rem; box-shadow: var(--shadow);
}
.loginbox h1 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 .3rem; }
.loginbox .sub { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1.5rem; }

/* ------------------------------------------------------------ comments */

.discussion { margin-top: 1rem; }
.comment {
  border-left: 3px solid var(--rule); padding: .1rem 0 .1rem 1rem; margin: 0 0 1.1rem;
}
.comment__head { font-size: .82rem; color: var(--ink-soft); margin: 0 0 .25rem; }
.comment__head strong { color: var(--ink); }
.comment__body { margin: 0; white-space: pre-wrap; font-size: .95rem; }

/* ---------------------------------------------------------------- misc */

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; padding: .2rem .55rem; border-radius: 20px;
  background: var(--panel-alt); border: 1px solid var(--rule);
  text-decoration: none; color: var(--ink-soft);
}
.chip:hover { border-color: var(--kai); color: var(--kai-deep); }
.chiprow { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 0; }

.refs { margin: .75rem 0 0; }
.refs__label {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin-right: .4rem;
}

.unit { display: grid; grid-template-columns: 1fr 17rem; gap: 1.5rem; align-items: start; margin: 1.25rem 0; }
@media (max-width: 55rem) { .unit { grid-template-columns: 1fr; } }

.foot {
  background: var(--kai); color: #fff; margin-top: 4rem;
}
.foot__inner {
  max-width: 76rem; margin: 0 auto; padding: 1.5rem;
  font-size: .84rem;
}
.foot p { max-width: 78ch; margin: 0 0 .4rem; }
.foot p:last-child { margin: 0; }
.foot strong { color: #fff; }
.foot a { color: #fff; }

.mono { font-family: var(--mono); }
.tempcode {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700;
  background: var(--panel-alt); border: 1px dashed var(--rule);
  padding: .5rem .8rem; border-radius: 5px; display: inline-block; user-select: all;
}

.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }

@media print {
  .nav, .toolbar, form, .btn { display: none !important; }
  html { font-size: 12pt; background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}