/* GUB Coaches App — shell styling.
 *
 * Brand: the OFFICIAL GUB pack —
 * Projects/GU-Competitions-Admin/GUB-Branding-Guidelines-V2.pdf.
 * Primary #0D2C42 + white · secondary (orange) #F49821 · accent (sky) #ACDFFA ·
 * neutral ramp #647886 / #9CA9B1 / #C0CBCD / #DFE3E5 / #FFFFFF.
 * There is no red and no royal blue in the GUB brand.
 *
 * Type: the club uses Geelong United Bold/Light for display and DINPro Light
 * for body. Neither is licensed or installed here, so the nearest available
 * stand-ins are used — Saira Condensed (squared athletic condensed) and Barlow
 * (DIN-derived). Swap in the real faces if the club supplies the files.
 *
 * DESIGN-STANDARDS.md still governs layout: tabular figures on every number,
 * dividers not cards, asymmetric layout, radius 0-4px, one accent used
 * sparingly, no gradients.
 */

:root {
  --navy:      #0D2C42;   /* PRIMARY — page base and raised surfaces */
  --navy-sunk: #09202F;   /* the primary, recessed: inputs and the code field */
  --steel:     #647886;   /* first stop on the brand's neutral ramp */
  --silver:    #9CA9B1;
  --mist:      #C0CBCD;
  --pale:      #DFE3E5;
  --orange:    #F49821;   /* SECONDARY — the one saturated accent, used sparingly */
  --sky:       #ACDFFA;   /* ACCENT — labels and secondary emphasis */

  --ink:     #FFFFFF;
  --ink-mid: var(--pale);
  --muted:   var(--silver);

  /* Rules are the brand's own steel at low alpha, so nothing off-palette is
     invented just to draw a divider. */
  --rule:      rgba(100, 120, 134, .55);
  --rule-soft: rgba(100, 120, 134, .28);

  --display: 'Saira Condensed', 'Barlow Condensed', 'Archivo Narrow', sans-serif;
  --body:    'Barlow', 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --pad: 20px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute only sets display:none at UA-stylesheet specificity,
   so any author `display` rule silently beats it. That left the boot screen
   stacked above the home screen and the iOS install button showing next to
   the "tap Share" instructions that replace it. Screens are toggled by
   `hidden` throughout, so this has to win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "tnum";
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.skip {
  position: absolute; left: -9999px;
  background: var(--orange); color: var(--navy); padding: 8px 14px; z-index: 99;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- boot -- */
.boot {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;
  padding: var(--pad);
  gap: 14px;
}
/* Same solid-red lettermark as the masthead crest, so the boot state reads as
   the club's mark rather than a loading decoration. */
.boot-mark { width: 74px; height: 74px; background: #fff; border-radius: 50%; padding: 4px; }
.boot-text { margin: 0; color: var(--muted); font-size: 14px; }

.screen { min-height: 100vh; }

/* ------------------------------------------------------------- masthead -- */
.login-wrap {
  max-width: 460px;
  margin: 0;
  padding: 48px var(--pad) 40px;
}

.masthead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 36px; }

/* The club's own primary logo — the mark for all program comms per the GUB
   brand pack. It sits on a white disc because the mark's inner ball is white
   and would disappear straight onto the navy. */
.crest {
  flex: none;
  display: block;
  width: 62px; height: 62px;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
}
.crest.small { width: 40px; height: 40px; padding: 2px; }

.masthead-type h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}
.masthead-type h1 span { display: block; color: var(--sky); font-weight: 500; }
.kicker {
  margin: 8px 0 0;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; color: var(--muted);
}

/* ---------------------------------------------------------------- pane -- */
/* Dividers, not cards. A rule above, a rule below, no shadow, no box. */
.pane {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-bottom: 26px;
}

.pane-title {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .08em;
  font-size: 15px; font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}
.pane-note { margin: 0 0 20px; color: var(--ink-mid); font-size: 14px; max-width: 40ch; }
.strong { color: var(--ink); font-weight: 500; }

.field { display: block; margin-bottom: 18px; }
.field-label {
  display: block;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; color: var(--muted);
  margin-bottom: 7px;
}

input[type="email"], input[type="text"] {
  width: 100%;
  background: var(--navy-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);              /* never rely on the default — dark bg + default ink is unreadable */
  font-family: var(--body);
  font-size: 16px;                /* 16px stops iOS zooming on focus */
  padding: 12px 12px;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder { color: var(--steel); }
input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: inset 0 -2px 0 var(--sky);
}

.code-input {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 34px !important;
  letter-spacing: .34em;
  text-align: left;
  padding: 10px 12px !important;
}

.btn {
  display: inline-block;
  width: 100%;
  background: var(--orange);
  color: var(--navy);
  border: 0; border-radius: 2px;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; font-size: 16px;
  padding: 14px 18px 12px;
  cursor: pointer;
}
.btn.small { width: auto; font-size: 14px; padding: 10px 16px 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.linkbtn {
  background: none; border: 0; padding: 0;
  color: var(--ink-mid);
  font-family: var(--body); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--sky); }

/* Status messages carry a condensed caps label, not a coloured side bar —
   DESIGN-STANDARDS: bold caps labels instead of glyphs or accent tabs. */
.msg { margin: 14px 0 0; font-size: 14px; min-height: 1px; }
.msg::before {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: 11px; font-weight: 600;
  margin-right: 8px;
}
.msg.err { color: var(--pale); }
.msg.err::before { content: "Problem"; color: var(--orange); }
.msg.ok  { color: var(--ink-mid); }
.msg.ok::before { content: "Sent"; color: var(--sky); }
.msg.saved { color: var(--ink-mid); }
.msg.saved::before { content: "Saved"; color: var(--sky); }
.msg.published { color: var(--ink-mid); }
.msg.published::before { content: "Published"; color: var(--orange); }

#btn-back { margin-top: 18px; display: inline-block; }

.footnote {
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
  margin: 34px 0 0;
  color: var(--muted); font-size: 13px; max-width: 44ch;
}

/* -------------------------------------------------------------- topbar -- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--navy-sunk);
  padding-top: calc(14px + env(safe-area-inset-top));
}
.topbar-type { flex: 1; min-width: 0; }
.topbar-name {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .05em;
  font-size: 18px; font-weight: 600; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sub {
  margin: 1px 0 0;
  font-size: 12px; color: var(--muted);
}
.topbar-out { flex: none; }

/* ---------------------------------------------------------------- home -- */
/* Asymmetric on wide screens: a dominant list column and a narrow status
   rail. Single column on a phone, which is where this actually gets used. */
.home {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  /* Bottom padding clears the sticky install bar, which would otherwise sit
     over the last line of the access rail. */
  padding: 0 var(--pad) 120px;
  max-width: 1040px;
}
@media (min-width: 860px) {
  .home {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 0 44px;
    padding-top: 8px;
  }
}

.list-block { border-top: 1px solid var(--rule); padding: 22px 0 6px; }
.home-main .list-block:first-child { border-top: 0; padding-top: 26px; }

.list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.list-title {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .09em;
  font-size: 16px; font-weight: 600; margin: 0;
}
.count {
  font-family: var(--display);
  font-size: 22px; font-weight: 600; color: var(--muted);
  line-height: 1;
}
.count.has { color: var(--orange); }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  border-bottom: 1px solid var(--rule-soft);
  padding: 13px 0;
  font-size: 15px;
}
.list li:first-child { border-top: 1px solid var(--rule-soft); }

