/* Truesight site, in the meter's own look: neutral black like a camera's viewfinder, plain
   white type, one ember accent from the lens in the logo, crisp 3px corners, small capital
   labels with an ember tick, and viewfinder brackets round what matters. The tokens are the
   app's (public/theme.css), so the site and the meter read as one thing. */

:root {
  --ink-0: #0b0b0c;
  --ink-1: #131314;
  --ink-2: #1b1b1d;
  --ink-3: #262628;
  --hairline: rgb(255 255 255 / 8%);
  --hairline-2: rgb(255 255 255 / 15%);
  --card: rgb(255 255 255 / 3.5%);
  --card-line: rgb(255 255 255 / 10%);

  --text: #f3f3f4;
  --text-2: #ababb0;
  --text-3: #7c7c82;

  --ember: #ff8a3d;
  --ember-hot: #ffc65c;
  --ember-dim: rgb(255 138 61 / 14%);
  --ok: #74d68a;
  --warn: #ffc65c;
  --bad: #ff6b5b;
  --bracket: rgb(255 255 255 / 42%);

  /* Helped and cost you in the breakdown: blue and red, checked for colour blindness on these panels. */
  --up: #4e8af2;
  --down: #ea5a44;

  --radius: 4px;
  --radius-sm: 3px;
  --rail-w: 224px;
  --font: "Bahnschrift", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.12; }

p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 20;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--ember);
  color: var(--ink-0);
  font-weight: 600;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 1px solid var(--ember); outline-offset: 2px; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 6px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  color: var(--text);
  font: 600 0.78em/1.7 var(--font);
  text-align: center;
}

/* --- The pieces the app is made of ------------------------------------------ */

/* A small capital label, headed by an ember tick. */
.label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.label::before {
  content: "";
  flex: none;
  width: 10px;
  height: 2px;
  background: var(--ember);
}

/* Viewfinder brackets round the cards that matter most; ember ones round you. */
.sight {
  --reach: 10px;
  background:
    linear-gradient(var(--bracket), var(--bracket)) left top / var(--reach) 1.5px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) left top / 1.5px var(--reach) no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right top / var(--reach) 1.5px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right top / 1.5px var(--reach) no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) left bottom / var(--reach) 1.5px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) left bottom / 1.5px var(--reach) no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right bottom / var(--reach) 1.5px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right bottom / 1.5px var(--reach) no-repeat,
    var(--card);
}
.sight.you { --bracket: rgb(255 138 61 / 85%); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 5%);
  color: var(--text);
  font: 500 15px var(--font);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: rgb(255 255 255 / 10%); }
.btn.primary { border-color: var(--ember); background: var(--ember); color: var(--ink-0); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }

/* Figures as the details window shows them: a small capital name over a light, large number. */
.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin: 0;
  padding: 14px 18px;
}
.figures dt {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.figures dd { margin: 2px 0 0; font-size: 28px; font-weight: 300; line-height: 1.15; }
.figures dd.up { color: var(--up); }
.figures-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
.figures .note { display: block; max-width: 17em; margin-top: 4px; color: var(--text-2); font-size: 13.5px; font-weight: 400; line-height: 1.4; }

.card {
  padding: 18px 18px 16px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card);
}
.card h3 { font-size: 17px; }
.card p { margin-top: 8px; color: var(--text-2); font-size: 15px; }

.shot { margin: 0; }
.shot img {
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
}
.shot figcaption { margin-top: 10px; color: var(--text-3); font-size: 13.5px; line-height: 1.45; }
.shot.sight { padding: 12px; }
.shot.sight img { box-shadow: none; }

