/* ============================================================================
   GSB Access — store/district access control chrome.
     • #access-denied-screen  request-access landing (role 'none'); mobile-first
     • #access-screen         admin panel (policy · requests · roster · diag)
     • .gsb-scope-badge       header "who am I / what am I seeing" (rendered by
                              access-scope.js renderScopeBadge)
     • .gsb-viewas-band       sticky ochre "VIEWING AS …" band under the header
     • .gsb-admins-only       one-line refusal used by Kevin + Access
   Token-based; .acc-* classes only. Class names deliberately avoid the -card /
   -panel suffixes that gsb-clean.css force-flattens, and NEVER set `display`
   on the screen ids (an ID selector beats .screen{display:none}).
   ========================================================================= */

/* ── Header badge ─────────────────────────────────────────────────────────── */
.gsb-scope-badge {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--gsb-stone);
  pointer-events: auto;
  max-width: 46vw;
}
.gsb-scope-badge[hidden] { display: none; }
.gsb-scope-badge .gsb-scope-role {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(47, 107, 69, 0.12);
  color: var(--gsb-shoot-green);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
html[data-access-role="none"] .gsb-scope-badge .gsb-scope-role {
  background: rgba(181, 83, 46, 0.12);
  color: var(--gsb-clay);
}
html[data-access-viewas] .gsb-scope-badge .gsb-scope-role {
  background: rgba(185, 139, 50, 0.18);
  color: #8A6420;
}
.gsb-scope-badge .gsb-scope-label {
  color: var(--gsb-stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsb-scope-badge .gsb-scope-note {
  color: var(--gsb-stone);
  opacity: 0.75;
  white-space: nowrap;
}
.gsb-scope-badge .gsb-scope-exit {
  appearance: none;
  border: 1px solid #8A6420;
  background: transparent;
  color: #8A6420;
  border-radius: 999px;
  padding: 2px 9px;
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.gsb-scope-badge .gsb-scope-exit:hover { background: rgba(185, 139, 50, 0.14); }
@media (max-width: 900px) {
  .gsb-scope-badge { top: 8px; right: 10px; gap: 6px; max-width: none; }
  .gsb-scope-badge .gsb-scope-label,
  .gsb-scope-badge .gsb-scope-note,
  .gsb-scope-badge .gsb-scope-exit { display: none; }
  .gsb-scope-badge .gsb-scope-role { font-size: 9px; padding: 2px 7px; }
}

/* ── View-as band (sticky, ochre) ─────────────────────────────────────────── */
.gsb-viewas-band {
  position: sticky;
  top: 0;
  z-index: 499;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  background: #B98B32;
  color: var(--gsb-paper);
  border-bottom: 1.5px solid var(--gsb-soil-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gsb-viewas-band .gsb-viewas-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsb-viewas-band .gsb-viewas-text b { font-weight: 500; color: #fff; }
.gsb-viewas-band .gsb-viewas-exit {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--gsb-paper);
  background: transparent;
  color: var(--gsb-paper);
  border-radius: 999px;
  padding: 3px 11px;
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.gsb-viewas-band .gsb-viewas-exit:hover { background: rgba(243, 238, 227, 0.18); }

/* ── Admins-only refusal ──────────────────────────────────────────────────── */
.gsb-admins-only {
  max-width: 720px;
  margin: 24px auto;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--gsb-stone);
  font: 400 14px/1.5 var(--font-body);
}

/* ── Denied landing (#access-denied-screen) — mobile first ───────────────── */
#access-denied-screen { font-family: var(--font-body); color: var(--color-text); }
#access-denied-screen .acc-landing {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 18px 64px;
}
#access-denied-screen .acc-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gsb-shoot-green);
  margin-bottom: 14px;
}
#access-denied-screen .acc-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 7vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--gsb-soil-ink);
  margin: 0 0 16px;
}
#access-denied-screen .acc-lede {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--gsb-soil-ink);
  margin: 0 0 22px;
}
#access-denied-screen .acc-lede b { font-weight: 600; }
#access-denied-screen .acc-request {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#access-denied-screen .acc-request[hidden] { display: none; }
#access-denied-screen .acc-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gsb-stone);
}
#access-denied-screen textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  color: var(--gsb-soil-ink);
  padding: 11px 12px;
  font: 400 16px/1.45 var(--font-body); /* 16px — no iOS zoom on focus */
}
#access-denied-screen textarea:focus {
  outline: none;
  border-color: var(--gsb-shoot-green);
  box-shadow: 0 0 0 3px rgba(47, 107, 69, 0.12);
}
#access-denied-screen .acc-actions { display: flex; flex-direction: column; gap: 8px; }
#access-denied-screen .acc-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 4px;
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
#access-denied-screen .acc-btn-primary { background: var(--gsb-shoot-green); color: #fff; }
#access-denied-screen .acc-btn-primary:hover { background: #245539; }
#access-denied-screen .acc-btn-primary[disabled] { opacity: 0.6; cursor: default; }
#access-denied-screen .acc-btn-secondary {
  background: transparent;
  color: var(--gsb-soil-ink);
  border-color: var(--color-border);
}
#access-denied-screen .acc-btn-secondary:hover { background: var(--gsb-oat); }
#access-denied-screen .acc-sent {
  border-left: 3px solid var(--gsb-shoot-green);
  background: rgba(47, 107, 69, 0.07);
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gsb-soil-ink);
}
#access-denied-screen .acc-sent[hidden] { display: none; }
#access-denied-screen .acc-err {
  border-left: 3px solid var(--gsb-clay);
  background: rgba(181, 83, 46, 0.08);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gsb-soil-ink);
}
#access-denied-screen .acc-err[hidden] { display: none; }
#access-denied-screen .acc-err a { color: var(--gsb-clay); }
#access-denied-screen .acc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gsb-stone);
}
#access-denied-screen .acc-foot button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--gsb-stone);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 0;
}
#access-denied-screen .acc-foot button:hover { color: var(--gsb-soil-ink); }
@media (min-width: 640px) {
  #access-denied-screen .acc-landing { padding: 48px 24px 80px; }
  #access-denied-screen .acc-actions { flex-direction: row; }
  #access-denied-screen .acc-btn { min-height: 42px; font-size: 14px; }
  #access-denied-screen .acc-btn-primary { flex: 0 0 auto; min-width: 180px; }
}

