/* ==========================================================================
   Aletheia admin portal
   Dark operations surface — deliberately a different room from the
   storefront, so it is never unclear which one you are looking at.
   ========================================================================== */

.alw-portal {
  --p-bg:      #06121F;
  --p-surface: #0B1D30;
  --p-raised:  #10273F;
  --p-line:    rgba(198, 165, 92, .18);
  --p-line2:   rgba(255, 255, 255, .07);
  --p-gold:    #C6A55C;
  --p-gilt:    #F0DCA8;
  --p-ink:     #EEF2F6;
  --p-mute:    #8C9BAB;
  --p-good:    #57C08A;
  --p-warn:    #E0B049;
  --p-bad:     #E0685F;

  margin: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: Jost, Futura, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.alw-portal *,
.alw-portal *::before,
.alw-portal *::after { box-sizing: border-box; }

.alw-portal a { color: inherit; }

/* theme.json paints headings navy for the storefront. The portal's surfaces
   are navy, so every heading here needs its colour stated explicitly or it
   disappears into the background. */
.alw-portal :is(h1, h2, h3, h4) { color: var(--p-ink); }
.alw-portal p, .alw-portal li, .alw-portal dd, .alw-portal td { color: inherit; }

.alw-skip {
  position: absolute;
  left: -9999px;
}
.alw-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 99;
  background: var(--p-gold);
  color: #06121F;
  padding: .75rem 1rem;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ sidebar */

.alw-pside {
  background: var(--p-surface);
  border-right: 1px solid var(--p-line2);
  padding: 1.5rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.alw-pbrand {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 0 1.25rem;
  text-decoration: none;
}
.alw-pbrand span { display: flex; flex-direction: column; line-height: 1.15; }
.alw-pbrand strong {
  font-family: Cinzel, Georgia, serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--p-ink);
}
.alw-pbrand em {
  font-style: normal;
  font-size: .625rem;
  letter-spacing: .28em;
  color: var(--p-gold);
}

.alw-pnav { display: flex; flex-direction: column; }

.alw-pnav__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  text-decoration: none;
  color: var(--p-mute);
  font-size: .9375rem;
  border-left: 3px solid transparent;
  transition: color .18s, background-color .18s, border-color .18s;
}
.alw-pnav__item:hover { color: var(--p-ink); background: rgba(255, 255, 255, .03); }
.alw-pnav__item.is-on {
  color: var(--p-gilt);
  border-left-color: var(--p-gold);
  background: rgba(198, 165, 92, .09);
}

.alw-pside__foot {
  margin-top: auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.alw-pside__foot a {
  color: var(--p-mute);
  text-decoration: none;
  font-size: .8125rem;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.alw-pside__foot a:hover { color: var(--p-gilt); }

/* --------------------------------------------------------------------- main */

.alw-pmain {
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 4rem;
  min-width: 0;
}

.alw-phead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.alw-phead h1 {
  margin: .25rem 0 0;
  color: var(--p-ink);
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: .03em;
}
.alw-peyebrow {
  margin: 0;
  font-size: .625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--p-gold);
}

.alw-pout {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--p-line);
  border-radius: 3px;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-mute);
  text-decoration: none;
  white-space: nowrap;
}
.alw-pout:hover { color: var(--p-gilt); border-color: var(--p-gold); }

.alw-pnote {
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  color: var(--p-mute);
  max-width: 80ch;
}
.alw-pmuted { color: var(--p-mute); }
.alw-pempty { color: var(--p-mute); padding: 2rem 0; text-align: center; }

/* -------------------------------------------------------------------- stats */

.alw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .875rem;
  margin-bottom: 1.5rem;
}

.alw-stat {
  background: var(--p-surface);
  border: 1px solid var(--p-line2);
  border-radius: 6px;
  padding: 1.125rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.alw-stat__label {
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-mute);
}
.alw-stat__value {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  font-weight: 500;
  color: var(--p-gilt);
  font-variant-numeric: tabular-nums;
}
.alw-stat__note { font-size: .75rem; color: var(--p-mute); }

.alw-delta { font-variant-numeric: tabular-nums; }
.alw-delta.is-up { color: var(--p-good); }
.alw-delta.is-down { color: var(--p-bad); }

/* -------------------------------------------------------------------- range */

.alw-prange { display: flex; gap: .375rem; margin: 0 0 1rem; justify-content: flex-end; }
.alw-prange__btn {
  min-width: 48px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--p-line2);
  border-radius: 3px;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--p-mute);
  text-decoration: none;
}
.alw-prange__btn:hover { color: var(--p-ink); border-color: var(--p-line); }
.alw-prange__btn.is-on {
  color: var(--p-gilt);
  border-color: var(--p-gold);
  background: rgba(198, 165, 92, .12);
}

