/* Site fonts, served from this site (/assets/fonts, SIL Open Font License). The Apps Script copy falls back to Georgia / Arial. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-400-normal-v1.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-500-normal-v1.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/eb-garamond-latin-600-normal-v1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal-v1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-italic-v1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal-v1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal-v1.woff2") format("woff2"); }

:root {
  /* One palette for the public pages and the community portal (Admin keeps its own, in Styles). */
  --bg: #0a0d0b;
  --topbar: #101512;
  --field: #0c110d;
  --panel: #111612;
  --panel-soft: #151c17;
  --panel-strong: #1b241d;
  --panel-header: #243027;
  --border: #344037;
  --border-strong: #46524a;
  --text: #d9dfda;
  --text-soft: #b4bdb6;
  --text-bright: #f0f2ef;
  --muted: #959f97;
  --gold: #d6bc78;
  --gold-strong: #e3c56c;
  --gold-line: #b09345;
  --gold-border: #6b5a34;
  --green: #334437;
  --green-hover: #405647;
  --green-deep: #1c2b21;
  --green-button: var(--green);
  --green-button-hover: var(--green-hover);
  --danger: #d96a6a;
  --danger-soft: #e59a9a;
  --danger-border: #8d4b4b;
  --error: var(--danger);
  --focus: #e3c56c;
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

.page-shell {
  min-height: 100vh;
  background: var(--bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topbar);
  border-bottom: 1px solid var(--green);
}

.topbar-inner {
  max-width: 1500px;
  min-height: 66px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  color: var(--gold);
  font-family:var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-link {
  color: var(--text);
  padding: 10px 12px;
  border-radius: 3px;
  display: block;
}

.nav-link-active {
  background: var(--panel-strong);
  color: var(--gold);
}

.nav-disabled {
  opacity: .42;
}

.main-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 28px 56px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 10px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-family:var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: .4px;
}

.page-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.panel-header {
  background: var(--panel-header);
  border-bottom: 1px solid var(--border-strong);
  padding: 12px 16px;
}

.panel-title {
  margin: 0;
  font-family:var(--font-display);
  font-size: 16px;
  letter-spacing: .8px;
  color: var(--text-bright);
}

.panel-subtitle {
  font-size: 12px;
  color: #a5ada6;
  margin-top: 3px;
}

.panel-body {
  padding: 18px;
}

.public-login-panel {
  max-width: 760px;
  margin: 56px auto;
}

.login-body {
  text-align: center;
  padding: 38px 26px 42px;
}

.sigil-placeholder {
  width: 74px;
  height: 74px;
  border: 1px solid var(--gold-border);
  color: var(--gold);
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  font-family:var(--font-display);
  font-weight: 700;
  font-size: 25px;
}

.login-body h3 {
  margin: 0;
  font-family:var(--font-display);
  font-size: 22px;
  color: var(--text-bright);
}

.login-copy {
  max-width: 590px;
  margin: 12px auto 22px;
}

.public-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong);
  object-fit: cover;
}

.identity-copy {
  min-width: 130px;
}

.public-username {
  color: var(--text-bright);
  font-weight: 700;
}

.muted,
.performance-line,
.status-line {
  color: var(--muted);
}

.button {
  display: inline-block;
  background: var(--green-button);
  border: 1px solid var(--border-strong);
  color: var(--text-bright);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .4px;
  cursor: pointer;
}

.button:hover:not(:disabled) {
  background: var(--green-button-hover);
}

.button-secondary {
  background: transparent;
  border-color: var(--gold-border);
  color: var(--gold);
}

.primary-action {
  min-height: 40px;
}

.state-copy {
  color: var(--text-soft);
  margin: 0 0 18px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.detail-card {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  padding: 16px;
  min-height: 78px;
}

.detail-label,
.field-label {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .75px;
}

.detail-value {
  margin-top: 7px;
  font-family:var(--font-display);
  font-size: 17px;
  color: var(--text-bright);
}

.public-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.route-note {
  background: var(--panel-soft);
  border-left: 3px solid var(--gold-border);
  padding: 12px 14px;
  color: var(--text-soft);
  max-width: 700px;
}

.route-note strong {
  color: var(--gold);
}

.performance-line {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 12px;
  font-size: 11px;
}

.workflow-intro {
  padding: 12px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  font-family:var(--font-display);
  font-size: 17px;
  color: var(--text-bright);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.form-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: block;
}

.field-full {
  margin: 0 0 16px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--border-strong);
  background: var(--field);
  color: var(--text);
  padding: 10px 11px;
  border-radius: 2px;
  font: inherit;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 1px solid var(--muted);
  border-color: var(--muted);
}

