/*
 * Navy STTR1, the same palette and the same shapes as the product walkthrough
 * (demonstration 7) and the arbitration console (demonstration 6). That one
 * takes the values from MUI; this page has no framework, so they are written
 * here as custom properties.
 *
 * Source of the values: demo-07/src/theme.js, `brand`.
 */

:root {
  --navy: #15263b;
  --navy-rgb: 21, 38, 59;
  --purple: #2f1460;
  --green: #36d791;
  --green-dark: #1c7a4a;
  --orange: #f67d41;
  --red: #b3261e;
  --amber: #b45309;

  --paper: #ffffff;
  --canvas: #eeeeee;
  --grey50: #fafafa;
  --grey100: #f5f5f5;
  --grey200: #eeeeee;
  --grey300: #e0e0e0;
  --grey500: #9e9e9e;
  --grey700: #616161;
  --grey900: #212121;

  --header-gradient: linear-gradient(90deg, #15263b 0%, #2f1460 35%, #15263b 100%);
  --hero-gradient: linear-gradient(29deg, #15263b 56%, #36d791 84%);

  --r: 10px;
  --r-card: 12px;
  --border: 1px solid #ececf3;
  --shadow: 0 1.8px 2.2px rgba(0,0,0,.03), 0 3.7px 5.3px rgba(0,0,0,.045), 0 12.5px 10px rgba(0,0,0,.05);

  --font: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--grey900); font-family: var(--font); -webkit-font-smoothing: antialiased; }
code, .mono { font-family: var(--mono); }

/* Green rather than amber. Every other demonstration's strip warns that what
   follows is prepared; this one states the opposite, so it should not look
   like a warning. */
#liveNotice {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; background: #10432c; color: #d7f7e6;
  font: 500 12px/1.45 var(--font); letter-spacing: .02em;
}
#liveNotice .dot { color: #3ddc84; font-size: 10px; }
#liveNotice strong { color: #fff; font-weight: 700; }

.appbar {
  height: 64px; background: var(--navy); border-bottom: 1px solid #9e9e9e;
  color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  position: sticky; top: 0; z-index: 60;
}
.appbar img { height: 40px; width: auto; display: block; }
.appbar .title { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.85); }
.appbar .spacer { flex: 1; }
.chip {
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 13px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); white-space: nowrap;
}
.chip.health.up { background: rgba(54,215,145,.16); border-color: rgba(54,215,145,.45); color: #8ff0c4; }
.chip.health.down { background: rgba(255,92,102,.16); border-color: rgba(255,92,102,.45); color: #ffb3b8; }

.shell { display: grid; grid-template-columns: 260px minmax(0,1fr) 340px; align-items: start; }

/* ---- sidebar, the same idea as the walkthrough's workflow list ---------- */

.sidebar {
  background: var(--paper); border-right: 1px solid var(--grey300);
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto;
  padding: 16px 0 20px; display: flex; flex-direction: column;
}
.side-head {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grey500); padding: 0 18px 10px;
}
.side-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  font-size: 13px; color: var(--grey700); cursor: pointer; text-decoration: none;
  border-left: 3px solid transparent; transition: background .12s, color .12s;
}
.side-item:hover { background: var(--grey50); color: var(--grey900); }
.side-item.active { background: rgba(var(--navy-rgb), .06); color: var(--navy); font-weight: 500; border-left-color: var(--navy); }
.side-item .ic { color: var(--grey500); font-size: 13px; width: 16px; text-align: center; }
.side-item.active .ic { color: var(--green-dark); }
.side-foot {
  margin-top: auto; padding: 14px 18px 0; font-size: 11.5px; line-height: 1.55;
  color: var(--grey500); border-top: 1px solid var(--grey200);
}

.content { padding: 22px 24px 48px; min-width: 0; }

/* ---- hero -------------------------------------------------------------- */

.hero {
  background: var(--hero-gradient); color: #fff;
  border-radius: var(--r-card); padding: 26px 30px; box-shadow: var(--shadow);
}
.hero h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.hero p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; max-width: 700px; color: rgba(255,255,255,.9); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.hero-tags span {
  font-size: 12px; font-weight: 500; background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 14px;
}

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

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 20px; }
.stat {
  background: var(--paper); border: var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 14px;
}
.stat .glyph { width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r); display: grid; place-items: center; font-size: 18px; color: #fff; }
.g-navy { background: var(--navy); } .g-green { background: var(--green); }
.g-purple { background: var(--purple); } .g-orange { background: var(--orange); }
.stat b { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; word-break: break-word; }
.stat span { display: block; font-size: 12.5px; color: var(--grey700); margin-top: 2px; }
@media (max-width: 1400px) { .stats { grid-template-columns: repeat(2,1fr); } }

