/* Osborne Cabin — lean frontend design system.
   Calendar-first. Forest/wood/brass over warm linen; reservations use the
   site's own convention: green = open (shared), red = private (whole cabin). */
:root {
  --bg: #F1ECE1; --surface: #FBF9F3; --surface-2: #EAE3D4;
  --ink: #221F19; --ink-soft: #5C5447; --line: #DED6C4;
  --forest: #2C4034; --forest-deep: #1A261E; --brass: #9C7430; --brass-bright: #BE9243;
  --res-open: #2E7D4E; --res-private: #B0392E;
  --ok: #3B7049; --ok-bg: #E4EEDE; --ok-line: #BBD3B0;
  --alert: #A83A30; --alert-bg: #F5E2DD; --alert-line: #E3BAB1;
  --info: #2C597F; --info-bg: #E1EAF2; --info-line: #B9CFE2;
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(28,24,16,.04), 0 8px 26px rgba(28,24,16,.07);
  --radius: 12px;
  color-scheme: light;
}
/* dark tokens, applied to a dark data-theme and to system-dark when no theme is chosen */
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
    --bg: #12170F; --surface: #1C241A; --surface-2: #232D20;
    --ink: #ECE7D9; --ink-soft: #A7AB98; --line: #313B2C;
    --forest: #3C5745; --forest-deep: #0E140C; --brass: #CBA052; --brass-bright: #E0BA68;
    --res-open: #4F9E6C; --res-private: #C85B4E;
    --ok: #76B281; --ok-bg: #1C2C1D; --ok-line: #335336;
    --alert: #E08A7F; --alert-bg: #2E1C19; --alert-line: #5A312B;
    --info: #8FB6D8; --info-bg: #172530; --info-line: #2C4559;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
    color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #12170F; --surface: #1C241A; --surface-2: #232D20;
  --ink: #ECE7D9; --ink-soft: #A7AB98; --line: #313B2C;
  --forest: #3C5745; --forest-deep: #0E140C; --brass: #CBA052; --brass-bright: #E0BA68;
  --res-open: #4F9E6C; --res-private: #C85B4E;
  --ok: #76B281; --ok-bg: #1C2C1D; --ok-line: #335336;
  --alert: #E08A7F; --alert-bg: #2E1C19; --alert-line: #5A312B;
  --info: #8FB6D8; --info-bg: #172530; --info-line: #2C4559;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
  color-scheme: dark;
}
/* explicit light (same as the base :root tokens) */
:root[data-theme="light"] { color-scheme: light; }
/* Retro — a Windows-95 skin */
:root[data-theme="retro"] {
  --bg: #008080; --surface: #C0C0C0; --surface-2: #BFBFBF;
  --ink: #0A0A0A; --ink-soft: #3A3A3A; --line: #808080;
  --forest: #000080; --forest-deep: #000080; --brass: #000080; --brass-bright: #1084D0;
  --res-open: #008000; --res-private: #800000;
  --ok: #0A6A0A; --ok-bg: #C0C0C0; --ok-line: #808080;
  --alert: #AA0000; --alert-bg: #C0C0C0; --alert-line: #808080;
  --info: #000080; --info-bg: #C0C0C0; --info-line: #808080;
  --font-display: 'Tahoma', 'MS Sans Serif', Geneva, Verdana, sans-serif;
  --font-sans: 'Tahoma', 'MS Sans Serif', Geneva, Verdana, sans-serif;
  --shadow: none; --radius: 0px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; max-width: 100%; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1,h2,h3 { margin: 0; }
a { color: var(--forest); }
button { font-family: inherit; cursor: pointer; }
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.serif { font-family: var(--font-display); }
[hidden] { display: none !important; }

/* masthead */
.bar { position: sticky; top: 0; z-index: 20; background: var(--forest-deep); border-bottom: 1px solid rgba(255,255,255,.08); }
.bar .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .6rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 6px; }
.brand b { color: #F2EEE2; font-weight: 600; letter-spacing: .14em; font-size: .78rem; text-transform: uppercase; }
.bar nav { display: flex; align-items: center; gap: .15rem; margin-left: .6rem; flex-wrap: wrap; }
.bar nav a { color: #CFCABB; text-decoration: none; font-size: .84rem; font-weight: 500; padding: .35rem .6rem; border-radius: 7px; }
.bar nav a.active, .bar nav a:hover { color: #FBF8EE; background: rgba(255,255,255,.1); }
.bar .spacer { flex: 1; }
.bar .logout { color: #BBB6A6; background: none; border: none; font-size: .84rem; font-weight: 500; padding: .35rem .5rem; }
.bar .logout:hover { color: #F2EEE2; }

/* buttons */
.btn-brass { background: var(--brass); color: #22190B; border: none; border-radius: 8px; font-weight: 700; font-size: .84rem; padding: .5rem .85rem; white-space: nowrap; }
.btn-brass:hover { background: var(--brass-bright); }
.btn-forest { background: var(--forest); color: #F2EEE2; border: none; border-radius: 9px; font-weight: 700; font-size: .95rem; padding: .75rem 1rem; }
.btn-forest:hover { filter: brightness(.92); }
.btn-ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: .5rem .8rem; font-size: .86rem; font-weight: 600; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { border: 1px solid var(--alert-line); background: var(--alert-bg); color: var(--alert); border-radius: 8px; padding: .4rem .7rem; font-size: .82rem; font-weight: 600; }

/* slim photo band */
.band { height: 132px; background: #223 center 62%/cover no-repeat; background-image: linear-gradient(90deg, rgba(20,26,16,.55), rgba(20,26,16,.05) 55%), url("/static/img/poudre.jpg"); position: relative; }
.band .credit { position: absolute; right: .5rem; bottom: .35rem; color: rgba(255,255,255,.72); font-size: .62rem; }

/* notices */
.notices { display: grid; gap: .55rem; margin-top: 1.1rem; }
.notice { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .9rem; border-radius: 10px; border: 1px solid; font-size: .9rem; }
.notice .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .45rem; flex: none; }
.notice b { font-weight: 600; }
.notice .x { margin-left: auto; background: none; border: none; color: inherit; opacity: .5; font-size: 1.05rem; line-height: 1; padding: 0 .25rem; }
.notice .x:hover { opacity: 1; }
.notice.ok { background: var(--ok-bg); border-color: var(--ok-line); color: color-mix(in srgb, var(--ok) 68%, var(--ink)); }
.notice.ok .dot { background: var(--ok); }
.notice.alert { background: var(--alert-bg); border-color: var(--alert-line); color: color-mix(in srgb, var(--alert) 68%, var(--ink)); }
.notice.alert .dot { background: var(--alert); }
.notice.info { background: var(--info-bg); border-color: var(--info-line); color: color-mix(in srgb, var(--info) 70%, var(--ink)); }
.notice.info .dot { background: var(--info); }

/* section heads */
.sec { padding-block: clamp(1.4rem, 3.5vw, 2rem); }
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sechead h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.01em; }
.sechead h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
.legend { display: flex; gap: 1rem; align-items: center; font-size: .82rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.sw { width: 13px; height: 13px; border-radius: 4px; }
.sw.open { background: var(--res-open); } .sw.priv { background: var(--res-private); }

/* calendar */
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cal-top { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.cal-top h3 { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-top .mnav { display: flex; gap: .4rem; }
.cal-top .mnav button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 30px; height: 30px; border-radius: 8px; font-size: 1rem; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid .dow { text-align: center; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: .55rem 0; border-bottom: 1px solid var(--line); }
.grid .cell { min-height: 92px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .3rem; display: flex; flex-direction: column; gap: .2rem; }
.grid .cell:nth-child(7n+1) { border-left: none; }
.grid .cell.blank { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.grid .cell.pick { cursor: pointer; }
.grid .cell.pick:hover { background: color-mix(in srgb, var(--brass) 10%, var(--surface)); }
.grid .cell.sel { background: color-mix(in srgb, var(--brass) 16%, var(--surface)); box-shadow: inset 0 0 0 2px var(--brass); }
.grid .cell .num { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right; padding: .1rem .15rem 0; }
.ev { font-size: .72rem; font-weight: 600; color: #fff; border-radius: 5px; padding: .14rem .4rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ev.open { background: var(--res-open); } .ev.priv { background: var(--res-private); }
.ev.cont { color: transparent; }
.cal.compact .grid .cell { min-height: 56px; }

/* panels / forms */
.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.3rem; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; }
.panel .note { color: var(--ink-soft); font-size: .86rem; margin: 0 0 1rem; }
.field { display: grid; gap: .3rem; margin-bottom: 1rem; }
.field > label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select { border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: .62rem .7rem; font-size: .95rem; color: var(--ink); font-family: inherit; width: 100%; }
.field input:focus, .field select:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.rangebox { border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: .62rem .7rem; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rangebox .ph { color: var(--ink-soft); }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 3px; width: fit-content; }
.seg button { border: none; background: none; color: var(--ink-soft); font-weight: 600; font-size: .86rem; padding: .4rem .9rem; border-radius: 7px; }
.seg button[aria-pressed="true"].open { background: var(--res-open); color: #fff; }
.seg button[aria-pressed="true"].priv { background: var(--res-private); color: #fff; }
.stepper { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: .5rem .6rem; }
.stepper button { border: none; background: var(--surface-2); color: var(--ink); width: 28px; height: 28px; border-radius: 7px; font-size: 1rem; line-height: 1; }
.stepper span { font-weight: 600; font-variant-numeric: tabular-nums; }

/* forum */
.toolbar { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .search { flex: 1; min-width: 180px; }
.toolbar input, .toolbar select { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: .5rem .7rem; font-size: .88rem; font-family: inherit; }
.toolbar .search input { width: 100%; }
table.forum { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.forum th { text-align: left; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
table.forum td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
table.forum tr:last-child td { border-bottom: none; }
table.forum tbody tr:hover { background: var(--surface-2); cursor: pointer; }
table.forum .ttl { font-weight: 600; }
table.forum .muted { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* list rows (manage reservations) */
.rowcard { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: .6rem; }
.rowcard .tag { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; color: #fff; }
.rowcard .tag.open { background: var(--res-open); } .rowcard .tag.priv { background: var(--res-private); }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(15,18,12,.5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal .box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); width: min(400px, 100%); padding: 1.2rem; }
.modal h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: .8rem; }
.modal dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .92rem; margin: 0 0 1rem; }
.modal dt { color: var(--ink-soft); } .modal dd { margin: 0; font-weight: 600; text-align: right; }

/* login / auth */
.auth { min-height: calc(100vh - 0px); display: grid; place-items: center; padding: 2rem 1rem;
  background: linear-gradient(rgba(20,26,16,.55), rgba(20,26,16,.72)), url("/static/img/poudre.jpg") center/cover fixed; }
.authcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35); width: min(400px, 100%); padding: 1.8rem; }
.authcard .logo { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.authcard .logo img { width: 34px; height: 34px; }
.authcard .logo b { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.authcard h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin-bottom: 1.1rem; }
.authcard .alt { margin-top: 1rem; font-size: .88rem; color: var(--ink-soft); text-align: center; }

.center-note { text-align: center; color: var(--ink-soft); padding: 2rem; }
footer { border-top: 1px solid var(--line); margin-top: 1.5rem; }
footer .wrap { padding-block: 1.2rem; color: var(--ink-soft); font-size: .76rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } .grid .cell { min-height: 76px; } }
@media (max-width: 520px) { .bar nav .hideSm { display: none; } .grid .cell { min-height: 60px; } .ev { font-size: .64rem; } }
@media (prefers-reduced-motion: no-preference) { .notice, .btn-brass, .btn-forest, table.forum tbody tr, .rowcard { transition: background .16s ease, opacity .16s ease; } }

/* signup quiz */
.quiz-q { margin-bottom: 1rem; }
.quiz-q > .ql { font-weight: 600; font-size: .9rem; margin-bottom: .45rem; display: block; }
.opt { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .35rem; cursor: pointer; font-size: .86rem; background: var(--bg); }
.opt:hover { background: var(--surface-2); }
.opt input { margin-top: .18rem; accent-color: var(--forest); }

/* post view */
.modal .box.wide { width: min(560px, 100%); }
.postmeta { color: var(--ink-soft); font-size: .82rem; margin: -.3rem 0 .8rem; }
.postbody { white-space: pre-wrap; font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; max-height: 50vh; overflow: auto; }
.postbody img, .postimg { border-radius: 8px; margin-top: .6rem; }
.field textarea { border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: .62rem .7rem; font-size: .95rem; color: var(--ink); font-family: inherit; width: 100%; min-height: 160px; resize: vertical; }
.field input[type="file"] { font-size: .85rem; }
.pill-type { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bark); background: color-mix(in srgb, var(--bark) 14%, var(--surface)); padding: .14rem .45rem; border-radius: 5px; }

/* settings — notification prefs */
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .1rem; border-bottom: 1px solid var(--line); }
.pref-row:last-child { border-bottom: none; }
.pref-row .lbl { font-size: .92rem; }
.pref-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--forest); flex: none; cursor: pointer; }
.panel h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }

/* weather */
.wx-hero { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.wx-temp { font-family: var(--font-display); font-size: clamp(3rem, 11vw, 4.6rem); font-weight: 600; line-height: .95; }
.wx-cond { font-size: 1.15rem; font-weight: 600; }
.wx-loc { color: var(--ink-soft); font-size: .9rem; margin-top: .15rem; }
.wx-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .7rem; color: var(--ink-soft); font-size: .9rem; }
.wx-stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-sub { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 1.6rem 0 .8rem; }
.wx-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: .6rem; }
.wx-day { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: .85rem .4rem; text-align: center; }
.wx-day .d { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.wx-day .t { font-variant-numeric: tabular-nums; font-size: .9rem; margin-top: .2rem; }
.wx-day .hi { font-weight: 700; } .wx-day .lo { color: var(--ink-soft); }
.wx-day .pop { font-size: .72rem; color: var(--info); margin-top: .2rem; }
.wx-ico { width: 38px; height: 38px; margin: .45rem auto; display: block; }
.wx-ico.big { width: 76px; height: 76px; margin: 0; flex: none; }
.wx-hours { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.wx-hour { flex: none; width: 66px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .3rem; }
.wx-hour .hh { font-size: .72rem; color: var(--ink-soft); } .wx-hour .ht { font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-alert { border-radius: 10px; padding: .8rem 1rem; margin-bottom: .6rem; border: 1px solid var(--alert-line); background: var(--alert-bg); color: color-mix(in srgb, var(--alert) 72%, var(--ink)); }
.wx-alert b { display: block; font-size: .95rem; }
.wx-alert .sev { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.wx-ok { color: var(--ink-soft); font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
@media (max-width: 620px) {
  .wx-days { grid-template-columns: repeat(7, minmax(0,1fr)); gap: .3rem; }
  .wx-day { padding: .55rem .12rem; border-radius: 9px; }
  .wx-ico { width: 24px; height: 24px; margin: .35rem auto; }
  .wx-day .d { font-size: .58rem; }
  .wx-day .t { font-size: .72rem; }
  .wx-day .pop { font-size: .6rem; }
}

/* communications feed */
.feed { display: grid; gap: 1rem; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pcard-h { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem .3rem; }
.pavatar { width: 34px; height: 34px; border-radius: 50%; background: var(--forest); color: #F2EEE2; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.pcard-h .who { font-weight: 600; font-size: .92rem; }
.pcard-h .meta { color: var(--ink-soft); font-size: .78rem; }
.pcard-h .ptype { margin-left: auto; }
.pcard-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; padding: 0 1.1rem .4rem; }
.pcard-body { padding: 0 1.1rem 1rem; display: grid; gap: .7rem; }
.pblock-text { white-space: pre-wrap; font-size: .95rem; line-height: 1.6; }
.pblock-img img { border-radius: 10px; border: 1px solid var(--line); max-width: 100%; }
.pblock-video iframe, .pblock-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; display: block; }
.pblock-video a { font-size: .9rem; }
.pcard-foot { display: flex; justify-content: flex-end; padding: 0 1.1rem 1rem; }
/* contacts */
.contact { display: flex; align-items: center; gap: .7rem; padding: .55rem .15rem; border-bottom: 1px solid var(--line); }
.contact:last-child { border-bottom: none; }
.contact .nm { font-weight: 600; font-size: .9rem; }
.contact .em { color: var(--ink-soft); font-size: .8rem; }
.contact a { text-decoration: none; color: var(--forest); }
/* block editor */
.beditor { display: grid; gap: .7rem; margin: .4rem 0 1rem; }
.beditor .blk { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .7rem .7rem; background: var(--bg); position: relative; }
.beditor .blk .rm { position: absolute; top: .35rem; right: .45rem; background: none; border: none; color: var(--ink-soft); font-size: 1.15rem; cursor: pointer; line-height: 1; }
.beditor .blk .bl { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: .4rem; }
.beditor textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .55rem; font-family: inherit; font-size: .95rem; min-height: 90px; background: var(--surface); color: var(--ink); resize: vertical; }
.beditor .blk img { border-radius: 8px; max-height: 220px; margin-top: .5rem; }
.addblk { display: flex; gap: .5rem; flex-wrap: wrap; }
.addblk button { border: 1px dashed var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: .5rem .85rem; font-size: .86rem; font-weight: 600; }
.addblk button:hover { background: var(--surface-2); }
.bcast { display: flex; align-items: center; gap: .7rem; background: color-mix(in srgb, var(--brass) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brass) 40%, var(--line)); border-radius: 10px; padding: .7rem .9rem; margin: .4rem 0 1rem; }
.bcast input { width: 20px; height: 20px; accent-color: var(--brass); flex: none; }
.bcast .t { font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.bcast .d { color: var(--ink-soft); font-size: .8rem; }

/* calendar overlays (holidays + hunting seasons) */
.cal-overlays { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ovl-toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: .32rem .75rem; cursor: pointer; background: var(--surface); color: var(--ink-soft); user-select: none; }
.ovl-toggle input { accent-color: var(--brass); width: 15px; height: 15px; }
.ovl-toggle.on { background: color-mix(in srgb, var(--brass) 14%, var(--surface)); border-color: color-mix(in srgb, var(--brass) 40%, var(--line)); color: var(--ink); }
.ovl { font-size: .62rem; font-weight: 700; letter-spacing: .01em; border-radius: 4px; padding: .05rem .3rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ovl.hunt { background: color-mix(in srgb, #c0862f 26%, var(--surface)); color: color-mix(in srgb, #c0862f 66%, var(--ink)); }
.ovl.holiday { background: color-mix(in srgb, #6a5aa0 24%, var(--surface)); color: color-mix(in srgb, #6a5aa0 70%, var(--ink)); }
.cell.hunt-day { box-shadow: inset 0 -3px 0 color-mix(in srgb, #c0862f 60%, transparent); }
.ovl-note { color: var(--ink-soft); font-size: .74rem; margin-top: .7rem; }

/* Bonvoy-style nav */
.bar .wrap.barwrap { position: relative; gap: .7rem; }
.nav-desk { display: flex; gap: .1rem; }
.nav-desk a { color: #CFCABB; text-decoration: none; font-size: .86rem; font-weight: 500; padding: .4rem .72rem; border-radius: 7px; white-space: nowrap; }
.nav-desk a.active, .nav-desk a:hover { color: #FBF8EE; background: rgba(255,255,255,.1); }
.hburg { display: none; background: none; border: none; color: #E5E0D3; font-size: 1.25rem; padding: .1rem .4rem; cursor: pointer; line-height: 1; }
.book-cta { text-decoration: none; }
.acct { position: relative; }
.acct-btn { background: none; border: none; cursor: pointer; padding: 0; }
.acct-btn .pavatar { width: 32px; height: 32px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 9px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 168px; padding: .3rem; z-index: 40; }
.acct-menu:not([hidden]) { display: flex; flex-direction: column; }
.acct-menu a, .acct-menu button { text-align: left; background: none; border: none; color: var(--ink); font: inherit; font-size: .88rem; padding: .55rem .7rem; border-radius: 7px; text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--surface-2); }
.nav-mobile { position: absolute; left: .4rem; right: .4rem; top: calc(100% + 6px); background: var(--forest-deep); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: .4rem; z-index: 40; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.nav-mobile:not([hidden]) { display: flex; flex-direction: column; }
.nav-mobile .mlink { color: #E5E0D3; text-decoration: none; background: none; border: none; text-align: left; font: inherit; font-size: .92rem; padding: .6rem .7rem; border-radius: 7px; cursor: pointer; }
.nav-mobile .mlink:hover, .nav-mobile .mlink.active { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 880px) {
  .bar .nav-desk { display: none; }   /* .bar .nav-desk (0,2,0) beats base .bar nav (0,1,1) */
  .hburg { display: block; }
  .book-cta { display: none; }
}
@media (max-width: 560px) {
  .band { height: 104px; }
  .sec { padding-block: 1.3rem; }
  .grid .cell { min-height: 72px; }
  .cal.compact .grid .cell { min-height: 48px; }
  .rbar, .rlane { height: 18px; }
  .rbar { font-size: .62rem; padding: 0 .35rem; }
  .cal-top { padding: .7rem .85rem; }
  .cal-top h3 { font-size: 1rem; }
  .wx-hero { gap: 1rem; }
  .wx-temp { font-size: clamp(2.6rem, 17vw, 3.6rem); }
  .wx-ico.big { width: 62px; height: 62px; }
  .wx-stats { gap: 1rem .9rem; }
  .cols { gap: 1rem; }
  .rowcard { gap: .7rem; padding: .8rem .9rem; flex-wrap: wrap; }
  .map-full { height: calc(100vh - 200px); min-height: 360px; }
}

/* weather map + cameras + news + past reservations */
.wx-map iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 12px; display: block; }
.cam-links { display: flex; flex-direction: column; }
.cam-link { display: block; color: var(--forest); text-decoration: none; font-weight: 600; font-size: .9rem; padding: .55rem .1rem; border-bottom: 1px solid var(--line); }
.cam-link:last-child { border-bottom: none; }
.cam-link:hover { color: var(--brass); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.rowcard.past { opacity: .55; }
.past-label { color: var(--ink-soft); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* continuous reservation bars (one shape per stay) */
.grid .cell { border-right: none; padding: .25rem 0 .35rem; gap: 0; }
.grid .cell .num { padding: .1rem .45rem 0; }
.rlane { height: 20px; margin-bottom: 2px; }
.rbar { height: 20px; display: flex; align-items: center; font-size: .68rem; font-weight: 600; color: #fff; padding: 0 .45rem; overflow: hidden; white-space: nowrap; cursor: pointer; }
.rbar.open { background: var(--res-open); }
.rbar.priv { background: var(--res-private); }
.rbar.rstart { border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-left: 3px; }
.rbar.rend { border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-right: 3px; }
.ovl { margin: 0 3px; }

/* theme toggle button */
.theme-btn { background: none; border: none; color: #E5E0D3; font-size: 1.1rem; cursor: pointer; padding: .2rem .45rem; line-height: 1; }
.theme-btn:hover { color: #fff; }

/* ===== Retro (Windows 95) skin ===== */
:root[data-theme="retro"] body { background: #008080; }
[data-theme="retro"] .band { display: none; }
[data-theme="retro"] .bar { background: #000080; border-bottom: 2px solid; border-color: #dfdfdf #000 #000 #dfdfdf; }
[data-theme="retro"] .brand b, [data-theme="retro"] .nav-desk a, [data-theme="retro"] .theme-btn, [data-theme="retro"] .hburg { color: #fff; }
[data-theme="retro"] .nav-desk a.active, [data-theme="retro"] .nav-desk a:hover { background: rgba(255,255,255,.2); }
[data-theme="retro"] .panel, [data-theme="retro"] .cal, [data-theme="retro"] .authcard,
[data-theme="retro"] .pcard, [data-theme="retro"] table.forum, [data-theme="retro"] .rowcard,
[data-theme="retro"] .acct-menu, [data-theme="retro"] .modal .box, [data-theme="retro"] .notice, [data-theme="retro"] .wx-alert {
  border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; border-radius: 0;
}
[data-theme="retro"] .btn-forest, [data-theme="retro"] .btn-brass, [data-theme="retro"] .btn-ghost,
[data-theme="retro"] .btn-danger, [data-theme="retro"] .seg button, [data-theme="retro"] .stepper button,
[data-theme="retro"] .mnav button, [data-theme="retro"] .addblk button, [data-theme="retro"] .ovl-toggle {
  background: #C0C0C0; color: #000; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; border-radius: 0;
}
[data-theme="retro"] .btn-forest:active, [data-theme="retro"] .btn-brass:active, [data-theme="retro"] .btn-ghost:active, [data-theme="retro"] .seg button:active, [data-theme="retro"] .mnav button:active {
  border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #000;
}
[data-theme="retro"] .sechead h1, [data-theme="retro"] .sechead h2, [data-theme="retro"] .panel h3, [data-theme="retro"] .authcard h1, [data-theme="retro"] .pcard-title {
  background: linear-gradient(90deg, #000080, #1084D0); color: #fff; padding: 3px 8px; font-family: var(--font-sans); font-weight: 700;
}
[data-theme="retro"] input, [data-theme="retro"] select, [data-theme="retro"] textarea,
[data-theme="retro"] .rangebox, [data-theme="retro"] .field input, [data-theme="retro"] .toolbar input, [data-theme="retro"] .toolbar select {
  border: 2px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #000; border-radius: 0; background: #fff; color: #000;
}
[data-theme="retro"] .pavatar, [data-theme="retro"] .tag, [data-theme="retro"] .pill-type, [data-theme="retro"] .rbar { border-radius: 0; }

/* Apple-News-style bulletin */
.news-lead { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.2rem; }
.news-lead.alert { border-color: var(--alert-line); background: var(--alert-bg); }
.news-lead h2 { font-size: clamp(1.4rem, 3.6vw, 2.1rem); margin: .45rem 0; line-height: 1.1; }
.news-lead .lead-sum { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin: 0; }
.news-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.news-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem; box-shadow: var(--shadow); }
.news-card.alert { border-color: var(--alert-line); }
.nc-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.nc-src { color: var(--ink-soft); font-size: .74rem; font-variant-numeric: tabular-nums; }
.news-card h3 { font-size: 1.12rem; margin-bottom: .4rem; line-height: 1.2; }
.nc-sum { color: var(--ink-soft); font-size: .88rem; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.chip { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; }
.chip.alert { background: var(--alert); color: #fff; }
.news-sub { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin: 1.7rem 0 .8rem; }

/* Emergency Info */
.em-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.em-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.em-card.full { grid-column: 1 / -1; }
.em-head { display: flex; align-items: center; gap: .4rem; padding: .9rem 1.1rem; cursor: pointer; }
.em-title { font-weight: 600; flex: 1; }
.em-i, .em-x { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: .95rem; padding: .1rem .35rem; border-radius: 6px; line-height: 1; }
.em-i:hover, .em-x:hover { background: var(--surface-2); color: var(--ink); }
.em-chev { color: var(--ink-soft); font-size: 1.15rem; width: 1.1em; text-align: center; }
.em-body { padding: 0 1.1rem 1.1rem; }
.em-text { white-space: pre-wrap; line-height: 1.6; font-size: .95rem; }
.em-list { margin: 0; padding-left: 1.2rem; } .em-list li { margin-bottom: .35rem; }
.em-contacts { display: grid; gap: .55rem; }
.em-contact { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.em-contact .nm { font-weight: 600; }
.em-contact a { color: var(--forest); text-decoration: none; }
.em-map { height: 400px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.leaflet-tooltip.map-lbl { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.leaflet-tooltip.map-lbl.main { background: var(--brass); color: #22190B; border-color: var(--brass); }
.em-edit { padding: 1.1rem; display: grid; gap: .5rem; }
.em-edit .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.em-edit textarea { min-height: 110px; border: 1px solid var(--line); border-radius: 8px; padding: .55rem; font-family: inherit; background: var(--surface); color: var(--ink); width: 100%; }
@media (max-width: 640px) { .em-grid { grid-template-columns: 1fr; } .em-card.full { grid-column: auto; } }

/* ---- Map page ---- */
.map-full { height: calc(100vh - 230px); min-height: 430px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.leaflet-container { background: var(--surface-2); }

/* ---- Emergency datasheet ---- */
.ds-list { display: grid; gap: .8rem; }
.ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.ds-head { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; cursor: pointer; background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.ds-head:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.ds-title { font-weight: 700; flex: 1; font-size: .95rem; letter-spacing: .01em; color: var(--ink); }
.ds-body { overflow-x: auto; }
table.dsheet { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.dsheet th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 700; padding: .55rem 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 30%, var(--surface)); white-space: nowrap; }
table.dsheet td { padding: .55rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; color: var(--ink); }
table.dsheet tbody tr:last-child td { border-bottom: none; }
.ds-actions { text-align: right; white-space: nowrap; width: 1%; }
table.dsheet .ds-edit input { width: 100%; min-width: 7rem; border: 1px solid var(--line); border-radius: 6px; padding: .4rem .5rem; font: inherit; background: var(--bg); color: var(--ink); }
table.dsheet .ds-edit input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* ---- Auth helpers (forgot / reset / name-match) ---- */
.authcard .alt .alt-sep { margin: 0 .5rem; opacity: .5; }
.auth-or { display: flex; align-items: center; gap: .8rem; color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin: 1.2rem 0; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.match-list { display: grid; gap: .5rem; margin-top: 1rem; }
.match-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: .6rem .8rem; }
.match-row b { font-size: .92rem; }
.match-row span { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; color: var(--ink-soft); }
.btn-link { background: none; border: none; color: var(--forest); font-weight: 600; font-size: .86rem; cursor: pointer; text-decoration: underline; width: 100%; }
.seg button[aria-pressed="true"]:not(.open):not(.priv) { background: var(--forest); color: #fff; }

/* ===== Retro (Win95) completeness pass — kept LAST so it wins source order ===== */
[data-theme="retro"] * { border-radius: 0 !important; }   /* nothing is rounded in retro */

/* nav: square, beveled controls on the navy title bar */
[data-theme="retro"] .nav-desk a { border: 2px solid transparent; padding: .3rem .6rem; }
[data-theme="retro"] .nav-desk a.active, [data-theme="retro"] .nav-desk a:hover {
  background: #C0C0C0; color: #000; border-color: #ffffff #808080 #808080 #ffffff;
}
[data-theme="retro"] .hburg, [data-theme="retro"] .theme-btn, [data-theme="retro"] .acct-btn,
[data-theme="retro"] .book-cta button {
  background: #C0C0C0; color: #000; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf;
}
[data-theme="retro"] .hburg { padding: .1rem .45rem; }
[data-theme="retro"] .theme-btn { padding: .2rem .5rem; }
[data-theme="retro"] .hburg:active, [data-theme="retro"] .theme-btn:active,
[data-theme="retro"] .book-cta button:active, [data-theme="retro"] .acct-btn:active {
  border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #000;
}
[data-theme="retro"] .acct-btn .pavatar { background: #000080; color: #fff; width: 24px; height: 24px; }
[data-theme="retro"] .nav-mobile {
  background: #C0C0C0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf;
}
[data-theme="retro"] .nav-mobile .mlink { color: #000; }
[data-theme="retro"] .nav-mobile .mlink.active, [data-theme="retro"] .nav-mobile .mlink:hover { background: #000080; color: #fff; }

/* news + datasheet + weather tiles: beveled panels instead of modern rounded cards */
[data-theme="retro"] .news-lead, [data-theme="retro"] .news-card, [data-theme="retro"] .ds-card,
[data-theme="retro"] .wx-day, [data-theme="retro"] .wx-hour, [data-theme="retro"] .map-full,
[data-theme="retro"] .match-row, [data-theme="retro"] .bcast, [data-theme="retro"] .beditor .blk {
  border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; background: #C0C0C0;
}
[data-theme="retro"] .news-card h3, [data-theme="retro"] .news-lead h2,
[data-theme="retro"] .news-card .nc-sum, [data-theme="retro"] .news-lead .lead-sum,
[data-theme="retro"] .nc-src, [data-theme="retro"] .cam-link { color: #000; }
[data-theme="retro"] .wx-map iframe, [data-theme="retro"] .pblock-img img, [data-theme="retro"] .pblock-video iframe {
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
/* datasheet section header as a Win95 title strip */
[data-theme="retro"] .ds-head { background: linear-gradient(90deg, #000080, #1084D0); }
[data-theme="retro"] .ds-title, [data-theme="retro"] .ds-head .em-chev, [data-theme="retro"] .ds-head .em-x { color: #fff; }
[data-theme="retro"] table.dsheet th { background: #C0C0C0; color: #000; }

/* pixel-art cabin logo swaps in for the crest in retro */
[data-theme="retro"] .brand img, [data-theme="retro"] .authcard .logo img { display: none; }
[data-theme="retro"] .brand::before, [data-theme="retro"] .authcard .logo::before {
  content: ""; flex: none; width: 30px; height: 30px; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%232f7d43'/%3E%3Crect%20x='1'%20y='7'%20width='3'%20height='1'%20fill='%232f7d43'/%3E%3Crect%20x='1'%20y='8'%20width='3'%20height='1'%20fill='%232f7d43'/%3E%3Crect%20x='0'%20y='9'%20width='4'%20height='1'%20fill='%232f7d43'/%3E%3Crect%20x='2'%20y='10'%20width='1'%20height='3'%20fill='%236b4423'/%3E%3Crect%20x='10'%20y='3'%20width='1'%20height='3'%20fill='%239a9a9a'/%3E%3Crect%20x='8'%20y='2'%20width='1'%20height='1'%20fill='%23f2f2f2'/%3E%3Crect%20x='7'%20y='3'%20width='3'%20height='1'%20fill='%236e3a22'/%3E%3Crect%20x='6'%20y='4'%20width='5'%20height='1'%20fill='%236e3a22'/%3E%3Crect%20x='5'%20y='5'%20width='7'%20height='1'%20fill='%236e3a22'/%3E%3Crect%20x='4'%20y='6'%20width='9'%20height='1'%20fill='%236e3a22'/%3E%3Crect%20x='5'%20y='7'%20width='7'%20height='6'%20fill='%23b07a42'/%3E%3Crect%20x='5'%20y='9'%20width='7'%20height='1'%20fill='%23935f30'/%3E%3Crect%20x='5'%20y='11'%20width='7'%20height='1'%20fill='%23935f30'/%3E%3Crect%20x='6'%20y='8'%20width='2'%20height='2'%20fill='%238fd0e8'/%3E%3Crect%20x='9'%20y='9'%20width='2'%20height='4'%20fill='%233a2414'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="retro"] .authcard .logo::before { width: 38px; height: 38px; }

/* ===== Communications categories ===== */
.cat-announcement { --cat: #3b6b4a; }
.cat-trip { --cat: #2f8f8f; }
.cat-hunting { --cat: #9c6b2f; }
.cat-projects { --cat: #3a6ea5; }
.cat-events { --cat: #7a4e8f; }
.cat-question { --cat: #b5602a; }
.cat-other { --cat: #6b6256; }
.pill-type[class*="cat-"] { background: color-mix(in srgb, var(--cat) 16%, var(--surface)); color: color-mix(in srgb, var(--cat) 74%, var(--ink)); border: 1px solid color-mix(in srgb, var(--cat) 30%, var(--line)); }

.catpick { display: flex; flex-wrap: wrap; gap: .45rem; }
.catchip { font-size: .82rem; font-weight: 600; padding: .42rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.catchip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); flex: none; }
.catchip:hover { border-color: color-mix(in srgb, var(--cat) 45%, var(--line)); color: var(--ink); }
.catchip.sel { background: var(--cat); border-color: var(--cat); color: #fff; }
.catchip.sel::before { background: rgba(255,255,255,.9); }
.cat-hint { font-size: .78rem; color: var(--ink-soft); margin-top: .55rem; }

/* retro: Win95 chips (squared by the retro catch-all) */
[data-theme="retro"] .catchip { background: #C0C0C0; color: #000; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; }
[data-theme="retro"] .catchip.sel { background: #000080; color: #fff; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #000; }
[data-theme="retro"] .catchip.sel::before { background: #fff; }

/* communications: optional subject subtitle */
.pcard-subject { padding: 0 1.1rem .5rem; margin-top: -.2rem; color: var(--ink-soft); font-size: .96rem; font-style: italic; line-height: 1.35; }

/* ===== Meters & Sensors dashboard ===== */
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.mcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.mcard.bad { border-color: var(--alert-line); background: var(--alert-bg); }
.mcard-h { display: flex; align-items: center; gap: .5rem; }
.mdot { width: 9px; height: 9px; border-radius: 50%; background: var(--res-open); flex: none; }
.mcard.warn .mdot { background: #c0862f; }
.mcard.bad .mdot { background: var(--alert); }
.msensor { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; }
.mstatus { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
.mcard.warn .mstatus { color: #a66b1e; }
.mcard.bad .mstatus { color: var(--alert); }
.mval { font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.munit { font-size: 1rem; color: var(--ink-soft); margin-left: .15rem; font-family: var(--font-sans); font-weight: 400; }
.mmeta { font-size: .78rem; color: var(--ink-soft); }
.mspark { color: var(--brass); height: 36px; margin-top: .1rem; }
.mspark .spark { width: 100%; height: 36px; display: block; }
.mcard.bad .mspark { color: var(--alert); }
[data-theme="retro"] .mcard { border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; }

/* ===== Power system section ===== */
.psys { margin-bottom: 1.3rem; }
.sechead.sub { margin-bottom: .7rem; }
.sechead.sub h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.psys-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: .9rem; flex-wrap: wrap; }
.psys-head.on { background: color-mix(in srgb, var(--res-open) 12%, var(--surface)); border-color: color-mix(in srgb, var(--res-open) 35%, var(--line)); }
.psys-head.off { background: var(--alert-bg); border-color: var(--alert-line); }
.psys-stat { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.psys-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--res-open); flex: none; }
.psys-head.off .psys-dot { background: var(--alert); }
.psys-meta { color: var(--ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.cfg { margin-top: .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.cfg summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; font-size: .9rem; color: var(--ink); }
.cfg-body { padding: .2rem 1rem 1rem; display: grid; gap: .1rem; }
.cfg-row { display: grid; grid-template-columns: 7rem 1fr auto auto; gap: .7rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.cfg-cat { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; }
.cfg-name { font-weight: 600; min-width: 0; }
.cfg-stat { font-size: .72rem; font-weight: 700; white-space: nowrap; }
.cfg-stat.ok { color: var(--res-open); } .cfg-stat.bad { color: var(--alert); }
.cfg-flag { font-size: .72rem; color: var(--alert); white-space: nowrap; }
.notice.warn { border-color: #c0862f; background: color-mix(in srgb, #c0862f 12%, var(--surface)); color: color-mix(in srgb, #c0862f 60%, var(--ink)); }
.notice.warn .dot { background: #c0862f; }
[data-theme="retro"] .psys-head, [data-theme="retro"] .cfg { border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; }
@media (max-width: 560px) { .cfg-row { grid-template-columns: 1fr auto; } .cfg-cat { display: none; } }
.rpt-sel { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: .4rem .55rem; font: inherit; font-size: .86rem; }
.pref-row .sublbl { font-size: .72rem; color: var(--ink-soft); font-weight: 400; margin-top: .1rem; }

/* ===== Energy flow diagram ===== */
.flowwrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.flowsvg { width: 100%; height: auto; max-height: 380px; display: block; }
.flowsvg .fn { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.2; }
.flowsvg .fn.act { fill: color-mix(in srgb, var(--res-open) 15%, var(--surface)); stroke: color-mix(in srgb, var(--res-open) 50%, var(--line)); }
.flowsvg .fn.inv { fill: color-mix(in srgb, var(--brass) 18%, var(--surface)); stroke: var(--brass); }
.flowsvg .fn-ic { font-size: 16px; }
.flowsvg .fn-lb { font-size: 11px; font-weight: 700; fill: var(--ink); }
.flowsvg .fn-vl { font-size: 11px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.flowsvg .fl { stroke: var(--line); stroke-width: 3; fill: none; }
.flowsvg .fl.on { stroke: var(--res-open); stroke-dasharray: 7 7; animation: flowdash 1s linear infinite; }
.flowsvg .fl.on.rev { animation-direction: reverse; }
@keyframes flowdash { to { stroke-dashoffset: -14; } }

/* lifetime energy tiles */
.etiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.etile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); min-width: 0; }
.et-val { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.et-unit { font-size: .82rem; color: var(--ink-soft); font-family: var(--font-sans); font-weight: 400; }
.et-lb { font-size: .76rem; color: var(--ink-soft); margin-top: .1rem; }

/* history charts */
.range-tabs { display: flex; gap: .4rem; margin-bottom: .7rem; flex-wrap: wrap; }
.range-tab { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 8px; padding: .32rem .75rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
.range-tab.on { background: var(--forest); color: #fff; border-color: var(--forest); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; min-width: 0; }
.chart-t { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; color: var(--ink); }
.chart-h { height: 240px; position: relative; }
[data-theme="retro"] .flowwrap, [data-theme="retro"] .etile, [data-theme="retro"] .chart-card { border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; }
[data-theme="retro"] .range-tab { border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf; }

/* ===== instrument styling for the power dashboard ===== */
.flowsvg .fn-icn { stroke: var(--ink-soft); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flowsvg .fn.act .fn-icn { stroke: var(--res-open); }
.flowsvg .fn.inv .fn-icn { stroke: var(--brass); }
.flowsvg .fn-lb { font-size: 9px; font-weight: 700; fill: var(--ink-soft); letter-spacing: .09em; }
.flowsvg .fn-vl { font-size: 13px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.flowsvg .fn { stroke-width: 1.1; }
.flowsvg .fl { stroke-width: 2.5; }
.sechead.sub h3 { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.mcard { border-radius: 8px; }
.mcard .msensor { text-transform: uppercase; letter-spacing: .09em; font-size: .66rem; font-weight: 700; color: var(--ink-soft); }
.mcard .mstatus { font-size: .58rem; }
.mcard .mval { font-size: 1.9rem; letter-spacing: -.01em; }
.mcard .munit { text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.mdot { box-shadow: 0 0 5px 0 currentColor; }
.mcard.ok .mdot { background: var(--res-open); color: var(--res-open); }
.mcard.warn .mdot { background: #c0862f; color: #c0862f; }
.mcard.bad .mdot { background: var(--alert); color: var(--alert); }
.etile { border-radius: 8px; }
.et-lb { text-transform: uppercase; letter-spacing: .07em; font-size: .62rem; }
.psys-stat { text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.psys-dot { box-shadow: 0 0 6px 0 currentColor; color: var(--res-open); }
.psys-head.off .psys-dot { color: var(--alert); }

/* dual-unit temperature secondary displays */
.wx-tunit { font-size: .34em; vertical-align: super; color: var(--ink-soft); font-weight: 400; margin-left: .05em; }
.wx-tc { font-size: 1rem; color: var(--ink-soft); font-weight: 600; margin-top: -.25rem; font-variant-numeric: tabular-nums; }
.wx-hour .htc { font-size: .62rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: .05rem; }
.wx-day .t .tunit { font-size: .66em; color: var(--ink-soft); margin-left: .1em; }
.wx-day .tc { font-size: .6rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: .05rem; }