.readonly-field {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  padding: 12px;
}

.readonly-value {
  margin-top: 6px;
  color: var(--text-bright);
}

.required {
  color: var(--gold);
}

.confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0;
  color: #c5ccc6;
}

.confirm-row input {
  margin-top: 3px;
}

.workflow-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.status-line {
  margin-top: 12px;
  min-height: 18px;
  font-size: 12px;
}

.status-line.error {
  color: var(--error);
}

.hidden {
  display: none !important;
}

@media (max-width: 1000px) {
  /* Narrow screens: the menu becomes a full-width strip under the header that scrolls sideways. */
  .nav-main {
    order: 3;
    flex: 0 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .nav-main > *,
  .public-identity .button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .topbar-inner {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .public-identity {
    margin-left: auto;
  }

  .detail-grid,
  .form-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .main-content {
    padding: 20px 12px 40px;
  }

  .page-title {
    font-size: 27px;
  }

  .detail-grid,
  .form-grid,
  .form-grid-two {
    grid-template-columns: 1fr;
  }

  .public-identity .identity-copy {
    display: none;
  }

  .public-login-panel {
    margin-top: 24px;
  }
}


/* COMMUNITY OVERVIEW */
.community-overview{margin-top:24px}.overview-header{align-items:center}.overview-header h2{font-size:clamp(28px,4vw,42px)}
.member-status{border:1px solid rgba(181,154,89,.55);padding:9px 13px;color:var(--gold-strong);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.overview-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:14px 0 20px;border:1px solid rgba(181,154,89,.3);background:rgba(181,154,89,.2)}
.overview-stats>div{padding:17px 20px;min-height:92px;background:var(--panel)}.overview-stats small,.overview-stats strong{display:block}.overview-stats small{color:var(--gold-line);text-transform:uppercase;letter-spacing:.08em;font-size:10px}.overview-stats strong{margin-top:8px;font-size:clamp(15px,2vw,22px);line-height:1.3;overflow-wrap:anywhere}
.overview-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px}.overview-content .community-directory-panel,.overview-activity{margin:0 0 14px}.overview-action .community-directory-body{padding:22px}.overview-action strong{font-size:19px;color:var(--gold-strong)}.overview-action p{line-height:1.5;color:var(--text-soft)}.overview-action .button{margin-top:12px}
.overview-row{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:15px 0;border:0;border-bottom:1px solid rgba(255,255,255,.1);background:transparent;color:inherit;text-align:left}.overview-row:last-child{border-bottom:0}.overview-row strong,.overview-row small{display:block}.overview-row strong{color:var(--text)}.overview-row small{margin-top:4px;color:var(--muted)}.overview-row>span:last-child{text-align:right;color:var(--gold);font-size:12px}.overview-row[type=button]{cursor:pointer}.overview-row[type=button]:hover strong{text-decoration:underline}.overview-activity .community-directory-body{padding-top:4px;padding-bottom:4px}
@media(max-width:760px){.overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-content{grid-template-columns:1fr}.overview-header{align-items:flex-start;flex-direction:column}}


/* COMMUNITY VISUAL ORBAT — PHASE 2B */




































/* 2B.1 — Community primary navigation actions */
.nav-action{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  cursor:pointer;
  padding:0;
}
.nav-action.nav-link{padding:0}
.nav-action:hover{color:var(--gold)}


/* ============================================================
   COMMUNITY LEGION — 2B.3 / GrapesJS structure
   ============================================================ */
.community-page-block{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin:0 0 22px;padding:22px 24px;border:1px solid var(--border);
  border-left:4px solid var(--gold-line);background:var(--topbar);
}
.community-page-block h2{margin:4px 0 3px;font-family:var(--font-display);font-size:30px;color:var(--text)}
.community-page-block p{margin:0;color:var(--muted)}
.community-page-block-action{
  border:1px solid var(--gold-border);background:var(--topbar);color:var(--gold);padding:10px 15px;
  font-weight:700;cursor:pointer;border-radius:0
}
.legion-section{margin:0 0 18px;border:1px solid var(--border);background:var(--field)}
.legion-section-heading{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel-strong)}
.legion-section-heading h3{margin:0;font-family:var(--font-display);color:var(--text);font-size:18px}
.legion-card-grid{display:grid;gap:0;padding:12px}
.legion-card-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.legion-card-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.legion-card-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.legion-nav-card{
  min-height:116px;margin:-1px 0 0 -1px;padding:17px;text-align:left;
  border:1px solid var(--border);border-radius:0;background:var(--panel);color:var(--text);cursor:pointer
}
.legion-nav-card:hover{position:relative;z-index:1;border-color:#8c773d;background:var(--panel-strong)}
.legion-nav-card strong,.legion-nav-card span,.legion-nav-card small{display:block}
.legion-nav-card strong{font-family:var(--font-display);color:var(--gold);font-size:17px}
.legion-nav-card span{margin-top:7px;color:var(--muted);font-size:12px}
.legion-nav-card small{margin-top:16px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.legion-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin-bottom:16px;border:1px solid var(--border)}
.legion-stat{padding:15px 17px;border-right:1px solid var(--border);background:var(--panel)}
.legion-stat:last-child{border-right:0}.legion-stat span,.legion-stat strong{display:block}
.legion-stat span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.legion-stat strong{margin-top:5px;font-family:var(--font-display);font-size:22px;color:var(--text-bright)}
.legion-roster-panel{margin-bottom:16px;border:1px solid var(--border);background:var(--field)}
.legion-roster-head{padding:13px 16px;border-bottom:1px solid var(--border);background:var(--panel-strong)}
.legion-roster-head h3{margin:0;font-family:var(--font-display);color:var(--text-bright);font-size:18px}
.legion-roster-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.legion-roster-body{padding:0}.legion-table-scroll{overflow:auto}
.legion-roster{width:100%;min-width:850px;border-collapse:collapse}
.legion-roster th,.legion-roster td{padding:10px 12px;border-right:1px solid var(--panel-header);border-bottom:1px solid var(--panel-header);text-align:left;font-size:12px}
.legion-roster th{background:var(--topbar);color:#b8a468;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.legion-roster tr:last-child td{border-bottom:0}.legion-roster td:last-child,.legion-roster th:last-child{border-right:0}
.legion-roster .is-vacant td{color:#707b73}.legion-roster .is-vacant strong{color:var(--muted)}
.legion-tabs{display:flex;flex-wrap:wrap;border:1px solid var(--border);border-bottom:0;background:var(--field)}
.legion-tab{padding:12px 16px;border:0;border-right:1px solid var(--border);border-radius:0;background:var(--panel);color:var(--muted);cursor:pointer}
.legion-tab.is-active{background:var(--panel-header);color:var(--gold)}
.legion-tab-panel{display:none}.legion-tab-panel.is-active{display:block}
.legion-squad{margin-bottom:10px;border:1px solid var(--border);background:var(--field)}
.legion-squad summary{display:flex;justify-content:space-between;padding:13px 16px;background:var(--panel-strong);color:var(--gold);cursor:pointer}
.legion-squad summary span{color:var(--muted);font-size:11px;font-weight:400}
.legion-empty,.legion-loading{padding:28px;border:1px solid var(--border);background:var(--field);color:var(--muted);text-align:center}
@media(max-width:1000px){.legion-card-grid-5,.legion-card-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.legion-card-grid-2,.legion-card-grid-4,.legion-card-grid-5,.legion-stat-grid{grid-template-columns:1fr}.community-page-block{align-items:flex-start;flex-direction:column}}


/* 2B.4 — restore Admin-like square navigation feedback */





.legion-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);margin:0 0 12px}
.legion-mini-stats>div{padding:10px 14px;border-right:1px solid var(--border);background:var(--panel)}
.legion-mini-stats>div:last-child{border-right:0}
.legion-mini-stats span,.legion-mini-stats strong{display:block}
.legion-mini-stats span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.legion-mini-stats strong{margin-top:3px;color:var(--text-bright);font-family:var(--font-display);font-size:18px}




/* 2B.5 exact Community primary navigation — square Admin-style blocks */
#communityHomeNav.community-primary-nav,
#communityLegionNav.community-primary-nav{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  min-height:38px !important;
  margin:0 3px !important;
  padding:8px 13px !important;
  border:1px solid var(--border) !important;
  border-radius:0 !important;
  background:var(--panel) !important;
  color:var(--text-soft) !important;
  text-decoration:none !important;
  cursor:pointer !important;
}
#communityHomeNav.community-primary-nav:hover,
#communityLegionNav.community-primary-nav:hover{
  border-color:#8b7438 !important;
  background:var(--panel-strong) !important;
  color:var(--gold-strong) !important;
}
#communityHomeNav.community-primary-nav.nav-link-active,
#communityLegionNav.community-primary-nav.nav-link-active,
#communityHomeNav.community-primary-nav[aria-current="page"],
#communityLegionNav.community-primary-nav[aria-current="page"]{
  border-color:var(--gold-line) !important;
  background:var(--panel-header) !important;
  color:var(--gold-strong) !important;
  box-shadow:inset 0 0 0 1px rgba(176,147,69,.18) !important;
}