.section-title { font-size: 14px; font-weight: 700; margin: 28px 0 14px; letter-spacing: -.01em; }

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

.card {
  background: var(--paper); border: var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 16px; scroll-margin-top: 78px;
}
.card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.card-h h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.num {
  flex: 0 0 26px; height: 26px; border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--grey700); max-width: 72ch; }

.row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--grey700); flex: 1 1 240px; }
.row input { font: inherit; font-size: 13px; font-family: var(--mono); border: 1px solid var(--grey300); border-radius: 8px; padding: 9px 11px; }
.row input:focus { outline: 2px solid rgba(var(--navy-rgb), .35); outline-offset: 1px; }

.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn { font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 19px; padding: 8px 20px; border: 1px solid var(--grey300); background: var(--paper); color: var(--grey900); }
.btn:hover { background: var(--grey50); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: #1d3352; }
.btn.ghost { background: transparent; color: var(--grey700); }
.hint { font-size: 12px; color: var(--grey500); }
.hint .good { color: var(--green-dark); font-weight: 600; }
.hint .bad { color: var(--red); font-weight: 600; }

.out { margin-top: 14px; font-size: 13px; line-height: 1.6; }
.out:empty { margin: 0; }
.out.busy { color: var(--grey500); font-style: italic; }
.out.ok { border-left: 3px solid var(--green); padding-left: 14px; }
.out.no { border-left: 3px solid var(--amber); padding-left: 14px; }
.out.fail { border-left: 3px solid var(--red); padding-left: 14px; color: var(--red); }
.out.fail .muted { color: var(--grey700); font-weight: 400; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px 20px; margin-bottom: 12px; }
.lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey500); font-weight: 600; }
.val { display: block; font-size: 13.5px; }
.val.big { font-size: 16px; font-weight: 700; }
.val.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }

.params { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.kv { font-family: var(--mono); font-size: 11.5px; background: var(--grey100); border: 1px solid var(--grey300); border-radius: 999px; padding: 3px 10px; }
.kv b { color: var(--grey700); font-weight: 600; }

.note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--grey700); }
.note.warn { color: var(--amber); font-weight: 600; }

.log { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.log th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--grey500); padding: 6px 8px; border-bottom: 1px solid var(--grey300); }
.log td { padding: 7px 8px; border-bottom: 1px solid var(--grey200); vertical-align: top; }
.log .mono { font-family: var(--mono); font-size: 11.5px; }
.log .dim { color: var(--grey500); }
.tag { font-size: 10.5px; background: rgba(var(--navy-rgb), .07); border-radius: 999px; padding: 2px 7px; color: var(--navy); }

.hashline { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.hashline .lbl { flex: 0 0 92px; }
.hashline code { font-size: 11.5px; word-break: break-all; background: var(--grey100); border: 1px solid var(--grey300); border-radius: 6px; padding: 3px 7px; }
.siblings { margin-top: 10px; display: grid; gap: 5px; }
.siblings > div { display: flex; align-items: center; gap: 9px; }
.step { flex: 0 0 20px; height: 20px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11px; display: grid; place-items: center; }
.siblings code { font-size: 11px; word-break: break-all; color: var(--grey700); }

.checks { display: grid; gap: 5px; margin: 10px 0; }
.checks div { font-size: 13px; padding-left: 22px; position: relative; }
.checks .pass::before { content: '\2713'; position: absolute; left: 0; color: var(--green-dark); font-weight: 700; }
.checks .failed::before { content: '\2717'; position: absolute; left: 0; color: var(--red); font-weight: 700; }

.foot { margin-top: 26px; font-size: 12px; color: var(--grey500); }

/* the explainer panel provides its own look; this only places it */
.gp {
  --surface: var(--paper); --border: #ececf3; --text: var(--grey900);
  --text-2: var(--grey700); --muted: var(--grey500);
  --accent: var(--green); --accent-text: var(--green-dark);
  --accent-subtle: rgba(54,215,145,.1); --chrome: var(--navy);
  --shadow-lg: var(--shadow);
  width: 100%; position: sticky; top: 64px;
  height: calc(100vh - 64px); border-left: 1px solid var(--grey300);
}

@media (max-width: 1240px) {
  .shell { grid-template-columns: 220px minmax(0,1fr); }
  .gp { grid-column: 1 / -1; position: static; height: auto; border-left: none; border-top: 1px solid var(--grey300); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--grey300); }
}