/* ==========================================================================
   GMS — CONSADA Unified Access Portal
   Design tokens
   Color:  --ink #0B2545 (deep navy)   --pool #0E7C86 (teal, primary accent)
           --lane #F2B134 (lane-rope amber, signature accent, used sparingly)
           --foam #F5F9FA (background)  --mist #C9D6DC (borders/muted text)
   Type:   Display  — Space Grotesk (600/700)
           Body     — Inter (400/500)
           Utility  — IBM Plex Mono (status tags, role codes)
   Signature: the "lane line" — a repeating dashed rule referencing pool
   lane-rope floats, used as the header/content divider and reused as each
   tile's top border on hover.
   ========================================================================== */

:root {
  --ink: #0B2545;
  --pool: #0E7C86;
  --pool-dark: #0A5E66;
  --lane: #F2B134;
  --foam: #F5F9FA;
  --mist: #C9D6DC;
  --danger: #B3261E;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--foam);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.lane-line {
  height: 3px;
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    var(--lane) 0px, var(--lane) 14px,
    transparent 14px, transparent 26px
  );
  opacity: 0.55;
}

/* ---- Shell ---- */
.shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.gms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0 20px;
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.wordmark .mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.wordmark .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pool-dark);
  margin-top: 4px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink);
}

.user-chip a {
  color: var(--pool-dark);
  text-decoration: none;
  font-weight: 500;
}
.user-chip a:hover { text-decoration: underline; }

/* ---- Sign-in card ---- */
.signin-wrap {
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signin-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 12px;
  padding: 40px 36px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(11, 37, 69, 0.04);
}

.signin-card .mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
}

.signin-card .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pool-dark);
  margin: 8px 0 28px;
}

.signin-card p.copy {
  font-size: 14px;
  color: #45566B;
  margin: 0 0 28px;
  line-height: 1.5;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 8px;
  background: var(--pool);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--pool-dark); }

/* ---- Hub / tile grid ---- */
.hub-intro {
  padding: 8px 0 28px;
}

.hub-intro h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 6px;
}

.hub-intro p {
  font-size: 14px;
  color: #45566B;
  margin: 0;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding-bottom: 60px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 10px;
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--pool) 0px, var(--pool) 10px,
    transparent 10px, transparent 18px
  );
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tile:not(.disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 37, 69, 0.08);
}
.tile:not(.disabled):hover::before { opacity: 1; }

.tile.disabled {
  cursor: default;
  color: #90A0AD;
}

.tile-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.tile.disabled .tile-name { color: #90A0AD; }

.tile-desc {
  font-size: 13px;
  color: #5A6B7C;
  line-height: 1.4;
}

.tile-status {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 4px;
}
.tile-status.live {
  background: rgba(14, 124, 134, 0.10);
  color: var(--pool-dark);
}
.tile-status.coming_soon {
  background: rgba(144, 160, 173, 0.15);
  color: #6B7A87;
}

.empty-state {
  padding: 60px 0;
  text-align: center;
  color: #5A6B7C;
  font-size: 14px;
}

/* ---- Error page ---- */
.error-wrap {
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 12px;
  padding: 40px 36px;
  text-align: center;
}

.error-card .code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 14px;
}

.error-card h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 10px;
}

.error-card p {
  font-size: 14px;
  color: #45566B;
  line-height: 1.5;
  margin: 0 0 26px;
}

@media (max-width: 520px) {
  .gms-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tile-grid { grid-template-columns: 1fr; }
}