/* 2B.6.3 — MUST remain after 2B.5 primary-nav rules. */
#communityHomeNav.community-primary-nav.hidden,
#communityLegionNav.community-primary-nav.hidden,
.nav-main .community-auth-nav.hidden {
  display: none !important;
}

.community-legal-links{padding:18px 24px;text-align:center;font-size:13px;color:var(--muted)}.community-legal-links a{color:var(--gold);text-decoration:underline}
.nav-main .nav-link-home{border:1px solid var(--gold-border);border-radius:0;background:var(--panel-strong);color:var(--gold);text-decoration:none;padding:8px 13px}
.nav-main .nav-link-home:hover{background:var(--panel-header);border-color:var(--gold-line);color:var(--gold-strong)}
.legion-support-note{margin:0;padding:12px 16px;color:var(--muted);background:var(--field);font-size:13px}
#communityPersonnelNav.community-primary-nav{display:inline-flex;align-items:center;min-height:38px;margin:0 3px;padding:8px 13px;border:1px solid var(--border);border-radius:0;background:var(--panel);color:var(--text-soft);cursor:pointer}
#communityPersonnelNav.community-primary-nav:hover,#communityPersonnelNav.community-primary-nav.nav-link-active{border-color:var(--gold-line);background:var(--panel-header);color:var(--gold-strong)}
#communityPersonnelNav.community-primary-nav.hidden{display:none!important}