.empty {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  max-width: 48ch;
}

/* ---------------------------------------------------------------- rail -- */
.rail { border-top: 1px solid var(--rule); padding: 22px 0 0; margin-top: 26px; }
/* Beside the main column the rail's top rule has nothing to divide it from,
   so it reads as an orphan line. Drop it and let the two columns start level. */
@media (min-width: 860px) { .rail { margin-top: 0; padding-top: 26px; border-top: 0; } }

.rail-title {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin: 0 0 12px;
}
.rail-list { margin: 0; }
.rail-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}
.rail-row dt { color: var(--muted); flex: none; }
.rail-row dd {
  margin: 0; text-align: right; color: var(--ink);
  overflow-wrap: anywhere;
}
.rail-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); max-width: 34ch; }

/* ------------------------------------------------------------ feedback -- */
/* Post-game feedback (Spec G). Same rules as the rest of the shell: rules and
   not cards, one accent used sparingly, radius 0-4px, tabular figures on every
   date and rating. */

.fb-form { margin-top: 4px; }

/* Native select on a dark surface renders black-on-navy in Chrome unless both
   colours are set, and the option list inherits from the element. */
select {
  width: 100%;
  background: var(--navy-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 12px;
}
select option { background: var(--navy-sunk); color: var(--ink); }
select:focus { outline: none; border-color: var(--sky); box-shadow: inset 0 -2px 0 var(--sky); }

textarea {
  width: 100%;
  background: var(--navy-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  padding: 10px 12px;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
textarea::placeholder { color: var(--steel); }
textarea:focus { outline: none; border-color: var(--sky); box-shadow: inset 0 -2px 0 var(--sky); }

.fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.fieldset .field-label { padding: 0; }

/* Rating and tone as chips: one tap on a phone, and the chosen value stays
   readable rather than relying on a native radio dot against navy. */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer;
}
.chip span {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 9px 14px 8px;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .08em;
  font-size: 13px; color: var(--ink-mid);
  min-width: 44px; text-align: center;
}
.chip input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.chip input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }

.fb-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }

.fb-subtitle {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin: 26px 0 8px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
}

.fb-draft { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.fb-draft-who { color: var(--ink); }
.fb-draft-meta { color: var(--muted); font-size: 13px; }

/* ---- an entry ---- */
.fb-list { margin: 0 0 6px; }

.fb-entry { border-top: 1px solid var(--rule-soft); padding: 16px 0 14px; }
.fb-entry:first-child { border-top: 1px solid var(--rule-soft); }

.fb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fb-who {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 15px; font-weight: 600;
}
.fb-date { margin: 0; font-size: 13px; color: var(--muted); flex: none; }

.fb-meta {
  margin: 6px 0 12px;
  font-size: 13px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
}
.fb-tone {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; font-weight: 600;
}
.fb-tone.positive { color: var(--sky); }
.fb-tone.developmental { color: var(--orange); }

.fb-body { margin: 0; }
.fb-body dt {
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; color: var(--muted);
  margin-bottom: 3px;
}
.fb-body dd { margin: 0 0 12px; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- the thread ---- */
/* Indented behind a single steel rule so a long back-and-forth still reads as
   belonging to the entry above it. */
.fb-thread { border-left: 1px solid var(--rule-soft); padding-left: 14px; margin: 4px 0 0; }
.fb-reply { margin: 0 0 12px; }
.fb-reply-head {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12px; color: var(--muted); margin-bottom: 2px;
}
.fb-reply-who { color: var(--ink-mid); }
.fb-reply-body { margin: 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }

.fb-reply-form { margin-top: 12px; }
.fb-reply-form textarea { font-size: 15px; }
.fb-reply-form .fb-actions { margin-top: 8px; }
.fb-reply-form .msg { margin-top: 8px; }

/* ------------------------------------------------------ notifications -- */
/* Spec D1. Inherits .list, so only the differences are declared here. */

.notif-push {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--navy-sunk);
  border-left: 2px solid var(--sky);
}
.notif-push-text { margin: 0; font-size: 14px; color: var(--ink-mid); max-width: 46ch; }
.notif-push .install-actions:not(:empty) { margin-top: 10px; }

/* The unread marker is the orange rule already used for a live count, moved to
   the left edge. Nothing new is introduced to say "unread". */
.notif-list li {
  padding-left: 12px;
  border-left: 2px solid transparent;
}
.notif-item.unread { border-left-color: var(--orange); }

.notif-line { margin: 0 0 3px; color: var(--ink-mid); }
.notif-item.unread .notif-line { color: var(--ink); }

.notif-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--muted); }
.notif-foot { margin: 12px 0 0; font-size: 12px; color: var(--muted); max-width: 48ch; }
.notif-actions:not(:empty) { margin-top: 10px; }

/* ------------------------------------------------------------- install -- */
.install {
  position: sticky; bottom: 0;
  margin: 0 calc(var(--pad) * -1);
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: var(--navy-sunk);
  border-top: 1px solid var(--orange);
}
.install-text { margin: 0 0 10px; font-size: 14px; color: var(--ink-mid); max-width: 46ch; }
.install-actions { display: flex; align-items: center; gap: 16px; }

/* ---------------------------------------------------------- reduced UI -- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}