/* ── Admin panel (#access-screen) ─────────────────────────────────────────── */
#access-screen { font-family: var(--font-body); color: var(--color-text); }

/* GSB.<Page> title wordmark — mirrors the four selector groups in
   gsb-sales-flash.css (opt-in per screen id), scoped here to this screen. */
#access-screen .nav-bar h2 {
  font-family: 'Inter', var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
}
#access-screen .nav-bar h2 .gsb-title-mark { flex: 0 0 auto; color: var(--gsb-soil-ink); }
#access-screen .nav-bar h2 .gsb-title-dot { color: var(--gsb-leaf); }
#access-screen .nav-bar h2 .gsb-kw {
  color: var(--gsb-soil-ink) !important;
  background: linear-gradient(transparent 58%, rgba(130, 187, 144, 0.50) 58%) !important;
  padding: 0 2px;
  border-radius: 1px;
}
#access-screen .acc-sub { font-size: 11px; color: var(--gsb-stone); }

#access-screen #access-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 72px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
#access-screen .acc-loading,
#access-screen .acc-empty {
  color: var(--gsb-stone);
  padding: 22px 4px;
  text-align: center;
  font-size: 13.5px;
}

/* Section blocks */
#access-screen .acc-sec {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
#access-screen .acc-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
#access-screen .acc-sec-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--gsb-soil-ink);
}
#access-screen .acc-sec-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gsb-stone);
}
#access-screen .acc-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gsb-stone);
  margin: 0 0 6px;
}

/* Banners */
#access-screen .acc-banner {
  border-left: 3px solid var(--gsb-stone);
  background: rgba(111, 105, 91, 0.07);
  border-radius: 0 4px 4px 0;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gsb-soil-ink);
  margin: 0 0 12px;
}
#access-screen .acc-banner-clay { border-left-color: var(--gsb-clay); background: rgba(181, 83, 46, 0.08); }
#access-screen .acc-banner-green { border-left-color: var(--gsb-shoot-green); background: rgba(47, 107, 69, 0.07); }
#access-screen .acc-banner-ochre { border-left-color: #B98B32; background: rgba(185, 139, 50, 0.10); }
#access-screen .acc-banner[hidden] { display: none; }