.community-profile-workspace{padding:0 0 24px}
.community-profile-content{display:grid;gap:14px}
.community-profile-intro,.community-profile-panel{border:1px solid var(--border);background:var(--panel);padding:20px}
.community-profile-intro{display:flex;justify-content:space-between;align-items:start;gap:16px}
.community-profile-intro h3{font:normal 26px var(--font-display);color:var(--gold-strong);margin:7px 0}
.community-profile-intro p{color:var(--text-soft);margin:0}
.community-profile-status{border:1px solid var(--gold-border);color:var(--gold);padding:7px 10px;text-transform:uppercase;font-size:12px}
.community-profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.community-profile-stat{border:1px solid var(--border);background:var(--panel-soft);padding:18px;min-width:0}
.community-profile-stat span,.community-profile-field span{display:block;text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--muted)}
.community-profile-stat strong{display:block;margin-top:8px;color:var(--gold-strong);font:normal 23px var(--font-display);overflow-wrap:anywhere}
.community-profile-panel h3{margin:0 0 16px;color:var(--gold);font:normal 20px var(--font-display)}
.community-profile-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.community-profile-field{padding:14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-width:0}
.community-profile-field strong{display:block;margin-top:6px;overflow-wrap:anywhere;color:var(--text-bright);font-weight:500}
.legion-profile-link{padding:0;border:0;background:transparent;color:var(--gold);font:inherit;font-weight:700;text-align:left;text-decoration:underline;cursor:pointer}
.legion-profile-link:hover{color:var(--gold-strong)}
@media(max-width:750px){.community-profile-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.community-profile-stats{grid-template-columns:1fr}.community-profile-intro{flex-wrap:wrap}}
/* 2C personnel directory — adapted from the GrapesJS Search and Directory panels */
.public-profile-card{display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}
.public-profile-card:hover .public-username,.public-profile-card:focus-visible .public-username{color:var(--gold-strong)}
.public-profile-card:focus-visible{outline:2px solid var(--gold-line);outline-offset:4px}
.public-profile-card .identity-copy{display:block}


