@charset "utf-8";
/* ==========================================================================
   ASTIN — product demonstration application
   Loaded only on the demo page.
   ========================================================================== */

.is-demo { background: var(--surface-2); }

.demo__head { background: var(--surface); border-bottom: 1px solid var(--line); padding: clamp(20px, 3vw, 32px) 0 0; }
.demo__title { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; }
.demo__title .eyebrow { margin-bottom: 0.4rem; }

.demo__toolbar {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center;
  padding: 18px 0 16px; margin-top: 14px; border-top: 1px solid var(--line);
}
.demo__tool { display: flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
.demo__tool--end { margin-left: auto; gap: 8px; }
/* The role/scenario switches must never widen the page: they scroll instead. */
.demo__tool > .seg { flex: 0 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.demo__tool > .demo__label { flex: 0 0 auto; }
.demo__label {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--slate);
}

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.seg__b {
  background: none; border: 0; border-right: 1px solid var(--line-strong);
  padding: 7px 12px; font-size: 0.83rem; color: var(--slate); cursor: pointer; white-space: nowrap;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.seg__b:last-child { border-right: 0; }
.seg__b { flex: 0 0 auto; }
.seg__b:hover:not(.on) { background: var(--surface-2); color: var(--ink); }
.seg__b.on { background: var(--ink); color: #fff; }
.seg__b.on--stay { background: var(--teal); }
.seg__b.on--earn { background: var(--accent-strong); }
.seg__b.on--hold { background: var(--slate); }
.seg__b[disabled] { opacity: 0.45; cursor: not-allowed; }
.seg--sm .seg__b { padding: 5px 10px; font-size: 0.74rem; font-family: var(--mono); letter-spacing: 0.05em; }

.demo__mini {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 6px 11px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--slate); cursor: pointer;
}
.demo__mini:hover { border-color: var(--ink); color: var(--ink); }
.demo__mini.on { background: var(--teal); border-color: var(--teal); color: #fff; }

.demo__body { padding: clamp(20px, 3vw, 32px) 0 clamp(40px, 6vw, 72px); }
.demo__banner {
  display: flex; gap: 11px; align-items: flex-start; background: var(--amber-soft);
  border: 1px solid #E6D3A6; border-radius: var(--r); padding: 12px 16px;
  font-size: 0.87rem; color: #6B4E0C; margin-bottom: 18px;
}
.demo__dot2 { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-top: 7px; }

.demo__tabs {
  display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line);
  margin-bottom: 20px; -webkit-overflow-scrolling: touch;
}
.demo__tab {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px;
  font-size: 0.88rem; color: var(--slate); cursor: pointer; white-space: nowrap;
}
.demo__tab:hover { color: var(--ink); }
.demo__tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }

.demo__panelwrap { transition: opacity 0.15s var(--ease); }
.demo__panelwrap.busy { opacity: 0.55; pointer-events: none; }
.demo__grid { display: grid; gap: 18px; }
.demo__grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) {
  .demo__grid--2 { grid-template-columns: 1fr; }
  .demo__tool--end { margin-left: 0; }
}

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 2vw, 22px); }
.panel__h {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); font-weight: 400; margin-bottom: 12px;
}
.panel__sub {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--slate); font-weight: 400; margin: 20px 0 10px;
}

.kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.kpi { border-top: 2px solid var(--ink); padding-top: 9px; }
.kpi b { display: block; font-size: 1.28rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi span {
  display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--slate); margin-top: 5px;
}

.pill {
  display: inline-block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 3px; background: var(--surface-2);
  color: var(--slate); border: 1px solid var(--line); white-space: nowrap;
}
.pill--peak { background: #FCEAE1; color: #A8420F; border-color: #F0C7B2; }
.pill--prime { background: var(--teal-soft); color: var(--teal); border-color: #BCD9D4; }
.pill--standard { background: #EDF1F3; color: var(--slate); border-color: #DCE3E7; }
.pill--blocked { background: #EFEDE7; color: #7A756A; border-color: #DFDACE; }
.pill--stay { background: var(--teal-soft); color: var(--teal); border-color: #BCD9D4; }
.pill--earn { background: #FCEAE1; color: #A8420F; border-color: #F0C7B2; }
.pill--hold { background: #EDF1F3; color: var(--slate); border-color: #DCE3E7; }
.pill--current { background: var(--teal-soft); color: var(--teal); border-color: #BCD9D4; }
.pill--superseded { background: var(--surface-2); color: var(--slate-2); }
.pill--locked { background: #F6EFEF; color: #8A5A55; border-color: #E5D2CF; }
.pill--act { background: var(--ink); color: #fff; border-color: var(--ink); text-transform: none; }
.pill--teal { background: var(--teal); color: #fff; border-color: var(--teal); margin-left: 7px; }

.declist { display: grid; gap: 2px; margin-top: 12px; }
.decrow {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.decrow:last-child { border-bottom: 0; }
.decrow b { display: block; font-size: 0.92rem; font-weight: 500; }
.decrow__meta {
  display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--slate); margin-top: 2px;
}

.rules { list-style: none; margin: 0; padding: 0; }
.rules__i { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.rules__i:last-child { border-bottom: 0; }
.rules__i::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--slate-2); }
.rules__i--warn::before { background: var(--accent); }
.rules__i--info::before { background: var(--teal); }

.meter { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.meter i { display: block; height: 100%; background: var(--teal); }

.checklist { list-style: none; margin: 10px 0 0; padding: 0; }
.checklist li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist li.open { color: var(--slate); }
.checklist__i { flex: 0 0 auto; width: 16px; color: var(--teal); font-size: 0.8rem; }
.checklist li.open .checklist__i { color: var(--slate); }

.stagelist { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; }
.stagelist__i { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 0; font-size: 0.8rem; color: var(--slate-2); }
.stagelist__d { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.stagelist__i.done { color: var(--slate); }
.stagelist__i.done .stagelist__d { background: var(--teal); }
.stagelist__i.now { color: var(--ink); font-weight: 500; }
.stagelist__i.now .stagelist__d { background: var(--accent); box-shadow: 0 0 0 3px rgba(212, 87, 31, 0.2); }
.stagelist__i.ext .stagelist__d { border: 2px dashed var(--slate-2); background: transparent; width: 11px; height: 11px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; gap: 2px; padding: 10px 0 10px 14px; border-left: 2px solid var(--line); position: relative; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.timeline li:last-child::before { background: var(--accent); }
.timeline b { font-size: 0.9rem; font-weight: 500; }

.versions { margin-top: 8px; display: grid; gap: 4px; }
.versions__i { display: flex; gap: 10px; align-items: center; font-size: 0.75rem; color: var(--slate); }
.linkbtn { display: block; background: none; border: 0; padding: 2px 0 0; font-size: 0.72rem; color: var(--teal); cursor: pointer; text-decoration: underline; }

.num.neg { color: #A8420F; }
.num.pos { color: var(--teal); }
.num.warn { color: var(--accent-dark); }

@media print {
  .demo__toolbar, .demo__tabs, .demo__mini, .seg, .demo__banner { display: none !important; }
  .panel { border-color: #ccc; break-inside: avoid; }
}

/* Transfer-case creation form and the simulated-identity note */
.demo__roles-note {
  font-size: 0.78rem; line-height: 1.55; color: var(--slate);
  margin: 0 0 4px; padding-bottom: 14px;
}
.openform { margin-top: 12px; }
.openform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.openform__f { display: grid; gap: 5px; }
.openform__l {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate);
}
.inp {
  width: 100%; padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 0.9rem;
}
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 87, 31, 0.14); }