/* Segmented control (enforcement) */
#access-screen .acc-segs {
  display: inline-flex;
  gap: 2px;
  background: var(--gsb-oat);
  border-radius: 6px;
  padding: 3px;
}
#access-screen .acc-seg {
  appearance: none;
  border: 0;
  border-radius: 4px;
  background: transparent;
  min-height: 32px;
  padding: 0 16px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gsb-stone);
  cursor: pointer;
}
#access-screen .acc-seg[aria-pressed="true"] { background: var(--gsb-soil-ink); color: var(--gsb-paper); }
#access-screen .acc-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gsb-stone);
  margin: 8px 0 0;
  min-height: 1.5em;
}

/* Forms */
#access-screen .acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 18px;
  margin-top: 14px;
}
#access-screen .acc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#access-screen .acc-field label,
#access-screen .acc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gsb-stone);
}
#access-screen .acc-field .acc-hint { font-size: 11.5px; color: var(--gsb-stone); line-height: 1.4; }
#access-screen input[type="text"],
#access-screen input[type="search"],
#access-screen input[type="email"],
#access-screen textarea,
#access-screen select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  color: var(--gsb-soil-ink);
  padding: 8px 10px;
  font: 400 13.5px/1.4 var(--font-body);
}
#access-screen input.acc-mono,
#access-screen textarea.acc-mono { font-family: var(--font-mono); font-size: 12.5px; }
#access-screen textarea { resize: vertical; min-height: 84px; }
#access-screen input:focus,
#access-screen textarea:focus,
#access-screen select:focus {
  outline: none;
  border-color: var(--gsb-shoot-green);
  box-shadow: 0 0 0 3px rgba(47, 107, 69, 0.12);
}
#access-screen .acc-radios { display: flex; flex-direction: column; gap: 6px; }
#access-screen .acc-radios label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 400 13px/1.45 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gsb-soil-ink);
  cursor: pointer;
}
#access-screen .acc-radios input { margin-top: 3px; accent-color: var(--gsb-shoot-green); }
#access-screen .acc-radios small { color: var(--gsb-stone); display: block; }

#access-screen .acc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
#access-screen .acc-row .acc-status { font-size: 12.5px; color: var(--gsb-stone); }

/* Buttons */
#access-screen .acc-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--gsb-soil-ink);
  font: 600 12.5px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
#access-screen .acc-btn:hover { background: var(--gsb-oat); }
#access-screen .acc-btn[disabled] { opacity: 0.55; cursor: default; }
#access-screen .acc-btn-primary { background: var(--gsb-shoot-green); border-color: var(--gsb-shoot-green); color: #fff; }
#access-screen .acc-btn-primary:hover { background: #245539; }
#access-screen .acc-btn-clay { color: var(--gsb-clay); border-color: rgba(181, 83, 46, 0.4); }
#access-screen .acc-btn-clay:hover { background: rgba(181, 83, 46, 0.08); }
#access-screen .acc-btn-sm { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
#access-screen .acc-btn-link {
  border: none;
  background: transparent;
  color: var(--gsb-shoot-green);
  padding: 0 4px;
  min-height: 26px;
  font-weight: 500;
}
#access-screen .acc-btn-link:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }

/* Pills */
#access-screen .acc-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 8px;
  font: 500 10px/1.6 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gsb-oat);
  color: var(--gsb-soil-ink);
}
#access-screen .acc-pill-admin    { background: var(--gsb-soil-ink); color: var(--gsb-paper); }
#access-screen .acc-pill-company  { background: rgba(47, 107, 69, 0.12); color: var(--gsb-shoot-green); }
#access-screen .acc-pill-market   { background: rgba(47, 107, 69, 0.08); color: var(--gsb-shoot-green); }
#access-screen .acc-pill-district { background: rgba(185, 139, 50, 0.16); color: #8A6420; }
#access-screen .acc-pill-store    { background: rgba(111, 105, 91, 0.14); color: var(--gsb-stone); }
#access-screen .acc-pill-none     { background: rgba(181, 83, 46, 0.12); color: var(--gsb-clay); }
#access-screen .acc-pill-exec     { background: transparent; border: 1px solid var(--gsb-shoot-green); color: var(--gsb-shoot-green); }
#access-screen .acc-pill-corp     { background: transparent; border: 1px solid var(--color-border); color: var(--gsb-stone); }
#access-screen .acc-pill-pending  { background: rgba(185, 139, 50, 0.16); color: #8A6420; }
#access-screen .acc-pill-plain    { background: transparent; border: 1px solid var(--color-border); color: var(--gsb-stone); }

