/* ==================================================================
   CARBON — IBM Carbon Design System skin
   Flat, sharp, gridded. 1px rules, zero radius, Plex type.
   Accent derives from --hue so the INK button recolours everything.
   ================================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

html[data-ui="carbon"] {
  --cb-bg: #f4f4f4;
  --cb-layer: #ffffff;
  --cb-ink: #161616;
  --cb-mute: #525252;
  --cb-faint: #8d8d8d;
  --cb-line: #c6c6c6;
  --cb-line-soft: #e0e0e0;
  --cb-accent: hsl(var(--hue) 75% 42%);
  --cb-accent-deep: hsl(var(--hue) 80% 30%);
  --cb-accent-soft: hsl(var(--hue) 70% 93%);
  --cb-good: #198038;
  --cb-warn: #b28600;
  --cb-bad: #da1e28;

  background: var(--cb-bg);
  color: var(--cb-ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- chrome ---------- */
html[data-ui="carbon"] body {
  background: var(--cb-bg);
  background-image: none;
  color: var(--cb-ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
}

html[data-ui="carbon"] .topbar {
  background: var(--cb-ink);
  border-bottom: 0;
}

html[data-ui="carbon"] .topbar-in {
  width: min(1240px, 100% - 2rem);
  padding-block: 0.7rem;
}

html[data-ui="carbon"] .brand-name {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: none;
}

html[data-ui="carbon"] .brand-tag {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--cb-accent-soft);
  background: transparent;
  border: 1px solid var(--cb-faint);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  padding: 0.25em 0.6em;
}

html[data-ui="carbon"] .flatbtn {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #fff;
  background: transparent;
  border: 1px solid var(--cb-faint);
  border-radius: 0;
  box-shadow: none;
  padding: 0.45em 1em;
  transition: background 0.12s, border-color 0.12s;
}

html[data-ui="carbon"] .flatbtn:hover {
  background: #2c2c2c;
  border-color: #fff;
  transform: none;
}

html[data-ui="carbon"] .flatbtn[aria-pressed="true"] {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  color: #fff;
}

html[data-ui="carbon"] .inkbtn {
  border: 1px solid var(--cb-faint);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--cb-accent-soft);
}

html[data-ui="carbon"] .inkbtn:hover {
  transform: none;
  background: #2c2c2c;
}

html[data-ui="carbon"] .loadbar {
  background: transparent;
  border-bottom: 0;
}
html[data-ui="carbon"] .loadbar i {
  background: var(--cb-accent);
  border-radius: 0;
}

/* ---------- hero ---------- */
html[data-ui="carbon"] .hero {
  padding: 3rem 0 3.4rem;
}

html[data-ui="carbon"] .kicker {
  gap: 0;
  margin: 0 0 1.6rem;
  border-bottom: 1px solid var(--cb-line);
  padding-bottom: 0.9rem;
}

html[data-ui="carbon"] .kicker span {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--cb-mute);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cb-line);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  padding: 0.2em 1em 0.2em 0;
  margin-right: 1em;
}

html[data-ui="carbon"] .display {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--cb-ink);
}

html[data-ui="carbon"] .outline-word {
  color: var(--cb-accent);
  -webkit-text-stroke: 0;
}

@supports not (-webkit-text-stroke: 2px black) {
  html[data-ui="carbon"] .outline-word {
    color: var(--cb-accent);
  }
}

html[data-ui="carbon"] .sticker-word {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cb-accent);
  box-shadow: none;
  transform: none;
  font-size: 1em;
}

html[data-ui="carbon"] .lede {
  font-size: 1rem;
  font-weight: 400;
  color: var(--cb-mute);
  border-left: 3px solid var(--cb-accent);
  padding-left: 1rem;
}

/* ---------- lookup ---------- */
html[data-ui="carbon"] .lookup {
  background: var(--cb-layer);
  border: 1px solid var(--cb-line);
  border-top: 3px solid var(--cb-accent);
  border-radius: 0;
  box-shadow: none;
  padding: 2.1rem 1.5rem 1.5rem;
  gap: 1.3rem;
}

html[data-ui="carbon"] .lookup-tab {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  background: var(--cb-accent);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 0.35em 0.9em;
}

html[data-ui="carbon"] .rot-badge {
  display: none;
}

html[data-ui="carbon"] .lf > .micro {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  color: var(--cb-mute);
  opacity: 1;
}

html[data-ui="carbon"] .lf input,
html[data-ui="carbon"] .lf select {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 1rem;
  color: var(--cb-ink);
  background: var(--cb-layer);
  border: 1px solid var(--cb-line);
  border-bottom: 2px solid var(--cb-ink);
  border-radius: 0;
  padding: 0.75rem 0.85rem;
  transition: outline 0.1s, border-color 0.1s;
}

html[data-ui="carbon"] .lf input::placeholder {
  color: var(--cb-faint);
  font-weight: 400;
}

