/* =========================================================
   STABLE v2.0.0 · WEBSITE RELEASE
========================================================= */

:root{
  --a33-gold:#c8a86c;
  --a33-gold-soft:#e3d2a8;
  --a33-ink:#eef3ed;
  --a33-muted:#aab6af;
  --a33-surface:#101a16;
  --a33-surface-raised:#182720;
  --a33-rule:rgba(200,168,108,.34);
}

html{
  min-height:100%;
  background:#07100c;
}

body{
  min-height:100dvh;
}

button,
a,
select,
input,
textarea{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(200,168,108,.18);
}


/* =========================================================
   ACCESS JOURNEY & FIRST DUTY
========================================================= */

.access-journey{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

.access-journey li{
  position:relative;
  min-width:0;
  padding:13px 12px 13px 38px;
  border:1px solid rgba(185,147,85,.25);
  background:rgba(6,16,12,.48);
  color:#d7dfd9;
  font-size:12px;
  line-height:1.45;
}

.access-journey li::before{
  content:attr(data-step);
  position:absolute;
  top:12px;
  left:12px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1px solid var(--a33-gold);
  border-radius:50%;
  color:var(--a33-gold-soft);
  font-family:var(--a17-font-data,monospace);
  font-size:9px;
}

.alpha33-first-duty{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px 26px;
  align-items:center;
  margin:0 0 18px;
  padding:18px 20px;
  border:1px solid rgba(200,168,108,.46);
  background:
    linear-gradient(120deg,rgba(44,75,60,.72),rgba(17,31,24,.92)),
    var(--a33-surface);
  box-shadow:0 14px 35px rgba(0,0,0,.24);
}

.alpha33-first-duty-copy{
  min-width:0;
}

.alpha33-first-duty-kicker{
  margin:0 0 5px;
  color:var(--a33-gold);
  font-family:var(--a17-font-data,monospace);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.alpha33-first-duty h2{
  margin:0;
  color:#f0e7d2;
  font-size:clamp(19px,3vw,26px);
}

.alpha33-first-duty-copy > p:last-child{
  margin:7px 0 0;
  color:#c4cec7;
  line-height:1.55;
}

.alpha33-first-duty-steps{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.alpha33-first-duty-steps li{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:#aebbb3;
  font-size:11px;
  letter-spacing:.02em;
}

.alpha33-first-duty-steps li::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid #aab6af;
}

.alpha33-first-duty-steps li.is-complete::before{
  border-color:#82b793;
  background:#82b793;
}

.alpha33-first-duty-steps li.is-current{
  color:#f0e7d2;
}

.alpha33-first-duty-steps li.is-current::before{
  border-color:var(--a33-gold);
  background:var(--a33-gold);
  box-shadow:0 0 0 4px rgba(200,168,108,.13);
}

.alpha33-first-duty .btn{
  min-width:180px;
  margin:0;
}


/* =========================================================
   RESPONSIVE POLISH
========================================================= */

@media(min-width:931px) and (max-width:1180px){
  .command-utilities .london-time{
    display:none;
  }

  .app-utility{
    flex-wrap:wrap;
  }
}

@media(max-width:760px){
  .access-journey,
  .alpha33-first-duty-steps{
    grid-template-columns:1fr;
  }

  .alpha33-first-duty{
    grid-template-columns:1fr;
  }

  .alpha33-first-duty .btn{
    width:100%;
  }

  .alpha33-first-duty-steps{
    grid-column:1;
  }
}

@media(max-width:600px){
  input,
  select,
  textarea,
  .field,
  .locale-select{
    font-size:16px;
  }

  #app{
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }

}

@media(forced-colors:active){
  .access-journey li,
  .alpha33-first-duty{
    border:1px solid CanvasText;
  }

  .alpha33-first-duty-steps li::before,
  .access-journey li::before{
    border:1px solid CanvasText;
  }
}