/* Tables — style.css has a bare `table {}` leak; carry !important on cells. */
#access-screen .acc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#access-screen table.acc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono) !important;
  font-size: 12px;
}
#access-screen table.acc-table th,
#access-screen table.acc-table td {
  text-align: left;
  padding: 7px 8px !important;
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: middle;
  background: transparent !important;
  white-space: nowrap;
}
#access-screen table.acc-table th {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gsb-stone) !important;
  border-bottom: 1.5px solid var(--gsb-soil-ink) !important;
}
#access-screen table.acc-table td.acc-td-name { font-family: var(--font-body) !important; font-weight: 600; color: var(--gsb-soil-ink); }
#access-screen table.acc-table td.acc-td-name small { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--gsb-stone); }
#access-screen table.acc-table td.acc-td-title { font-family: var(--font-body) !important; color: var(--gsb-stone); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#access-screen table.acc-table td.acc-td-num { text-align: right; }
#access-screen table.acc-table td.acc-td-act { text-align: right; }
#access-screen table.acc-table td.acc-td-act .acc-btn { margin-left: 4px; }
#access-screen table.acc-table tr.acc-tr-form td { white-space: normal; background: var(--gsb-paper) !important; padding: 12px 10px !important; }
#access-screen table.acc-table tr.acc-tr-form td .acc-grid { margin-top: 0; }

/* Requests list */
#access-screen .acc-req { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
#access-screen .acc-req:last-child { border-bottom: none; }
#access-screen .acc-req-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#access-screen .acc-req-name { font-weight: 600; font-size: 14px; color: var(--gsb-soil-ink); }
#access-screen .acc-req-email { font-family: var(--font-mono); font-size: 11.5px; color: var(--gsb-stone); }
#access-screen .acc-req-when { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--gsb-stone); }
#access-screen .acc-req-msg { font-size: 13.5px; line-height: 1.5; color: var(--gsb-soil-ink); margin: 6px 0 8px; white-space: pre-wrap; }
#access-screen .acc-req-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Grant form (shared by requests + roster override) */
#access-screen .acc-grant {
  background: var(--gsb-paper);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 12px 14px;
  margin-top: 10px;
}
#access-screen .acc-grant .acc-grid { margin-top: 0; }
#access-screen .acc-grant .acc-row { margin-top: 12px; }
#access-screen .acc-sameas { display: flex; gap: 6px; }
#access-screen .acc-sameas input { flex: 1 1 auto; }
#access-screen .acc-sameas .acc-btn { flex: 0 0 auto; }
#access-screen .acc-grant .acc-err { color: var(--gsb-clay); font-size: 12.5px; }

/* Roster search + counts */
#access-screen .acc-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
#access-screen .acc-toolbar input[type="search"] { flex: 1 1 220px; width: auto; font-size: 16px; }
#access-screen .acc-toolbar .acc-count { font-family: var(--font-mono); font-size: 11px; color: var(--gsb-stone); letter-spacing: 0.04em; }

/* Diagnostics */
#access-screen details.acc-diag summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gsb-soil-ink);
  list-style: none;
}
#access-screen details.acc-diag summary::-webkit-details-marker { display: none; }
#access-screen details.acc-diag summary::before { content: "▸ "; color: var(--gsb-stone); }
#access-screen details.acc-diag[open] summary::before { content: "▾ "; }
#access-screen details.acc-diag summary .acc-pill { margin-left: 8px; vertical-align: middle; }
#access-screen .acc-warn-list { margin: 12px 0 0; padding: 0; list-style: none; }
#access-screen .acc-warn-list li {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--gsb-soil-ink);
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  #access-screen .acc-sec { padding: 13px 13px; }
  #access-screen .acc-sec-meta { margin-left: 0; flex-basis: 100%; }
  #access-screen .acc-seg { padding: 0 11px; }
  #access-screen .acc-req-when { margin-left: 0; flex-basis: 100%; }
}