.community-directory{padding:0 0 24px;display:grid;gap:18px}
.community-directory.hidden{display:none!important}
.community-directory-panel{border:1px solid var(--border);background:var(--panel);min-width:0}
.community-directory-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--border);background:var(--panel-soft)}
.community-directory-panel h3{margin:0;color:var(--gold-strong);font:normal 20px var(--font-display)}
.community-directory-panel header span{font-size:13px;color:var(--text-soft)}
.community-directory-body{padding:20px;display:grid;gap:18px}
.community-directory-search{display:flex;gap:10px}
.community-directory-search input,.community-directory-filters select{box-sizing:border-box;min-height:40px;background:var(--field);border:1px solid var(--border-strong);color:var(--text-bright);padding:9px 12px;font:inherit}
.community-directory-search input{flex:1;min-width:0}.community-directory-search .button{cursor:pointer}
.community-directory-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.community-directory-filters label{display:grid;gap:7px;min-width:0;color:var(--text-soft);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.community-directory-filters select{width:100%;text-transform:none;letter-spacing:normal;font-size:14px}
.community-directory-table-wrap{overflow-x:auto}
.community-directory-table{width:100%;border-collapse:collapse;text-align:left;min-width:790px}
.community-directory-table th,.community-directory-table td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.community-directory-table th{background:var(--panel);color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.community-directory-table td{color:var(--text);font-size:14px}
.community-directory-table tbody tr:hover{background:var(--panel-header)}
.community-directory-table tbody tr:last-child td{border-bottom:0}
.community-directory-sort{border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;padding:0;cursor:pointer;white-space:nowrap}
.community-directory-sort:hover,.community-directory-sort.is-active{color:var(--gold-strong)}
.community-directory-sort span{margin-left:5px}
.community-directory-profile{border:0;padding:0;background:transparent;color:var(--gold-strong);font:inherit;font-weight:700;text-align:left;text-decoration:underline;cursor:pointer}
.community-directory-profile:hover{color:var(--gold-strong)}
.community-directory-empty{text-align:center;color:var(--text-soft)!important;padding:28px!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:750px){.community-directory-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.community-directory-search{flex-wrap:wrap}.community-directory-search .button{width:100%}}
.community-operations{display:grid;gap:18px;padding-bottom:24px}.community-operations.hidden{display:none!important}
#communityOperationsNav.community-primary-nav{display:inline-flex;align-items:center;min-height:38px;margin:0 3px;padding:8px 13px;border:1px solid var(--border);background:var(--panel);color:var(--text-soft);cursor:pointer}
#communityOperationsNav.community-primary-nav:hover,#communityOperationsNav.community-primary-nav.nav-link-active{border-color:var(--gold-line);background:var(--panel-header);color:var(--gold-strong)}
#communityOperationsNav.community-primary-nav.hidden{display:none!important}
.operations-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
#operationsDetail .operations-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.operations-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:18px;margin-bottom:18px}
#operationsLanding>.community-directory-panel{margin-bottom:18px}
.operations-label,.operations-filters label{display:grid;gap:7px;color:var(--text-soft);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.operations-label input,.operations-label select,.operations-filters select{width:100%;min-height:40px;background:var(--field);border:1px solid var(--border-strong);color:var(--text-bright);padding:9px 12px;font:inherit;text-transform:none;letter-spacing:normal}
.operations-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.operations-list{display:grid}.operations-item{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;padding:15px 20px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text-bright);cursor:pointer;font:inherit}.operations-item:hover,.operations-item:focus-visible{background:var(--panel-header);outline-color:var(--gold-line)}.operations-item strong,.operations-history-row strong{display:block;color:var(--gold-strong);font-size:15px}.operations-item small,.operations-history-row small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.operations-item-right{text-align:right;color:var(--gold)}.operations-history-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--border)}.operations-empty{padding:20px;color:var(--text-soft)}.operations-detail-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
@media(max-width:850px){.operations-grid{grid-template-columns:1fr}.operations-stats,#operationsDetail .operations-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.operations-filters,.operations-stats,#operationsDetail .operations-stats{grid-template-columns:1fr}.operations-item{align-items:start;flex-direction:column}.operations-item-right{text-align:left}}
.community-operations .operations-stats{display:flex;align-items:stretch;gap:0;margin:0 0 18px;border:1px solid var(--border);background:var(--panel)}
.community-operations .operations-stats .community-profile-stat{flex:1;border:0;border-right:1px solid var(--border);background:transparent;padding:15px 20px}
.community-operations .operations-stats .community-profile-stat:last-child{border-right:0}
.community-operations .operations-stats .community-profile-stat strong{font:normal 22px var(--font-display)}
.operations-detail-panel,.operations-accordion{border:1px solid var(--border);background:var(--panel);margin-bottom:16px}
.operations-detail-panel h3{margin:0;background:var(--panel-header);border-bottom:1px solid var(--border);padding:12px 18px;color:var(--gold-strong);font:normal 20px var(--font-display)}
.operations-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:8px 18px 14px;gap:0 18px}
.operations-fact{padding:13px 2px 11px;border-bottom:1px solid var(--border);min-width:0}
.operations-fact span{display:block;font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
.operations-fact strong{display:block;margin-top:7px;font-weight:500;color:var(--text-bright);overflow-wrap:anywhere}
.operations-detail-panel .operations-detail-links{margin:0 18px 18px}
.operations-accordion summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;background:var(--panel-header);color:var(--gold-strong);font:normal 19px var(--font-display);cursor:pointer}
.operations-accordion summary::-webkit-details-marker{display:none}
.operations-accordion summary:after{content:'⌄';font:22px var(--font-body);order:3;transition:transform .15s}
.operations-accordion[open] summary:after{transform:rotate(180deg)}
.operations-accordion-count{margin-left:auto;color:var(--text-soft);font:12px var(--font-body)}
.operations-accordion-body{padding:12px 18px}
/* Grid columns may shrink below their content; wide tables scroll inside .operations-table-wrap instead of widening the page. */
.community-operations>*{min-width:0}
.operations-table-wrap{overflow-x:auto}.operations-table{width:100%;border-collapse:collapse;text-align:left;min-width:520px}
.operations-table th,.operations-table td{padding:10px 9px;border-bottom:1px solid var(--border)}.operations-table th{color:var(--gold);text-transform:uppercase;letter-spacing:.05em;font-size:11px}.operations-table td{color:var(--text-bright)}.operations-table tr:last-child td{border-bottom:0}
.operations-hint{margin:-10px 0 2px;color:var(--muted);font-size:12px}
.operations-form-status{min-height:22px;color:#f1ba83;font-weight:600;line-height:1.5}.operations-form-status:empty{display:none}.operations-form-status.is-success{color:#9fdaa2}
@media(max-width:900px){.operations-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.operations-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.community-operations .operations-stats{flex-direction:column}.community-operations .operations-stats .community-profile-stat{border-right:0;border-bottom:1px solid var(--border)}}
.community-records{display:grid;gap:18px;padding-bottom:24px}.community-records.hidden{display:none!important}
#communityRecordsNav.community-primary-nav{display:inline-flex;align-items:center;min-height:38px;margin:0 3px;padding:8px 13px;border:1px solid var(--border);background:var(--panel);color:var(--text-soft);cursor:pointer}
#communityRecordsNav.community-primary-nav:hover,#communityRecordsNav.community-primary-nav.nav-link-active{border-color:var(--gold-line);background:var(--panel-header);color:var(--gold-strong)}
#communityRecordsNav.community-primary-nav.hidden{display:none!important}
.records-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.records-card{text-align:left;padding:24px;border:1px solid var(--border);border-left:3px solid var(--gold-line);background:var(--panel-soft);color:var(--text-bright);cursor:pointer;font:inherit;min-height:164px;display:flex;flex-direction:column;align-items:flex-start}
.records-card:hover,.records-card:focus-visible{border-color:var(--gold);background:var(--panel-strong);outline-color:var(--gold)}
.records-card span{font-size:11px;color:var(--muted);letter-spacing:.11em}.records-card strong{font:normal 27px var(--font-display);color:var(--gold-strong);margin-top:10px}.records-card small{font-size:13px;color:var(--text-soft);margin-top:5px}.records-card em{font-size:12px;font-style:normal;color:var(--gold);margin-top:auto;padding-top:13px}
.records-results{display:grid}.records-entry{border-bottom:1px solid var(--border);color:var(--text-bright)}.records-entry:last-child{border-bottom:0}
.records-entry summary,.records-entry-simple{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,.8fr);gap:12px;align-items:center;padding:16px 20px}
.records-entry summary{cursor:pointer;list-style:none}.records-entry summary::-webkit-details-marker{display:none}.records-entry summary:hover{background:var(--panel-header)}
.records-entry summary strong,.records-entry-simple strong{color:var(--gold-strong);font-weight:600}.records-entry time,.records-entry-simple time{color:var(--text-soft);font-size:12px}
.records-dishonour{display:inline-block;margin-left:8px;padding:0 6px;border:1px solid var(--danger-border);border-radius:3px;color:var(--danger-soft);font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.records-entry-simple{grid-template-columns:minmax(0,1.7fr) minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1fr)}.records-entry-simple>small{color:var(--text-soft);font-size:12px}
.records-entry-meta{display:flex;flex-wrap:wrap;gap:15px;padding:2px 20px 16px}.records-entry-meta>span{min-width:145px}.records-entry-meta small,.records-citation small{display:block;color:var(--gold);text-transform:uppercase;letter-spacing:.07em;font-size:10px;margin-bottom:5px}
.records-citation{margin:0 20px 18px;padding:14px;border-left:2px solid #927b45;background:var(--panel-soft);white-space:pre-wrap;overflow-wrap:anywhere}
.records-empty{padding:24px;color:var(--text-soft)}
@media(max-width:680px){.records-cards{grid-template-columns:1fr}.records-entry summary,.records-entry-simple{grid-template-columns:1fr 1fr}.records-entry summary strong,.records-entry-simple strong{grid-column:1/-1}}
.community-character{display:grid;gap:18px;padding-bottom:24px}.community-character.hidden{display:none!important}
.community-character .operations-grid{margin:0}.community-character .community-directory-body{gap:15px}
.community-character .operations-label textarea{background:var(--field);border:1px solid var(--border-strong);color:var(--text-bright);padding:10px 12px;font:inherit;resize:vertical}
.community-character-bio{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-bright)}
.character-change-grid{grid-template-columns:minmax(0,1fr);max-width:780px}
.community-own-profile .community-directory-body{padding:0;gap:14px;max-width:620px}
.community-own-profile .field{display:grid;gap:7px;color:var(--text-soft);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.community-own-profile .field select,.community-own-profile .operations-label textarea{width:100%;min-height:40px;background:var(--field);border:1px solid var(--border-strong);color:var(--text-bright);padding:9px 12px;font:inherit;letter-spacing:normal;text-transform:none}
.community-own-profile .operations-label textarea{resize:vertical}
.community-own-profile .button{justify-self:start}
.app-session-overlay[hidden]{display:none!important}
.app-session-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,8,7,.78)}
#appIdleDialog,#appIdleSignedOut{z-index:10000}
.app-session-card{width:min(420px,100%);padding:28px;text-align:center;border:1px solid var(--gold-line);background:var(--panel);color:#f1ead6;box-shadow:0 18px 70px #000}
.app-session-card h2{margin:12px 0;color:var(--gold-strong)}.app-session-card p{line-height:1.5}.app-idle-countdown{font-size:24px;font-variant-numeric:tabular-nums;color:var(--gold-strong)}
.app-session-spinner{display:inline-block;width:34px;height:34px;border:3px solid var(--gold-border);border-top-color:var(--gold-strong);border-radius:50%;animation:app-session-spin .8s linear infinite}
@keyframes app-session-spin{to{transform:rotate(360deg)}}

.community-request-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.community-request-tab{background:var(--panel-soft);border:1px solid var(--border-strong);color:var(--text);padding:9px 13px;cursor:pointer;font:inherit}
.community-request-tab[aria-selected="true"]{border-color:var(--gold);background:var(--panel-header);color:var(--gold-strong)}
.community-request-pane{display:grid;gap:14px;max-width:620px;padding:10px 0}
.community-request-pane.hidden{display:none}
.community-leave-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.community-leave-dates{grid-template-columns:1fr}}
.community-request-pane input[type=date]{color-scheme:dark}
.community-request-pane select,.community-request-pane textarea,.community-request-pane input[type=date],.operations-detail-attendance input{width:100%;background:var(--field);border:1px solid var(--border-strong);color:var(--text-bright);padding:9px 12px;font:inherit}
.operations-detail-attendance{padding:18px;display:grid;gap:12px}
.app-action-timing{position:fixed;bottom:10px;right:12px;z-index:20;padding:5px 9px;border:1px solid var(--border-strong);background:var(--panel);color:var(--text-soft);font-size:11px;pointer-events:none}

