/* GDS Portal styles for the pages built new in v2: sign in, set password, home.
 * Converted pages keep their own styles; every signed-in page also gets
 * /css/shell.css (shared header) through shell.js.
 */
:root {
  --bg: #1f1f21;
  --bench: #18181a;
  --panel: #262629;
  --panel-2: #2c2c30;
  --line: #343437;
  --line-2: #45454a;
  --text: #f2f2ee;
  --muted: #9b9ba0;
  --dim: #6b6b70;
  --accent: #ccff02;
  --accent-hover: #b8e800;
  --danger: #ff5a67;
  --warn: #ffb547;
  --ok: #4cc38a;
  --font: 'Barlow', system-ui, sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }

/* ---------------------------------------------------------------------------
   Sign in and set password
   Two columns on a wide screen: the helmet on the left, the form on the right.
   --------------------------------------------------------------------------- */
.gate {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
  background: #000;
}
.gate-art {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px;
  background: #000;
}
/* The GDS mark, with a light sweeping across it now and then (like the email signature). */
.gate-art .gds-logo {
  position: absolute; left: 50%; top: 47%; width: min(78%, 620px); height: auto;
  transform: translate(-50%, -50%); overflow: visible;
}
/* A quick white glint with a soft bloom crosses the logo, then a sparkle
   flashes on the corner of the S. Runs 0.8s after load, then every 7s. */
