/* =========================================================
   OMNI KARTING — member portal (demo)
   Loaded on top of style.css
   ========================================================= */

/* ---- Login ---- */
.portal-login {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 3rem var(--gut);
}
.login-card {
  width: min(430px, 100%);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(170deg, var(--ink-700), var(--ink-800));
  box-shadow: var(--shadow);
}
.login-card h1 { font-size: var(--step-2); margin-bottom: 0.35rem; }
.login-card .sub { color: var(--text-mute); font-size: 0.92rem; margin-bottom: 1.75rem; }
.login-card .field + .field { margin-top: 1rem; }
.login-card .btn { margin-top: 1.5rem; }
.login-hint {
  margin-top: 1.25rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 197, 49, 0.35);
  background: rgba(255, 197, 49, 0.05);
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---- Shell ---- */
.portal { display: none; }
.portal[data-active="true"] { display: block; }

.portal-bar {
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}
.portal-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}
.portal-bar__who { margin-right: auto; }
.portal-bar__who strong { display: block; font-size: 1.05rem; color: #fff; }
.portal-bar__who span {
  font-family: "UbuntuMono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none;
  padding: 0.85rem 1.05rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-mute);
  font-family: inherit;
  font-size: 0.94rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--flame); }

.panel { display: none; padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.panel[data-active="true"] { display: block; }

/* ---- Member card ---- */
.member-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 61, 20, 0.3);
  background:
    radial-gradient(520px 220px at 92% 0%, rgba(255, 61, 20, 0.22), transparent 70%),
    repeating-linear-gradient(-68deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 20px),
    linear-gradient(165deg, var(--ink-600), var(--ink-800));
}
.member-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.member-card__name { font-size: var(--step-2); margin: 0.4rem 0 0.1rem; }
.member-card__id {
  font-family: "UbuntuMono", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.member-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: "UbuntuMono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.member-card__foot b { color: var(--text); }

/* ---- Progress ---- */
.progress {
  height: 7px;
  border-radius: 99px;
  background: var(--ink-500);
  overflow: hidden;
  margin-top: 0.85rem;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--flame), var(--amber));
  transition: width 0.8s var(--ease);
}

/* ---- Chart ---- */
.chart-card {
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-800);
}
.chart-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.chart-card h3 { margin: 0; }
.chart-wrap { overflow-x: auto; }
.chart { width: 100%; min-width: 460px; height: 210px; display: block; }
.chart .grid-line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.chart .axis-label {
  fill: #82828f;
  font-family: "UbuntuMono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.chart .series { fill: none; stroke: var(--flame); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: url(#lapFade); }
.chart .dot { fill: var(--ink-900); stroke: var(--flame); stroke-width: 2.5; }
.chart .dot-best { fill: var(--amber); stroke: var(--amber); }

/* ---- Session rows ---- */
.lap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.lap-chip {
  font-family: "UbuntuMono", monospace;
  font-size: 0.78rem;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-900);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.lap-chip.is-best { border-color: var(--amber); color: var(--amber); }

.rank-you td { background: rgba(255, 61, 20, 0.09); }
.rank-you th[scope="row"] { color: #fff; }

.delta-up { color: #35d07f; }
.delta-down { color: #ff6a6a; }

/* ---- Event rows ---- */
.event-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.event-row:last-child { border-bottom: 0; }
.event-row__date {
  flex: none;
  width: 62px;
  text-align: center;
  padding: 0.5rem 0;
  border-radius: var(--radius-sm);
  background: var(--ink-600);
  border: 1px solid var(--line);
  font-family: "UbuntuMono", monospace;
  line-height: 1.15;
}
.event-row__date b { display: block; font-size: 1.25rem; color: #fff; }
.event-row__date span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.event-row h4 { margin-bottom: 0.2rem; }
.event-row p { margin: 0; font-size: 0.92rem; color: var(--text-dim); }
.event-row__act { margin-left: auto; flex: none; }

@media (max-width: 620px) {
  .event-row { flex-wrap: wrap; }
  .event-row__act { margin-left: 0; width: 100%; }
  .event-row__act .btn { width: 100%; }
}