/* The class's own colour as a hexagon mark, the name in plain type. */
.cls { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 14.5px; white-space: nowrap; }
.cls::before {
  content: "";
  flex: none;
  width: 9px;
  height: 10px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--cls, var(--text-3));
}
.cls[data-cls="Gladiator"] { --cls: #4cc4e0; }
.cls[data-cls="Templar"] { --cls: #5c8dff; }
.cls[data-cls="Assassin"] { --cls: #68d44f; }
.cls[data-cls="Ranger"] { --cls: #2fae7c; }
.cls[data-cls="Sorcerer"] { --cls: #9a66ee; }
.cls[data-cls="Spiritmaster"] { --cls: #d65ad8; }
.cls[data-cls="Cleric"] { --cls: #e8c55a; }
.cls[data-cls="Chanter"] { --cls: #f0983a; }

/* --- The frame: a rail down the left, as in the app ------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100vh;
  padding: env(safe-area-inset-top, 0px) 12px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / 2%);
  border-right: 1px solid var(--hairline);
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}
.rail-brand svg { width: 20px; height: 20px; flex: none; }

.rail-nav { display: flex; flex-direction: column; gap: 3px; }

.rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 15px;
  text-decoration: none;
}
.rail-link svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-link:hover { background: var(--hairline); color: var(--text); }
.rail-link.is-on {
  background: linear-gradient(90deg, rgb(255 138 61 / 13%), transparent 85%);
  box-shadow: inset 2px 0 0 var(--ember);
  color: var(--text);
}
.rail-link.is-on svg { color: var(--ember); }

.grow { flex: 1; }

.rail-status { display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--text-2); font-size: 13px; }
.rail-status i, .status-pill i {
  flex: none;
  width: 7px;
  height: 8px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--warn);
}

.page { min-width: 0; }

.wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.band { padding-block: 64px; border-top: 1px solid var(--hairline); }

.band-head { margin-bottom: 28px; }
.band-head h2 { margin-top: 12px; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.005em; }
.band-head p { max-width: 44em; margin-top: 12px; color: var(--text-2); font-size: 17px; }

/* --- Home ------------------------------------------------------------------- */

.hero { padding-block: 72px 64px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  margin-top: 16px;
  font-size: clamp(42px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero h1 em { color: var(--ember); font-style: normal; }

.lede { max-width: 33em; margin-top: 20px; color: var(--text-2); font-size: 19px; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero .figures { margin-top: 38px; }

.hero-shot { justify-self: center; max-width: 396px; }

/* The example report */
.report-head h2 { max-width: 22em; }
.dateline { margin-top: 8px; color: var(--text-3); font-size: 13.5px; }

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 26px;
}

.chart-card { padding: 20px 22px 14px; }
.chart-sub { margin-top: 6px; color: var(--text-2); font-size: 14.5px; }

.legend { display: flex; gap: 18px; margin: 14px 0 4px; padding: 0; list-style: none; color: var(--text-2); font-size: 13.5px; }
.key { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.key.up { background: var(--up); }
.key.down { background: var(--down); }

.dv { position: relative; }
.dv-table { width: 100%; border-collapse: collapse; }
.dv-table tr { border-top: 1px solid var(--hairline); }
.dv-table tfoot tr { border-top: 1px solid var(--hairline-2); }
.dv-table tr[data-mult]:hover,
.dv-table tr[data-mult]:focus-visible { background: rgb(255 255 255 / 4%); }
.dv-table tr[data-mult]:focus-visible { outline: 1px solid var(--ember); outline-offset: -1px; }
.dv-table th { width: 44%; padding: 11px 14px 11px 0; font-weight: 400; text-align: left; vertical-align: middle; }
.dv-name { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.dv-why { display: block; margin-top: 2px; color: var(--text-3); font-size: 13.5px; line-height: 1.4; }

/* Zero sits a quarter of the way in; the scale runs from -8% to +24%. */
.dv-plot { position: relative; padding: 0; }
.dv-plot::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 25%;
  width: 1px;
  background: var(--hairline-2);
}
.dv-bar { position: absolute; top: 50%; height: 14px; transform: translateY(-50%); }
.dv-bar.up { left: 25%; width: calc(var(--v) * 3.125%); background: var(--up); border-radius: 0 4px 4px 0; }
.dv-bar.down { left: calc(25% - var(--v) * 3.125%); width: calc(var(--v) * 3.125%); background: var(--down); border-radius: 4px 0 0 4px; }
.dv-table tr[data-mult]:hover .dv-bar,
.dv-table tr[data-mult]:focus-visible .dv-bar { filter: brightness(1.18); }
.dv-val { width: 4.6em; padding-left: 12px; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.dv-tip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  transform: translate(-50%, calc(-100% - 8px));
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.dv-tip strong { color: var(--text); font-size: 15px; }

.side-col { display: grid; gap: 30px; }

.board, .mini { width: 100%; border-collapse: collapse; font-size: 15px; }
.board th, .board td, .mini th, .mini td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: baseline; }
.board th:last-child, .board td:last-child, .mini th:last-child, .mini td:last-child { padding-right: 0; }
.board thead th, .mini thead th {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.board tbody th, .mini tbody th { font-weight: 500; }
.num, .mini td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini thead th:not(:first-child) { text-align: right; }
.sub { display: block; margin-top: 1px; color: var(--text-3); font-size: 13px; font-weight: 400; }
.side-col .label { margin-bottom: 6px; }

.donext { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.donext li { position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid var(--hairline); counter-increment: step; }
.donext li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--ember);
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 700;
}
.donext b { display: block; font-size: 15.5px; font-weight: 600; }
.donext span { display: block; margin-top: 2px; color: var(--text-2); font-size: 14px; line-height: 1.45; }

/* The meter and the tools */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.split.wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
.split + .split { margin-top: 56px; }

.copy h3 { margin-top: 12px; font-size: 24px; }
.copy > p { margin-top: 12px; color: var(--text-2); font-size: 16.5px; }

.ticks { margin: 16px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 16px; }
.ticks li + li { margin-top: 10px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--ember); }
.ticks b { color: var(--text); font-weight: 600; }

.fine { margin-top: 14px; color: var(--text-3); font-size: 13.5px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }

.tool-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }

/* Out of the way */
.keys { overflow-x: auto; }
.keys table { width: 100%; border-collapse: collapse; font-size: 15px; }
.keys caption { padding-bottom: 8px; text-align: left; }
.keys td { padding: 9px 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.keys td:first-child { width: 1%; padding-right: 18px; white-space: nowrap; }

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cols h3 { font-size: 17px; }
.cols p { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }

.finder { display: flex; gap: 10px; max-width: 560px; margin-top: 20px; }
.finder input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 4%);
  color: var(--text);
  font: 16px var(--font);
}
.finder input::placeholder { color: var(--text-3); }
.finder input:focus-visible { outline: 1px solid var(--ember); outline-offset: 0; border-color: var(--ember); }

.closing { padding-block: 56px; border-top: 1px solid var(--hairline); }
.closing-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.closing h2 { font-size: clamp(28px, 3.4vw, 38px); }
.closing p { margin-top: 10px; color: var(--text-2); font-size: 17px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.foot {
  padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 13.5px;
}
.foot-row { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.foot-row p { flex: 1 1 320px; }

/* --- Players ---------------------------------------------------------------- */

.lookup { padding-block: 64px 40px; }
.lookup h1 { margin-top: 14px; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.01em; }
.lookup .lede { font-size: 17.5px; }
.finder-note { min-height: 1.5em; margin-top: 12px; color: var(--text-2); font-size: 15px; }

.results { max-width: 760px; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline-2); }
.results li { border-bottom: 1px solid var(--hairline); }
.results a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 8px; border-radius: var(--radius-sm); text-decoration: none; }
.results a:hover, .results a:focus-visible { background: rgb(255 255 255 / 4%); }
.result-name { font-size: 17px; font-weight: 600; }
.result-meta { color: var(--text-3); font-size: 14px; }
.result-power { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.player-head { padding-block: 40px; border-top: 1px solid var(--hairline); }
.player-head h1 { margin-top: 12px; font-size: clamp(34px, 4.4vw, 52px); }
.player-head .figures { margin-top: 24px; }
.figures dd .cls { color: var(--text); font-size: inherit; }
.figures dd .cls::before { width: 12px; height: 14px; }
.player-note { margin-top: 14px; color: var(--text-3); font-size: 13.5px; }

.board-wrap { overflow-x: auto; margin-top: 12px; }
.board { min-width: 620px; }
.party { display: flex; flex-wrap: wrap; gap: 2px 12px; }

/* --- Narrow screens: the rail becomes a bar across the top --------------------- */

@media (max-width: 1000px) {
  .hero-grid, .report-grid, .split, .split.wide { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-row { grid-template-columns: minmax(0, 1fr); }
  .hero-shot { justify-self: start; }
}

@media (max-width: 860px) {
  .shell { display: block; }
  .rail {
    position: sticky;
    z-index: 10;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: rgb(11 11 12 / 92%);
    backdrop-filter: blur(8px);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .rail-brand { flex: none; height: 52px; padding: 0 4px; }
  .rail-nav { flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-link { padding: 7px 10px; font-size: 14px; white-space: nowrap; }
  .rail-link svg, .rail-status, .grow { display: none; }
  .rail-link.is-on { background: none; box-shadow: inset 0 -2px 0 var(--ember); border-radius: 0; }
  html { scroll-padding-top: 64px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .hero { padding-block: 40px 48px; }
  .lede { font-size: 17px; }
  .band { padding-block: 48px; }
  .cards, .cols, .figures-row { grid-template-columns: minmax(0, 1fr); }
  .figures { gap: 12px 24px; }
  .figures dd { font-size: 24px; }
  .finder { flex-direction: column; }
  .rail-brand span { display: none; }

  .dv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em; align-items: center; }
  .dv-table th { grid-column: 1 / -1; width: auto; padding: 12px 0 2px; }
  .dv-plot { height: 26px; }
  .dv-val { width: auto; padding: 0 0 10px; }
}