html[data-ui="carbon"] .lf input:focus,
html[data-ui="carbon"] .lf select:focus {
  outline: 2px solid var(--cb-accent);
  outline-offset: -2px;
  border-color: var(--cb-ink);
  background: var(--cb-layer);
  box-shadow: none;
}

html[data-ui="carbon"] .submit {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  background: var(--cb-accent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.85rem 1.5rem;
}

html[data-ui="carbon"] .submit:hover {
  background: var(--cb-accent-deep);
  transform: none;
  box-shadow: none;
}

html[data-ui="carbon"] .submit:active {
  transform: none;
}

html[data-ui="carbon"] .try-line {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--cb-mute);
}

html[data-ui="carbon"] .textlink,
html[data-ui="carbon"] .linklike {
  color: var(--cb-accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---------- marquee / foot ---------- */
html[data-ui="carbon"] .marquee {
  background: var(--cb-ink);
  border-block: 0;
}

html[data-ui="carbon"] .marquee-track span {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--cb-faint);
}

html[data-ui="carbon"] .marquee-track i {
  color: var(--cb-accent);
  font-style: normal;
}

html[data-ui="carbon"] .foot {
  background: var(--cb-ink);
  color: #c6c6c6;
}

html[data-ui="carbon"] .foot-mark {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0;
  color: #fff;
}

html[data-ui="carbon"] .foot .micro {
  color: var(--cb-faint);
}

html[data-ui="carbon"] .foot a {
  color: #f4f4f4;
}

html[data-ui="carbon"] .foot a:hover {
  color: var(--cb-accent-soft);
}

html[data-ui="carbon"] .foot-legal {
  color: var(--cb-faint);
}

html[data-ui="carbon"] .foot-legal kbd {
  border-color: var(--cb-faint);
  background: transparent;
  color: #f4f4f4;
}

/* ---------- record: banner ---------- */
html[data-ui="carbon"] .c-banner {
  background: var(--cb-layer);
  border: 1px solid var(--cb-line);
  border-left: 4px solid var(--cb-accent);
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 1.25rem;
}

html[data-ui="carbon"] .c-avatar {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: var(--cb-accent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 44px;
  height: 44px;
}

html[data-ui="carbon"] .c-name {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cb-ink);
}

html[data-ui="carbon"] .c-father {
  font-size: 0.78rem;
  color: var(--cb-mute);
}

html[data-ui="carbon"] .c-chip {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.66rem;
  border: 1px solid var(--cb-line);
  border-radius: 0;
  background: var(--cb-bg);
  color: var(--cb-ink);
  padding: 0.2em 0.7em;
}

html[data-ui="carbon"] .c-chip-ink {
  background: var(--cb-ink);
  border-color: var(--cb-ink);
  color: #fff;
}

html[data-ui="carbon"] .c-chip-tint {
  background: var(--cb-accent-soft);
  border-color: var(--cb-accent-soft);
  color: var(--cb-accent-deep);
}

html[data-ui="carbon"] .c-refresh {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--cb-ink);
  background: var(--cb-layer);
  border: 1px solid var(--cb-line);
  border-radius: 0;
  box-shadow: none;
  padding: 0.4em 1em;
}

html[data-ui="carbon"] .c-refresh:hover {
  border-color: var(--cb-ink);
  transform: none;
  box-shadow: none;
}

html[data-ui="carbon"] .c-live,
html[data-ui="carbon"] .c-verify {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  color: var(--cb-mute);
}

/* ---------- stats ---------- */
html[data-ui="carbon"] .c-stats {
  gap: 1px;
  background: var(--cb-line);
  border: 1px solid var(--cb-line);
}

html[data-ui="carbon"] .c-stat {
  background: var(--cb-layer);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 1.1rem;
}

html[data-ui="carbon"] .c-stat:nth-child(odd),
html[data-ui="carbon"] .c-stat:nth-child(even) {
  box-shadow: none;
}

html[data-ui="carbon"] .c-k {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--cb-mute);
}

html[data-ui="carbon"] .c-v {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--cb-ink);
}

html[data-ui="carbon"] .c-v.b-good { color: var(--cb-good); }
html[data-ui="carbon"] .c-v.b-mid { color: var(--cb-warn); }
html[data-ui="carbon"] .c-v.b-low { color: var(--cb-bad); }

html[data-ui="carbon"] .c-v.c-vt {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
}

html[data-ui="carbon"] .c-s {
  font-family: "IBM Plex Mono", monospace;
  color: var(--cb-mute);
}

/* ---------- sections & cards ---------- */
html[data-ui="carbon"] .c-sect {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--cb-line);
  padding-bottom: 0.5rem;
}

html[data-ui="carbon"] .c-sect .c-star {
  color: var(--cb-accent);
}