.gate-art .gds-shine { transform: skewX(-24deg) translateX(0); animation: gds-shine 7s .8s infinite; }
.gate-art .gds-shine-2 { animation-delay: .9s; }
@keyframes gds-shine {
  0%   { transform: skewX(-24deg) translateX(0); animation-timing-function: cubic-bezier(.55, .05, .3, 1); }
  15%  { transform: skewX(-24deg) translateX(1900px); }
  100% { transform: skewX(-24deg) translateX(1900px); }
}
.gate-art .gds-twinkle {
  transform: translate(1342px, 14px) scale(0) rotate(0deg);
  transform-box: view-box; opacity: 0;
  animation: gds-twinkle 7s .8s infinite;
}
@keyframes gds-twinkle {
  0%, 11%  { transform: translate(1342px, 14px) scale(0) rotate(0deg); opacity: 0; }
  14%      { transform: translate(1342px, 14px) scale(1) rotate(45deg); opacity: 1; }
  19%      { transform: translate(1342px, 14px) scale(.15) rotate(110deg); opacity: 0; }
  100%     { transform: translate(1342px, 14px) scale(0) rotate(110deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gate-art .gds-shine, .gate-art .gds-twinkle { animation: none; display: none; } }
.gate-art .logo { position: relative; height: 40px; width: auto; align-self: flex-start; }
.gate-art .tagline {
  position: relative; max-width: 30ch; margin: auto 0 0;
  font-family: var(--font-cond); font-weight: 700; font-size: 28px; line-height: 1.1;
  letter-spacing: .01em; color: var(--text);
}
.gate-side {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px clamp(28px, 6vw, 88px);
  background: var(--bg);
  border-left: 1px solid var(--line);
}
.gate-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.gate-title {
  margin: 0; font-family: var(--font-cond); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: .01em; text-transform: uppercase;
}
.gate-sub { margin: -6px 0 6px; font-size: 15px; color: var(--muted); }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.input-wrap { position: relative; }
.gate-input {
  width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--text); font-size: 16px; padding: 13px 64px 13px 14px; outline: none;
  transition: border-color .15s, background .15s;
}
.gate-input:focus { border-color: var(--accent); background: var(--panel-2); }
.gate-input.error { border-color: var(--danger); animation: shake .3s ease; }
.gate-input::placeholder { color: var(--dim); }
.toggle-pw {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 6px;
}
.toggle-pw:hover { color: var(--text); }
.gate-btn {
  width: 100%; background: var(--accent); color: #111; border: 0; border-radius: 8px;
  font-family: var(--font-cond); font-weight: 800; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  padding: 14px; cursor: pointer; transition: background .15s;
}
.gate-btn:hover { background: var(--accent-hover); }
.gate-btn:disabled { opacity: .55; cursor: default; }
.gate-link { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.gate-link:hover { color: var(--text); }
.gate-links { text-align: left; }
.error-msg { font-size: 14px; color: var(--danger); min-height: 20px; }
.error-msg:empty, .ok-msg:empty { min-height: 0; }
.ok-msg { font-size: 14px; color: var(--ok); min-height: 20px; }
.gate-foot { margin-top: 36px; font-size: 12px; color: var(--dim); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

@media (max-width: 860px) {
  .gate { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .gate-art { min-height: 190px; padding: 22px 20px; }
  .gate-art .gds-logo { width: min(74%, 340px); top: 50%; }
  .gate-art .logo { height: 30px; }
  .gate-art .tagline { display: none; }
  .gate-art { min-height: 170px; }
  .gate-side { border-left: 0; border-top: 1px solid var(--line); padding: 28px 20px 40px; justify-content: flex-start; }
  .gate-title { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
   Home
   --------------------------------------------------------------------------- */
.home { max-width: 1240px; margin: 0 auto; padding: 30px 22px 64px; }
.home-hello { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.home-hello h1 {
  margin: 0; font-family: var(--font-cond); font-weight: 800; font-size: 44px; line-height: 1;
  letter-spacing: .005em; text-transform: uppercase;
}
.home-date { color: var(--muted); font-size: 15px; }
.home-today { margin: 12px 0 0; max-width: 70ch; font-size: 17px; color: var(--text); }
.home-today a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.home-today a:hover { color: var(--accent); }
.home-today .quiet { color: var(--muted); }
.denied { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid var(--danger); background: rgba(255, 90, 103, .08); color: var(--text); font-size: 14px; }

.group { margin-top: 38px; }
.group h2 {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
  font-family: var(--font-cond); font-weight: 700; font-size: 20px; letter-spacing: .02em; color: var(--muted);
}
/* Section rule: the helmet center stripe (chalk, lime, chalk), same as the header edge. */
.group h2::after {
  content: ""; flex: 1; height: 7px; opacity: .55;
  background: linear-gradient(to bottom, var(--text) 0 1px, transparent 1px 3px, var(--accent) 3px 4px, transparent 4px 6px, var(--text) 6px 7px);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }

.tile {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 12px;
  min-height: 92px; padding: 15px 16px 14px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.tile:hover { border-color: var(--line-2); background: var(--panel-2); }
.tile h3 {
  grid-column: 1; margin: 0; font-family: var(--font-cond); font-weight: 700; font-size: 21px; line-height: 1.05;
  letter-spacing: .02em; text-transform: uppercase;
}
.tile p { grid-column: 1; margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.tile .count {
  grid-column: 2; grid-row: 1 / span 2; text-align: right; min-width: 3ch;
  font-family: var(--font-cond); font-weight: 700; font-size: 32px; line-height: .95;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.tile .count small { display: block; margin-top: 4px; font-family: var(--font); font-weight: 500; font-size: 12px; color: var(--muted); }
.tile .count:empty { display: none; }
.tile .count.zero { color: var(--dim); }
/* A tile with something waiting on you: lime edge, like a stripe on the shell. */
.tile.attn::before, .tile.flag::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.tile.attn .count { color: var(--accent); }
.tile.flag::before { background: var(--danger); }
.tile.flag .count { color: var(--danger); }
.tile.warn::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; background: var(--warn); }
.tile.warn .count { color: var(--warn); }
.tile .note { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; color: var(--muted); }
.tile.attn .note { color: var(--accent); }

@media (max-width: 600px) {
  .home { padding: 22px 14px 48px; }
  .home-hello h1 { font-size: 34px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
}

/* What needs you: big numbers, each a link */
.home-lead { margin: 12px 0 0; font-size: 17px; }
.home-lead a { color: var(--warn); }
.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 24px; }
.need {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  color: var(--text); text-decoration: none; transition: border-color .15s, background .15s, transform .15s;
}
a.need:hover { background: var(--panel-2); border-color: var(--line-2); transform: translateY(-1px); }
.need::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.need.flag::before { background: var(--danger); }
.need.warn::before { background: var(--warn); }
.need-n { font-family: var(--font-cond); font-weight: 800; font-size: 58px; line-height: .9; font-variant-numeric: tabular-nums; }
.need.flag .need-n { color: var(--danger); }
.need.warn .need-n { color: var(--warn); }
.need.attn .need-n { color: var(--accent); }
.need-label { font-family: var(--font-cond); font-weight: 700; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; color: var(--text); line-height: 1.15; }
.need.quiet-card { flex-direction: row; align-items: center; gap: 12px; }
.need.quiet-card::before { background: var(--ok); }
.need.quiet-card .need-label { color: var(--muted); }
.need-check { width: 30px; height: 30px; border-radius: 50%; background: rgba(76,195,138,.15); color: var(--ok); display: flex; align-items: center; justify-content: center; font-weight: 800; }

.needs-more { margin: 10px 2px 0; font-size: 15px; color: var(--muted); }
.needs-more a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.needs-more a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* A rep's My Orders, wide */
.feature { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.feature-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line); }
.feature-head:hover { background: var(--panel-2); }
.feature-t { font-family: var(--font-cond); font-weight: 800; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; }
.feature-n { font-family: var(--font-cond); font-weight: 800; font-size: 34px; line-height: 1; text-align: right; }
.feature-n small { display: inline; margin-left: 6px; font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--muted); }
.feature-list { display: flex; flex-direction: column; }
.fl-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 20px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line); position: relative; }
.fl-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--danger); }
.fl-row.art::before { background: var(--warn); }
.fl-row:hover { background: var(--panel-2); }
.fl-so { font-weight: 800; letter-spacing: .06em; }
.fl-cust { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-why { font-size: 13.5px; font-weight: 600; color: var(--danger); white-space: nowrap; }
.fl-row.art .fl-why { color: var(--warn); }
.feature-calm { margin: 0; padding: 16px 20px; color: var(--muted); }
.feature-all { display: block; padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.feature-all:hover { text-decoration: underline; }

/* Guides: a plain row of links */
.guides { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 38px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.guides-k { font-family: var(--font-cond); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.guides a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.guides a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 600px) {
  .needs { grid-template-columns: 1fr 1fr; }
  .need-n { font-size: 44px; }
  .need-label { font-size: 15px; }
  .fl-row { grid-template-columns: 70px minmax(0, 1fr); }
  .fl-why { grid-column: 2; white-space: normal; }
}

/* Pinned pages: two across, taller, bigger type. */
.tiles.big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.big .tile { min-height: 132px; padding: 22px 24px; }
.tiles.big .tile h3 { font-size: 28px; }
.tiles.big .tile p { font-size: 15px; }
.tiles.big .tile .count { font-size: 46px; }
@media (max-width: 640px) { .tiles.big { grid-template-columns: 1fr; } .tiles.big .tile { min-height: 0; } }