/* Option 3: Knox County command-board home. The previous field guide remains at /home-classic. */
html:not([data-home-variant="classic"]) .home-classic,
html[data-home-variant="classic"] .command-home { display: none; }

.home-status-anchor {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

html[data-home-variant="command"] body { background: #070806; }

.command-home {
  --command-olive: #a7ba32;
  --command-olive-dark: #59651d;
  --command-paper: #e4d5b8;
  --command-paper-ink: #211f19;
  --command-cream: #eee8dc;
  --command-muted: #a49f91;
  width: 100%;
  min-height: calc(100dvh - var(--app-header-height, 94px));
  margin: 0;
  padding: 0;
  color: var(--command-cream);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.command-board {
  display: grid;
  min-height: clamp(610px, calc(100dvh - 265px), 810px);
  grid-template-columns: 270px minmax(0, 1fr) 450px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #35382f;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: #11130f;
  box-shadow: 0 26px 72px rgba(0, 0, 0, .48), inset 0 0 0 4px #080a07;
}

.command-status-panel,
.command-center-panel,
.command-connection-pass {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #3b3e33;
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}

.command-status-panel {
  display: flex;
  padding: clamp(24px, 2.4vw, 42px) clamp(20px, 2.1vw, 36px) 22px;
  flex-direction: column;
  align-items: center;
  background: #11150f;
  text-align: center;
}

.command-radio-mark {
  color: #5d624f;
  font-size: clamp(64px, 6vw, 96px);
  line-height: 1;
}

.command-status-panel > span {
  margin-top: clamp(18px, 2.4vh, 27px);
  color: #bcb5a5;
  font: 600 17px/1 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .07em;
}

.command-status-panel > strong {
  display: block;
  max-width: 100%;
  margin-top: 18px;
  padding-top: .06em;
  color: var(--command-olive);
  font: 700 clamp(50px, 3.35vw, 62px)/1.12 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.command-status-panel > strong[data-state="starting"] { color: #d59a45; font-size: clamp(46px, 3vw, 54px); }
.command-status-panel > strong[data-state="offline"],
.command-status-panel > strong[data-state="failed"] {
  color: #cf654d;
  font-size: clamp(44px, 3vw, 56px);
}
html[lang="es"] .command-status-panel > strong[data-state="starting"] { font-size: clamp(38px, 2.3vw, 44px); }
html[lang="es"] .command-status-panel > strong[data-state="offline"] {
  font-size: clamp(28px, 1.75vw, 32px);
  letter-spacing: -.04em;
}

.command-status-divider {
  width: 100%;
  height: 1px;
  margin: clamp(22px, 3vh, 34px) 0;
  background: #45493c;
}

.command-status-fact {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  text-align: left;
}

.command-status-fact > i {
  color: #d9d3c6;
  font-size: clamp(34px, 3vw, 46px);
}

.command-status-fact > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.command-status-fact strong {
  display: inline-flex;
  align-items: baseline;
  color: #ede7db;
  font: 700 clamp(31px, 3vw, 46px)/1 "Oswald", "Arial Narrow", sans-serif;
  white-space: nowrap;
}
.command-status-fact strong > span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.command-status-fact > div > span {
  color: #bbb5a7;
  font: 600 16px/1.1 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .06em;
}
.command-build-fact > i { color: #9ea46e; }
.command-build-fact strong { color: var(--command-olive); font-size: clamp(31px, 3vw, 43px); }

.command-world-clock {
  width: 100%;
  margin-top: clamp(23px, 2.7vh, 31px);
  padding-top: clamp(20px, 2.5vh, 28px);
  border-top: 1px solid #45493c;
  text-align: left;
}
.command-world-clock > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #9ea46e;
  font: 600 14px/1 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .075em;
}
.command-world-clock > span i { font-size: 19px; }
.command-world-clock > strong {
  display: block;
  margin-top: 10px;
  color: #eee8dc;
  font: 700 clamp(35px, 3vw, 44px)/1 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .035em;
}
.command-world-clock time {
  display: block;
  margin-top: 8px;
  color: #aaa596;
  font: 600 12px/1.42 "Inter", sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.command-world-clock[data-state="waiting"] > strong,
.command-world-clock[data-state="waiting"] time { color: #686d60; }

.command-status-panel footer {
  display: flex;
  margin-top: auto;
  padding-top: 30px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #5b604f;
}
.command-status-panel footer i { font-size: 31px; }
.command-status-panel footer span { max-width: 16ch; font: 600 13px/1.35 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .08em; }

.command-center-panel {
  display: grid;
  grid-template-rows: minmax(365px, 1fr) minmax(205px, auto);
  background: #0b0d0a;
}

.command-safehouse-visual { min-height: 0; overflow: hidden; border-bottom: 1px solid #3a3d32; background: #11130f; }
.command-safehouse-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }

.command-roster-panel {
  display: grid;
  min-height: 205px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 20px 24px 14px;
  background: #0c0f0c;
}
.command-roster-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.command-roster-panel > header > div { display: flex; min-width: 0; align-items: center; gap: 11px; }
.command-roster-panel > header i { color: var(--command-olive); font-size: 22px; }
.command-roster-panel h1 {
  overflow: hidden;
  color: var(--command-olive);
  font: 600 clamp(18px, 1.7vw, 25px)/1 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-roster-panel > header > strong { color: #8f967c; font: 700 13px "Inter", sans-serif; white-space: nowrap; }
.command-roster {
  min-height: 0;
  margin-top: 12px;
  overflow-y: auto;
  border-top: 1px solid #30342b;
  scrollbar-color: #66711e #11130f;
}
.command-player-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.command-player-row {
  display: grid;
  min-width: 0;
  min-height: 74px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid #30342b;
}
.command-player-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #b8b4a7;
  border-radius: 50%;
  background: #171a13;
}
.command-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.command-player-avatar > i { display: none; color: var(--command-olive); font-size: 39px; }
.command-player-avatar.is-fallback img { display: none; }
.command-player-avatar.is-fallback > i { display: block; }
.command-player-row > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.command-player-row strong { overflow: hidden; color: #eee8dc; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.command-player-row span { color: var(--command-olive); font-size: 12px; font-weight: 800; }
.command-online-dot { color: var(--command-olive); font-size: var(--app-text-micro, 12px); }
.command-roster-empty { display: grid; min-height: 112px; place-content: center; justify-items: center; padding: 18px; text-align: center; }
.command-roster-empty i { color: #69705e; font-size: 30px; }
.command-roster-empty strong { margin-top: 9px; color: #d8d2c5; font: 600 18px "Oswald", sans-serif; }
.command-roster-empty p { margin-top: 5px; color: #888d80; font-size: 13px; }
.command-roster-freshness { margin-top: 10px; color: #656b5e; font-size: var(--app-text-micro, 12px); font-weight: 700; }

.command-connection-pass {
  position: relative;
  display: flex;
  padding: clamp(27px, 2.6vw, 45px) clamp(26px, 2.7vw, 46px) clamp(24px, 2.5vw, 40px);
  flex-direction: column;
  background: #11130f url("/assets/command-pass-20260807.png") center / 100% 100% no-repeat;
  color: var(--command-paper-ink);
}
.command-pass-stamp { display: inline-flex; align-items: center; gap: 8px; color: #65604e; }
.command-pass-stamp i { font-size: 24px; }
.command-pass-stamp span { font: 700 12px "Oswald", sans-serif; letter-spacing: .07em; }
.command-paperclip { display: none; }
.command-connection-pass h2 {
  margin-top: clamp(28px, 4vh, 47px);
  color: #171813;
  font: 700 clamp(36px, 2.7vw, 45px)/.98 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
}
.command-pass-intro {
  max-width: 34ch;
  margin-top: 16px;
  color: #4f4a3c;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 600;
  line-height: 1.5;
}
.command-address-block { display: flex; margin-top: clamp(24px, 3vh, 34px); flex-direction: column; gap: 10px; }
.command-address-block > span { color: #575345; font: 700 13px "Oswald", sans-serif; letter-spacing: .07em; }
.command-address-block strong { overflow-wrap: anywhere; color: #141510; font-size: clamp(23px, 2vw, 31px); line-height: 1.2; }
.command-copy-address,
.command-join-button,
.command-vote-button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  border: 1px solid rgba(42, 40, 31, .62);
  border-radius: 5px;
  background: rgba(244, 235, 216, .22);
  color: #27271e;
  cursor: pointer;
  font: 600 clamp(17px, 1.45vw, 22px) "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .025em;
}
.command-copy-address:hover,
.command-vote-button:hover { border-color: #5f6821; background: rgba(255, 250, 237, .46); }
.command-copy-address[data-copied="true"],
.command-join-button[data-copied="true"] { border-color: #65701d; }
.command-pass-rule { height: 1px; margin-top: clamp(24px, 3vh, 34px); background: rgba(56, 52, 39, .34); }
.command-join-button {
  display: grid;
  min-height: 88px;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  gap: 14px;
  margin-top: clamp(22px, 2.7vh, 31px);
  padding: 10px 18px;
  border-color: #697526;
  border-radius: 9px;
  background: linear-gradient(135deg, #6c7922, #4e5a16);
  color: #f5eedf;
  box-shadow: 0 6px 0 rgba(61, 50, 29, .3), inset 0 1px rgba(255, 255, 255, .12);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.command-join-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7f8e28, #5c6919);
  box-shadow: 0 8px 0 rgba(61, 50, 29, .28), inset 0 1px rgba(255, 255, 255, .15);
}
.command-join-button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(61, 50, 29, .28); }
.command-join-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(15, 19, 6, .22);
  font-size: 23px;
  line-height: 1;
}
.command-join-icon > i { display: grid; width: 1em; height: 1em; place-items: center; line-height: 1; }
.command-join-icon > i::before { display: block; line-height: 1; vertical-align: 0; }
.command-join-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.command-join-copy strong { font: 700 clamp(21px, 1.55vw, 24px)/1 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .02em; white-space: nowrap; }
.command-join-copy small { color: #e3e7ba; font: 700 var(--app-text-micro, 12px)/1.3 "Inter", sans-serif; letter-spacing: .055em; }
.command-join-chevron { font-size: 18px; }
.command-join-steps {
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
  padding: 0;
  color: #474437;
  list-style: none;
}
.command-join-steps li { display: grid; min-height: 30px; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 10px; }
.command-join-steps li strong { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(72, 75, 30, .5); border-radius: 50%; color: #5c6819; font: 700 12px "Inter", sans-serif; }
.command-join-steps li span { font-size: 12px; font-weight: 700; line-height: 1.3; }
.command-vote-button { min-height: 58px; margin-top: 16px; background: rgba(244, 235, 216, .3); text-decoration: none; }
.command-vote-external { margin-left: 2px; font-size: .72em; opacity: .7; }
.command-pass-signoff { display: flex; margin-top: auto; margin-bottom: 18px; padding-top: 24px; flex-direction: column; align-items: flex-end; gap: 6px; color: #4d493c; font-family: Georgia, serif; font-style: italic; }
.command-pass-signoff span { font-size: 18px; }
.command-pass-signoff strong { font-size: 16px; }

.command-rules {
  display: grid;
  min-height: 142px;
  grid-template-columns: .95fr .95fr 1.05fr 1.38fr;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid #3a3d32;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: #11140f;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}
.command-rules article {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(15px, 1.5vw, 24px);
  padding: 24px clamp(20px, 2vw, 34px);
  border-right: 1px solid #373a30;
}
.command-rules article:last-child { border-right: 0; }
.command-rules article > i { color: #95a137; font-size: clamp(38px, 3.6vw, 56px); }
.command-rules article[data-state="enabled"] > i { color: #b95e44; }
.command-rules article > div { min-width: 0; }
.command-rules strong {
  display: block;
  color: #eee8dc;
  font: 600 clamp(17px, 1.7vw, 25px)/1.12 "Oswald", "Arial Narrow", sans-serif;
  text-transform: uppercase;
}
.command-rules p { margin-top: 7px; color: var(--command-muted); font-size: clamp(12px, 1.05vw, 16px); line-height: 1.4; }
.command-mod-rule strong { color: var(--command-cream); }
.command-mod-rule strong::first-line { color: var(--command-olive); }

.command-home-footer {
  display: grid;
  min-height: 92px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  padding: 8px clamp(18px, 2vw, 34px) 0;
  border-top: 1px solid #30342b;
  background: #090b08;
  color: #73796c;
  font-size: 12px;
  font-weight: 700;
}
.command-home-footer .link-state { margin-right: 0; }
.command-home-footer button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--command-olive); cursor: pointer; font-weight: 800; }

@media (min-width: 1261px) {
  html[data-home-variant="command"],
  html[data-home-variant="command"] body { height: 100%; overflow: hidden; }

  html[data-home-variant="command"] .player-shell {
    display: grid;
    height: 100dvh;
    min-height: 0;
    grid-template-rows: var(--app-header-height, 94px) minmax(0, 1fr);
    overflow: hidden;
  }

  html[data-home-variant="command"] .player-header { position: relative; top: auto; }

  .command-home {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) 142px 92px;
    overflow: hidden;
  }

  .command-board { height: 100%; min-height: 0; }
  .command-rules { height: 142px; min-height: 0; }
  .command-home-footer { height: 92px; min-height: 92px; }
  .command-status-panel footer { display: none; }
}

@media (min-width: 1261px) and (max-height: 900px) {
  html[data-home-variant="command"],
  html[data-home-variant="command"] body { height: auto; overflow-y: auto; }

  html[data-home-variant="command"][data-app-route="admin"],
  html[data-home-variant="command"][data-app-route="admin"] body.overlay-open {
    height: 100%;
    overflow: hidden;
  }

  html[data-home-variant="command"] .player-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .command-home {
    height: auto;
    min-height: calc(100dvh - var(--app-header-height, 94px));
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  .command-board { height: auto; min-height: 810px; }
  .command-rules { height: auto; min-height: 142px; }
}

@media (max-width: 1260px) {
  .command-board { grid-template-columns: minmax(220px, .52fr) minmax(470px, 1.4fr) minmax(345px, .82fr); }
  .command-status-panel { padding-right: 24px; padding-left: 24px; }
  .command-player-list { grid-template-columns: 1fr; }
  .command-player-row { min-height: 64px; }
  .command-pass-signoff { display: none; }
  .command-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-rules article:nth-child(2) { border-right: 0; }
  .command-rules article:nth-child(-n + 2) { border-bottom: 1px solid #373a30; }
}

@media (max-width: 1040px) {
  .command-board { min-height: 0; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); }
  .command-connection-pass { min-height: 650px; grid-column: 1 / -1; }
  .command-address-block strong { font-size: 30px; }
  .command-copy-address,
  .command-join-button,
  .command-vote-button { width: min(520px, 100%); }
  .command-pass-signoff { display: flex; }
}

@media (max-width: 820px) {
  .command-home { padding: 0; }
  .command-board { grid-template-columns: 1fr; padding: 7px; gap: 7px; border-radius: 0; }
  .command-status-panel { display: grid; min-height: 430px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 22px; padding: 24px; text-align: left; }
  .command-radio-mark { grid-row: 1 / span 2; font-size: 68px; }
  .command-status-panel > span { margin: 0; }
  .command-status-panel > strong { margin: 0; padding-top: .06em; font-size: 58px; }
  .command-status-panel > strong[data-state="starting"],
  html[lang="es"] .command-status-panel > strong[data-state="starting"] { font-size: 52px; }
  .command-status-panel > strong[data-state="offline"],
  html[lang="es"] .command-status-panel > strong[data-state="offline"] { font-size: clamp(36px, 5.8vw, 43px); }
  .command-status-divider { display: none; }
  .command-status-fact { min-height: 62px; grid-column: 1 / -1; grid-template-columns: 36px minmax(0, 1fr); padding-top: 12px; border-top: 1px solid #373b31; }
  .command-status-fact > i { font-size: 31px; }
  .command-status-fact strong { font-size: 32px; }
  .command-world-clock { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 18px; margin: 0; padding-top: 15px; }
  .command-world-clock > span { grid-column: 1 / -1; }
  .command-world-clock > strong { margin: 0; font-size: 34px; }
  .command-world-clock time { margin: 0; font-size: 12px; }
  .command-status-panel footer { display: none; }
  .command-center-panel { grid-template-rows: minmax(340px, 54vh) auto; }
  .command-roster-panel { min-height: 240px; }
  .command-player-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-connection-pass { min-height: 600px; grid-column: auto; }
  .command-rules { grid-template-columns: 1fr; }
  .command-rules article { min-height: 118px; border-right: 0; border-bottom: 1px solid #373a30; }
  .command-rules article:last-child { border-bottom: 0; }
  .command-home-footer { grid-template-columns: 1fr auto; align-items: center; padding: 14px 12px 0; }
  .command-home-footer .link-state { width: 100%; }
}

@media (max-width: 560px) {
  .command-status-panel { min-height: 410px; grid-template-columns: 56px minmax(0, 1fr); gap: 9px 16px; padding: 22px 18px; }
  .command-radio-mark { font-size: 49px; }
  .command-status-panel > span { font-size: 14px; }
  .command-status-panel > strong { font-size: 46px; }
  html[lang="es"] .command-status-panel > strong[data-state="offline"] { font-size: clamp(30px, 9.5vw, 38px); }
  .command-status-fact { grid-template-columns: 29px minmax(0, 1fr); gap: 10px; }
  .command-status-fact > i { font-size: 25px; }
  .command-status-fact strong { font-size: 28px; }
  .command-status-fact > div > span { font-size: 13px; }
  .command-world-clock { gap: 7px 14px; }
  .command-world-clock > strong { font-size: 31px; }
  .command-world-clock time { font-size: var(--app-text-micro, 12px); }
  .command-center-panel { grid-template-rows: minmax(280px, 46vh) auto; }
  .command-roster-panel { padding: 18px 16px 12px; }
  .command-roster-panel h1 { font-size: 19px; }
  .command-player-list { grid-template-columns: 1fr; }
  .command-player-row { min-height: 68px; }
  .command-connection-pass { min-height: 680px; padding: 27px 23px 30px; }
  .command-connection-pass h2 { margin-top: 30px; font-size: 38px; }
  .command-address-block { margin-top: 32px; }
  .command-address-block strong { font-size: 23px; }
  .command-copy-address { min-height: 56px; font-size: 17px; }
  .command-join-button { min-height: 82px; grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 11px; padding: 9px 13px; }
  .command-join-icon { width: 40px; height: 40px; font-size: 20px; }
  .command-join-copy strong { font-size: 22px; }
  .command-join-copy small { font-size: var(--app-text-micro, 12px); }
  .command-vote-button { min-height: 58px; }
  .command-pass-signoff span { font-size: 16px; }
  .command-pass-signoff strong { font-size: 14px; }
  .command-rules article { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 22px 18px; }
  .command-rules article > i { font-size: 39px; }
  .command-rules strong { font-size: 21px; }
  .command-rules p { font-size: 14px; }
  .command-home-footer > span { width: 100%; }
  .command-home-footer > button { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .command-home * { scroll-behavior: auto; }
}

/* Readable secondary copy across desktop and phone layouts. */
.command-pass-stamp span,
.command-join-steps li strong,
.command-join-steps li span,
.command-home-footer,
.command-home-footer .link-state,
.command-home-footer button { font-size: var(--app-text-micro, 13px); }