/* -------------------------------------------------------------------- cards */

.alw-card {
  background: var(--p-surface);
  border: 1px solid var(--p-line2);
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  min-width: 0;
}

.alw-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.alw-card__head h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--p-ink);
}
.alw-card__head p { margin: .125rem 0 0; font-size: .75rem; color: var(--p-mute); }
.alw-card__fig {
  font-size: 1.375rem;
  color: var(--p-gilt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alw-plink {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-gold);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.alw-plink:hover { color: var(--p-gilt); }

.alw-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.25rem;
}

/* ------------------------------------------------------------------- charts */

.alw-chart { width: 100%; height: auto; display: block; overflow: visible; }
.alw-cg { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.alw-ct { fill: #7E8C9B; font-size: 11px; font-family: Jost, system-ui, sans-serif; }
.alw-ct--y { text-anchor: end; }
.alw-cline { fill: none; stroke: #C6A55C; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.alw-cbar { fill: #C6A55C; }
.alw-cbar:hover { fill: #F0DCA8; }
.alw-hit { fill: transparent; cursor: crosshair; }
.alw-cdot { fill: #F0DCA8; stroke: #0B1D30; stroke-width: 2; opacity: 0; }
.alw-cdot.is-on { opacity: 1; }

.alw-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: #04101E;
  border: 1px solid var(--p-line);
  border-radius: 4px;
  padding: .5rem .625rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--p-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  white-space: nowrap;
}
.alw-tip strong { display: block; color: var(--p-gilt); font-weight: 500; }
.alw-tip span { color: var(--p-mute); }

/* ------------------------------------------------------------------- tables */

.alw-scrollx { overflow-x: auto; }

.alw-ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.alw-ptable th {
  text-align: left;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-mute);
  font-weight: 500;
  padding: 0 .75rem .625rem 0;
  border-bottom: 1px solid var(--p-line2);
  white-space: nowrap;
}
.alw-ptable td {
  padding: .75rem .75rem .75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  vertical-align: middle;
}
.alw-ptable tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.alw-ptable a { color: var(--p-gilt); text-decoration: none; }
.alw-ptable a:hover { text-decoration: underline; }
.alw-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Status carries an icon glyph as well as colour — never colour alone. */
.alw-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6875rem;
  letter-spacing: .06em;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.alw-pill::before { font-size: .8em; }
.alw-pill--good { color: var(--p-good); }
.alw-pill--good::before { content: "\2713"; }
.alw-pill--warning { color: var(--p-warn); }
.alw-pill--warning::before { content: "\25CF"; }
.alw-pill--serious { color: #E08A49; }
.alw-pill--serious::before { content: "\21BA"; }
.alw-pill--critical { color: var(--p-bad); }
.alw-pill--critical::before { content: "\2715"; }
.alw-pill--muted { color: var(--p-mute); }
.alw-pill--muted::before { content: "\2013"; }

/* -------------------------------------------------------------- top products */

.alw-tplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.alw-tp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name val" "bar bar";
  gap: .25rem .75rem;
  align-items: center;
}
.alw-tp__name {
  grid-area: name;
  font-size: .875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alw-tp__val {
  grid-area: val;
  text-align: right;
  font-size: .875rem;
  color: var(--p-gilt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.alw-tp__val em { display: block; font-style: normal; font-size: .6875rem; color: var(--p-mute); }
.alw-tp__bar {
  grid-area: bar;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.alw-tp__bar i { display: block; height: 100%; background: var(--p-gold); border-radius: 3px; }

/* ----------------------------------------------------------------- settings */

.alw-slist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
.alw-slist a {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  min-height: 76px;
  border: 1px solid var(--p-line2);
  border-radius: 5px;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.alw-slist a:hover { border-color: var(--p-gold); background: rgba(198, 165, 92, .06); }
.alw-slist strong { font-weight: 500; color: var(--p-gilt); }
.alw-slist span { font-size: .75rem; color: var(--p-mute); }

/* ------------------------------------------------------------------- focus */

.alw-portal a:focus-visible,
.alw-portal button:focus-visible {
  outline: 2px solid var(--p-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  .alw-split { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .alw-portal { grid-template-columns: 1fr; }
  .alw-pside {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--p-line2);
  }
  .alw-pbrand { padding: 0; flex: 0 0 auto; }
  .alw-pnav { flex-direction: row; gap: .25rem; }
  .alw-pnav__item {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0 .75rem;
    white-space: nowrap;
    border-radius: 3px;
  }
  .alw-pnav__item.is-on { border-left: 0; border-bottom-color: var(--p-gold); }
  .alw-pside__foot { display: none; }
  .alw-pmain { padding-top: 1.25rem; }
  .alw-prange { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .alw-portal * { transition: none !important; }
}

/* --------------------------------------------------------------- complaints */

.alw-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--p-gold);
  color: #06121F;
  font-size: .6875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.alw-clist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }

.alw-citem {
  border: 1px solid var(--p-line2);
  border-left: 3px solid var(--p-warn);
  border-radius: 5px;
  padding: 1rem 1.125rem 1.125rem;
  background: var(--p-raised);
}
.alw-citem.is-done { border-left-color: var(--p-good); opacity: .72; }

.alw-citem__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-bottom: .5rem;
}
.alw-cref {
  font-family: Jost, system-ui, sans-serif;
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--p-gilt);
  font-variant-numeric: tabular-nums;
}
.alw-ctype { font-size: .8125rem; color: var(--p-ink); }
.alw-cdate { font-size: .75rem; color: var(--p-mute); margin-left: auto; }

.alw-citem__who { font-size: .8125rem; color: var(--p-mute); margin-bottom: .625rem; }
.alw-citem__who a { color: var(--p-gilt); text-decoration: none; }
.alw-citem__who a:hover { text-decoration: underline; }

.alw-citem__msg {
  margin: 0 0 .875rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--p-ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.alw-cwarn {
  margin: 0 0 .75rem;
  font-size: .75rem;
  color: var(--p-bad);
}

.alw-cact { margin: 0; }
.alw-cbtn2 {
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--p-line);
  border-radius: 3px;
  background: transparent;
  color: var(--p-gilt);
  font-family: inherit;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.alw-cbtn2:hover { background: rgba(198, 165, 92, .12); border-color: var(--p-gold); }

/* ------------------------------------------------------------------- login */

.alw-portal--login {
  display: block;
  min-height: 100vh;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(37, 99, 165, .28) 0%, rgba(6, 18, 31, 0) 68%),
    var(--p-bg);
}

.alw-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.alw-login__panel {
  width: min(420px, 100%);
  background: var(--p-surface);
  border: 1px solid var(--p-line2);
  border-top: 3px solid var(--p-gold);
  border-radius: 6px;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.alw-login__mark {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--p-line2);
}
.alw-login__mark span { display: flex; flex-direction: column; line-height: 1.2; }
.alw-login__mark strong {
  font-family: Cinzel, Georgia, serif;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--p-ink);
}
.alw-login__mark em {
  font-style: normal;
  font-size: .625rem;
  letter-spacing: .3em;
  color: var(--p-gold);
}

.alw-login h1 {
  margin: 0 0 1.25rem;
  font-family: Cinzel, Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .03em;
  color: var(--p-ink);
}

.alw-login__msg { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--p-mute); }
.alw-login__msg strong { color: var(--p-gilt); }

.alw-login__error {
  margin: 0 0 1.25rem;
  padding: .75rem .875rem;
  border: 1px solid rgba(224, 104, 95, .5);
  border-radius: 4px;
  background: rgba(224, 104, 95, .08);
  color: #F3B0AA;
  font-size: .875rem;
}

.alw-login__field { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .375rem; }
.alw-login__field label {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-mute);
}
.alw-login__field input {
  min-height: 48px;
  padding: .75rem .875rem;
  border: 1px solid var(--p-line2);
  border-radius: 3px;
  background: var(--p-bg);
  color: var(--p-ink);
  font-size: 16px;
  font-family: inherit;
}
.alw-login__field input:focus-visible {
  outline: 2px solid var(--p-gold);
  outline-offset: 2px;
  border-color: var(--p-gold);
}

.alw-login__remember { margin: 0 0 1.25rem; font-size: .8125rem; color: var(--p-mute); }
.alw-login__remember label { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; cursor: pointer; }

.alw-login__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--p-gold);
  border-radius: 3px;
  background: var(--p-gold);
  color: #06121F;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.alw-login__btn:hover { background: var(--p-gilt); border-color: var(--p-gilt); }

.alw-login__actions {
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.alw-login__alt {
  color: var(--p-mute);
  font-size: .8125rem;
  text-decoration: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.alw-login__alt:hover { color: var(--p-gilt); text-decoration: underline; }