html[data-ui="carbon"] .c-count {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.62rem;
  background: var(--cb-bg);
  border: 1px solid var(--cb-line);
  border-radius: 0;
  color: var(--cb-mute);
}

html[data-ui="carbon"] .c-card {
  background: var(--cb-layer);
  border: 1px solid var(--cb-line);
  border-top: 3px solid var(--cb-accent);
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 1.1rem 1.1rem;
  transition: border-color 0.12s;
}

html[data-ui="carbon"] .c-card:nth-child(even) {
  border-top-color: var(--cb-accent);
  box-shadow: none;
}

html[data-ui="carbon"] .c-card:hover {
  border-color: var(--cb-ink);
  transform: none;
  box-shadow: none;
}

html[data-ui="carbon"] .c-cardhead h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0;
  text-transform: none;
}

html[data-ui="carbon"] .prof {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--cb-line);
  border-radius: 0;
  background: var(--cb-bg);
  max-width: 46%;
}

/* ---------- test rows / meters ---------- */
html[data-ui="carbon"] .t-name {
  font-weight: 500;
  font-size: 0.9rem;
}

html[data-ui="carbon"] .t-name em {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
}

html[data-ui="carbon"] .t-score {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
}

html[data-ui="carbon"] .t-pct {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}

html[data-ui="carbon"] .c-meter {
  border: 0;
  border-radius: 0;
  background: var(--cb-line-soft);
  height: 8px;
}

html[data-ui="carbon"] .c-meter i {
  border-radius: 0;
  background: var(--cb-accent);
}

html[data-ui="carbon"] .c-meter.b-good i { background: var(--cb-good); }
html[data-ui="carbon"] .c-meter.b-mid i { background: var(--cb-warn); }
html[data-ui="carbon"] .c-meter.b-low i { background: var(--cb-bad); }

/* ---------- attendance ---------- */
html[data-ui="carbon"] .c-attrow {
  background: var(--cb-layer);
  border: 1px solid var(--cb-line);
  border-left: 4px solid var(--cb-accent);
  border-radius: 0;
  box-shadow: none;
}

html[data-ui="carbon"] .c-attrow:nth-child(even) {
  box-shadow: none;
}

html[data-ui="carbon"] .a-name {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
}

html[data-ui="carbon"] .a-nums {
  color: var(--cb-mute);
}

html[data-ui="carbon"] .a-nums b {
  color: var(--cb-ink);
}

html[data-ui="carbon"] .a-pct {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0;
}

html[data-ui="carbon"] .a-pct.b-good { color: var(--cb-good); }
html[data-ui="carbon"] .a-pct.b-mid { color: var(--cb-warn); }
html[data-ui="carbon"] .a-pct.b-low { color: var(--cb-bad); }

/* ---------- heat ---------- */
html[data-ui="carbon"] .c-heat thead th .d {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--cb-accent-deep);
}

html[data-ui="carbon"] .c-heat thead th .n,
html[data-ui="carbon"] .c-heat thead th.corner,
html[data-ui="carbon"] .c-heat thead th.wknd .d,
html[data-ui="carbon"] .c-heat thead th.wknd .n {
  color: var(--cb-faint);
}

html[data-ui="carbon"] .c-heat tbody th {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: none;
  color: var(--cb-ink);
}

html[data-ui="carbon"] .c-heat .mk {
  border-radius: 0;
}

html[data-ui="carbon"] .c-heat .mk-P {
  background: var(--cb-good);
  color: #fff;
  box-shadow: none;
}

html[data-ui="carbon"] .c-heat .mk-A {
  background: var(--cb-bad);
  color: #fff;
  box-shadow: none;
}

html[data-ui="carbon"] .c-heat .mk-L {
  background: #f1c21b;
  color: var(--cb-ink);
  box-shadow: none;
}

html[data-ui="carbon"] .c-heat .mk-x {
  background: var(--cb-layer);
  box-shadow: inset 0 0 0 1px var(--cb-line);
  color: var(--cb-faint);
}

html[data-ui="carbon"] .c-legend {
  font-family: "IBM Plex Mono", monospace;
  color: var(--cb-mute);
}

/* ---------- states ---------- */
html[data-ui="carbon"] .c-state {
  background: var(--cb-layer);
  border: 1px solid var(--cb-line);
  border-left: 4px solid var(--cb-accent);
  border-radius: 0;
  box-shadow: none;
}

html[data-ui="carbon"] .c-state-mark {
  font-family: "IBM Plex Mono", monospace;
  color: var(--cb-accent-deep);
}

html[data-ui="carbon"] .c-state h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  text-transform: none;
}

html[data-ui="carbon"] .skel-bars i {
  background: var(--cb-line-soft);
  border-radius: 0;
  box-shadow: none;
}

/* ---------- motion ---------- */
html[data-ui="carbon"] .rot-badge svg {
  animation: none;
}

html[data-ui="carbon"] body.grid-view .c-card {
  border-radius: 0;
}