/* ============================================================
   public-shell.css — the public side of myIQ Archery: shared tokens + the left menu.
   Used by every public page (sign-in, competition map, FFTA and FFTL rulebooks) together with public-menu.js,
   which defines the links once. The brand colour comes from brand.css (--brand-public-*); no hex brand value here.
   The palette below is the one the competition map has always used.
   ============================================================ */
:root {
  --bg: #f2f4ef; --surface: #ffffff; --ink: #17211c; --muted: #5b6961; --line: #d3dad2;
  --brand: var(--brand-public-on-light); --focus: #0d5f8f; --bad: #b1362f; --ok: #1e7a48;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111713; --surface: #19211c; --ink: #e7eee8; --muted: #98a69e; --line: #2c3831;
  --brand: var(--brand-public-on-dark); --focus: #6dbbe8; --bad: #e0776f; --ok: #4fb47c; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #111713; --surface: #19211c; --ink: #e7eee8; --muted: #98a69e; --line: #2c3831;
  --brand: var(--brand-public-on-dark); --focus: #6dbbe8; --bad: #e0776f; --ok: #4fb47c; color-scheme: dark }

/* ---- shell: menu on the left, the page on the right ---------------- */
body.pub-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100vh; height: 100svh; overflow: hidden;
  background: var(--bg); color: var(--ink); font-family: var(--body); margin: 0 }
.pub-main { min-width: 0; height: 100%; overflow: auto; display: flex; flex-direction: column }
.pub-shell .wrap { flex: 1 1 auto; height: auto; min-height: 0 }   /* fills the space above the legal footer */
/* the menu carries the logo and the sign-in link: the pages' own copies would only repeat them */
.pub-shell header .brand, .pub-shell #signin { display: none }

.pub-side { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto }
.pub-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font: 800 17px "Syne", var(--display);
  padding: 2px 8px 16px; white-space: nowrap }
.pub-brand .brand-mark { width: 30px; height: 30px; color: var(--brand) }
.pub-brand b { color: var(--brand); font-weight: 800 }
.pub-grp { font: 400 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px }
.pub-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--ink);
  font: 500 15px var(--body) }
.pub-item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; color: var(--muted) }
.pub-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent) }
.pub-item[aria-current="page"] { background: color-mix(in srgb, var(--brand) 16%, transparent) }
.pub-item[aria-current="page"] svg { color: var(--brand) }
.pub-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand) }
.pub-item small { display: block; color: var(--muted); font: 400 12.5px var(--body); line-height: 1.25 }
.pub-spacer { flex: 1 }
.pub-foot { font: 400 12.5px var(--body); color: var(--muted); padding: 10px; border-top: 1px solid var(--line); margin-top: 10px }

.pub-legal { flex: none; margin-top: auto; padding: 10px clamp(16px, 2vw, 32px) 12px; border-top: 1px solid var(--line); background: var(--bg);
  font: 400 12.5px/1.45 var(--body); color: var(--muted) }
.pub-legal p { max-width: 900px }

.pub-top { display: none }
.pub-scrim { display: none }

/* ---- small screens: the menu becomes a drawer ---------------------- */
@media (max-width: 820px) {
  body.pub-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
  .pub-top { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface) }
  .pub-top .pub-brand { padding: 0 }
  .pub-menu-btn { margin-left: auto; font: 600 15px var(--display); letter-spacing: .03em; background: none; border: 1px solid var(--line);
    border-radius: 8px; color: var(--ink); padding: 7px 14px; cursor: pointer }
  .pub-side { position: fixed; inset: 0 25% 0 0; max-width: 300px; z-index: 60; transform: translateX(-100%); transition: transform .2s;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .35) }
  .pub-side .pub-brand { display: none }
  body.pub-open .pub-side { transform: none }
  body.pub-open .pub-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 50 }
}