/* Shared styled confirm + slow-loading controls */
.app-confirm-card{text-align:left}
.app-confirm-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.app-confirm-card h2{margin:6px 0 10px}
.app-confirm-body{line-height:1.5}
.app-confirm-body p{margin:0 0 8px}
.app-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
#appLoadingSlow{justify-content:center}

/* Searchable dropdowns */
.app-select-search{position:relative;width:100%}
.app-select-native{display:none!important}
.app-select-input{width:100%;box-sizing:border-box}
/* Searchable dropdowns (long lists) look like the other Community fields. */
.app-select-input{min-height:40px;background:var(--field);border:1px solid var(--border-strong);color:var(--text-bright);padding:9px 12px;font:inherit;font-size:14px;text-transform:none;letter-spacing:normal;border-radius:0}
.app-select-input::placeholder{color:var(--text);opacity:1}
.app-select-input:focus{border-color:var(--gold-line)}
.app-select-list{position:absolute;z-index:2500;left:0;right:0;top:calc(100% + 2px);max-height:280px;overflow:auto;border:1px solid var(--gold,var(--gold));background:var(--panel,#111);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.app-select-option{padding:8px 12px;cursor:pointer;color:var(--text,#ddd);font-size:14px}
.app-select-option.is-active,.app-select-option:hover{background:rgba(199,173,115,.16)}
.app-select-option.is-selected{color:var(--gold,var(--gold));font-weight:600}
.app-select-empty{padding:8px 12px;color:var(--muted,#999);font-size:13px;font-style:italic}

/* Repentant page */
.legion-penance-tag{display:inline-block;padding:2px 8px;border:1px solid rgba(217,106,106,.55);color:var(--danger-soft);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.legion-redacted{letter-spacing:.12em;color:var(--danger-soft)}

.app-select-list,.app-select-option,.app-select-empty{text-transform:none;letter-spacing:normal;font-weight:400}
.community-request-closed{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(224,196,108,.35);color:var(--gold-strong);font-size:13px}
.community-request-pane [disabled]{opacity:.5;cursor:not-allowed}
.roblox-continue-link{display:inline-block;margin-top:10px;text-decoration:none;text-align:center}
.roblox-continue-link[hidden]{display:none}
/* My Profile → Points Request: space between stacked fields */
#communityProfile [data-point-kind] .operations-label + .operations-label { margin-top: 10px; }
/* Service Timeline (Community profile) */
.service-timeline { list-style: none; margin: 6px 0 0; padding: 0 0 0 4px; position: relative; }
.service-timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.service-timeline-item { position: relative; display: flex; gap: 14px; padding: 8px 0; }
.service-timeline-item.is-extra { display: none; }
.service-timeline-panel.is-expanded .service-timeline-item.is-extra { display: flex; }
.service-timeline-dot { position: relative; z-index: 1; flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--panel-soft); border: 1px solid var(--border-strong); color: var(--text); }
.service-timeline-item.is-promotion .service-timeline-dot, .service-timeline-item.is-award .service-timeline-dot, .service-timeline-item.is-milestone .service-timeline-dot { border-color: var(--gold-line); color: var(--gold-strong); }
.service-timeline-item.is-death .service-timeline-dot { border-color: var(--danger-border); color: var(--danger-soft); }
.service-timeline-item.is-status .service-timeline-dot { border-color: #7d7466; color: #c9bba3; }
.service-timeline-item.is-zeus .service-timeline-dot { border-color: #5b7fa6; color: #9cc3ea; }
.service-timeline-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.service-timeline-body time { font-size: 12px; color: var(--muted); }
.service-timeline-body strong { color: var(--text-bright); overflow-wrap: anywhere; }
.service-timeline-body span { font-size: 13px; color: var(--text-soft); overflow-wrap: anywhere; }
.service-timeline-more { margin-top: 8px; }
/* My Availability grid (Community_Client_Availability) and the admin heat map share these sizes */
#communityAvailabilityPanel { min-width: 0; max-width: 100%; overflow: hidden; }
.avail-grid-wrap { overflow-x: auto; margin: 10px 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.avail-grid { border-collapse: separate; border-spacing: 2px; user-select: none; touch-action: none; }
.avail-grid th { font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 4px; text-align: left; white-space: nowrap; }
.avail-grid thead th { text-align: center; padding: 0 0 4px; }
.avail-grid td { width: 22px; height: 22px; min-width: 22px; background: var(--panel-strong); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.avail-grid td.is-on { background: var(--gold-line); border-color: var(--gold); }
.avail-grid td:hover { border-color: var(--gold); }
.avail-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Accessibility (stage 9): a clear outline for keyboard focus everywhere; less motion when asked. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.performance-line:empty { display: none; }