@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

/* 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.
   Light mode only, by standing request: no prefers-color-scheme block anywhere,
   and color-scheme pinned so form controls and scrollbars stay light too. */

: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; }

/* -------------------------------------------------- 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); }

/* --------------------------------------------------------------- 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); }

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; }
}


/* ---------------------------------------------- compliance check states */

.check {
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 5px solid var(--rule); border-radius: 8px;
  padding: 1rem 1.15rem; margin: 0 0 .85rem;
}
.check__head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 0 0 .35rem; }
.check__id {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  color: var(--ink-soft); border: 1px solid var(--rule);
  padding: .12rem .4rem; border-radius: 3px;
}
.check__title { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; margin: 0; }
.check__auth { font-size: .78rem; color: var(--ink-soft); margin-left: auto; }
.check__msg { margin: 0; font-size: .93rem; }
.check__extra { margin: .6rem 0 0; font-size: .86rem; color: var(--ink-soft); }

.check--ok      { border-left-color: var(--add); }
.check--warning { border-left-color: var(--note-rule); background: var(--note-bg); }
.check--warning .check__msg, .check--warning .check__extra { color: var(--note-ink); }
.check--breach  { border-left-color: var(--cut); background: var(--cut-bg); }
.check--breach  .check__msg { color: var(--cut); font-weight: 700; }
.check--unknown { border-left-color: var(--move); background: var(--move-bg); }
.check--unknown .check__msg, .check--unknown .check__extra { color: var(--move); }

.state {
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 3px; border: 1px solid currentColor;
}
.state--ok      { color: var(--add);      background: var(--add-bg); }
.state--warning { color: var(--note-ink); background: var(--note-bg); }
.state--breach  { color: var(--cut);      background: var(--cut-bg); }
.state--unknown { color: var(--move);     background: var(--move-bg); }

/* -------------------------------------------------------------- roster */

.seat { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
        text-transform: uppercase; color: var(--ink-soft); }
.vacant { color: var(--ink-soft); font-style: italic; }
.restricted {
  border: 1px dashed var(--move); background: var(--move-bg); color: var(--move);
  border-radius: 6px; padding: .8rem 1rem; margin: 1rem 0; font-size: .88rem;
}
.restricted__label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; display: block; margin-bottom: .3rem;
}