/* WG One-Pager portal.
 *
 * The brand furniture below (fonts, palette) is copied VERBATIM from
 * capabilities/implementation-tracker/roster-app/public/style.css so the two GNS
 * pages agree. Do not re-pick a colour here; change the document shell instead.
 * See capabilities/brand-studio/templates/gns-document-shell.md.
 *
 * Everything this file references is a real file on this same origin. _headers
 * sets a strict CSP with no external origins, so a Google Fonts link or a CDN
 * background image would work locally and be silently blocked live.
 */

@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lato-400.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lato-700.woff2) format('woff2');}

:root{
  --brand:#0067A6; --brand-deep:#0B3357; --brand-bright:#2C79B0;
  --wg-green:#00A049; --wg-gold:#FBC331; --wg-red:#C06E60;
  --ink:#1B2A38; --muted:#5A6B7B; --rule:#DCE6EF; --paper:#FFFFFF; --tint:#E8F1F8;
  --font-display:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:'Lato',system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

/* The page is a fixed-height column, not a scrolling document. That is what
   keeps the tray on screen: the ROSTER scrolls inside its own box, the page
   itself does not. Scroll the whole document instead and the Generate button
   walks off the bottom at row 40 of 725. */
html,body{height:100%}
body{
  margin:0; background:#F2F6FA; color:var(--ink);
  font:16px/1.6 var(--font-body);
  display:flex; flex-direction:column; overflow:hidden;
}

/* --- header --- */
header{
  flex:none; display:flex; align-items:center; gap:18px;
  padding:14px 22px; background:var(--paper); border-bottom:1px solid var(--rule);
}
header .logo{width:142px;height:58px;object-fit:contain;object-position:left center}
header h1{
  font-family:var(--font-display); font-weight:700; color:var(--brand);
  font-size:24px; line-height:1.2; margin:0;
}

/* The three WG signal dots, top right, matching the printed one-pager's own
   header furniture (_shell.css .dots). Same order and same colours, so the page
   that makes the document reads as the same family as the document. */
header .dots{ margin-left:auto; display:flex; gap:9px; }
header .dots span{ width:12px; height:12px; border-radius:50%; }
header .dots .r{ background:#C06E60; }
header .dots .a{ background:#FBC331; }
header .dots .g{ background:#00A049; }

/* The "Selected only" view toggle sits with the other controls. */
.field.toggle .toggle-in{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  height:38px; white-space:nowrap;
}

/* The "still selected" tail. Visually quieter than the matches above it, and
   labelled, so nobody reads it as part of the search result. It exists so the
   tray's count and the visible rows never disagree. */
tr.tail-head td{
  background:#eef2f7; color:#5b6b7f;
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:6px 10px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
tr.tail-row td{ color:#6b7280; }
tr.tail-row td:first-child{ color:inherit; }

/* Two actions now. The map one is deliberately inert until the renderer
   exposes a team-map endpoint, and looks inert rather than pretending. */
.tray-right{ display:flex; gap:10px; align-items:center; }
.tray-right button:disabled{ opacity:.45; cursor:not-allowed; }
#go-map{ background:var(--paper); color:var(--brand); border:1px solid var(--brand); }

/* The output toggle is disabled until 2 or more are selected. Grey the whole
   block, not just the native control, so the reason reads at a glance. */
.tray-mid:disabled{ opacity:.45; }
.tray-mid:disabled label{ cursor:default; }
#mode-hint{
  font-family:var(--font-body); font-weight:400; font-size:11px;
  color:var(--muted, #6b7280); text-transform:none; letter-spacing:0;
}
#mode-hint:not(:empty){ margin-left:6px; }

/* --- the scrolling middle --- */
main{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  padding:16px 22px 0; overflow:hidden;
}

.controls{flex:none; display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.field{display:flex; flex-direction:column; gap:4px; flex:1 1 260px; max-width:420px}
.field span{
  font-family:var(--font-display); font-weight:600; color:var(--brand-bright);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
}
.field input,.field select{
  font:inherit; color:inherit; background:var(--paper);
  border:1px solid var(--rule); border-radius:8px; padding:8px 11px;
}
.field input:focus,.field select:focus{outline:2px solid var(--brand-bright); outline-offset:1px}

/* --- the team picker (type-to-filter combobox) --- */
.combo{position:relative; display:flex; flex-direction:column}
.combo-list{
  position:absolute; top:100%; left:0; right:0; z-index:30;
  margin:3px 0 0; padding:4px; list-style:none;
  background:var(--paper); border:1px solid var(--rule); border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  max-height:320px; overflow-y:auto;
}
.combo-list li{padding:7px 10px; border-radius:6px; cursor:pointer; font-size:14px}
.combo-list li:hover,.combo-list li.active{background:var(--brand-bright); color:#fff}
.combo-list li.empty,.combo-list li.empty:hover{background:none; color:var(--muted); cursor:default}

.status{flex:none; margin:0 0 8px; color:var(--muted); font-size:13.5px}

/* --- the roster, the only scrolling region --- */
.roster{
  flex:1 1 auto; min-height:0; max-height:100%; overflow-y:auto; overflow-x:auto;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
}
.roster table{border-collapse:collapse; width:100%; font-size:14.5px}
/* Sticky inside the scroll box, so the column names are still there at row 600. */
.roster thead th{
  position:sticky; top:0; z-index:1;
  background:var(--tint); color:var(--brand-deep); text-align:left;
  font-family:var(--font-display); font-weight:600;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:9px 12px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
/* Tight rows and a zebra stripe. At 725 entries the eye tracks the stripe, not
   the row height, so the rows can stay compact and still be readable. */
.roster tbody td{padding:6px 12px; border-bottom:1px solid #EEF3F8; vertical-align:middle}
.roster tbody tr:nth-child(even){background:#F8FBFD}
.roster tbody tr:hover{background:var(--tint)}
.roster td.pick,.roster th.pick{width:38px; padding-left:14px; padding-right:0}
.roster td.pick input{width:16px; height:16px; cursor:pointer; accent-color:var(--brand)}
/* Fixed width font so a column of codes lines up down the page. */
.roster tbody td:nth-child(3){
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700; font-size:13.5px; white-space:nowrap;
}
.roster tbody td:nth-child(4){color:var(--muted)}
.roster tbody td:nth-child(5){color:var(--muted); font-size:13.5px}

/* --- the tray, always on screen --- */
.tray{
  flex:none; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:12px 22px; background:var(--paper); border-top:1px solid var(--rule);
  box-shadow:0 -2px 10px rgba(11,51,87,.06);
}
.tray-left{display:flex; align-items:center; gap:12px}
.tray-left strong{font-family:var(--font-display); font-weight:700; color:var(--brand); font-size:16px}
.tray-mid{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--rule); border-radius:9px; padding:4px 14px 8px; margin:0;
}
.tray-mid legend{
  font-family:var(--font-display); font-weight:600; color:var(--brand-bright);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:0 4px;
}
.tray-mid label{display:inline-flex; align-items:center; gap:6px; font-size:14.5px; cursor:pointer}
.tray-mid input{accent-color:var(--brand)}
.tray-right{margin-left:auto}

button{
  font:inherit; font-family:var(--font-display); font-weight:600;
  border:1px solid var(--rule); border-radius:8px; background:var(--paper);
  color:var(--brand-deep); padding:8px 16px; cursor:pointer;
}
button:hover{background:var(--tint)}
#go{background:var(--brand); border-color:var(--brand); color:#fff; padding:9px 26px; font-size:16px}
#go:hover:not(:disabled){background:var(--brand-bright)}
button:disabled{opacity:.45; cursor:not-allowed}
button:disabled:hover{background:var(--paper)}
#go:disabled:hover{background:var(--brand)}

/* --- progress and failures, below the tray --- */
#progress{
  flex:none; margin:0; padding:9px 22px; background:var(--tint);
  color:var(--brand-deep); font-weight:700; font-size:14px;
}
.failures{
  flex:none; margin:0; padding:10px 22px 10px 42px;
  max-height:22vh; overflow-y:auto;
  background:#FBF1EF; border-top:1px solid var(--wg-red);
  color:#6B2E22; font-size:14px;
}
.failures li{margin:2px 0}
[hidden]{display:none}

@media (max-width:720px){
  header{padding:10px 14px; gap:12px}
  header .logo{width:104px;height:42px}
  header h1{font-size:19px}
  main{padding:12px 14px 0}
  .tray{gap:12px; padding:10px 14px}
  .tray-right{margin-left:0; width:100%}
  #go{width:100%}
  .roster tbody td:nth-child(4){display:none}
  .roster thead th:nth-child(4){display:none}
}

/* A56.17 Team Map controls */
.tray-map { display: flex; align-items: center; gap: .75rem; border: 1px solid #d8dee6;
            border-radius: 6px; padding: .35rem .75rem; }
.tray-map legend { font-size: .75rem; color: #5a6675; padding: 0 .35rem; }
.tray-map .field { margin: 0; }
.tray-map input[type="text"] { min-width: 15rem; }
#leader-warn { border: none; border-radius: 8px; padding: 1.25rem 1.5rem; max-width: 32rem;
               box-shadow: 0 8px 32px rgba(0, 0, 0, .25); }
#leader-warn::backdrop { background: rgba(0, 0, 0, .4); }
#leader-warn h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
#leader-warn p { margin: 0; }
.dialog-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1rem; }

/* A56.17 guest marking: selected, but not on the chosen team.
   FUCHSIA on Mitch's call (2026-08-15), chosen over cyan. It reads as "look at
   me" without reading as "error": a guest is legitimate, since the team dropdown
   is a way to POPULATE a list and the list is then mixed and matched on purpose.
   The only real risk is the guest nobody noticed, so this is a flag, not a
   warning, and the rendered map is unchanged. */
tr.guest-row td { background: #fdeef6; }
tr.guest-row.tail-row td { background: #fbe0ef; }
.guest-chip { display: inline-block; margin-right: .5rem; padding: 0 .4rem;
              border-radius: 3px; background: #a61e6d; color: #fff;
              font-size: .7rem; font-weight: 700; letter-spacing: .03em;
              text-transform: uppercase; vertical-align: 1px; }
.guest-note { margin-left: .75rem; padding: .15rem .5rem; border-radius: 3px;
              background: #fdeef6; color: #a61e6d; font-size: .85rem; font-weight: 700; }

/* ---- Portal Gate sign-in (2026-09-08) ------------------------------------ */
.gate { max-width: 26rem; margin: 3rem auto; padding: 2rem;
        border: 1px solid #d9d9d4; border-radius: 10px; background: #fff; }
.gate h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.gate p { margin: 0 0 1rem; }
.gate-label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; }
.gate input { width: 100%; box-sizing: border-box; padding: .55rem .7rem; margin-bottom: 1rem;
              border: 1px solid #c9c9c4; border-radius: 6px; font-size: 1rem; }
.gate-btn { padding: .55rem 1.1rem; border: 0; border-radius: 6px;
            background: #00669a; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }
.gate-btn:disabled { opacity: .55; cursor: default; }
.gate-error { margin-top: 1rem; padding: .6rem .75rem; border-radius: 6px;
              background: #fdecea; color: #8a1c12; font-size: .9rem; }