/* Right Hand DMS woodblock design system — tokens + base.
   Source of truth: design-mockups/rhd-woodblock (site.css, Components.dc.html).
   Everything is scoped to .rhd: wrap a tree in <RhdRoot> (or add class="rhd") to opt in,
   so the logged-in app keeps its current look until it is moved over screen by screen.
   Tailwind can use the same tokens via the @theme block in styles/main.css. */
.rhd {
  --paper: #f3eada;
  --paper-2: #e8dac0;
  --card: #fbf6ec;
  --ink: #2a1c12;
  --ink-2: #5c4837;
  --rule: #cdb998;
  --amber: #a64f17;
  --on-amber: #fff8ee;
  --ai: #1f3350;
  --on-ai: #f3eada;
  --beni: #b23a28;
  --ok: #47652f;
  --hl: #f4cf8f;
  --shadow: #2a1c12;
  /* App tone washes for banners and tags (design-mockups/app-rebuild/site.css). */
  --amber-wash: #f1e2d2;
  --beni-wash: #f2dfd4;
  --ok-wash: #e5e5d5;
  --ai-wash: #e1dfd9;
  --backdrop: rgba(42, 28, 18, 0.5);
  color-scheme: light;
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2724%27%3E%3Cg fill=%27none%27 stroke=%27%23fff%27 stroke-opacity=%27.16%27 stroke-width=%271.4%27%3E%3Cpath d=%27M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0M-24 12a24 24 0 0 1 48 0M-16 12a16 16 0 0 1 32 0M-8 12a8 8 0 0 1 16 0M24 12a24 24 0 0 1 48 0M32 12a16 16 0 0 1 32 0M40 12a8 8 0 0 1 16 0%27/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27240%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .08 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E");
  --wood: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27300%27%3E%3Cfilter id=%27w%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.004 .09%27 numOctaves=%273%27 seed=%277%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 -.02%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23w%29%27/%3E%3C/svg%3E");
}
.rhd[data-theme="dark"] {
  --paper: #16110d;
  --paper-2: #241b14;
  --card: #1e1712;
  --ink: #f0e5d1;
  --ink-2: #c4b197;
  --rule: #4a3b2d;
  --amber: #e38a4b;
  --on-amber: #1a120c;
  --ai: #18243a;
  --on-ai: #f0e5d1;
  --beni: #e26a54;
  --ok: #9dbd7e;
  --hl: #6e4b1e;
  --shadow: #000;
  --amber-wash: #3e291b;
  --beni-wash: #3d241d;
  --ok-wash: #2a2f20;
  --ai-wash: #1b2230;
  --backdrop: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .rhd:not([data-theme="light"]) {
    --paper: #16110d;
    --paper-2: #241b14;
    --card: #1e1712;
    --ink: #f0e5d1;
    --ink-2: #c4b197;
    --rule: #4a3b2d;
    --amber: #e38a4b;
    --on-amber: #1a120c;
    --ai: #18243a;
    --on-ai: #f0e5d1;
    --beni: #e26a54;
    --ok: #9dbd7e;
    --hl: #6e4b1e;
    --shadow: #000;
    --amber-wash: #3e291b;
    --beni-wash: #3d241d;
    --ok-wash: #2a2f20;
    --ai-wash: #1b2230;
    --backdrop: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
.rhd,
.rhd * {
  box-sizing: border-box;
}
.rhd {
  min-height: 100vh;
  line-height: normal;
  background-color: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.rhd {
  background-image: var(--grain);
}
.rhd a {
  color: var(--amber);
  /* Tailwind's preflight strips link underlines; the design keeps the browser default. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.rhd a:hover {
  color: var(--beni);
}
.rhd summary {
  list-style: none;
  cursor: pointer;
}
.rhd summary::-webkit-details-marker {
  display: none;
}
.rhd details[open] .rhd-plus {
  transform: rotate(45deg);
}
.rhd input,
.rhd select,
.rhd textarea,
.rhd button {
  font: inherit;
  color: inherit;
}

/* The app's base styles (index.html, styles/main.css) give every heading a fixed ink color,
   tighter tracking and line-height 1.18, and the body 15px type. The design assumes browser
   defaults — headings inherit their section's color (e.g. light text on the indigo band). */
.rhd {
  font-size: 16px;
}
.rhd :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  letter-spacing: normal;
  line-height: normal;
}

/* Right Hand DMS woodblock components. Values are the design's, verbatim
   (design-mockups/rhd-woodblock/Components.dc.html + the page drops). */

/* ---------- type ---------- */
.rhd .rhd-mincho {
  font-family: "Shippori Mincho B1", serif;
}
.rhd .rhd-mono {
  font-family: "IBM Plex Mono", monospace;
}
.rhd .rhd-display {
  margin: 0;
  font:
    800 clamp(38px, 5.6vw, 68px) / 1.04 "Shippori Mincho B1",
    serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.rhd .rhd-h1 {
  margin: 0;
  font:
    800 clamp(34px, 4.6vw, 54px) / 1.06 "Shippori Mincho B1",
    serif;
  text-wrap: balance;
}
.rhd .rhd-h2 {
  margin: 0;
  font:
    700 clamp(30px, 4vw, 48px) / 1.1 "Shippori Mincho B1",
    serif;
  text-wrap: balance;
}
.rhd .rhd-h3 {
  margin: 0;
  font:
    700 28px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-lead {
  margin: 0;
  font:
    400 clamp(17px, 1.6vw, 20px) / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rhd .rhd-body {
  margin: 0;
  font:
    400 16px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-small {
  margin: 0;
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-caps {
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .rhd-caps--tight {
  letter-spacing: 0.14em;
}

/* ---------- layout ---------- */
.rhd .rhd-container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}
.rhd .rhd-section {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
.rhd .rhd-rule-bottom {
  border-bottom: 1.5px solid var(--ink);
}

/* ---------- stamps: hanko, section label, grade, frame no. ---------- */
.rhd .rhd-hanko {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--beni);
  color: var(--paper);
  font-family: "Shippori Mincho B1", serif;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-3deg);
}
.rhd .rhd-hanko--plain {
  transform: none;
}
.rhd .rhd-stamp {
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
  color: var(--paper);
  background: var(--beni);
  padding: 5px 6px;
  border-radius: 2px;
}
.rhd .rhd-stamp--sm {
  font-size: 14px;
  padding: 6px 7px;
}
.rhd .rhd-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rhd .rhd-label--tight {
  gap: 8px;
}
.rhd .rhd-grade {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 2px solid var(--beni);
  color: var(--beni);
  font:
    700 15px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.rhd .rhd-frame-no {
  font:
    600 15px "IBM Plex Mono",
    monospace;
  background: var(--hl);
  padding: 6px 9px;
  border: 1.5px dashed var(--beni);
}

/* ---------- buttons ---------- */
.rhd .rhd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  font:
    600 16px / 1 "IBM Plex Sans",
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
}
.rhd .rhd-btn--sm {
  padding: 12px 18px;
  font-size: 15px;
}
.rhd .rhd-btn--md {
  padding: 14px 20px;
  font-size: 15px;
}
.rhd .rhd-btn--block {
  display: flex;
  width: 100%;
}
.rhd .rhd-btn--primary {
  background: var(--amber);
  color: var(--on-amber);
  box-shadow: 3px 3px 0 var(--shadow);
}
.rhd .rhd-btn--paper {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}
.rhd .rhd-btn--onColor {
  color: inherit;
  border-color: currentColor;
}
.rhd .rhd-btn--primary:hover,
.rhd .rhd-btn--paper:hover {
  color: inherit;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--shadow);
}
.rhd .rhd-btn--primary:hover {
  color: var(--on-amber);
}
.rhd .rhd-btn--secondary:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.rhd .rhd-btn--onColor:hover {
  color: inherit;
}

/* ---------- cards / panels ---------- */
.rhd .rhd-card {
  background: var(--card);
  border: 1.5px solid var(--ink);
}
.rhd .rhd-card--shadow-sm {
  box-shadow: 3px 3px 0 var(--shadow);
}
.rhd .rhd-card--shadow {
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .rhd-card--shadow-lg {
  box-shadow: 8px 8px 0 var(--shadow);
}

/* ---------- chips & pills ---------- */
.rhd .rhd-chip {
  font:
    500 12px / 1 "IBM Plex Mono",
    monospace;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.rhd .rhd-chip--ink {
  border-color: var(--ink);
}
.rhd .rhd-doc {
  display: inline-flex;
  gap: 7px;
  padding: 7px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font:
    600 12.5px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .rhd-doc__k {
  font-family: "Shippori Mincho B1", serif;
  color: var(--beni);
}
.rhd .rhd-doc--missing {
  border: 1.5px dashed var(--beni);
  background: transparent;
  color: var(--beni);
}
.rhd .rhd-pill {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
}
.rhd .rhd-pill--watching {
  border-color: var(--rule);
  color: var(--ink-2);
}
.rhd .rhd-pill--bidding {
  border-color: var(--amber);
  color: var(--amber);
}
.rhd .rhd-pill--won {
  background: var(--ok);
  color: var(--paper);
}
.rhd .rhd-pill--importing {
  background: var(--ai);
  color: var(--on-ai);
}
.rhd .rhd-pill--owned {
  border-color: var(--ink);
}
.rhd .rhd-pill--sold {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- cost line ---------- */
.rhd .rhd-cost-line {
  border: 1.5px solid var(--ink);
  background: var(--card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 10px 14px;
}
.rhd .rhd-cost-line__label {
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-cost-line__amount {
  font:
    500 14px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-cost-line__basis {
  font:
    400 11.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .rhd-cost-line__source {
  font:
    500 11.5px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
  text-align: right;
}

/* ---------- annotated step & timeline station ---------- */
.rhd .rhd-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rhd .rhd-step__k {
  font:
    700 36px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .rhd-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .rhd-step__title {
  font:
    600 18px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-step__text {
  font:
    400 14.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-callout {
  color: var(--beni);
  font-weight: 600;
}
.rhd .rhd-station {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font:
    700 16px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 50%;
}
.rhd .rhd-station--done {
  background: var(--ink);
  color: var(--paper);
}
.rhd .rhd-station--next {
  border: 2px solid var(--ink);
}
.rhd .rhd-station-link {
  flex: 1;
  height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 16px);
}

/* ---------- FAQ accordion ---------- */
.rhd .rhd-faq {
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.rhd .rhd-faq + .rhd-faq {
  border-top: 0;
}
.rhd .rhd-faq__q {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-faq__a {
  margin: 0 0 14px;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-faq--lg .rhd-faq__q {
  padding: 18px 0;
  font:
    600 17px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-faq--lg .rhd-faq__a {
  margin: 0 0 18px;
  font:
    400 16px / 1.6 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-faq--lg .rhd-plus {
  font-size: 22px;
}
.rhd .rhd-plus {
  font:
    400 20px / 1 "IBM Plex Mono",
    monospace;
  color: var(--amber);
  transition: transform 0.2s;
}

/* ---------- form fields ---------- */
.rhd .rhd-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-field__hint {
  font-weight: 400;
  color: var(--ink-2);
  font-size: 12px;
  margin-top: -4px;
}
.rhd .rhd-input {
  height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
  font:
    400 16px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .rhd-input--quiet {
  border-color: var(--rule);
}
.rhd .rhd-input--mono {
  font-family: "IBM Plex Mono", monospace;
}
.rhd select.rhd-input {
  padding: 0 10px;
}
.rhd textarea.rhd-input {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}
.rhd .rhd-input:focus {
  outline: 3px solid var(--hl);
}
.rhd .rhd-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.rhd .rhd-toggle {
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--ink);
  border-radius: 2px;
  font:
    500 15px "IBM Plex Sans",
    sans-serif;
  cursor: pointer;
}
.rhd .rhd-toggle[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* ---------- bands (indigo wood / amber seigaiha) ---------- */
.rhd .rhd-band-ai {
  background: var(--ai);
  background-image: var(--wood);
  color: var(--on-ai);
}
.rhd .rhd-band-amber {
  background: var(--amber);
  background-image: var(--seigaiha);
  color: var(--on-amber);
}
.rhd .rhd-seigaiha-strip {
  height: 28px;
  background-image: var(--seigaiha);
}

/* ---------- logo ---------- */
.rhd .rhd-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.rhd .rhd-logo__word {
  font:
    700 19px / 1 "Shippori Mincho B1",
    serif;
  letter-spacing: 0.01em;
}
.rhd .rhd-logo__dms {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--ink);
  padding: 3px 5px 2px;
  border-radius: 2px;
  margin-left: 2px;
}

/* ---------- mock browser window (product UI close-ups) ---------- */
.rhd .rhd-window {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  border-radius: 4px;
  overflow: hidden;
}
.rhd .rhd-window__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.rhd .rhd-window__dots {
  display: flex;
  gap: 5px;
}
.rhd .rhd-window__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.rhd .rhd-window__url {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 5px 10px;
  font:
    500 12px / 1 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- seal (rotated ring stamp: 受付, 近日, 先行) ---------- */
.rhd .rhd-seal {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--beni);
  border: 2.5px solid var(--beni);
  border-radius: 50%;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-10deg);
}

/* Right Hand DMS — signed-in app components.
   Source of truth: design-mockups/app-rebuild (App-Components.dc.html, App-Sidebar.dc.html and
   the Screen-*.dc.html screens). Everything is scoped to .rhd like the marketing library;
   class names are rhd-* so pages compose them, page-only layout goes in the page's own CSS. */

/* ---------- shell ---------- */
.rhd.rhd-app {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.rhd .rhd-side {
  position: sticky;
  top: 0;
  flex: 0 0 236px;
  width: 236px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper-2);
  background-image: var(--grain);
  border-right: 1.5px solid var(--ink);
}
.rhd .rhd-side__brand {
  height: 64px;
  flex: none;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1.5px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
}
.rhd .rhd-side__brand:hover {
  color: var(--ink);
}
.rhd .rhd-brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--beni);
  color: var(--paper);
  font:
    800 19px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px var(--beni),
    inset 0 0 0 3.5px var(--paper);
  transform: rotate(-3deg);
}
.rhd .rhd-brand-name {
  font:
    700 16px / 1 "Shippori Mincho B1",
    serif;
  white-space: nowrap;
}
.rhd .rhd-brand-name b {
  font:
    600 11.5px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--ink);
  padding: 2px 4px 1px;
  border-radius: 2px;
}
.rhd .rhd-side__nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rhd .rhd-side__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rhd .rhd-side__group-label {
  padding: 0 10px 6px;
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .rhd-side__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  font:
    500 14px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-side__item:hover {
  color: var(--ink);
  background: var(--card);
  border-color: var(--rule);
}
.rhd .rhd-side__item[aria-current="page"] {
  border-color: var(--ink);
  background: var(--card);
  box-shadow: 3px 3px 0 var(--shadow);
  font-weight: 600;
}
.rhd .rhd-side__k {
  width: 28px;
  flex: none;
  font:
    700 11px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .rhd-side__label {
  flex: 1;
}
.rhd .rhd-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font:
    600 11px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 10px;
}
.rhd .rhd-count--hot {
  background: var(--beni);
}
.rhd .rhd-side__foot {
  flex: none;
  border-top: 1.5px solid var(--ink);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .rhd-side__user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rhd .rhd-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--card);
  font:
    600 12px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 2px;
  text-transform: uppercase;
}
.rhd .rhd-side__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rhd .rhd-side__name {
  font:
    600 13.5px / 1.2 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-side__role {
  font:
    400 12px / 1.2 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhd .rhd-side__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rhd .rhd-theme-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--rule);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ink);
}
.rhd .rhd-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font:
    500 13.5px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-linkbtn:hover {
  color: var(--beni);
}

/* phone bar + drawer */
.rhd .rhd-phonebar {
  display: none;
}
.rhd .rhd-main {
  flex: 1 1 600px;
  min-width: 0;
  padding: 32px 40px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rhd .rhd-main__inner {
  width: 100%;
  max-width: 1420px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (max-width: 760px) {
  .rhd.rhd-app {
    flex-direction: column;
  }
  .rhd .rhd-side--desk {
    display: none;
  }
  .rhd .rhd-phonebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 14px;
    background-color: var(--paper);
    background-image: var(--grain);
    border-bottom: 1.5px solid var(--ink);
  }
  .rhd .rhd-phonebar .rhd-brand-mark {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .rhd .rhd-phonebar .rhd-brand-name {
    font-size: 15px;
  }
  .rhd .rhd-main {
    padding: 22px 16px 48px;
  }
}
.rhd .rhd-phonebar__btns {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.rhd .rhd-phonebar .rhd-theme-btn {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.rhd .rhd-menu-btn {
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  border-radius: 2px;
  font:
    600 14px / 1 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.rhd .rhd-menu-btn .rhd-count {
  min-width: 20px;
  height: 18px;
  font-size: 10.5px;
}
.rhd .rhd-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
}
.rhd .rhd-drawer__panel {
  width: 300px;
  max-width: 84%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--paper-2);
  background-image: var(--grain);
  border-right: 1.5px solid var(--ink);
  box-shadow: 6px 0 0 var(--shadow);
}
.rhd .rhd-drawer__head {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 14px;
  border-bottom: 1.5px solid var(--ink);
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-drawer__head .rhd-brand-mark {
  width: 28px;
  height: 28px;
  font-size: 18px;
}
.rhd .rhd-drawer__head .rhd-menu-btn {
  margin-left: auto;
}
.rhd .rhd-drawer__nav {
  flex: 1;
  overflow: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .rhd-drawer__group-label {
  padding: 12px 6px 4px;
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .rhd-drawer__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 6px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font:
    500 15.5px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-drawer__item .rhd-side__k {
  width: 30px;
  font-size: 12px;
}
.rhd .rhd-drawer__here {
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.rhd .rhd-drawer__foot {
  flex: none;
  border-top: 1.5px solid var(--ink);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rhd .rhd-drawer__scrim {
  flex: 1;
  background: var(--backdrop);
  border: 0;
  cursor: pointer;
}

/* ---------- page header ---------- */
.rhd .rhd-ph {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .rhd-ph--card {
  padding: 24px 28px;
  background: var(--card);
  border: 1.5px solid var(--ink);
}
.rhd .rhd-ph__mark {
  position: absolute;
  right: 220px;
  top: -70px;
  font:
    800 230px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
.rhd .rhd-ph__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 760px;
}
.rhd .rhd-ph__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rhd .rhd-ktag {
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  color: var(--paper);
  background: var(--beni);
  padding: 5px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.rhd .rhd-ktag--sm {
  font-size: 13px;
  padding: 4px 5px;
}
.rhd .rhd-eyebrow {
  font:
    600 11.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .rhd-ph__title {
  margin: 0;
  font:
    800 40px / 1.02 "Shippori Mincho B1",
    serif;
  letter-spacing: -0.01em;
}
.rhd .rhd-ph__sub {
  margin: 0;
  font:
    400 16px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-ph__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rhd .rhd-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font:
    500 13px / 1.3 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .rhd .rhd-ph__title {
    font-size: 32px;
  }
  .rhd .rhd-ph__mark {
    right: -20px;
    top: -40px;
    font-size: 160px;
  }
}

/* section heading inside a page (Mincho 24px + optional link on the right) */
.rhd .rhd-sh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.rhd .rhd-sh__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font:
    700 24px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-sh__count {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .rhd-sh__aside {
  font:
    500 13.5px / 1.3 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* ---------- buttons ---------- */
.rhd .rhd-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 17px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  font:
    600 14.5px / 1 "IBM Plex Sans",
    sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.rhd .rhd-b:hover {
  color: var(--ink);
  background: var(--paper);
}
.rhd .rhd-b:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.rhd .rhd-b--primary {
  background: var(--amber);
  color: var(--on-amber);
}
.rhd .rhd-b--primary:hover {
  background: var(--amber);
  color: var(--on-amber);
  filter: brightness(1.06);
}
.rhd .rhd-b--danger {
  background: var(--beni);
  color: #fff8ee;
}
.rhd .rhd-b--danger:hover {
  background: var(--beni);
  color: #fff8ee;
  filter: brightness(1.06);
}
.rhd .rhd-b--paper {
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: none;
}
.rhd .rhd-b--paper:hover {
  background: var(--paper-2);
}
.rhd .rhd-b--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--amber);
}
.rhd .rhd-b--ghost:hover {
  background: var(--amber-wash);
  color: var(--amber);
}
.rhd .rhd-b--lg {
  padding: 13px 18px;
  font-size: 15px;
}
.rhd .rhd-b--sm {
  padding: 8px 11px;
  font-size: 13px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.rhd .rhd-b--sm.rhd-b--paper,
.rhd .rhd-b--sm.rhd-b--ghost {
  box-shadow: none;
}
.rhd .rhd-b--xs {
  padding: 6px 10px;
  font-size: 12.5px;
  box-shadow: none;
}
.rhd .rhd-b--block {
  display: flex;
  width: 100%;
}
.rhd .rhd-b--flat {
  box-shadow: none;
}
.rhd .rhd-b:disabled,
.rhd .rhd-b[aria-disabled="true"] {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1.5px dashed var(--rule);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}
.rhd .rhd-b__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: rhd-pulse 1.4s ease-in-out infinite;
}
.rhd .rhd-b__mono {
  font-family: "IBM Plex Mono", monospace;
}
@keyframes rhd-pulse {
  50% {
    opacity: 0.35;
  }
}
.rhd .rhd-b-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rhd .rhd-b-note > span {
  font:
    400 11.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* ---------- tags & status marks ---------- */
.rhd .rhd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rhd .rhd-tag--round {
  border-radius: 20px;
  padding: 6px 10px;
}
.rhd .rhd-tag--plain {
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
.rhd .rhd-tag--ok {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--ok-wash);
}
.rhd .rhd-tag--okSolid {
  border-color: var(--ok);
  color: var(--paper);
  background: var(--ok);
}
.rhd .rhd-tag--amber {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-wash);
}
.rhd .rhd-tag--amberSolid {
  border-color: var(--amber);
  color: var(--on-amber);
  background: var(--amber);
}
.rhd .rhd-tag--beni {
  border-color: var(--beni);
  color: var(--beni);
  background: var(--beni-wash);
}
.rhd .rhd-tag--beniLine {
  border-color: var(--beni);
  color: var(--beni);
}
.rhd .rhd-tag--ai {
  border-color: var(--ai);
  color: var(--ink);
  background: var(--ai-wash);
}
.rhd .rhd-tag--aiSolid {
  border-color: var(--ai);
  color: var(--on-ai);
  background: var(--ai);
}
.rhd .rhd-tag--ink {
  border-color: var(--ink);
  color: var(--ink);
}
.rhd .rhd-tag--inkSolid {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}
.rhd .rhd-tag--muted {
  border-color: var(--paper-2);
  color: var(--ink-2);
  background: var(--paper-2);
}
.rhd .rhd-tag--dashed {
  border-style: dashed;
}
.rhd .rhd-tag--strike {
  text-decoration: line-through;
}
.rhd .rhd-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rhd .rhd-tag__dot--amber {
  background: var(--amber);
}

/* site badge (JCD / JDM / PCJ) */
.rhd .rhd-site {
  display: inline-block;
  font:
    600 11px / 1 "IBM Plex Mono",
    monospace;
  letter-spacing: 0.06em;
  padding: 4px 5px 3px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  background: var(--card);
  white-space: nowrap;
}
.rhd .rhd-site--internal {
  font-weight: 500;
  border: 1px dashed var(--ink-2);
  color: var(--ink-2);
  padding: 4px 6px 3px;
  letter-spacing: 0;
  background: transparent;
}

/* grade stamp — R / RA in amber */
.rhd .rhd-gm {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--beni);
  color: var(--beni);
  font:
    700 15px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.rhd .rhd-gm--long {
  font-size: 14px;
}
.rhd .rhd-gm--repair {
  border-color: var(--amber);
  color: var(--amber);
}
.rhd .rhd-gm--sm {
  width: 28px;
  height: 28px;
  border-width: 1.5px;
  font-size: 11px;
}
.rhd .rhd-gm--lg {
  width: 52px;
  height: 52px;
  font-size: 19px;
}

/* recommendation + match meter */
.rhd .rhd-rec {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
}
.rhd .rhd-rec--bid {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--paper);
}
.rhd .rhd-rec--caution {
  background: var(--amber-wash);
  border-color: var(--amber);
  color: var(--amber);
}
.rhd .rhd-rec--avoid {
  background: var(--beni-wash);
  border-color: var(--beni);
  color: var(--beni);
}
.rhd .rhd-match {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font:
    600 12px / 1 "IBM Plex Mono",
    monospace;
  white-space: nowrap;
}
.rhd .rhd-match--weak {
  border-color: var(--rule);
  color: var(--ink-2);
}
.rhd .rhd-match__bar {
  position: relative;
  width: 26px;
  height: 4px;
  background: var(--paper-2);
}
.rhd .rhd-match__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ok);
}
.rhd .rhd-match--partial .rhd-match__fill {
  background: var(--amber);
}
.rhd .rhd-match--poor .rhd-match__fill {
  background: var(--beni);
}

/* frame number highlight (app size) */
.rhd .rhd-frame {
  display: inline-block;
  font:
    600 13px "IBM Plex Mono",
    monospace;
  background: var(--hl);
  color: var(--ink);
  padding: 5px 8px;
  border: 1.5px dashed var(--beni);
  white-space: nowrap;
}
.rhd .rhd-mono {
  font-family: "IBM Plex Mono", monospace;
}
.rhd .rhd-muted {
  color: var(--ink-2);
}
.rhd .rhd-code {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  padding: 3px 7px;
  background: var(--hl);
  border: 1px dashed var(--rule);
  color: var(--ink);
}

/* ---------- stage stepper ---------- */
.rhd .rhd-stepper {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 24px 20px 18px;
}
.rhd .rhd-stepper__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: 14px;
}
.rhd .rhd-stepper__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.rhd .rhd-stepper__line {
  position: absolute;
  top: 21px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 3px;
  background: var(--ink);
}
.rhd .rhd-stepper__line--todo {
  height: 0;
  border-top: 2px dashed var(--rule);
  background: none;
}
.rhd .rhd-stepper__dot {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font:
    700 17px / 1 "Shippori Mincho B1",
    serif;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
}
.rhd .rhd-stepper__dot--now {
  background: var(--beni);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--beni-wash);
}
.rhd .rhd-stepper__dot--todo {
  background: var(--card);
  color: var(--ink-2);
  border-color: var(--rule);
}
.rhd .rhd-stepper__label {
  font:
    600 12.5px / 1.2 "IBM Plex Sans",
    sans-serif;
  text-align: center;
}
.rhd .rhd-stepper__label--todo {
  color: var(--ink-2);
}
.rhd .rhd-stepper__when {
  font:
    400 11px / 1.2 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  text-align: center;
}
.rhd .rhd-stepper__own {
  grid-column: 3 / 7;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0 8%;
}
.rhd .rhd-stepper__own-bracket {
  height: 8px;
  border: 1.5px solid var(--beni);
  border-bottom: 0;
}
.rhd .rhd-stepper__own-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beni);
}
.rhd .rhd-stepper__own-label b {
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .rhd .rhd-stepper {
    padding: 16px 10px 14px;
  }
  .rhd .rhd-stepper__dot {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .rhd .rhd-stepper__line {
    top: 16px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
  }
  .rhd .rhd-stepper__label {
    font-size: 11px;
  }
  .rhd .rhd-stepper__when {
    display: none;
  }
  .rhd .rhd-stepper__own {
    grid-column: 2 / 7;
    padding: 0 4%;
  }
  .rhd .rhd-stepper__own-label {
    gap: 5px;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* ---------- panels ---------- */
.rhd .rhd-panel {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  min-width: 0;
}
.rhd .rhd-panel--flat {
  box-shadow: none;
}
.rhd .rhd-panel__band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background-color: var(--ai);
  background-image: var(--wood);
  color: var(--on-ai);
  font:
    600 11.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rhd .rhd-panel__band-k {
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  letter-spacing: 0;
}
.rhd .rhd-panel__band-aside {
  margin-left: auto;
  font:
    500 11px / 1 "IBM Plex Mono",
    monospace;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.rhd .rhd-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .rhd-panel__title {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font:
    700 19px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-panel__body {
  padding: 16px 18px;
}
.rhd .rhd-panel__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-rows > * + * {
  border-top: 1px solid var(--rule);
}

/* figures strip */
.rhd .rhd-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .rhd-fig {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rhd .rhd-fig + .rhd-fig {
  border-left: 1.5px solid var(--ink);
}
.rhd .rhd-fig__label {
  font:
    600 10.5px / 1.2 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .rhd-fig__value {
  font:
    600 30px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .rhd-fig__note {
  font:
    400 13px / 1.3 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .rhd .rhd-figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rhd .rhd-fig + .rhd-fig {
    border-left: 0;
  }
  .rhd .rhd-fig:nth-child(even) {
    border-left: 1.5px solid var(--ink);
  }
  .rhd .rhd-fig:nth-child(n + 3) {
    border-top: 1.5px solid var(--ink);
  }
  .rhd .rhd-fig__value {
    font-size: 26px;
  }
}

/* key/value list */
.rhd .rhd-kv {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 8px 16px;
  margin: 0;
  font:
    400 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-kv dt {
  color: var(--ink-2);
}
.rhd .rhd-kv dd {
  margin: 0;
  min-width: 0;
}

/* ---------- form controls ---------- */
.rhd .rhd-f {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font:
    600 13.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-f__hint {
  font:
    400 12px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-f__err {
  font:
    500 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--beni);
}
.rhd .rhd-in {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
  font:
    400 15px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd textarea.rhd-in {
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}
.rhd .rhd-in--sm {
  height: 36px;
  font-size: 14px;
}
.rhd .rhd-in--mono {
  font-family: "IBM Plex Mono", monospace;
}
.rhd .rhd-in:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.rhd .rhd-in[aria-invalid="true"] {
  border-color: var(--beni);
  background: var(--beni-wash);
}
.rhd .rhd-in:disabled {
  background: var(--paper-2);
  color: var(--ink-2);
  border-style: dashed;
  border-color: var(--rule);
}
.rhd .rhd-sel {
  position: relative;
  display: flex;
}
.rhd .rhd-sel select {
  appearance: none;
  padding-right: 34px;
}
.rhd .rhd-sel__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  pointer-events: none;
}
.rhd .rhd-affix {
  display: flex;
  height: 44px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
}
.rhd .rhd-affix--sm {
  height: 36px;
}
.rhd .rhd-affix__pre {
  min-width: 38px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--rule);
  font:
    600 15px "IBM Plex Mono",
    monospace;
  color: var(--amber);
}
.rhd .rhd-affix input {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font:
    600 15px "IBM Plex Mono",
    monospace;
  color: var(--ink);
}
.rhd .rhd-affix:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.rhd .rhd-affix input:focus {
  outline: none;
}

/* segmented toggle */
.rhd .rhd-seg {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
}
.rhd .rhd-seg__opt {
  min-width: 58px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font:
    600 13.5px / 1 "IBM Plex Sans",
    sans-serif;
  cursor: pointer;
}
.rhd .rhd-seg__opt:last-child {
  border-right: 0;
}
.rhd .rhd-seg__opt[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* choice cards ("For: my shop / a customer") */
.rhd .rhd-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  padding: 5px;
  margin: 0;
  background: var(--card);
  border: 1.5px solid var(--ink);
  min-width: 0;
}
.rhd .rhd-choice {
  padding: 11px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  border-radius: 0;
}
.rhd .rhd-choice[aria-pressed="true"] {
  border: 2px solid var(--amber);
  padding: 10px 11px;
  background: var(--paper);
}
.rhd .rhd-choice__title {
  display: block;
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-choice__desc {
  display: block;
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* chip filters with counts */
.rhd .rhd-fchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rhd .rhd-fchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font:
    600 13px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.rhd .rhd-fchip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.rhd .rhd-fchip--mono {
  height: 30px;
  padding: 0 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
}
.rhd .rhd-fchip--repair {
  border-color: var(--amber);
  color: var(--amber);
}
.rhd .rhd-fchip--repair[aria-pressed="true"] {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-amber);
}
.rhd .rhd-fchip__n {
  font:
    500 11.5px / 1 "IBM Plex Mono",
    monospace;
  opacity: 0.8;
}

/* checkbox + switch */
.rhd .rhd-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font:
    500 14px / 1.4 "IBM Plex Sans",
    sans-serif;
  cursor: pointer;
}
.rhd .rhd-check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
  cursor: pointer;
}
.rhd .rhd-check input:checked {
  background: var(--ink);
}
.rhd .rhd-check input:checked::after {
  content: "✓";
  color: var(--paper);
  font:
    700 12px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-check input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.rhd .rhd-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
  text-align: left;
}
.rhd .rhd-switch__track {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
}
.rhd .rhd-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 1px;
  transition: left 0.15s;
}
.rhd .rhd-switch[aria-checked="true"] .rhd-switch__track {
  background: var(--ok);
}
.rhd .rhd-switch[aria-checked="true"] .rhd-switch__knob {
  left: 20px;
  background: var(--paper);
}
.rhd .rhd-switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* combobox (shared Combobox component) */
.rhd .rhd-combo {
  position: relative;
}
.rhd .rhd-combo__list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .rhd-combo__group {
  padding: 8px 10px 6px;
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .rhd-combo__opt {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
  cursor: pointer;
}
.rhd .rhd-combo__opt[aria-selected="true"],
.rhd .rhd-combo__opt:hover {
  background: var(--paper-2);
}
.rhd .rhd-combo__hint {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .rhd-combo__empty {
  padding: 9px 10px;
  font:
    400 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
}
.rhd .rhd-tokens input {
  flex: 1;
  min-width: 80px;
  border: 0;
  background: transparent;
  font:
    400 14px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .rhd-tokens input:focus {
  outline: none;
}
.rhd .rhd-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 9px;
  background: var(--card);
  border: 1px solid var(--ink);
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .rhd-token button {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  font:
    500 13px / 1 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  cursor: pointer;
}

/* inline amount entry (Bid ¥) */
.rhd .rhd-amount {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}
.rhd .rhd-amount .rhd-affix {
  height: 36px;
  border-color: var(--amber);
  box-shadow: 2px 2px 0 var(--shadow);
}
.rhd .rhd-amount .rhd-affix__pre {
  font-size: 14px;
}
.rhd .rhd-amount .rhd-affix input {
  width: 110px;
  font-size: 14px;
}
.rhd .rhd-amount__x {
  width: 36px;
  padding: 0;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  font:
    500 15px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- tabs (ledger index tabs) ---------- */
.rhd .rhd-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--ink);
  padding-left: 4px;
  overflow-x: auto;
}
.rhd .rhd-tab {
  position: relative;
  top: 1.5px;
  flex: none;
  height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
  border-radius: 2px 2px 0 0;
  cursor: pointer;
  text-decoration: none;
}
.rhd .rhd-tab:hover {
  color: var(--ink);
}
.rhd .rhd-tab[aria-selected="true"] {
  border-color: var(--ink);
  border-bottom-color: var(--card);
  background: var(--card);
  font-weight: 600;
}
.rhd .rhd-tab__n {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .rhd-tabpanel {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-top: 0;
  padding: 16px 18px;
}

/* ---------- lot card & result card ---------- */
.rhd .rhd-lot {
  min-width: 0;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  display: flex;
  flex-direction: column;
}
.rhd .rhd-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--card) 8px 16px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rhd .rhd-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rhd .rhd-photo__none {
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .rhd-lot .rhd-photo {
  border-bottom: 1.5px solid var(--ink);
  overflow: visible;
}
.rhd .rhd-lot .rhd-photo > img {
  overflow: hidden;
}
.rhd .rhd-photo__when {
  position: absolute;
  left: 8px;
  top: 8px;
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 7px;
  background: var(--ai);
  color: var(--on-ai);
  border-radius: 2px;
}
.rhd .rhd-photo__when--past {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.rhd .rhd-photo__site {
  position: absolute;
  right: 8px;
  top: 8px;
}
.rhd .rhd-photo__grade {
  position: absolute;
  right: 10px;
  bottom: -14px;
  background: var(--card);
}
.rhd .rhd-photo__count {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font:
    500 11px / 1 "IBM Plex Mono",
    monospace;
  padding: 4px 6px;
  background: var(--card);
  border: 1px solid var(--rule);
}
.rhd .rhd-photo__new {
  position: absolute;
  left: -8px;
  top: -8px;
  font:
    700 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 7px;
  background: var(--beni);
  color: #fff8ee;
  transform: rotate(-4deg);
}
.rhd .rhd-lot__body {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.rhd .rhd-lot__title {
  font:
    600 15.5px / 1.3 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
  text-decoration: none;
}
.rhd a.rhd-lot__title:hover {
  color: var(--amber);
}
.rhd .rhd-lot__mono {
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-lot__meta {
  font:
    400 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-lot__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.rhd .rhd-lot__yen {
  font:
    600 17px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-lot__assess {
  font:
    600 12px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-lot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 14px;
}
.rhd .rhd-lot__actions .rhd-b {
  flex: 1;
}

.rhd .rhd-result {
  min-width: 0;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  display: flex;
  flex-direction: column;
}
.rhd .rhd-result__top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}
.rhd .rhd-result__photo {
  position: relative;
  flex: 0 0 180px;
  aspect-ratio: 4 / 3;
  border: 1.5px solid var(--ink);
}
.rhd .rhd-result__info {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rhd .rhd-result__title {
  font:
    600 17px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-result__why {
  margin: 0;
  padding: 0 16px 14px;
  font:
    400 14px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rhd .rhd-bidrange {
  display: grid;
  grid-template-columns: repeat(var(--cells, 3), 1fr);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.rhd .rhd-bidrange__cell {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rhd .rhd-bidrange__cell + .rhd-bidrange__cell {
  border-left: 1px solid var(--rule);
}
.rhd .rhd-bidrange__cell--target {
  background: var(--amber-wash);
}
.rhd .rhd-bidrange__label {
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .rhd-bidrange__cell--target .rhd-bidrange__label {
  color: var(--amber);
}
.rhd .rhd-bidrange__cell--max {
  background: var(--ai-wash);
}
.rhd .rhd-bidrange__cell--max .rhd-bidrange__label {
  color: var(--ai);
}
@media (max-width: 760px) {
  .rhd .rhd-bidrange[data-cells="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .rhd .rhd-bidrange[data-cells="4"] .rhd-bidrange__cell:nth-child(3) {
    border-left: none;
  }
  .rhd .rhd-bidrange[data-cells="4"] .rhd-bidrange__cell:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
}
.rhd .rhd-bidrange__yen {
  font:
    600 16px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-bidrange__usd {
  font:
    400 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .rhd-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
}
.rhd .rhd-result__start {
  margin-right: auto;
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-result__start b {
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink);
}
.rhd .rhd-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rhd .rhd-thumb {
  width: 44px;
  height: 33px;
  padding: 0;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, var(--card) 5px 10px);
  overflow: hidden;
  cursor: pointer;
}
.rhd .rhd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rhd .rhd-thumb--more {
  width: auto;
  padding: 0 8px;
  display: grid;
  place-items: center;
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  background: transparent;
}

/* ---------- data table ---------- */
.rhd .rhd-table {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  overflow-x: auto;
}
.rhd .rhd-table table {
  width: 100%;
  border-collapse: collapse;
}
.rhd .rhd-table th {
  padding: 12px 16px;
  text-align: left;
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .rhd-table--ai th {
  background-color: var(--ai);
  background-image: var(--wood);
  color: var(--on-ai);
  border-bottom: 0;
}
.rhd .rhd-table th button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.rhd .rhd-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  font:
    400 14px / 1.35 "IBM Plex Sans",
    sans-serif;
  vertical-align: middle;
}
.rhd .rhd-table tbody tr:hover {
  background: var(--paper);
}
.rhd .rhd-table tbody tr[data-href] {
  cursor: pointer;
}
.rhd .rhd-table .num {
  text-align: right;
  font:
    500 13.5px "IBM Plex Mono",
    monospace;
  white-space: nowrap;
}
.rhd .rhd-table th.num {
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
}
.rhd .rhd-table tfoot td {
  padding: 12px 16px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 0;
  background: var(--paper-2);
  font:
    600 13.5px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-table tfoot .rhd-table__foot-label {
  font:
    600 12px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rhd .rhd-table__car {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rhd .rhd-table__car b {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-table__car span {
  font:
    500 11.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
/* stacked rows on phones: pages render .rhd-stack instead of the table under 760px */
.rhd .rhd-stack {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .rhd-stack__row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .rhd-stack__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.rhd .rhd-stack__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-stack__grid > span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.rhd .rhd-stack__grid b {
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink);
}
.rhd .rhd-stack__foot {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  font:
    600 15px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-desk-only {
  display: block;
}
.rhd .rhd-phone-only {
  display: none;
}
@media (max-width: 760px) {
  .rhd .rhd-desk-only {
    display: none;
  }
  .rhd .rhd-phone-only {
    display: block;
  }
}

/* ---------- banners, progress, toasts, empty, skeleton ---------- */
.rhd .rhd-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--ai-wash);
  border: 1.5px solid var(--ai);
  color: var(--ink);
}
.rhd .rhd-banner--warn {
  background: var(--amber-wash);
  border-color: var(--amber);
}
.rhd .rhd-banner--error {
  background: var(--beni-wash);
  border-color: var(--beni);
}
.rhd .rhd-banner--ok {
  background: var(--ok-wash);
  border-color: var(--ok);
}
.rhd .rhd-banner__k {
  font:
    700 16px / 1 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-banner--warn .rhd-banner__k {
  color: var(--amber);
}
.rhd .rhd-banner--error .rhd-banner__k {
  color: var(--beni);
}
.rhd .rhd-banner--ok .rhd-banner__k {
  color: var(--ok);
}
.rhd .rhd-banner__text {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font:
    500 14px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-banner__title {
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-banner__body {
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink-2);
}
.rhd .rhd-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rhd .rhd-progress {
  height: 14px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  position: relative;
}
.rhd .rhd-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--amber);
  background-image: var(--seigaiha);
  transition: width 0.4s;
}
.rhd .rhd-tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.rhd .rhd-tally__cell {
  background: var(--card);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rhd .rhd-tally__n {
  font:
    600 18px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-tally__label {
  font:
    500 11px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

.rhd .rhd-toasts {
  position: fixed;
  z-index: 120;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
}
.rhd .rhd-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--card);
  border: 1.5px solid var(--ok);
  box-shadow: 4px 4px 0 var(--shadow);
  border-radius: 2px;
  color: var(--ink);
}
.rhd .rhd-toast--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--amber);
}
.rhd .rhd-toast--error {
  border-color: var(--beni);
}
.rhd .rhd-toast__k {
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ok);
}
.rhd .rhd-toast--ink .rhd-toast__k {
  color: var(--hl);
}
.rhd .rhd-toast--error .rhd-toast__k {
  color: var(--beni);
}
.rhd .rhd-toast__text {
  flex: 1;
  font:
    500 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-toast__act {
  padding: 0;
  background: none;
  border: 0;
  color: var(--amber);
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  cursor: pointer;
}
.rhd .rhd-toast--ink .rhd-toast__act {
  color: var(--hl);
}
/* 44pt targets for the toast's buttons (HIG). */
.rhd .rhd-toast__act,
.rhd .rhd-toast__x {
  min-height: 44px;
  min-width: 44px;
}
.rhd .rhd-toast__x {
  margin: -12px -8px -12px 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rhd .rhd-toast--ink .rhd-toast__x {
  color: var(--paper);
}
.rhd .rhd-toast {
  animation: rhd-toast-in 0.18s ease-out;
}
@keyframes rhd-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rhd .rhd-toast {
    animation: none;
  }
}
@media (max-width: 600px) {
  .rhd .rhd-toasts {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

.rhd .rhd-empty {
  padding: 36px 24px;
  border: 1.5px dashed var(--ink-2);
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.rhd .rhd-empty--compact {
  padding: 22px 18px;
  gap: 8px;
}
.rhd .rhd-empty__seal {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 2px solid var(--beni);
  color: var(--beni);
  font:
    700 24px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.rhd .rhd-empty--compact .rhd-empty__seal {
  width: 44px;
  height: 44px;
  font-size: 18px;
}
.rhd .rhd-empty__title {
  margin: 0;
  font:
    700 21px / 1.25 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-empty--compact .rhd-empty__title {
  font-size: 18px;
}
.rhd .rhd-empty__body {
  margin: 0;
  max-width: 380px;
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

.rhd .rhd-skel {
  display: block;
  height: 12px;
  background: var(--paper-2);
}
.rhd .rhd-skel--block {
  height: auto;
  aspect-ratio: 16 / 7;
}
.rhd .rhd-skel-btn {
  flex: 1;
  height: 30px;
  border: 1.5px dashed var(--rule);
}

/* ---------- modal & confirm ---------- */
.rhd .rhd-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 24px;
  overflow-y: auto;
  background: var(--backdrop);
}
.rhd .rhd-overlay--center {
  align-items: center;
}
.rhd .rhd-modal {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  color: var(--ink);
}
.rhd .rhd-modal--md {
  max-width: 620px;
}
.rhd .rhd-modal--lg {
  max-width: 820px;
}
.rhd .rhd-modal--xl {
  max-width: 1040px;
}
.rhd .rhd-modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .rhd-modal__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font:
    700 20px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-modal__x {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  background: none;
  border: 1.5px solid var(--rule);
  font:
    500 16px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
}
.rhd .rhd-modal__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .rhd-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
}
.rhd .rhd-modal__note {
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-confirm {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
}
.rhd .rhd-confirm--danger {
  border-color: var(--beni);
}
.rhd .rhd-confirm__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rhd .rhd-confirm__seal {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--beni);
  color: var(--beni);
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.rhd .rhd-confirm__title {
  margin: 0;
  font:
    700 20px / 1.25 "Shippori Mincho B1",
    serif;
}
.rhd .rhd-confirm__msg {
  margin: 0;
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-confirm__detail {
  margin: 0;
  font:
    500 13px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink);
}
.rhd .rhd-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

/* ---------- drop zone & upload queue ---------- */
.rhd .rhd-drop {
  padding: 36px 24px;
  border: 2px dashed var(--ink-2);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.rhd .rhd-drop--over {
  border-color: var(--amber);
  background: var(--amber-wash);
}
.rhd .rhd-drop__k {
  font:
    800 44px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .rhd-drop__title {
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .rhd-drop__sub {
  font:
    400 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-queue__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font:
    500 13px "IBM Plex Mono",
    monospace;
}
.rhd .rhd-queue__status {
  font:
    600 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
  white-space: nowrap;
}
.rhd .rhd-queue__status--bad {
  color: var(--beni);
}

/* ---------- coming soon ---------- */
.rhd .rhd-soon {
  position: relative;
  border: 1.5px dashed var(--ink-2);
  background: transparent;
  padding: 14px 16px;
  color: var(--ink-2);
}
.rhd .rhd-soon--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.rhd .rhd-soon__content {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.rhd .rhd-soon__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px dashed var(--ink-2);
  background: var(--card);
  color: var(--ink-2);
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rhd .rhd-soon:not(.rhd-soon--inline) > .rhd-soon__tag {
  position: absolute;
  top: -11px;
  right: 12px;
}

/* ---------- misc ---------- */
.rhd .rhd-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-2);
}
.rhd .rhd-dot--amber {
  background: var(--amber);
}
.rhd .rhd-dot--beni {
  background: var(--beni);
}
.rhd .rhd-dot--ok {
  background: var(--ok);
}
.rhd .rhd-err {
  font:
    500 13.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--beni);
}
.rhd .rhd-note {
  font:
    400 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .rhd-arrow-link {
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
}
.rhd .rhd-iframe {
  width: 100%;
  border: 1px solid var(--rule);
  background: #fff;
}

/* Tailwind palette inside the app, mapped onto the woodblock tokens so any utility class
   left on a not-yet-converted piece still reads in the right inks (and flips for dark). */
.rhd.rhd-app {
  --color-white: var(--card);
  --color-black: var(--ink);
  --color-sumi-50: var(--paper);
  --color-sumi-100: var(--paper-2);
  --color-sumi-200: var(--rule);
  --color-sumi-300: var(--rule);
  --color-sumi-400: var(--ink-2);
  --color-sumi-500: var(--ink-2);
  --color-sumi-600: var(--ink-2);
  --color-sumi-700: var(--ink);
  --color-sumi-800: var(--ink);
  --color-sumi-900: var(--ink);
  --color-washi-50: var(--card);
  --color-washi-100: var(--paper);
  --color-washi-200: var(--paper-2);
  --color-washi-300: var(--rule);
  --color-indigo-jp-50: var(--amber-wash);
  --color-indigo-jp-100: var(--amber-wash);
  --color-indigo-jp-200: var(--amber-wash);
  --color-indigo-jp-300: var(--amber);
  --color-indigo-jp-400: var(--amber);
  --color-indigo-jp-500: var(--amber);
  --color-indigo-jp-600: var(--amber);
  --color-indigo-jp-700: var(--amber);
  --color-indigo-jp-800: var(--amber);
  --color-shu-50: var(--beni-wash);
  --color-shu-100: var(--beni-wash);
  --color-shu-200: var(--beni-wash);
  --color-shu-300: var(--beni);
  --color-shu-400: var(--beni);
  --color-shu-500: var(--beni);
  --color-shu-600: var(--beni);
  --color-shu-700: var(--beni);
  --color-shu-800: var(--beni);
  --color-matcha-50: var(--ok-wash);
  --color-matcha-100: var(--ok-wash);
  --color-matcha-200: var(--ok-wash);
  --color-matcha-300: var(--ok);
  --color-matcha-400: var(--ok);
  --color-matcha-500: var(--ok);
  --color-matcha-600: var(--ok);
  --color-matcha-700: var(--ok);
  --color-matcha-800: var(--ok);
  --color-bg: var(--paper);
  --color-surface: var(--paper-2);
  --color-text: var(--ink);
  --color-accent: var(--amber);
  --color-divider: var(--rule);
}

/* A .rhd scope for overlays mounted outside the app tree (confirm dialog). */
.rhd.rhd-portal {
  min-height: 0;
  background: none;
}

/* ---------- contextual help: HelpTip "?" + bubble, HelpLink ---------- */
.rhd .rhd-helptip {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}
.rhd .rhd-helptip__btn,
.rhd .rhd-helplink {
  /* 18px mark, 32px hit area for fingers. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-2);
  font:
    700 11.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: help;
}
.rhd .rhd-helptip__btn::after,
.rhd .rhd-helplink::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.rhd .rhd-helptip__btn:hover,
.rhd .rhd-helptip__btn[aria-expanded="true"],
.rhd .rhd-helplink:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.rhd .rhd-helptip__btn:focus-visible,
.rhd .rhd-helplink:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.rhd .rhd-ph__actions .rhd-helplink {
  width: 30px;
  height: 30px;
  font-size: 15px;
  cursor: pointer;
}
.rhd .rhd-helplink--text {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--amber);
  font:
    500 13.5px / 1.3 "IBM Plex Sans",
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rhd .rhd-helplink--text::after {
  content: none;
}
.rhd .rhd-helplink--text:hover {
  background: none;
  color: var(--ink);
}
.rhd .rhd-helptip__bubble {
  position: fixed;
  z-index: 95;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  box-shadow: 4px 4px 0 var(--amber);
  font:
    400 13.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  pointer-events: auto;
}
.rhd .rhd-helptip__bubble b {
  font-weight: 600;
}

/* Number fields: no spin buttons. They covered the digits in narrow fields (years), and a
   dealer types the number anyway; the keyboard still steps with arrow keys. */
.rhd input[type="number"]::-webkit-inner-spin-button,
.rhd input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rhd input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Route crash screen — replaces the app shell, so it carries its own .rhd root. */
.rhd.ra-crash {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}
.rhd .ra-crash__card {
  width: 100%;
  max-width: 560px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-crash__seal {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 2px solid var(--beni);
  border-radius: 50%;
  color: var(--beni);
  font:
    700 24px / 1 "Shippori Mincho B1",
    serif;
  transform: rotate(-8deg);
}
.rhd .ra-crash__title {
  margin: 0;
  font:
    700 26px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .ra-crash__sub {
  margin: 0;
  font:
    400 15px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-crash__detail {
  width: 100%;
  margin: 4px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    500 12px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink);
  background: var(--beni-wash);
  border: 1px dashed var(--beni);
}
.rhd .ra-crash__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 18px;
  margin-top: 6px;
}

/* /faq — values from design-mockups/rhd-woodblock/FAQ.dc.html */
.rhd .mk-faq {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 40px);
}
.rhd .mk-faq__label {
  margin-bottom: 16px;
}
.rhd .mk-faq__title {
  margin: 0 0 14px;
  font:
    800 clamp(36px, 5vw, 56px) / 1.05 "Shippori Mincho B1",
    serif;
}
.rhd .mk-faq__intro {
  margin: 0 0 48px;
  font:
    400 18px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-faq__group {
  margin-bottom: 48px;
}
.rhd .mk-faq__group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.rhd .mk-faq__group-k {
  font:
    700 20px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-faq__group-name {
  margin: 0;
  font:
    700 24px / 1.2 "Shippori Mincho B1",
    serif;
}

/* Marketing shell (nav, footer, CTA band). Page layouts live next to each page. */

/* ---------- nav ---------- */
/* The nav carries both layouts so a prerendered page is right at any width before JS runs:
   mk-wide shows above 940px, mk-narrow at 940px and below. */
@media (max-width: 940px) {
  .rhd .mk-wide {
    display: none !important;
  }
}
@media not all and (max-width: 940px) {
  .rhd .mk-narrow {
    display: none !important;
  }
}
.rhd .mk-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  background-image: var(--grain);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-topstrip__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 7px;
  padding-bottom: 7px;
  font:
    500 11px / 1.3 "IBM Plex Mono",
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rhd .mk-navbar {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.rhd .mk-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font:
    500 15px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-nav__link {
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
}
.rhd .mk-nav__link:hover {
  color: var(--amber);
}
.rhd .mk-nav__product {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
}
.rhd .mk-dropdown {
  position: absolute;
  top: 100%;
  left: -12px;
  width: 560px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.rhd .mk-dropdown__item {
  display: flex;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 2px;
}
.rhd .mk-dropdown__item:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.rhd .mk-dropdown__k {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--beni);
  color: var(--beni);
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 2px;
}
.rhd .mk-dropdown__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-dropdown__name {
  font:
    600 14px / 1.2 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-dropdown__line {
  font:
    400 13px / 1.35 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rhd .mk-theme {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--rule);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ink);
}
.rhd .mk-theme--narrow {
  width: 44px;
  height: 44px;
}
.rhd .mk-signin {
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  font:
    500 15px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-menu-btn {
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  border-radius: 2px;
  font:
    600 14px / 1 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .mk-menu {
  border-top: 1.5px solid var(--ink);
  background: var(--card);
  padding: 8px 16px 20px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.rhd .mk-menu__head {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 14px 0 6px;
}
.rhd .mk-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  font:
    500 16px / 1.2 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-menu__k {
  width: 28px;
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-menu__links {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.rhd .mk-menu__link {
  min-height: 48px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  font:
    500 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-menu__link:last-child {
  border-bottom: 0;
}
.rhd .mk-menu__cta {
  margin-top: 12px;
  padding: 15px;
}

/* ---------- CTA band ---------- */
.rhd .mk-cta {
  padding-bottom: 88px;
}
.rhd .mk-cta__panel {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.rhd .mk-cta__ghost {
  position: absolute;
  right: -20px;
  bottom: -70px;
  font:
    800 260px / 1 "Shippori Mincho B1",
    serif;
  opacity: 0.12;
  pointer-events: none;
}
.rhd .mk-cta__copy {
  position: relative;
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .mk-cta__eyebrow {
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rhd .mk-cta__title {
  margin: 0;
  font:
    700 clamp(28px, 3.6vw, 42px) / 1.12 "Shippori Mincho B1",
    serif;
  text-wrap: balance;
}
.rhd .mk-cta__sub {
  margin: 0;
  font:
    400 17px / 1.55 "IBM Plex Sans",
    sans-serif;
  max-width: 560px;
}
.rhd .mk-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- footer ---------- */
.rhd .mk-footer {
  border-top: 1.5px solid var(--ink);
}
.rhd .mk-footer .rhd-seigaiha-strip {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.rhd .mk-footer__grid {
  padding-top: 56px;
  padding-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 40px;
}
.rhd .mk-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.rhd .mk-footer__about {
  margin: 0;
  font:
    400 14px / 1.6 "IBM Plex Sans",
    sans-serif;
  opacity: 0.85;
  text-wrap: pretty;
}
.rhd .mk-footer__contact {
  font:
    500 13px / 1.6 "IBM Plex Mono",
    monospace;
}
.rhd .mk-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font:
    400 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-footer__head {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}
.rhd .mk-footer__col a,
.rhd .mk-footer__col a:hover {
  color: inherit;
  text-decoration: none;
}
.rhd .mk-footer__base {
  padding-top: 18px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font:
    400 12px / 1.5 "IBM Plex Mono",
    monospace;
  opacity: 0.8;
}

/* /guide — layout from design-mockups/rhd-woodblock/Guide.dc.html */

/* ---------- header + step strip ---------- */
.rhd .mk-guide__header {
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-guide__head {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rhd .mk-guide__title {
  margin: 0;
  font:
    800 clamp(34px, 5vw, 58px) / 1.06 "Shippori Mincho B1",
    serif;
  max-width: 920px;
  text-wrap: balance;
}
.rhd .mk-guide__lead {
  margin: 0;
  font:
    400 19px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  max-width: 720px;
}
.rhd .mk-guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font:
    400 13px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-guide__strip-wrap {
  padding-bottom: 40px;
  overflow-x: auto;
}
.rhd .mk-guide__strip {
  display: grid;
  grid-template-columns: repeat(9, minmax(110px, 1fr));
  min-width: 990px;
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.rhd .mk-guide__stop {
  padding: 14px 12px;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .mk-guide__stop:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.rhd .mk-guide__stop-k {
  font:
    700 18px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-guide__stop-name {
  font:
    600 12.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-guide__stop-time {
  font:
    400 11px / 1 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-guide__strip-note {
  margin-top: 8px;
  font:
    400 12px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

/* ---------- body: sticky contents + article ---------- */
.rhd .mk-guide__body {
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: 80px;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}
.rhd .mk-guide__aside {
  position: sticky;
  top: 120px;
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid var(--ink);
}
.rhd .mk-guide__aside-head {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 14px 0 8px;
}
.rhd .mk-guide__aside-link {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font:
    500 14px / 1.35 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-guide__aside-link:hover {
  color: var(--amber);
}
.rhd .mk-guide__aside-n {
  font:
    500 12px / 1.6 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  width: 20px;
  flex-shrink: 0;
}
.rhd .mk-guide__article {
  flex: 1;
  min-width: 0;
  max-width: 720px;
  font:
    400 17.5px / 1.7 "IBM Plex Sans",
    sans-serif;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.rhd .mk-guide__toc {
  display: none;
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.rhd .mk-guide__toc-q {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-guide__toc-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px 10px;
}
.rhd .mk-guide__toc-link {
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font:
    500 15px "IBM Plex Sans",
    sans-serif;
}
/* The design swaps the sticky rail for a collapsible contents block at 940px. */
@media (max-width: 940px) {
  .rhd .mk-guide__aside {
    display: none;
  }
  .rhd .mk-guide__toc {
    display: block;
  }
}

/* ---------- sections ---------- */
.rhd .mk-guide__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 120px;
}
.rhd .mk-guide__section p {
  margin: 0;
}
.rhd .mk-guide__eyebrow {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-guide__h2 {
  margin: 0;
  font:
    700 clamp(26px, 3vw, 34px) / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .mk-guide__panel {
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.rhd .mk-guide__panel--pad {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-guide__panel-caps {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-guide__years {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--ink);
  font:
    500 12px / 1 "IBM Plex Mono",
    monospace;
  text-align: center;
}
.rhd .mk-guide__year {
  padding: 10px 0;
  color: var(--ink-2);
}
.rhd .mk-guide__year--ok {
  background: var(--ok);
  color: var(--paper);
}
.rhd .mk-guide__year--last {
  border-right: 3px solid var(--beni);
}
.rhd .mk-guide__note {
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-guide__grades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rhd .mk-guide__grade {
  padding: 14px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-guide__grade:last-child {
  border-right: 0;
}
.rhd .mk-guide__grade-v {
  font:
    700 22px "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-guide__grade-t {
  font:
    400 13.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-guide__fees {
  font:
    400 15px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-guide__fee {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-guide__fee--last {
  border-bottom: 0;
}
.rhd .mk-guide__fee-v {
  font-family: "IBM Plex Mono", monospace;
}
.rhd .mk-guide__fees-note {
  padding: 9px 16px;
  border-top: 1px solid var(--rule);
  font:
    400 12.5px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-guide__route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font:
    500 13px "IBM Plex Mono",
    monospace;
}
.rhd .mk-guide__route-stop {
  padding: 8px 10px;
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.rhd .mk-guide__route-stop--sea {
  background: var(--ai);
  color: var(--on-ai);
}
.rhd .mk-guide__duty-caps {
  padding: 10px 16px;
  border-bottom: 1.5px solid var(--ink);
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-guide__duty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-guide__duty:last-child {
  border-bottom: 0;
}
.rhd .mk-guide__duty b {
  font-weight: 600;
}
.rhd .mk-guide__duty-v {
  font:
    600 15px "IBM Plex Mono",
    monospace;
}
.rhd .mk-guide__duty-t {
  font-size: 14px;
  color: var(--ink-2);
  grid-column: span 2;
}
.rhd .mk-guide__aside-note {
  border: 1.5px dashed var(--rule);
  padding: 14px 16px;
  font:
    400 14.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* ---------- "Where Right Hand DMS helps" ---------- */
.rhd .mk-guide__help {
  border: 1.5px solid var(--amber);
  background: var(--paper-2);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
}
.rhd .mk-guide__help-seal {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--beni);
  color: var(--paper);
  font:
    800 16px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 2px;
}
.rhd .mk-guide__help-text {
  font:
    400 15.5px / 1.55 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-guide__help-text b {
  font-weight: 600;
}

/* HomePage: page layout. Built from design-mockups/rhd-woodblock; shared parts come from app/src/design. */
.rhd .mk-home__label-mb16 {
  margin-bottom: 16px;
}
.rhd .mk-home__home-hero-section {
  position: relative;
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-home__home-hero-span {
  position: absolute;
  left: -30px;
  top: 40px;
  font:
    800 420px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
}
.rhd .mk-home__home-hero-div {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 40px) clamp(48px, 7vw, 88px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.rhd .mk-home__home-hero-div-2 {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rhd .mk-home__home-hero-div-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .mk-home__home-hero-span-2 {
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  color: var(--paper);
  background: var(--beni);
  padding: 6px 7px;
  border-radius: 2px;
}
.rhd .mk-home__home-hero-span-3 {
  font:
    600 12px / 1.3 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-home__home-hero-h1 {
  margin: 0;
  font:
    800 clamp(38px, 5.6vw, 68px) / 1.04 "Shippori Mincho B1",
    serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.rhd .mk-home__home-hero-p {
  margin: 0;
  font:
    400 clamp(17px, 1.6vw, 20px) / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  max-width: 540px;
  text-wrap: pretty;
}
.rhd .mk-home__home-hero-div-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}
.rhd .mk-home__home-hero-div-5 {
  font:
    400 13.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  max-width: 520px;
}
.rhd .mk-home__home-hero-a {
  font-weight: 600;
}
.rhd .mk-home__home-hero-div-6 {
  flex: 1.25 1 520px;
  min-width: 0;
  position: relative;
}
.rhd .mk-home__home-hero-div-7 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-home__home-hero-span-4 {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--beni);
  color: var(--paper);
  font:
    800 14px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 2px;
}
.rhd .mk-home__home-hero-span-5 {
  font:
    600 13px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__home-hero-span-6 {
  margin-left: auto;
  font:
    500 12px / 1 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-home__home-hero-div-8 {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-home__home-hero-div-9 {
  display: flex;
  flex-direction: column;
}
.rhd .mk-home__home-hero-div-10 {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.rhd .mk-home__home-hero-div-11 {
  min-width: 0;
}
.rhd .mk-home__home-hero-div-12 {
  font:
    600 14px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__home-hero-div-13 {
  font:
    400 12px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhd .mk-home__home-hero-span-7 {
  color: var(--amber);
}
.rhd .mk-home__home-hero-div-14 {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-home__home-hero-div-15 {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.rhd .mk-home__home-hero-span-8 {
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: 2px 4px;
  border-radius: 2px;
  vertical-align: 2px;
}
.rhd .mk-home__home-hero-div-16 {
  position: relative;
  margin: -36px 0 0 auto;
  width: min(100%, 360px);
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  border-radius: 3px;
  margin-right: clamp(0px, 2vw, -24px);
}
.rhd .mk-home__home-hero-div-17 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--ink);
  background: var(--ai);
  color: var(--on-ai);
}
.rhd .mk-home__home-hero-span-9 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rhd .mk-home__home-hero-span-10 {
  font:
    500 11px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__home-hero-div-18 {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rhd .mk-home__home-hero-div-19 {
  border: 1px solid var(--rule);
  padding: 8px;
  text-align: center;
}
.rhd .mk-home__home-hero-div-20 {
  font:
    500 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-home__home-hero-div-21 {
  font:
    700 24px / 1.2 "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-home__home-hero-div-22 {
  font:
    700 24px / 1.2 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__home-hero-div-23 {
  padding: 0 14px 12px;
}
.rhd .mk-home__home-hero-div-24 {
  font:
    500 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.rhd .mk-home__home-hero-span-11 {
  font-family: "Shippori Mincho B1", serif;
  letter-spacing: 0;
}
.rhd .mk-home__home-hero-div-25 {
  display: inline-block;
  font:
    600 18px / 1 "IBM Plex Mono",
    monospace;
  background: var(--hl);
  padding: 8px 10px;
  border: 1.5px dashed var(--beni);
  border-radius: 2px;
}
.rhd .mk-home__home-hero-div-26 {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--rule);
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-home__home-hero-span-12 {
  font:
    600 12px "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-home__home-hero-div-27 {
  color: var(--ink-2);
}
.rhd .mk-home__problem-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px);
}
.rhd .mk-home__problem-h2 {
  margin: 0 0 40px;
  font:
    700 clamp(30px, 4vw, 48px) / 1.1 "Shippori Mincho B1",
    serif;
  max-width: 780px;
  text-wrap: balance;
}
.rhd .mk-home__problem-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  border: 1.5px solid var(--ink);
}
.rhd .mk-home__problem-div-2 {
  padding: 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-home__problem-span {
  font:
    500 13px / 1 "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-home__problem-h3 {
  margin: 0;
  font:
    600 20px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__problem-p {
  margin: 0;
  font:
    400 16px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-home__problem-div-3 {
  padding: 28px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-home__features-section {
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-home__features-div {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px);
}
.rhd .mk-home__features-div-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 40px;
}
.rhd .mk-home__features-h2 {
  margin: 0;
  font:
    700 clamp(30px, 4vw, 48px) / 1.1 "Shippori Mincho B1",
    serif;
  max-width: 700px;
  text-wrap: balance;
}
.rhd .mk-home__features-div-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}
.rhd .mk-home__features-article {
  background: var(--card);
  border: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.rhd .mk-home__features-div-4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-home__features-span {
  font:
    600 12px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__features-span-2 {
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-home__features-div-5 {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
}
.rhd .mk-home__features-div-6 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rhd .mk-home__features-span-3 {
  font:
    500 11px / 1 "IBM Plex Mono",
    monospace;
  padding: 5px 7px;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
.rhd .mk-home__features-span-4 {
  font:
    500 11px / 1 "IBM Plex Mono",
    monospace;
  padding: 5px 7px;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.rhd .mk-home__features-div-7 {
  font:
    400 12px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-home__features-div-8 {
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .mk-home__features-div-9 {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.rhd .mk-home__features-h3 {
  margin: 0;
  font:
    600 19px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__features-p {
  margin: 0;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-home__features-a {
  margin-top: auto;
  padding-top: 8px;
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__features-div-10 {
  padding: 18px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: var(--paper);
  align-items: center;
}
.rhd .mk-home__features-div-11 {
  font:
    600 13px / 1.6 "Shippori Mincho B1",
    serif;
  color: var(--ink-2);
}
.rhd .mk-home__features-div-12 {
  font:
    500 12.5px / 1.6 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__features-div-13 {
  padding: 18px 16px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .mk-home__features-div-14 {
  position: relative;
  height: 26px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-home__features-span-5 {
  position: absolute;
  left: 12%;
  bottom: 0;
  width: 2px;
  height: 10px;
  background: var(--ink-2);
}
.rhd .mk-home__features-span-6 {
  position: absolute;
  left: 30%;
  bottom: 0;
  width: 2px;
  height: 16px;
  background: var(--ink-2);
}
.rhd .mk-home__features-span-7 {
  position: absolute;
  left: 44%;
  bottom: 0;
  width: 2px;
  height: 22px;
  background: var(--ink-2);
}
.rhd .mk-home__features-span-8 {
  position: absolute;
  left: 52%;
  bottom: 0;
  width: 2px;
  height: 18px;
  background: var(--ink-2);
}
.rhd .mk-home__features-span-9 {
  position: absolute;
  left: 70%;
  bottom: 0;
  width: 2px;
  height: 12px;
  background: var(--ink-2);
}
.rhd .mk-home__features-span-10 {
  position: absolute;
  left: 36%;
  width: 26%;
  bottom: -5px;
  height: 8px;
  background: var(--amber);
  opacity: 0.85;
}
.rhd .mk-home__features-div-15 {
  display: flex;
  justify-content: space-between;
  font:
    500 12px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__features-span-11 {
  color: var(--ink-2);
}
.rhd .mk-home__features-div-16 {
  padding: 18px 16px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font:
    400 13px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__features-div-17 {
  display: flex;
  justify-content: space-between;
}
.rhd .mk-home__features-b {
  font-weight: 600;
}
.rhd .mk-home__features-span-12 {
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-home__features-div-18 {
  padding: 18px 16px;
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rhd .mk-home__features-span-13 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  border-radius: 20px;
}
.rhd .mk-home__features-span-14 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 20px;
}
.rhd .mk-home__features-span-15 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  background: var(--ok);
  color: var(--paper);
  border-radius: 20px;
}
.rhd .mk-home__features-span-16 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  border: 1px dashed var(--ink-2);
  color: var(--ink-2);
  border-radius: 20px;
}
.rhd .mk-home__features-div-19 {
  padding: 14px 16px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font:
    400 12.5px / 1.3 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__features-div-20 {
  display: flex;
  justify-content: space-between;
  border-top: 1.5px solid var(--ink);
  padding-top: 5px;
  font-weight: 600;
}
.rhd .mk-home__features-div-21 {
  display: flex;
  justify-content: space-between;
  border-top: 1.5px solid var(--ink);
  padding-top: 5px;
  font-weight: 600;
  color: var(--ok);
}
.rhd .mk-home__life-of-one-car-section {
  padding: clamp(56px, 8vw, 104px) 0;
  overflow: hidden;
}
.rhd .mk-home__life-of-one-car-div {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
.rhd .mk-home__life-of-one-car-div-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}
.rhd .mk-home__life-of-one-car-h2 {
  margin: 0;
  font:
    700 clamp(30px, 4vw, 48px) / 1.1 "Shippori Mincho B1",
    serif;
  max-width: 720px;
  text-wrap: balance;
}
.rhd .mk-home__life-of-one-car-div-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--ink);
  padding: 10px 14px;
  background: var(--card);
}
.rhd .mk-home__life-of-one-car-span {
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-home__life-of-one-car-span-2 {
  font:
    600 15px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__life-of-one-car-span-3 {
  font:
    400 13px / 1 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-home__life-of-one-car-div-4 {
  margin-top: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 clamp(16px, 4vw, 40px) 24px;
  scroll-padding: 0 clamp(16px, 4vw, 40px);
}
.rhd .mk-home__life-of-one-car-div-5 {
  display: flex;
  gap: 0;
  width: max-content;
  max-width: none;
  margin: 0 auto;
}
.rhd .mk-home__life-of-one-car-div-6 {
  scroll-snap-align: start;
  width: min(78vw, 272px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.rhd .mk-home__life-of-one-car-div-7 {
  display: flex;
  align-items: center;
  height: 44px;
}
.rhd .mk-home__life-of-one-car-span-4 {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font:
    700 16px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 50%;
}
.rhd .mk-home__life-of-one-car-span-5 {
  flex: 1;
  height: 3px;
  background: var(--ink);
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 16px);
}
.rhd .mk-home__life-of-one-car-div-8 {
  padding: 16px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .mk-home__life-of-one-car-div-9 {
  font:
    500 12px / 1 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-home__life-of-one-car-h3 {
  margin: 0;
  font:
    600 18px / 1.25 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__life-of-one-car-div-10 {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
}
.rhd .mk-home__life-of-one-car-div-11 {
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-home__life-of-one-car-div-12 {
  font:
    600 17px / 1.2 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__life-of-one-car-div-13 {
  font:
    400 13px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-home__life-of-one-car-div-14 {
  margin-top: auto;
  align-self: flex-start;
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 20px;
}
.rhd .mk-home__life-of-one-car-div-15 {
  max-width: 1240px;
  margin: 8px auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  font:
    400 13px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-home__custom-orders-section {
  background: var(--ai);
  background-image: var(--wood);
  color: var(--on-ai);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.rhd .mk-home__custom-orders-div {
  height: 24px;
  background-image: var(--seigaiha);
}
.rhd .mk-home__custom-orders-div-2 {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.rhd .mk-home__custom-orders-div-3 {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rhd .mk-home__custom-orders-div-4 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rhd .mk-home__custom-orders-span {
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ai);
  background: var(--on-ai);
  padding: 5px 6px;
  border-radius: 2px;
}
.rhd .mk-home__custom-orders-span-2 {
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.rhd .mk-home__custom-orders-h2 {
  margin: 0;
  font:
    700 clamp(30px, 4vw, 48px) / 1.1 "Shippori Mincho B1",
    serif;
  text-wrap: balance;
}
.rhd .mk-home__custom-orders-div-5 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.rhd .mk-home__custom-orders-div-6 {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.rhd .mk-home__custom-orders-span-3 {
  font:
    500 13px / 1.5 "IBM Plex Mono",
    monospace;
  opacity: 0.8;
}
.rhd .mk-home__custom-orders-div-7 {
  font:
    400 16px / 1.55 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__custom-orders-b {
  font-weight: 600;
}
.rhd .mk-home__custom-orders-a {
  color: var(--on-ai);
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__custom-orders-div-8 {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 #0008;
  border-radius: 3px;
  overflow: hidden;
}
.rhd .mk-home__custom-orders-div-9 {
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.rhd .mk-home__custom-orders-span-4 {
  font:
    600 14px / 1.2 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__custom-orders-span-5 {
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 20px;
}
.rhd .mk-home__custom-orders-div-10 {
  padding: 16px;
  font:
    400 14.5px / 1.6 "IBM Plex Sans",
    sans-serif;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .mk-home__custom-orders-div-11 {
  font:
    400 12.5px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-home__custom-orders-p {
  margin: 0;
}
.rhd .mk-home__custom-orders-div-12 {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
}
.rhd .mk-home__custom-orders-div-13 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  font:
    400 13px / 1.3 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__custom-orders-div-14 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  font:
    400 13px / 1.3 "IBM Plex Mono",
    monospace;
}
.rhd .mk-home__custom-orders-div-15 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rhd .mk-home__custom-orders-span-6 {
  padding: 10px 14px;
  background: var(--amber);
  color: var(--on-amber);
  border: 1.5px solid var(--ink);
  font:
    600 14px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .mk-home__custom-orders-span-7 {
  padding: 10px 14px;
  border: 1.5px solid var(--ink);
  font:
    600 14px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .mk-home__security-strip-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 40px) 40px;
}
.rhd .mk-home__security-strip-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-home__security-strip-div-2 {
  padding: 24px 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .mk-home__security-strip-span {
  font:
    700 22px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-home__security-strip-b {
  font:
    600 16px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-home__security-strip-span-2 {
  font:
    400 14.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-home__security-strip-div-3 {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .mk-home__security-strip-a {
  font:
    600 15px / 1.4 "IBM Plex Sans",
    sans-serif;
  margin-top: 30px;
}
.rhd .mk-home__pricing-teaser-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 40px) 72px;
}
.rhd .mk-home__pricing-teaser-div {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  border: 1.5px dashed var(--ink-2);
  padding: 28px;
}
.rhd .mk-home__pricing-teaser-div-2 {
  display: flex;
  gap: 18px;
  align-items: center;
  flex: 1 1 360px;
}
.rhd .mk-home__pricing-teaser-h3 {
  margin: 0 0 6px;
  font:
    700 24px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .mk-home__pricing-teaser-p {
  margin: 0;
  font:
    400 15.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-home__pricing-teaser-a {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
/* Hero lot thumbnail (replaces the design's placeholder 日産 boxes). */
.rhd .mk-home__lot-thumb {
  width: 52px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}

/* /pricing — invite-only plans priced by auction sheets read (mk-pricing__*). */
.rhd .mk-pricing {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rhd .mk-pricing__label {
  margin-bottom: -16px;
}
.rhd .mk-pricing__title {
  margin: 0;
  font:
    800 clamp(36px, 5vw, 60px) / 1.05 "Shippori Mincho B1",
    serif;
  max-width: 820px;
  text-wrap: balance;
}
.rhd .mk-pricing__text {
  margin: 0;
  font:
    400 16px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pricing__text b {
  color: var(--ink);
}

/* Invite-only banner */
.rhd .mk-pricing__invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  background: var(--paper-2);
  border-style: dashed;
}
.rhd .mk-pricing__invite-copy {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .mk-pricing__invite-title {
  margin: 0;
  font:
    700 clamp(22px, 2.6vw, 28px) / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .mk-pricing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Plans */
.rhd .mk-pricing__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.rhd .mk-pricing__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 30px);
}
.rhd .mk-pricing__plan--featured {
  background: var(--card);
  outline: 2px solid var(--amber);
  outline-offset: -6px;
}
.rhd .mk-pricing__badge {
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 5px 9px;
  background: var(--amber);
  color: var(--on-amber);
  border: 1.5px solid var(--ink);
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rhd .mk-pricing__plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rhd .mk-pricing__plan-k {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--beni);
  border-radius: 50%;
  color: var(--beni);
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  transform: rotate(-8deg);
}
.rhd .mk-pricing__plan-name {
  margin: 0;
  font:
    700 26px / 1.1 "Shippori Mincho B1",
    serif;
}
.rhd .mk-pricing__who {
  margin: 0;
  min-height: 2.9em;
  font:
    400 14.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rhd .mk-pricing__amount {
  font:
    600 42px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-pricing__per {
  font:
    500 15px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pricing__annual {
  margin: -4px 0 0;
  font:
    400 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pricing__sheets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
.rhd .mk-pricing__sheets-n {
  font:
    600 24px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-pricing__sheets-l {
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pricing__lines,
.rhd .mk-pricing__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.rhd .mk-pricing__lines {
  flex: 1;
  gap: 8px;
  font:
    400 15px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pricing__lines li {
  display: flex;
  gap: 10px;
}
.rhd .mk-pricing__check {
  color: var(--beni);
  font-weight: 600;
}
.rhd .mk-pricing__plan-cta {
  align-self: stretch;
  margin-top: 6px;
}

/* Below the plans */
.rhd .mk-pricing__below {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 48px;
  padding-top: 8px;
}
.rhd .mk-pricing__includes-head {
  display: block;
  margin-bottom: 12px;
}
.rhd .mk-pricing__list {
  font:
    400 16px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pricing__item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-pricing__item:last-child {
  border-bottom: 0;
}
.rhd .mk-pricing__explain {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .mk-pricing__explain .mk-pricing__includes-head {
  margin-bottom: 0;
}

@media (max-width: 940px) {
  .rhd .mk-pricing__plans,
  .rhd .mk-pricing__below {
    grid-template-columns: 1fr;
  }
  .rhd .mk-pricing__who {
    min-height: 0;
  }
}

/* Shared layout for the /product/* pages (hero, how-it-works, FAQ, "next" link).
   Values from design-mockups/rhd-woodblock/Product-*.dc.html. Pages add their own close-ups and step bodies. */

/* ---------- hero ---------- */
.rhd .mk-pp-hero {
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-pp-hero__inner {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.rhd .mk-pp-hero--marked {
  position: relative;
  overflow: hidden;
}
.rhd .mk-pp-hero__watermark {
  position: absolute;
  right: -40px;
  top: -30px;
  font:
    800 360px / 1 "Shippori Mincho B1",
    serif;
  opacity: 0.045;
  pointer-events: none;
}
.rhd .mk-pp-hero--marked .mk-pp-hero__inner {
  position: relative;
}
.rhd .mk-pp-hero__inner--start {
  align-items: flex-start;
}
.rhd .mk-pp-hero__inner--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 40px;
}
.rhd .mk-pp-hero__copy {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rhd .mk-pp-hero__copy--narrow {
  flex: none;
  max-width: 780px;
}
.rhd .mk-pp-hero__title {
  margin: 0;
  font:
    800 clamp(36px, 5vw, 60px) / 1.05 "Shippori Mincho B1",
    serif;
  text-wrap: balance;
}
.rhd .mk-pp-hero__lead {
  margin: 0;
  font:
    400 19px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rhd .mk-pp-hero__mock {
  flex: 1.3 1 480px;
  min-width: 0;
}

/* ---------- section scaffolding ---------- */
.rhd .mk-pp-section {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.rhd .mk-pp-section .rhd-label {
  margin-bottom: 16px;
}
.rhd .mk-pp-section__title {
  margin: 0 0 40px;
  font:
    700 clamp(28px, 3.6vw, 44px) / 1.1 "Shippori Mincho B1",
    serif;
  max-width: 720px;
}
.rhd .mk-pp-section__title--loose {
  margin-bottom: 48px;
}
.rhd .mk-pp-section__title--wide {
  max-width: 760px;
}

/* ---------- numbered steps ---------- */
.rhd .mk-pp-steps {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.rhd .mk-pp-step {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.rhd .mk-pp-step__copy {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-pp-step__k {
  font:
    700 40px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-pp-step__title {
  margin: 0;
  font:
    600 22px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pp-step__text {
  margin: 0;
  font:
    400 16px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pp-step__ui {
  flex: 1.3 1 400px;
  min-width: 0;
}
.rhd .mk-pp-step__ui--framed {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
}

/* ---------- details band ---------- */
.rhd .mk-pp-details {
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-pp-details__inner {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
}
.rhd .mk-pp-details__title {
  margin: 0 0 32px;
  font:
    700 clamp(26px, 3.2vw, 38px) / 1.15 "Shippori Mincho B1",
    serif;
}
.rhd .mk-pp-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px 32px;
}
.rhd .mk-pp-details__item {
  border-top: 1.5px solid var(--ink);
  padding-top: 14px;
}
.rhd .mk-pp-details__item b {
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pp-details--tight .mk-pp-details__item b {
  line-height: 1.3;
}
.rhd .mk-pp-details__item p {
  margin: 6px 0 0;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pp-band-title {
  margin: 0;
  font:
    700 clamp(26px, 3.4vw, 40px) / 1.15 "Shippori Mincho B1",
    serif;
}
.rhd .mk-pp-mock-head {
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.rhd .mk-pp-kicker {
  font:
    500 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-pp-mono-sm {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-pp-mini-btn {
  padding: 10px 14px;
  background: var(--amber);
  color: var(--on-amber);
  border: 1.5px solid var(--ink);
  font:
    600 14px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .mk-pp-mini-btn--ghost {
  background: transparent;
  color: var(--ink);
}

/* ---------- FAQ (larger variant used on product pages) ---------- */
.rhd .mk-pp-faq {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) clamp(16px, 4vw, 40px);
}
.rhd .mk-pp-faq--tight-top {
  padding-top: 0;
}
.rhd .mk-pp-faq__title {
  margin: 0 0 24px;
  font:
    700 clamp(26px, 3.2vw, 38px) / 1.15 "Shippori Mincho B1",
    serif;
}
/* The design draws the list's top rule on the container, not the first row; drawing it on the
   row rounds to a different pixel and shifts everything below by 1px. */
.rhd .mk-pp-faq__list {
  border-top: 1.5px solid var(--ink);
}
.rhd .mk-pp-faq__list .rhd-faq {
  border-top: 0;
}
/* ---------- next-page link ---------- */
.rhd .mk-pp-next-wrap {
  padding-bottom: 72px;
}
.rhd .mk-pp-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
}
.rhd .mk-pp-next:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.rhd .mk-pp-next__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .mk-pp-next__title {
  font:
    700 26px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .mk-pp-next__go {
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}

/* /product/bidding — from design-mockups/rhd-woodblock/Product-Bidding.dc.html */
.rhd .mk-pb-board {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  overflow-x: auto;
}
.rhd .mk-pb-board__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  min-width: 1000px;
}
.rhd .mk-pb-col {
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.rhd .mk-pb-col__head {
  padding: 12px 14px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rhd .mk-pb-col__count {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-pb-col__cars {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* board pills are a touch tighter than the library's stage pill */
.rhd .mk-pb-pill {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 20px;
  border: 1px solid;
}
.rhd .mk-pb-pill--watching {
  color: var(--ink-2);
  border-color: var(--rule);
}
.rhd .mk-pb-pill--bidding {
  color: var(--amber);
  border-color: var(--amber);
}
.rhd .mk-pb-pill--won {
  background: var(--ok);
  color: var(--paper);
  border-color: var(--ok);
}
.rhd .mk-pb-pill--importing {
  background: var(--ai);
  color: var(--on-ai);
  border-color: var(--ai);
}
.rhd .mk-pb-pill--owned {
  color: var(--ink);
  border-color: var(--ink);
}
.rhd .mk-pb-car {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-pb-car__name {
  font:
    600 13px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pb-car__meta {
  font:
    400 11.5px / 1.3 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-pb-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 20px;
}
.rhd .mk-pb-step {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .mk-pb-step__k {
  font:
    700 34px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-pb-step__title {
  margin: 0;
  font:
    600 19px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pb-step__text {
  margin: 0;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pb-ui {
  margin-top: auto;
}
.rhd .mk-pb-chip-btn {
  align-self: flex-start;
  padding: 9px 14px;
  border: 1.5px solid var(--ink);
  font:
    600 14px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .mk-pb-chip-btn--bid {
  background: var(--amber);
  color: var(--on-amber);
  font-family: "IBM Plex Mono", monospace;
}
.rhd .mk-pb-check {
  border: 1.5px dashed var(--ok);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .mk-pb-check__title {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pb-check__btns {
  display: flex;
  gap: 6px;
}
.rhd .mk-pb-check__btn {
  padding: 7px 10px;
  border: 1px solid var(--ink);
  font:
    600 13px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .mk-pb-check__btn--ok {
  background: var(--ok);
  color: var(--paper);
  border-color: transparent;
}
.rhd .mk-pb-add {
  display: flex;
  gap: 6px;
}
.rhd .mk-pb-add__input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font:
    500 14px "IBM Plex Mono",
    monospace;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rhd .mk-pb-add__btn {
  padding: 9px 12px;
  border: 1.5px solid var(--ink);
  font:
    600 14px / 1.2 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}

/* /product/email — from design-mockups/rhd-woodblock/Product-Email.dc.html */
.rhd .mk-pe-thread {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
}
.rhd .mk-pe-thread .mk-pp-mock-head {
  padding: 12px 16px;
}
.rhd .mk-pe-thread__title {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pe-msg {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-pe-msg--sheet {
  gap: 6px;
}
.rhd .mk-pe-msg--draft {
  border-bottom: 0;
  gap: 8px;
  background: var(--paper);
}
.rhd .mk-pe-msg__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.rhd .mk-pe-msg__who {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pe-msg__state {
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rhd .mk-pe-msg__state--ok {
  color: var(--ok);
}
.rhd .mk-pe-msg__state--amber {
  color: var(--amber);
}
.rhd .mk-pe-msg__state--pill {
  padding: 4px 7px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 20px;
}
.rhd .mk-pe-msg__body {
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-pe-msg--draft .mk-pe-msg__body {
  color: var(--ink);
}
.rhd .mk-pe-file {
  display: inline-flex;
  align-self: flex-start;
  gap: 7px;
  padding: 6px 9px;
  border: 1.5px solid var(--ink);
  font:
    600 12.5px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .mk-pe-file__k {
  font-family: "Shippori Mincho B1", serif;
  color: var(--beni);
}
.rhd .mk-pe-btns {
  display: flex;
  gap: 8px;
}
.rhd .mk-pe-btns .mk-pp-mini-btn {
  padding: 9px 13px;
  font-size: 13px;
}
.rhd .mk-pe-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}
.rhd .mk-pe-card {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .mk-pe-card__k {
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.rhd .mk-pe-card__title {
  margin: 0;
  font:
    600 20px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-pe-card__text {
  margin: 0;
  font:
    400 15.5px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* /product/hunts — from design-mockups/rhd-woodblock/Product-Hunts.dc.html */
.rhd .mk-ph-card {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
}
.rhd .mk-ph-card__head {
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.rhd .mk-ph-card__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-ph-card__name {
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ph-card__criteria {
  font:
    400 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-ph-tag {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 9px;
  background: var(--ai);
  color: var(--on-ai);
  border-radius: 20px;
}
.rhd .mk-ph-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-ph-stat {
  padding: 12px 16px;
  border-right: 1px solid var(--rule);
}
.rhd .mk-ph-stat:last-child {
  border-right: 0;
}
.rhd .mk-ph-stat__k {
  font:
    500 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-ph-stat__v {
  font:
    600 14px "IBM Plex Mono",
    monospace;
}
.rhd .mk-ph-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font:
    400 13px / 1.4 "IBM Plex Mono",
    monospace;
}
.rhd .mk-ph-match__price {
  font-weight: 600;
}
.rhd .mk-ph-match__flag {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  align-self: center;
}
.rhd .mk-ph-card__foot {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.rhd .mk-ph-card__note {
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
}

/* steps */
.rhd .mk-ph-panel {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
}
.rhd .mk-ph-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.rhd .mk-ph-email {
  flex: 1 1 200px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  padding: 14px;
  font:
    400 14px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-ph-email__from {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  margin-bottom: 6px;
}
.rhd .mk-ph-filled {
  flex: 1 1 200px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font:
    500 13px / 1.3 "IBM Plex Mono",
    monospace;
}
.rhd .mk-ph-filled__head {
  font:
    600 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.rhd .mk-ph-filled__muted {
  color: var(--ink-2);
}
.rhd .mk-ph-choice {
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rhd .mk-ph-choice__opt {
  padding: 14px;
  border: 1px solid var(--rule);
}
.rhd .mk-ph-choice__opt--on {
  border: 2px solid var(--amber);
  background: var(--paper);
}
.rhd .mk-ph-choice__name {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ph-choice__desc {
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  margin-top: 4px;
}
.rhd .mk-ph-log {
  font:
    400 13.5px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ph-log__row {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-ph-log__row--head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.rhd .mk-ph-log__row--last {
  border-bottom: 0;
  color: var(--amber);
}
.rhd .mk-ph-log__day {
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink-2);
}
.rhd .mk-ph-won {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.rhd .mk-ph-won__car {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-ph-won__name {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ph-won__meta {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-ph-won__pill {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--ok);
  color: var(--paper);
  border-radius: 20px;
}

/* details band */
.rhd .mk-ph-details {
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-ph-details__inner {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
}
.rhd .mk-ph-details__title {
  margin: 0 0 32px;
  font:
    700 clamp(26px, 3.2vw, 38px) / 1.15 "Shippori Mincho B1",
    serif;
}
.rhd .mk-ph-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px 32px;
}
.rhd .mk-ph-detail {
  border-top: 1.5px solid var(--ink);
  padding-top: 14px;
}
.rhd .mk-ph-detail__title {
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ph-detail__text {
  margin: 6px 0 0;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* /product/landed-cost — layout from design-mockups/rhd-woodblock/Product-Landed-Cost.dc.html */

/* ---------- hero ---------- */
.rhd .mk-landed__sheet-head {
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.rhd .mk-landed__sheet-car {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-landed__sheet-frame {
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  background: var(--hl);
  padding: 3px 6px;
}
.rhd .mk-landed__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-landed__line-label {
  font:
    500 14px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-landed__line-usd {
  font:
    500 14px / 1.3 "IBM Plex Mono",
    monospace;
  text-align: right;
}
.rhd .mk-landed__line-note {
  font:
    400 11.5px / 1.3 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-landed__line-doc {
  font:
    500 11.5px / 1.3 "IBM Plex Sans",
    sans-serif;
  text-align: right;
  text-decoration: none;
}
.rhd .mk-landed__total {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1.5px solid var(--ink);
  font:
    600 18px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-landed__total-label {
  font-family: "IBM Plex Sans", sans-serif;
}
.rhd .mk-landed__missing {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font:
    600 13px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--beni);
}

/* ---------- how it works ---------- */
.rhd .mk-landed__h2 {
  margin: 0;
  font:
    700 clamp(28px, 3.6vw, 44px) / 1.1 "Shippori Mincho B1",
    serif;
}
.rhd .mk-landed__drop {
  flex: 1.3 1 400px;
  min-width: 0;
  border: 2px dashed var(--ink-2);
  background: var(--card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .mk-landed__drop-note {
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-landed__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rhd .mk-landed__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font:
    600 12.5px / 1 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
  color: var(--ink);
}
.rhd .mk-landed__chip-k {
  font:
    700 12px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-landed__review-head {
  padding: 11px 14px;
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.rhd .mk-landed__review-title {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-landed__review-frame {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-landed__review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font:
    400 13px / 1.3 "IBM Plex Mono",
    monospace;
  align-items: center;
}
.rhd .mk-landed__review-row:last-child {
  border-bottom: 0;
}
.rhd .mk-landed__ok {
  color: var(--ok);
}
.rhd .mk-landed__checklist {
  padding: 6px 0;
  font:
    400 14px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-landed__check {
  display: flex;
  gap: 10px;
  padding: 9px 14px;
}
.rhd .mk-landed__check--missing {
  color: var(--beni);
  font-weight: 600;
}
.rhd .mk-landed__sale {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font:
    500 15px / 1.3 "IBM Plex Mono",
    monospace;
}
.rhd .mk-landed__sale-row {
  display: flex;
  justify-content: space-between;
}
.rhd .mk-landed__sale-row--muted {
  color: var(--ink-2);
}
.rhd .mk-landed__sale-row--profit {
  border-top: 1.5px solid var(--ink);
  padding-top: 8px;
  font-weight: 600;
  color: var(--ok);
}

/* ---------- one entry, five cars ---------- */
.rhd .mk-landed__band {
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-landed__entry-inner {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rhd .mk-landed__entry-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}
.rhd .mk-landed__body17 {
  margin: 0;
  font:
    400 17px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-landed__table {
  overflow-x: auto;
}
.rhd .mk-landed__table-inner {
  min-width: 760px;
  font:
    400 13.5px / 1.3 "IBM Plex Mono",
    monospace;
}
.rhd .mk-landed__tr {
  display: grid;
  grid-template-columns: 2.4fr 1fr 0.7fr 1fr 0.8fr 0.8fr 1fr;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.rhd .mk-landed__tr > span:not(:first-child) {
  text-align: right;
}
.rhd .mk-landed__tr--head {
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
  align-items: stretch;
  font:
    600 11px / 1.2 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-landed__tr--total {
  padding: 13px 16px;
  border-bottom: 0;
  align-items: stretch;
  font-weight: 600;
  background: var(--paper);
}
.rhd .mk-landed__car {
  font-family: "IBM Plex Sans", sans-serif;
}
.rhd .mk-landed__car b {
  font-weight: 600;
}
.rhd .mk-landed__car-frame {
  font:
    400 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-landed__rate {
  color: var(--beni);
  font-weight: 600;
}
.rhd .mk-landed__tr .mk-landed__strong {
  font-weight: 600;
}
.rhd .mk-landed__footnote {
  margin: 0;
  font:
    400 13px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

/* ---------- review flags ---------- */
.rhd .mk-landed__checks {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 56px);
  align-items: flex-start;
}
.rhd .mk-landed__checks-copy {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .mk-landed__flags {
  flex: 1.3 1 460px;
  min-width: 0;
}
.rhd .mk-landed__flag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.rhd .mk-landed__sev {
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
  margin-top: 2px;
}
.rhd .mk-landed__sev--high {
  color: var(--beni);
}
.rhd .mk-landed__sev--check {
  color: var(--amber);
}
.rhd .mk-landed__sev--note {
  color: var(--ink-2);
}
.rhd .mk-landed__flag-text {
  font:
    400 14.5px / 1.5 "IBM Plex Sans",
    sans-serif;
}

/* ---------- details ---------- */
/* ---------- FAQ (large variant) ---------- */
/* ---------- next page ---------- */

/* /product/pricing-guidance — from design-mockups/rhd-woodblock/Product-Pricing-Guidance.dc.html */
.rhd .mk-ppg-card {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
}
.rhd .mk-ppg-card__car {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ppg-range {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-ppg-range__value {
  font:
    600 clamp(26px, 3.5vw, 34px) / 1 "IBM Plex Mono",
    monospace;
}
.rhd .mk-ppg-plot {
  position: relative;
  height: 44px;
  border-bottom: 1.5px solid var(--ink);
  margin-top: 8px;
}
.rhd .mk-ppg-plot__band {
  position: absolute;
  left: 33.3%;
  width: 25%;
  top: 0;
  bottom: 0;
  background: var(--amber);
  opacity: 0.18;
}
.rhd .mk-ppg-plot__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-5px);
}
.rhd .mk-ppg-axis {
  display: flex;
  justify-content: space-between;
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-ppg-comps {
  padding: 6px 0;
}
.rhd .mk-ppg-comp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 9px 16px;
  font:
    400 13px / 1.3 "IBM Plex Mono",
    monospace;
  align-items: center;
}
.rhd .mk-ppg-comp__car {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rhd .mk-ppg-comp__date {
  color: var(--ink-2);
}
.rhd .mk-ppg-comp__price {
  font-weight: 600;
}
.rhd .mk-ppg-comps__more {
  padding: 8px 16px 12px;
  font:
    600 13px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .mk-ppg-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.rhd .mk-ppg-step {
  border-top: 3px solid var(--ink);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-ppg-step__k {
  font:
    700 34px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-ppg-step__title {
  margin: 0;
  font:
    600 20px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ppg-step__text {
  margin: 0;
  font:
    400 15.5px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-ppg-why {
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.rhd .mk-ppg-why__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) clamp(16px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rhd .mk-ppg-why__k {
  font:
    800 48px / 1 "Shippori Mincho B1",
    serif;
  opacity: 0.9;
}
.rhd .mk-ppg-why__text {
  margin: 0;
  font:
    400 18px / 1.65 "IBM Plex Sans",
    sans-serif;
}

/* ProductSearchPage: page layout. Built from design-mockups/rhd-woodblock; shared parts come from app/src/design. */
.rhd .mk-product-search__search-hero-div-4 {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.rhd .mk-product-search__search-hero-div-5 {
  flex: 1 1 240px;
  padding: 18px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper-2);
}
.rhd .mk-product-search__search-hero-div-6 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-product-search__search-hero-div-7 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rhd .mk-product-search__search-hero-span-2 {
  font:
    500 12px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-product-search__search-hero-span-3 {
  padding: 9px 10px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  font:
    500 13px "IBM Plex Mono",
    monospace;
}
.rhd .mk-product-search__search-hero-div-8 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rhd .mk-product-search__search-hero-span-4 {
  padding: 9px 10px;
  border: 1px solid var(--rule);
  background: var(--card);
  font:
    500 13px "IBM Plex Mono",
    monospace;
}
.rhd .mk-product-search__search-hero-div-9 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rhd .mk-product-search__search-hero-span-5 {
  font:
    600 12px / 1 "IBM Plex Mono",
    monospace;
  padding: 7px 9px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
}
.rhd .mk-product-search__search-hero-div-10 {
  margin-top: auto;
  padding: 10px;
  border: 1.5px dashed var(--amber);
  font:
    500 13px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .mk-product-search__search-hero-div-11 {
  flex: 3 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rhd .mk-product-search__search-hero-div-12 {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font:
    500 12px / 1.3 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.rhd .mk-product-search__search-hero-div-13 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-product-search__search-hero-div-14 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-product-search__search-hero-div-15 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .mk-product-search__search-hero-span-6 {
  font:
    600 14.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-search__search-hero-span-7 {
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 5px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 2px;
}
.rhd .mk-product-search__search-hero-span-8 {
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 5px;
  border: 1px solid var(--ok);
  color: var(--ok);
  border-radius: 2px;
}
.rhd .mk-product-search__search-hero-span-9 {
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 5px;
  background: var(--beni);
  color: var(--paper);
  border-radius: 2px;
}
.rhd .mk-product-search__search-hero-div-16 {
  font:
    400 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .mk-product-search__search-hero-span-10 {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid var(--beni);
  color: var(--beni);
  font:
    700 14px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.rhd .mk-product-search__how-it-works-div-4 {
  padding: 6px;
}
.rhd .mk-product-search__how-it-works-div-5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-product-search__how-it-works-span-2 {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-search__how-it-works-span-3 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
}
.rhd .mk-product-search__how-it-works-div-6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
}
.rhd .mk-product-search__how-it-works-span-4 {
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  padding: 7px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.rhd .mk-product-search__how-it-works-div-7 {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .mk-product-search__how-it-works-span-5 {
  font:
    500 13px / 1 "IBM Plex Mono",
    monospace;
  padding: 8px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.rhd .mk-product-search__how-it-works-span-6 {
  font:
    500 13px / 1 "IBM Plex Mono",
    monospace;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.rhd .mk-product-search__how-it-works-span-7 {
  color: var(--beni);
}
.rhd .mk-product-search__how-it-works-div-8 {
  width: 100%;
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-top: 4px;
}
.rhd .mk-product-search__how-it-works-span-8 {
  color: var(--beni);
  font-weight: 600;
}
.rhd .mk-product-search__how-it-works-div-10 {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .mk-product-search__how-it-works-span-9 {
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 5px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 2px;
}
.rhd .mk-product-search__how-it-works-span-10 {
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 5px;
  border: 1px solid var(--ok);
  color: var(--ok);
  border-radius: 2px;
}
.rhd .mk-product-search__how-it-works-div-11 {
  padding: 13px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .mk-product-search__how-it-works-div-12 {
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rhd .mk-product-search__how-it-works-span-11 {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--beni);
  color: var(--paper);
  font:
    800 18px / 1 "Shippori Mincho B1",
    serif;
  border-radius: 2px;
}
.rhd .mk-product-search__how-it-works-div-13 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .mk-product-search__how-it-works-b {
  font:
    600 15px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-search__how-it-works-span-12 {
  font:
    400 13px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

/* ProductSheetsPage: page layout. Built from design-mockups/rhd-woodblock; shared parts come from app/src/design. */
.rhd .mk-product-sheets__sheets-hero-div-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}
.rhd .mk-product-sheets__sheets-hero-div-4 {
  flex: 1 1 420px;
  min-width: 0;
  background: #fbf7ee;
  color: #2a1c12;
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Shippori Mincho B1", serif;
}
.rhd .mk-product-sheets__sheets-hero-div-5 {
  display: flex;
  justify-content: space-between;
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  border-bottom: 2px solid #2a1c12;
  padding-bottom: 8px;
}
.rhd .mk-product-sheets__sheets-hero-span {
  font-family: "IBM Plex Mono", monospace;
}
.rhd .mk-product-sheets__sheets-hero-div-6 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #2a1c12;
  border-left: 1px solid #2a1c12;
  font-size: 12px;
}
.rhd .mk-product-sheets__sheets-hero-div-7 {
  border-right: 1px solid #2a1c12;
  border-bottom: 1px solid #2a1c12;
  padding: 6px;
}
.rhd .mk-product-sheets__sheets-hero-div-8 {
  font-size: 10px;
  color: #6b5643;
}
.rhd .mk-product-sheets__sheets-hero-div-9 {
  border-right: 1px solid #2a1c12;
  border-bottom: 1px solid #2a1c12;
  padding: 6px;
  text-align: center;
  position: relative;
}
.rhd .mk-product-sheets__sheets-hero-span-2 {
  font:
    700 22px / 1 "IBM Plex Mono",
    monospace;
  color: #b23a28;
}
.rhd .mk-product-sheets__sheets-hero-div-10 {
  grid-column: span 4;
  border-right: 1px solid #2a1c12;
  border-bottom: 1px solid #2a1c12;
  padding: 6px;
  background: #f4cf8f55;
}
.rhd .mk-product-sheets__sheets-hero-span-3 {
  font:
    600 14px "IBM Plex Mono",
    monospace;
}
.rhd .mk-product-sheets__sheets-hero-div-11 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rhd .mk-product-sheets__sheets-hero-div-12 {
  position: relative;
  width: 150px;
  height: 190px;
  flex-shrink: 0;
  margin: 6px auto;
}
.rhd .mk-product-sheets__sheets-hero-div-13 {
  position: absolute;
  left: 30px;
  top: 0;
  width: 90px;
  height: 186px;
  border: 1.5px solid #2a1c12;
  border-radius: 26px 26px 14px 14px;
}
.rhd .mk-product-sheets__sheets-hero-div-14 {
  position: absolute;
  left: 42px;
  top: 62px;
  width: 66px;
  height: 70px;
  border: 1px solid #2a1c12;
  border-radius: 6px;
}
.rhd .mk-product-sheets__sheets-hero-span-4 {
  position: absolute;
  left: 4px;
  top: 22px;
  font:
    600 12px "IBM Plex Mono",
    monospace;
  color: #b23a28;
}
.rhd .mk-product-sheets__sheets-hero-span-5 {
  position: absolute;
  left: 58px;
  top: 110px;
  font:
    600 12px "IBM Plex Mono",
    monospace;
  color: #b23a28;
}
.rhd .mk-product-sheets__sheets-hero-span-6 {
  position: absolute;
  left: 60px;
  top: 168px;
  font:
    600 12px "IBM Plex Mono",
    monospace;
  color: #b23a28;
}
.rhd .mk-product-sheets__sheets-hero-span-7 {
  position: absolute;
  right: 0;
  top: 30px;
  font:
    600 12px "IBM Plex Mono",
    monospace;
  color: #b23a28;
}
.rhd .mk-product-sheets__sheets-hero-div-15 {
  flex: 1 1 140px;
  font-size: 14px;
  line-height: 1.9;
  border-left: 1px solid #2a1c12;
  padding-left: 10px;
}
.rhd .mk-product-sheets__sheets-hero-div-16 {
  flex: 1 1 420px;
  min-width: 0;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  display: flex;
  flex-direction: column;
}
.rhd .mk-product-sheets__sheets-hero-div-17 {
  padding: 12px 16px;
  background: var(--ai);
  color: var(--on-ai);
  display: flex;
  justify-content: space-between;
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rhd .mk-product-sheets__sheets-hero-span-8 {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0;
}
.rhd .mk-product-sheets__sheets-hero-div-18 {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 18px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-product-sheets__sheets-hero-div-19 {
  font:
    500 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-product-sheets__sheets-hero-div-20 {
  font:
    600 15px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-sheets__sheets-hero-div-21 {
  font:
    600 15px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-product-sheets__sheets-hero-div-22 {
  font:
    600 15px / 1.4 "IBM Plex Mono",
    monospace;
}
.rhd .mk-product-sheets__sheets-hero-div-23 {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-product-sheets__sheets-hero-div-24 {
  font:
    500 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.rhd .mk-product-sheets__sheets-hero-span-9 {
  font:
    600 19px / 1 "IBM Plex Mono",
    monospace;
  background: var(--hl);
  padding: 7px 10px;
  border: 1.5px dashed var(--beni);
  display: inline-block;
}
.rhd .mk-product-sheets__sheets-hero-div-25 {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font:
    400 14px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-sheets__sheets-hero-b {
  font:
    600 13px "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-product-sheets__sheets-hero-div-26 {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
.rhd .mk-product-sheets__how-it-works-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 20px;
}
.rhd .mk-product-sheets__how-it-works-div-2 {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-product-sheets__how-it-works-span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--beni);
  color: var(--paper);
  font:
    700 15px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 50%;
}
.rhd .mk-product-sheets__how-it-works-h3 {
  margin: 0;
  font:
    600 19px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-sheets__how-it-works-p {
  margin: 0;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-product-sheets__how-it-works-div-3 {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.rhd .mk-product-sheets__how-it-works-span-2 {
  padding: 6px 9px;
  border: 2px solid var(--beni);
  color: var(--beni);
  font:
    700 15px "IBM Plex Mono",
    monospace;
  border-radius: 50%;
}
.rhd .mk-product-sheets__how-it-works-span-3 {
  padding: 6px 9px;
  border: 1px solid var(--rule);
  font:
    600 15px "IBM Plex Mono",
    monospace;
}
.rhd .mk-product-sheets__how-it-works-div-4 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font:
    400 13px / 1.4 "IBM Plex Sans",
    sans-serif;
  margin-top: auto;
}
.rhd .mk-product-sheets__how-it-works-b {
  font-family: "IBM Plex Mono", monospace;
  color: var(--beni);
}
.rhd .mk-product-sheets__how-it-works-div-5 {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-sheets__how-it-works-span-4 {
  font-family: "Shippori Mincho B1", serif;
}
.rhd .mk-product-sheets__how-it-works-span-5 {
  margin-top: auto;
  align-self: flex-start;
  font:
    600 15px "IBM Plex Mono",
    monospace;
  background: var(--hl);
  padding: 6px 9px;
  border: 1.5px dashed var(--beni);
}
.rhd .mk-product-sheets__how-it-works-div-6 {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.rhd .mk-product-sheets__how-it-works-div-7 {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-product-sheets__how-it-works-span-6 {
  font:
    700 40px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-product-sheets__how-it-works-h3-2 {
  margin: 0;
  font:
    600 22px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-sheets__how-it-works-p-2 {
  margin: 0;
  font:
    400 16px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-product-sheets__how-it-works-div-8 {
  flex: 1.3 1 400px;
  min-width: 0;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .mk-product-sheets__how-it-works-div-9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rhd .mk-product-sheets__how-it-works-span-7 {
  font:
    500 12px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-product-sheets__how-it-works-span-8 {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 4px 6px;
  border-radius: 2px;
}
.rhd .mk-product-sheets__how-it-works-div-10 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.rhd .mk-product-sheets__how-it-works-span-9 {
  font:
    600 16px "IBM Plex Mono",
    monospace;
  text-decoration: line-through;
  color: var(--ink-2);
}
.rhd .mk-product-sheets__how-it-works-span-10 {
  font:
    600 16px "IBM Plex Mono",
    monospace;
  padding: 7px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.rhd .mk-product-sheets__how-it-works-span-11 {
  font:
    500 12px "IBM Plex Sans",
    sans-serif;
  color: var(--ok);
}
.rhd .mk-product-sheets__details-div-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  border-top: 1.5px solid var(--ink);
  font:
    400 15px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-product-sheets__details-div-3 {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.rhd .mk-ra {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: 96px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: flex-start;
}
.rhd .mk-ra__intro {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rhd .mk-ra__lede {
  margin: 0;
  font:
    400 18px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-ra__steps {
  border-top: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  font:
    400 15.5px / 1.5 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ra__step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-ra__n {
  font:
    500 13px / 1.6 "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .mk-ra__panel {
  flex: 1.2 1 420px;
  min-width: 0;
}
.rhd .mk-ra__form {
  padding: clamp(20px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rhd .mk-ra__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}
.rhd .mk-ra__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .mk-ra__legend {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
  margin-bottom: 8px;
}
.rhd .mk-ra__fieldset .rhd-toggle {
  font-size: 14.5px;
}
.rhd .mk-ra__call {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px dashed var(--amber);
  font:
    400 15px / 1.45 "IBM Plex Sans",
    sans-serif;
  cursor: pointer;
}
.rhd .mk-ra__call input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--amber);
}
.rhd .mk-ra__submit {
  height: 52px;
  padding: 0;
}
.rhd .mk-ra__fine {
  margin: 0;
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-ra__error {
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--beni);
  color: var(--beni);
  font:
    500 14px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-ra__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rhd .mk-ra__done {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.rhd .mk-ra__thanks {
  margin: 0;
  font:
    700 32px / 1.15 "Shippori Mincho B1",
    serif;
}
.rhd .mk-ra__done-text {
  margin: 0;
  font:
    400 17px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-ra__done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rhd .mk-ra__done-actions .rhd-btn {
  padding: 13px 18px;
  font-size: 15px;
}

/* /security — values from design-mockups/rhd-woodblock/Security.dc.html */
.rhd .mk-security {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 40px) 88px;
}
.rhd .mk-security__label {
  margin-bottom: 16px;
}
.rhd .mk-security__title {
  margin: 0 0 16px;
  font:
    800 clamp(36px, 5vw, 56px) / 1.05 "Shippori Mincho B1",
    serif;
  text-wrap: balance;
}
.rhd .mk-security__intro {
  margin: 0 0 48px;
  font:
    400 19px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-security__list {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid var(--ink);
}
.rhd .mk-security__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.rhd .mk-security__k {
  font:
    700 28px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .mk-security__heading {
  margin: 0 0 8px;
  font:
    600 21px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-security__text {
  margin: 0;
  font:
    400 16.5px / 1.65 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-security__contact {
  margin: 40px 0 0;
  font:
    400 16px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

.rhd .mk-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.rhd .mk-login__strip {
  height: 28px;
  background: var(--ai);
  background-image: var(--seigaiha);
}
.rhd .mk-login__main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}
.rhd .mk-login__col {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rhd .mk-login__col .rhd-logo {
  align-self: center;
}
.rhd .mk-login__form {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rhd .mk-login__title {
  margin: 0;
  font:
    700 26px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .mk-login__submit {
  height: 50px;
  padding: 0;
}
.rhd .mk-login__error {
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--beni);
  color: var(--beni);
  font:
    500 14px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-login__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-login__muted {
  color: var(--ink-2);
}
.rhd .mk-login__forgot {
  align-self: flex-end;
  margin-top: -10px;
  font:
    500 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-login__forgot:hover {
  color: var(--ink);
}

/* Logged-out account pages: invite accept, forgot / reset password. Builds on Marketing/login.css. */

.rhd .mk-acct__col--wide {
  max-width: 460px;
}
.rhd .mk-acct__lead {
  margin: -6px 0 0;
  font:
    400 15px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-acct__lead b {
  color: var(--ink);
  font-weight: 600;
}

/* who the invite is for */
.rhd .mk-acct__facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--rule);
  background: var(--paper-2);
  font:
    400 14px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-acct__facts dt {
  font:
    600 11.5px / 1.9 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .mk-acct__facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rhd .mk-acct__mono {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13.5px;
}
.rhd .mk-acct__role-hint {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 13px;
}

.rhd .mk-acct__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.rhd .mk-acct__pair .rhd-input {
  width: 100%;
  min-width: 0;
}
@media (max-width: 480px) {
  .rhd .mk-acct__pair {
    grid-template-columns: 1fr;
  }
}

.rhd .mk-acct__hint {
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-acct__body {
  margin: 0;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .mk-acct__body b {
  color: var(--ink);
  font-weight: 600;
}
.rhd .mk-acct__ok {
  display: block;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--ok);
  color: var(--ink);
  font:
    500 14.5px / 1.5 "IBM Plex Sans",
    sans-serif;
}
.rhd .mk-acct__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rhd .mk-acct__actions > * {
  flex: 1 1 160px;
  text-align: center;
}

/* Team (/app/team) — the shop, its people and invitations. */

.rhd .ra-team {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.rhd .ra-team .rhd-ph__mark {
  right: 60px;
}
.rhd .ra-team__skel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
.rhd .ra-team__pad {
  margin: 0;
  padding: 12px 18px 0;
}
.rhd .ra-team__muted {
  color: var(--ink-2);
}
.rhd .ra-team__full {
  color: var(--beni);
  font-weight: 600;
}
.rhd .ra-team__ok {
  margin: 0;
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ok);
}
.rhd .ra-team__count {
  margin-left: 6px;
  font:
    500 14px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-team__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.rhd .ra-team__actions .rhd-note {
  margin: 0;
}

/* shop */
.rhd .ra-team__shop {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .ra-team__shop-form {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
  align-items: start;
}
.rhd .ra-team__shop-form .rhd-err,
.rhd .ra-team__shop-form .ra-team__actions {
  grid-column: 1 / -1;
  margin: 0;
}

/* roles legend */
.rhd .ra-team__roles {
  list-style: none;
  margin: 0;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font:
    400 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-team__roles b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* person / invitation rows */
.rhd .ra-team__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rhd .ra-team__person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-team__person:last-child {
  border-bottom: 0;
}
.rhd .ra-team__who {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rhd .ra-team__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.rhd .ra-team__name b {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
  overflow-wrap: anywhere;
}
.rhd .ra-team__name b.rhd-mono {
  font:
    500 14px "IBM Plex Mono",
    monospace;
}
.rhd .ra-team__name .rhd-tag {
  font-size: 10px;
  padding: 3px 8px;
}
.rhd .ra-team__meta {
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-team__role {
  width: 130px;
  display: flex;
  justify-content: flex-end;
}
.rhd .ra-team__role .rhd-sel {
  width: 100%;
}
.rhd .ra-team__act {
  width: 72px;
  display: flex;
  justify-content: flex-end;
}
.rhd .ra-team__remove {
  color: var(--beni);
}
.rhd .ra-team__remove:hover {
  background: var(--beni-wash);
  color: var(--beni);
}

/* invite */
.rhd .ra-team__invite {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-team__invite-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-team__invite-email {
  max-width: 420px;
}
.rhd .ra-team__invite-form .rhd-err {
  margin: 0;
}
.rhd .ra-team__pending {
  border-top: 1.5px solid var(--ink);
}
.rhd .ra-team__subhead {
  margin: 0;
  padding: 14px 18px 10px;
  font:
    700 17px / 1.2 "Shippori Mincho B1",
    serif;
  border-bottom: 1px solid var(--rule);
}
.rhd .rhd-panel > .ra-team__pending:first-child {
  border-top: 0;
}
.rhd .ra-team__none {
  margin: 0;
  padding: 12px 18px 16px;
}
.rhd .ra-team__member-note {
  margin: -8px 0 0;
}

/* invite result (shared with the Platform page) */
.rhd .ra-invite-link {
  display: block;
  margin: 6px 0 4px;
  padding: 6px 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.rhd .ra-invite-why {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .rhd .ra-team__roles {
    grid-template-columns: 1fr;
  }
  .rhd .ra-team__who {
    flex-basis: 100%;
  }
  .rhd .ra-team__role {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .rhd .ra-team__role .rhd-sel {
    width: auto;
    min-width: 140px;
  }
  .rhd .ra-team__act {
    width: auto;
  }
}

/* Platform (/app/admin) — shops, access requests, Claude usage, caches. Staff only. */

.rhd .ra-admin {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.rhd .ra-admin .rhd-ph__mark {
  right: 160px;
}
.rhd .ra-admin__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rhd .ra-admin__section .rhd-sh {
  align-items: center;
}
.rhd .ra-admin__section .rhd-sh__title {
  font-size: 22px;
}
.rhd .ra-admin__section .rhd-sh__count {
  color: var(--amber);
}
.rhd .ra-admin__section > .rhd-note {
  margin: -4px 0 0;
  max-width: 760px;
}
.rhd .ra-admin__h-sub {
  font:
    500 14px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-admin__pad {
  margin: 0;
  padding: 14px 16px;
}
.rhd .ra-admin__skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* figures */
.rhd .ra-admin__figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-admin__figs .rhd-fig {
  background: var(--card);
  padding: 16px 18px;
}

/* access requests */
.rhd .ra-admin__req {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
.rhd .ra-admin__req:last-child {
  border-bottom: 0;
}
.rhd .ra-admin__req-who {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .ra-admin__req-who b {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-admin__req-who b span {
  font-weight: 500;
}
.rhd .ra-admin__req-contact {
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-admin__req-contact a {
  color: inherit;
}
.rhd .ra-admin__req-facts {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 14px;
  font:
    400 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-admin__req-facts b {
  color: var(--ink);
  font-weight: 500;
}
.rhd .ra-admin__req-facts b.rhd-mono {
  font-size: 12.5px;
}
.rhd .ra-admin__req-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
}
.rhd .rhd-sel select.ra-admin__status {
  height: auto;
  min-height: 0;
  padding: 6px 24px 6px 8px;
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-width: 1px;
}
.rhd .ra-admin__status--new {
  border-color: var(--amber);
  background: var(--amber-wash);
  color: var(--amber);
}
.rhd .ra-admin__status--contacted {
  border-color: var(--ai);
  background: var(--ai-wash);
  color: var(--ink);
}
.rhd .ra-admin__status--approved {
  border-color: var(--ok);
  background: var(--ok-wash);
  color: var(--ok);
}
.rhd .ra-admin__status--declined {
  border-color: var(--rule);
  background: transparent;
  color: var(--ink-2);
}
.rhd .ra-admin__date {
  font:
    500 11.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

.rhd .ra-admin__req-status .rhd-sel__arrow {
  right: 8px;
  font-size: 9px;
}

/* claude usage */
.rhd .ra-admin__window .rhd-seg__opt {
  height: 34px;
  min-width: 0;
  font:
    600 13px / 1 "IBM Plex Mono",
    monospace;
}
.rhd .ra-admin__usage table {
  min-width: 860px;
}
.rhd .ra-admin__usage th {
  padding: 10px 16px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.rhd .ra-admin__usage td {
  padding: 10px 16px;
}
.rhd .ra-admin__usage .num {
  font-size: 12.5px;
}
.rhd .ra-admin__urow--click {
  cursor: pointer;
}
.rhd .ra-admin__usage td.ra-admin__uname {
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
}
.rhd .ra-admin__caret {
  display: inline-block;
  width: 12px;
  font-size: 11px;
  color: var(--ink-2);
}
.rhd .ra-admin__frow {
  background: var(--paper);
}
.rhd .ra-admin__usage td.ra-admin__fname {
  padding-left: 34px;
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-admin__failed {
  color: var(--beni);
}
.rhd .ra-admin__usage td.ra-admin__cost {
  font-weight: 600;
}
.rhd .ra-admin__usage tfoot td.num {
  font-size: 12.5px;
}
.rhd .ra-admin__usage tfoot .rhd-table__foot-label {
  font-size: 11px;
}

/* caches */
.rhd .ra-admin__panel-title {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-admin__caches {
  flex: none;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .ra-admin__caches .rhd-note,
.rhd .ra-admin__caches .rhd-err {
  margin: 0;
}
.rhd .ra-admin__caches-act {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rhd .ra-admin__ok {
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ok);
}

/* shops table */
.rhd .ra-admin__shops td {
  white-space: nowrap;
}
.rhd .ra-admin__shop-name {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
  text-align: left;
}
.rhd .ra-admin__shop-name:hover,
.rhd .ra-admin__shop-name:focus-visible {
  color: var(--ai);
  text-decoration: underline;
}
.rhd .ra-admin__shop-id {
  margin-left: 8px;
  font:
    500 11.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-3, var(--ink-2));
}
.rhd .ra-admin__shop--off td {
  color: var(--ink-2);
}
.rhd .ra-admin__full {
  color: var(--beni);
}
.rhd .ra-admin__when {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

/* shop modals */
.rhd .ra-admin__modal-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.rhd .ra-admin__modal-stack > .rhd-note,
.rhd .ra-admin__modal-stack .rhd-err {
  margin: 0;
}
.rhd .ra-admin__modal-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rhd .ra-admin__modal-title .rhd-tag {
  font-size: 10px;
}
.rhd .ra-admin__shop-facts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-admin__shop-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.rhd .ra-admin__span2 {
  grid-column: span 4;
}
.rhd .ra-admin__span-all,
.rhd .ra-admin__form-act {
  grid-column: 1 / -1;
}
.rhd .ra-admin__form-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rhd .ra-admin__grow {
  flex: 1;
}
.rhd .ra-admin__sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .ra-admin__sub .rhd-note,
.rhd .ra-admin__sub .rhd-err {
  margin: 0;
}
.rhd .ra-admin__subhead {
  margin: 0;
  font:
    700 17px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .ra-admin__plist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
}
.rhd .ra-admin__plist li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-admin__plist li:last-child {
  border-bottom: 0;
}
.rhd .ra-admin__plist .rhd-tag {
  font-size: 10px;
}
.rhd .ra-admin__pwho {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rhd .ra-admin__pwho b {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
  overflow-wrap: anywhere;
}
.rhd .ra-admin__pwho b.rhd-mono {
  font:
    500 13.5px "IBM Plex Mono",
    monospace;
}
.rhd .ra-admin__pmeta {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-admin__invite {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.rhd .ra-admin__invite-email {
  flex: 1 1 240px;
}

@media (max-width: 760px) {
  .rhd .ra-admin__figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rhd .ra-admin__shop-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rhd .ra-admin__span2 {
    grid-column: 1 / -1;
  }
  .rhd .ra-admin__figs .rhd-fig {
    padding: 14px 12px;
  }
  .rhd .ra-admin__req-status {
    flex-direction: row;
    align-items: center;
    margin-left: 0;
  }
}

/* Settings → Auction emails: one card per site, a sheet-request and a bid panel in each. */

.rhd .ra-aem {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.rhd .ra-aem__intro {
  margin: 0;
}

.rhd .ra-aem__signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 14px 16px;
}
.rhd .ra-aem__signoff-field {
  flex: 1 1 260px;
  max-width: 420px;
}

.rhd .ra-aem__site {
  min-width: 0;
}
.rhd .ra-aem__site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-aem__site-name {
  margin: 0;
  font:
    700 18px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .ra-aem__site-note {
  font:
    400 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

.rhd .ra-aem__panel {
  min-width: 0;
}
.rhd .ra-aem__panel + .ra-aem__panel {
  border-top: 1px solid var(--rule);
}
.rhd .ra-aem__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.rhd .ra-aem__summary::-webkit-details-marker {
  display: none;
}
.rhd .ra-aem__summary:hover .ra-aem__open,
.rhd .ra-aem__summary:focus-visible .ra-aem__open {
  text-decoration: underline;
}
.rhd .ra-aem__kind {
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
  min-width: 104px;
}
.rhd .ra-aem__to {
  flex: 1 1 200px;
  min-width: 0;
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-aem__open {
  margin-left: auto;
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ai);
}

.rhd .ra-aem__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 16px 0;
}
.rhd .ra-aem__form > .ra-settings__foot {
  margin: 0 -16px;
}
.rhd .ra-aem__help {
  margin: 0;
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-aem__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
  align-items: start;
}
.rhd .ra-aem__switch {
  grid-column: 1 / -1;
}

.rhd .ra-aem__vars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rhd .ra-aem__vars-label {
  font:
    600 12px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-right: 4px;
}
.rhd .ra-aem__chip {
  padding: 3px 7px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font:
    500 12px "IBM Plex Mono",
    monospace;
  cursor: pointer;
}
.rhd .ra-aem__chip:hover:not(:disabled),
.rhd .ra-aem__chip:focus-visible {
  border-color: var(--ink);
  background: var(--card);
}
.rhd .ra-aem__chip:disabled {
  cursor: default;
  opacity: 0.7;
}

.rhd .ra-aem__editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .rhd .ra-aem__editor {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rhd .ra-aem__tpl,
.rhd .ra-aem__preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rhd .ra-aem__body {
  min-height: 260px;
  resize: vertical;
  font:
    400 13px / 1.5 "IBM Plex Mono",
    monospace;
}
.rhd .ra-aem__err {
  margin-top: -4px;
  font:
    500 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--beni);
}

/* the rendered email: a quiet letter on paper */
.rhd .ra-aem__mail {
  border: 1px solid var(--rule);
  background: var(--paper);
  min-width: 0;
}
.rhd .ra-aem__mail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--rule);
  font:
    400 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-aem__mail-head span {
  color: var(--ink-2);
}
.rhd .ra-aem__mail-head b {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.rhd .ra-aem__mail-body {
  margin: 0;
  padding: 12px;
  min-height: 200px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    400 13px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}

/* the bid confirm step (record-bid on a hunt, and lot actions) */
.rhd .ra-bidmail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .ra-bidmail__lot {
  margin: 0;
  font:
    400 13.5px / 1.5 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-bidmail__opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font:
    400 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* LotActions — Watch / Bid ¥ / Won ¥ on an auction lot, with the inline amount entry. */
.rhd .ra-lotact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rhd .ra-lotact__row {
  display: flex;
  gap: 6px;
}
.rhd .ra-lotact__row .rhd-b {
  flex: 1;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
}
.rhd .ra-lotact__row .rhd-b--paper {
  border-color: var(--ink);
}
.rhd .ra-lotact__pill {
  display: block;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  background: var(--amber-wash);
  border: 1.5px solid var(--amber);
  border-radius: 2px;
  color: var(--ink);
  font:
    600 13px / 1.2 "IBM Plex Sans",
    sans-serif;
  cursor: pointer;
}
.rhd .ra-lotact__pill:hover {
  border-color: var(--ink);
}
.rhd .ra-lotact__pill--quiet {
  background: var(--paper);
  border-color: var(--rule);
}
.rhd .ra-lotact__amount .rhd-affix {
  flex: 1 1 130px;
  min-width: 0;
}
.rhd .ra-lotact__amount .rhd-affix input {
  width: auto;
}
.rhd .ra-lotact__err {
  margin: 0;
  font-size: 12.5px;
}

.rhd .ra-lotact__amount {
  flex-wrap: wrap;
}
.rhd .ra-lotact__amount .rhd-affix.ra-lotact__fx {
  flex: 0 1 110px;
}
.rhd .ra-lotact__hint {
  margin: 0;
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* Auction lot card — layout on top of the library's .rhd-lot pattern. */
.rhd .ra-lotcard__photo {
  display: grid;
  text-decoration: none;
  color: var(--ink);
}
.rhd .ra-lotcard__photo .rhd-photo__when {
  max-width: calc(100% - 64px);
  line-height: 1.25;
}
.rhd .ra-lotcard .rhd-lot__body {
  gap: 5px;
  padding: 14px 14px 10px;
}
.rhd .ra-lotcard .rhd-lot__mono {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.rhd .ra-lotcard .rhd-lot__meta {
  font-size: 12.5px;
}
.rhd .ra-lotcard__lot {
  font:
    400 11.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-lotcard__ask {
  align-self: flex-start;
  padding: 3px 7px;
  border: 1px dashed var(--ai);
  color: var(--ai);
  font:
    500 12px / 1.3 "IBM Plex Sans",
    sans-serif;
  border-radius: 2px;
}
.rhd .ra-lotcard .rhd-lot__yen {
  font-size: 16px;
}
.rhd .ra-lotcard__assess--good {
  color: var(--ok);
}
.rhd .ra-lotcard__assess--check {
  color: var(--amber);
}
.rhd .ra-lotcard__assess--lower {
  color: var(--beni);
}
.rhd .ra-lotcard__actions {
  padding: 0 14px 14px;
}

/* Auction search (/app/auction) — page layout over the woodblock app library. */
.rhd .ra-auction {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.rhd .ra-auction__loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-auction__p {
  margin: 0;
}

/* ---------- saved searches ---------- */
.rhd .ra-auction__saved {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rhd .ra-auction__savedhead {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-auction__tabs {
  border-bottom: 0;
  max-width: 100%;
}
.rhd .ra-auction__tabs .rhd-tab {
  height: 40px;
  padding: 0 14px;
  font-size: 13.5px;
}
.rhd .ra-auction__savedact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 8px;
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-auction__dirty {
  color: var(--amber);
}
.rhd .ra-auction__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rhd .ra-auction__namein {
  width: 220px;
  max-width: 100%;
  height: 32px;
}
.rhd .ra-auction__savedlist {
  margin: 0;
  padding: 4px 6px 10px 0;
  list-style: none;
  display: flex;
  gap: 12px;
  overflow-x: auto;
}
.rhd .ra-auction__scard {
  flex: 0 0 250px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .ra-auction__scard:hover {
  border-color: var(--ink-2);
}
.rhd .ra-auction__scard--on,
.rhd .ra-auction__scard--on:hover {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}
.rhd .ra-auction__sload {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.rhd .ra-auction__sname {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rhd .ra-auction__sname b {
  min-width: 0;
  font:
    600 14.5px / 1.3 "IBM Plex Sans",
    sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rhd .ra-auction__ssum {
  font:
    500 12px / 1.45 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rhd .ra-auction__smeta {
  font:
    500 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-auction__sacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  font:
    500 12.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-auction__sacts .rhd-linkbtn {
  font-size: 12.5px;
}

/* ---------- search filters ---------- */
.rhd .ra-auction__filters {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rhd .ra-auction__filters .rhd-f,
.rhd .ra-auction__filters .rhd-combo > label {
  font-size: 12.5px;
  gap: 6px;
}
.rhd .ra-auction__filters .rhd-combo .rhd-in,
.rhd .ra-auction__frow .rhd-in {
  height: 40px;
}
.rhd .ra-auction__frow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.rhd .ra-auction__frow2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: flex-end;
}
.rhd .ra-auction__frow2 .rhd-seg__opt {
  min-width: 0;
  height: 33px;
  padding: 0 10px;
  font-size: 12.5px;
}
.rhd .ra-auction__site abbr {
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}
.rhd .ra-auction__years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-weight: 500;
}
.rhd .ra-auction__years .rhd-in {
  width: 72px;
  height: 36px;
  padding: 0 8px;
  font-size: 13.5px;
}
.rhd .ra-auction__years .rhd-check {
  margin-left: 6px;
  font-size: 12.5px;
}
.rhd .ra-auction__more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.rhd .ra-auction__fbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.rhd .ra-auction__grades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rhd .ra-auction__glabel {
  margin-right: 4px;
  font:
    600 12.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-auction__grades .rhd-fchip {
  min-width: 38px;
  justify-content: center;
}
.rhd .ra-auction__gnote {
  margin-left: 4px;
  font:
    400 12px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .ra-auction__fact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rhd .ra-auction__fact .rhd-b--paper {
  padding: 10px 14px;
  font-size: 13.5px;
}
.rhd .ra-auction__fact .rhd-b--primary {
  padding: 11px 16px;
  font-size: 14px;
}

/* ---------- per-site strip ---------- */
.rhd .ra-auction__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rhd .ra-auction__sitestat {
  padding: 6px 10px;
  border: 1.5px solid var(--ok);
  color: var(--ok);
  background: var(--ok-wash);
  font:
    500 12.5px / 1.3 "IBM Plex Mono",
    monospace;
}
.rhd .ra-auction__sitestat--cache {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-wash);
}
.rhd .ra-auction__sitestat--err {
  border: 1.5px dashed var(--beni);
  color: var(--beni);
  background: transparent;
}

/* ---------- refine bar ---------- */
.rhd .ra-auction__results {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.rhd .ra-auction__refine {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
@media (min-width: 1024px) {
  .rhd .ra-auction__refine {
    position: sticky;
    top: 8px;
    z-index: 20;
  }
}
.rhd .ra-auction__rtop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.rhd .ra-auction__rtext {
  flex: 1 1 200px;
  width: auto;
  height: 38px;
  background: var(--card);
}
.rhd .ra-auction__rhouses {
  flex: 1 1 200px;
  min-width: 0;
}
.rhd .ra-auction__rhouses .rhd-tokens {
  min-height: 38px;
  padding: 3px 8px;
  background: var(--card);
}
.rhd .ra-auction__rhouses .rhd-token {
  height: 26px;
  font-size: 12.5px;
}
.rhd .ra-auction__rprice {
  flex: 0 0 auto;
  height: 38px;
  background: var(--card);
}
.rhd .ra-auction__rprice input {
  width: 110px;
  font-size: 13.5px;
  font-weight: 500;
}
.rhd .ra-auction__chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rhd .ra-auction__chiplabel {
  flex: 0 0 86px;
  font:
    600 11px / 1.3 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-auction__refine .rhd-fchip {
  height: 28px;
  padding: 0 9px;
  font-size: 12.5px;
  background: var(--card);
}
.rhd .ra-auction__refine .rhd-fchip[aria-pressed="true"] {
  background: var(--ink);
}
.rhd .ra-auction__refine .rhd-fchip--repair[aria-pressed="true"] {
  background: var(--amber);
}
.rhd .ra-auction__rfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.rhd .ra-auction__rfoot .rhd-check {
  font-size: 13px;
}
.rhd .ra-auction__rcount {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font:
    500 13px "IBM Plex Mono",
    monospace;
}
.rhd .ra-auction__rcount .rhd-linkbtn {
  font-size: 13px;
}

/* ---------- results ---------- */
.rhd .ra-auction__results .rhd-sh__title {
  font-size: 22px;
}
.rhd .ra-auction__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-auction__sort .rhd-in {
  height: 36px;
  background: var(--card);
}
.rhd .ra-auction__sortdir {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  border-radius: 2px;
  font:
    500 14px / 1 "IBM Plex Mono",
    monospace;
  cursor: pointer;
}
.rhd .ra-auction__sortdir:hover {
  background: var(--paper-2);
}
.rhd .ra-auction__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 22px;
}

/* Bid evidence (components/BidEvidence.tsx): the sold comps, landed breakdown and sale-price
   sources behind a bid estimate. Used on the lot page and under hunt results. */

.rhd .ra-ev {
  display: flex;
  flex-direction: column;
}
.rhd .ra-ev__sec {
  border-top: 1px solid var(--rule);
  padding-bottom: 6px;
}
.rhd .ra-ev__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  padding: 12px 16px 4px;
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-ev__k {
  font:
    700 12px "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-ev__h-aside {
  margin-left: auto;
  font:
    400 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-ev__method {
  margin: 0;
  padding: 2px 16px 8px;
  font:
    400 12.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-ev__formula {
  font:
    400 11.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* sold comps + sale sources share the row grid */
.rhd .ra-ev__comp,
.rhd .ra-ev__retail-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto 14px;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 16px;
  border-top: 1px dashed var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.rhd .ra-ev__retail-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
}
.rhd .ra-ev__comp--link:hover,
.rhd .ra-ev__comp--link:focus-visible {
  background: var(--amber-wash);
}
.rhd .ra-ev__comp-car,
.rhd .ra-ev__retail-what {
  min-width: 0;
  font:
    500 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd a.ra-ev__retail-what {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.rhd a.ra-ev__retail-what:hover {
  color: var(--ai);
}
.rhd .ra-ev__comp-own {
  margin-left: 6px;
}
.rhd .ra-ev__comp-meta,
.rhd .ra-ev__comp-why {
  display: block;
  font:
    400 11.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-ev__comp-where,
.rhd .ra-ev__retail-note {
  min-width: 0;
  font:
    400 12px / 1.45 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-ev__retail-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  font-family: "IBM Plex Sans", sans-serif;
}
.rhd .ra-ev__comp-price,
.rhd .ra-ev__line-amt {
  font:
    600 12.5px "IBM Plex Mono",
    monospace;
  white-space: nowrap;
  text-align: right;
}
.rhd .ra-ev__comp-go {
  color: var(--amber);
  font:
    600 13px "IBM Plex Mono",
    monospace;
}

/* landed lines */
.rhd .ra-ev__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 96px;
  align-items: baseline;
  gap: 4px 12px;
  padding: 6px 16px;
  border-top: 1px dashed var(--rule);
}
.rhd .ra-ev__line-label {
  min-width: 0;
  font:
    500 13px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-ev__line--total {
  border-top: 1.5px solid var(--ink);
}
.rhd .ra-ev__line--total .ra-ev__line-label,
.rhd .ra-ev__line--total .ra-ev__line-amt {
  font-weight: 700;
}
.rhd .ra-ev__src {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  background: var(--paper-2);
  white-space: nowrap;
}
.rhd .ra-ev__src--manual {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-wash);
}
.rhd .ra-ev__src--doc {
  border-color: var(--ai);
  color: var(--ai);
  background: var(--ai-wash);
  cursor: pointer;
}
.rhd .ra-ev__src--doc:hover {
  border-style: solid;
  background: var(--card);
}
.rhd .ra-ev__assume {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--rule);
  font:
    400 11.5px / 1.5 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

/* hunt result: collapsed evidence under the bid range */
.rhd .ra-ev__hunt {
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ev__hunt summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  cursor: pointer;
  list-style: none;
  font:
    600 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-ev__hunt summary::-webkit-details-marker {
  display: none;
}
.rhd .ra-ev__plus {
  color: var(--amber);
  font:
    400 16px / 1 "IBM Plex Mono",
    monospace;
  transition: transform 0.2s;
}
.rhd .ra-ev__hunt[open] .ra-ev__plus {
  transform: rotate(45deg);
}
.rhd .ra-ev__skel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 14px;
}

@media (max-width: 760px) {
  .rhd .ra-ev__comp,
  .rhd .ra-ev__retail-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rhd .ra-ev__comp-where,
  .rhd .ra-ev__retail-note {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .rhd .ra-ev__comp-go {
    display: none;
  }
  .rhd .ra-ev__line {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rhd .ra-ev__line .ra-ev__src {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .rhd .ra-ev__line-amt {
    grid-row: 1;
    grid-column: 2;
  }
  .rhd .ra-ev__h-aside {
    margin-left: 0;
    width: 100%;
  }
}

/* sale-price evidence grouped by kind: auction results vs dealer listings vs own sales */
.rhd .ra-ev__premium {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 2px 16px 10px;
  padding: 8px 12px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: var(--amber-wash);
  font:
    400 12.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-ev__premium-k {
  font:
    700 12px "Shippori Mincho B1",
    serif;
  color: var(--amber);
}
.rhd .ra-ev__group + .ra-ev__group {
  margin-top: 6px;
}
.rhd .ra-ev__group-h {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 16px 6px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.rhd .ra-ev__group-label {
  min-width: 0;
  font:
    600 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-ev__group-count {
  font:
    400 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-ev__group-median {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  justify-self: end;
  font:
    400 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  white-space: nowrap;
}
.rhd .ra-ev__group-median b {
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 760px) {
  .rhd .ra-ev__group-h {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rhd .ra-ev__group-count {
    grid-column: 1;
    grid-row: 2;
  }
  .rhd .ra-ev__group-median {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Auction lot detail — design-mockups/app-rebuild/Screen-Lot-Detail.dc.html */

.rhd .ra-lot {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.rhd .ra-lot__crumb-here {
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink);
}

/* ---------- header ---------- */
.rhd .ra-lot__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-lot__head-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rhd .ra-lot__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .ra-lot__when {
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px;
  background: var(--ai);
  color: var(--on-ai);
  border-radius: 2px;
}
.rhd .ra-lot__when--past {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.rhd .ra-lot__lotline {
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-lot__titlerow {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}
.rhd .ra-lot__title {
  margin: 0;
  min-width: 0;
  font:
    800 34px / 1.08 "Shippori Mincho B1",
    serif;
  overflow-wrap: anywhere;
}
.rhd .ra-lot__title-grade {
  font-weight: 700;
  color: var(--ink-2);
}
.rhd .ra-lot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-lot__meta a,
.rhd .ra-lot__meta .rhd-linkbtn {
  font:
    400 13.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__meta .rhd-linkbtn:disabled {
  color: var(--ink-2);
  cursor: progress;
}
.rhd .ra-lot__actions {
  width: 320px;
  max-width: 100%;
}

/* ---------- two columns ---------- */
.rhd .ra-lot__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}
.rhd .ra-lot__main {
  flex: 3 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rhd .ra-lot__rail {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- gallery ---------- */
.rhd .ra-lot__gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .ra-lot__hero {
  position: relative;
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 10px, var(--card) 10px 20px);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rhd .ra-lot__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rhd .ra-lot__hero-none {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-lot__hero-count {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font:
    500 11.5px / 1 "IBM Plex Mono",
    monospace;
  padding: 4px 7px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.rhd .ra-lot__thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.rhd .ra-lot__thumb {
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, var(--card) 5px 10px);
  overflow: hidden;
  cursor: pointer;
}
.rhd .ra-lot__thumb[aria-pressed="true"] {
  border: 2px solid var(--amber);
}
.rhd .ra-lot__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Ninja sheet ---------- */
.rhd .ra-lot__ninja {
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px dashed var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}
.rhd .ra-lot__ninja-k {
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-lot__ninja-text {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font:
    500 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__ninja-text .rhd-note {
  font-size: 12.5px;
}
.rhd .ra-lot__ninja-sheet {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rhd .ra-lot__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rhd .ra-lot__tools-k {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
}

/* ---------- sheet analysis + comps panels ---------- */
.rhd .ra-lot__band {
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-lot__band .rhd-panel__band-k {
  font-size: 14px;
}
.rhd .ra-lot__sheet {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-lot__verdict {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.rhd .ra-lot__verdict .rhd-rec {
  font-size: 13px;
  padding: 7px 10px;
}
.rhd .ra-lot__verdict p {
  margin: 0;
  flex: 1 1 300px;
  font:
    400 14.5px / 1.5 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__grades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.rhd .ra-lot__grade {
  background: var(--card);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rhd .ra-lot__grade-label {
  font:
    500 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-lot__grade-value {
  font:
    600 18px "IBM Plex Mono",
    monospace;
}
.rhd .ra-lot__grade-ac {
  font:
    600 15px / 1.6 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__grade-ac--yes {
  color: var(--ok);
}
.rhd .ra-lot__grade-ac--no {
  color: var(--beni);
}
.rhd .ra-lot__frame {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rhd .ra-lot__frame-label {
  font:
    600 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__frame .rhd-frame {
  font-size: 14px;
}
.rhd .ra-lot__conf {
  font:
    500 12px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-lot__conf--high {
  color: var(--ok);
}
.rhd .ra-lot__conf--low {
  color: var(--amber);
}
.rhd .ra-lot__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 20px;
  font:
    400 13.5px / 1.55 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__notes b {
  font-weight: 600;
}
.rhd .ra-lot__notes-warn {
  color: var(--amber);
}
.rhd .ra-lot__notes div > div {
  color: var(--ink-2);
}

.rhd .ra-lot__comps-summary {
  margin: 0;
  padding: 14px 16px;
  font:
    400 14px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-lot__comps .rhd-bidrange__yen {
  font-size: 17px;
}
.rhd .ra-lot__reasoning {
  padding: 0 16px;
}
.rhd .ra-lot__reasoning summary {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__reasoning-plus {
  color: var(--amber);
  font:
    400 18px / 1 "IBM Plex Mono",
    monospace;
  transition: transform 0.2s;
}
.rhd .ra-lot__reasoning[open] .ra-lot__reasoning-plus {
  transform: rotate(45deg);
}
.rhd .ra-lot__reasoning p {
  margin: 0 0 14px;
  font:
    400 13.5px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  white-space: pre-line;
}

/* ---------- rail ---------- */
.rhd .ra-lot__railhead {
  padding: 11px 16px;
  border-bottom: 1.5px solid var(--ink);
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rhd .ra-lot__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  font:
    400 13.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__row:last-child {
  border-bottom: 0;
}
.rhd .ra-lot__row dt {
  color: var(--ink-2);
}
.rhd .ra-lot__row dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  font:
    500 13px "IBM Plex Mono",
    monospace;
  overflow-wrap: anywhere;
}
.rhd .ra-lot__equip {
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  font:
    400 13.5px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-lot__equip:last-child {
  border-bottom: 0;
}

/* ---------- skeleton ---------- */
.rhd .ra-lot__skel-hero {
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
}
.rhd .ra-lot__skel-thumbs {
  display: flex;
  gap: 8px;
}
.rhd .ra-lot__skel-thumbs span {
  flex: 1;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.rhd .ra-lot__skel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- the listing's own auction sheet (JCD / JDM Auc / PCJ) ---------- */
.rhd .ra-sheetimg {
  margin: 0;
  border: 4px solid var(--ink);
  background: var(--card);
}
.rhd .ra-sheetimg__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  background: var(--ink);
  color: var(--paper);
  font:
    700 12px / 1.3 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.04em;
  padding: 5px 8px;
}
.rhd .ra-sheetimg__orig {
  color: var(--paper);
  font-weight: 500;
}
.rhd .ra-sheetimg__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--paper-2);
  cursor: zoom-in;
}
.rhd .ra-sheetimg__img {
  display: block;
  min-height: 120px;
  width: 100%;
}
.rhd .ra-sheetimg__hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 7px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font:
    600 11.5px / 1.2 "IBM Plex Sans",
    sans-serif;
  opacity: 0.85;
}
.rhd .ra-sheetimg__frame:hover .ra-sheetimg__hint,
.rhd .ra-sheetimg__frame:focus-visible .ra-sheetimg__hint {
  opacity: 1;
}
.rhd .ra-sheetimg__full {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Ninja sheet image (NOT FOR USE) ---------- */
.rhd .ra-ninja {
  margin: 0;
  border: 4px solid var(--beni);
  user-select: none;
}
.rhd .ra-ninja__cap {
  background: var(--beni);
  color: var(--paper);
  font:
    700 12px / 1.3 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.04em;
  padding: 5px 8px;
}
.rhd .ra-ninja__frame {
  position: relative;
}
.rhd .ra-ninja__img {
  display: block;
  min-height: 120px;
  width: 100%;
  pointer-events: none;
}
.rhd .ra-ninja__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rhd .ra-ninja__mark span {
  color: var(--beni);
  opacity: 0.25;
  font:
    900 72px / 1 "IBM Plex Sans",
    sans-serif;
  transform: rotate(-30deg);
  white-space: nowrap;
}

/* ---------- sheet modal ---------- */
.rhd .ra-sheet-modal__sub {
  margin: 0;
  font:
    400 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-sheet-modal__verdict {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.rhd .ra-sheet-modal__verdict-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-sheet-modal__verdict p {
  margin: 0;
  font:
    400 14.5px / 1.5 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-sheet-modal__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.rhd .ra-sheet-modal__section h4 {
  margin: 0;
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-sheet-modal__list {
  margin: 0;
  padding-left: 18px;
  font:
    400 13.5px / 1.55 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-sheet-modal__list--warn {
  color: var(--beni);
}

@media (max-width: 760px) {
  .rhd .ra-lot__title {
    font-size: 27px;
  }
  .rhd .ra-lot__thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rhd .ra-lot__actions {
    width: 100%;
  }
  .rhd .ra-lot__comps .rhd-bidrange__cell {
    padding: 10px;
  }
  .rhd .ra-lot__comps .rhd-bidrange__yen {
    font-size: 14px;
  }
  .rhd .ra-ninja__mark span {
    font-size: 44px;
  }
}

/* Entry packet import modal — ra-packet__* on the app design library. */
.rhd .ra-packet__intro {
  margin: 0;
  font:
    400 14.5px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-packet__reading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
}
.rhd .ra-packet__reading-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-packet__review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rhd .ra-packet__review .rhd-figs {
  box-shadow: none;
}
.rhd .ra-packet__entry-no {
  font-size: 18px;
}
.rhd .ra-packet__skipped {
  margin: 0;
}
.rhd .ra-packet__shared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.rhd .ra-packet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rhd .ra-packet__doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
}
.rhd .ra-packet__doc-k {
  font-family: "Shippori Mincho B1", serif;
  color: var(--beni);
}
.rhd .ra-packet__doc-p {
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-packet__car {
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.rhd .ra-packet__car--skip {
  border-style: dashed;
  border-color: var(--rule);
  opacity: 0.7;
}
.rhd .ra-packet__car-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-packet__car--skip .ra-packet__car-head {
  border-bottom: 0;
}
.rhd .ra-packet__car-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-packet__car-title .rhd-frame {
  font-size: 12px;
  padding: 3px 6px;
}
.rhd .ra-packet__line {
  font:
    500 12px "IBM Plex Mono",
    monospace;
}
.rhd .ra-packet__action {
  min-width: 240px;
}
.rhd .ra-packet__car-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px 24px;
  padding: 14px 16px 16px;
}
.rhd .ra-packet__car-docs,
.rhd .ra-packet__car-costs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rhd .ra-packet__costs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rhd .ra-packet__fx .rhd-affix {
  width: 150px;
}
.rhd .ra-packet__fx .rhd-affix__pre {
  font-size: 12px;
}
.rhd .ra-packet__lines {
  width: 100%;
  border-collapse: collapse;
  font:
    400 13px / 1.35 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-packet__lines td {
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.rhd .ra-packet__lines td + td {
  padding-left: 12px;
}
.rhd .ra-packet__lines .num {
  text-align: right;
  white-space: nowrap;
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
}
.rhd .ra-packet__lines tfoot td {
  border-bottom: 0;
  border-top: 1.5px solid var(--ink);
  font-weight: 600;
}
.rhd .ra-packet__warn {
  font:
    500 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .ra-packet__foot-note {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .ra-packet__done {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-packet__results {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.rhd .ra-packet__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 14px;
}
.rhd .ra-packet__result + .ra-packet__result {
  border-top: 1px solid var(--rule);
}
.rhd .ra-packet__result-car {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
}
.rhd .ra-packet__result-what {
  font:
    400 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .rhd .ra-packet__car-body {
    grid-template-columns: 1fr;
  }
  .rhd .ra-packet__action {
    min-width: 0;
    width: 100%;
  }
  .rhd .ra-packet__foot-note {
    flex-basis: 100%;
  }
}
.rhd .ra-packet__stages {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1.5px solid var(--ink);
  background: var(--card);
}
.rhd .ra-packet__stage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-packet__stage + .ra-packet__stage {
  border-top: 1px solid var(--rule);
}
.rhd .ra-packet__stage-mark {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  font:
    700 12px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-packet__stage--done .ra-packet__stage-mark {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--paper);
}
.rhd .ra-packet__stage--now .ra-packet__stage-mark {
  border-color: var(--amber);
  background: var(--amber);
  box-shadow: inset 0 0 0 4px var(--amber-wash);
  animation: rhd-pulse 1.4s ease-in-out infinite;
}
.rhd .ra-packet__stage--todo {
  color: var(--ink-2);
}
.rhd .ra-packet__stage--now .ra-packet__stage-label {
  font-weight: 600;
}
.rhd .ra-packet__stage-label {
  flex: 1;
}
.rhd .ra-packet__stage-detail {
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  text-align: right;
}

/* Landed cost (/app/cost-tracker) — Screen-Landed-Cost.dc.html */

.rhd .ra-cost {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ---------- by car: wide table ---------- */
.rhd .ra-cost__table table {
  min-width: 1120px;
}
.rhd .ra-cost__table th {
  padding: 12px 0 12px 8px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: normal;
  vertical-align: middle;
}
.rhd .ra-cost__table th.num {
  white-space: normal;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
.rhd .ra-cost__table th:first-child {
  width: 19%;
}
.rhd .ra-cost__table th:first-child,
.rhd .ra-cost__table td:first-child {
  padding-left: 14px;
}
.rhd .ra-cost__table th:last-child,
.rhd .ra-cost__table td:last-child {
  padding-right: 14px;
}
.rhd .ra-cost__table td {
  padding: 10px 0 10px 8px;
}
.rhd .ra-cost__table td.num {
  font-size: 12.5px;
}
.rhd .ra-cost__table tfoot td {
  padding: 12px 0 12px 8px;
  font-size: 12.5px;
}
.rhd .ra-cost__table tfoot td.rhd-table__foot-label {
  font-size: 11px;
  white-space: nowrap;
}
.rhd .ra-cost__table td.ra-cost__landed {
  font-weight: 600;
  font-size: 13px;
}
.rhd .ra-cost__zero {
  color: var(--rule);
}
.rhd .ra-cost__pos {
  color: var(--ok);
}
.rhd .ra-cost__neg {
  color: var(--beni);
}

.rhd .ra-cost__car {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rhd .ra-cost__car-name {
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhd a.ra-cost__car-name:hover {
  text-decoration: underline;
}
.rhd .ra-cost__car-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font:
    500 11.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-cost__car-meta .rhd-tag {
  font-size: 9.5px;
  padding: 3px 6px;
}
.rhd .ra-cost__missing {
  font:
    600 11px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}

/* ---------- by car: phone folds ---------- */
.rhd .ra-cost__fold {
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-cost__fold-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.rhd .ra-cost__fold-head::-webkit-details-marker {
  display: none;
}
.rhd .ra-cost__fold-head .ra-cost__car-name {
  font-size: 14px;
  white-space: normal;
}
.rhd .ra-cost__fold-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
  font:
    500 11.5px "IBM Plex Mono",
    monospace;
}
.rhd .ra-cost__fold-fig .rhd-tag {
  font-size: 9.5px;
  padding: 3px 6px;
}
.rhd .ra-cost__fold-landed {
  font:
    600 14px "IBM Plex Mono",
    monospace;
}
.rhd .ra-cost__fold-body {
  padding: 0 14px 10px;
}
.rhd .ra-cost__fold-link {
  display: inline-block;
  padding: 0 14px 12px;
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cost__foot-label {
  font:
    600 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: center;
}
.rhd .ra-cost__hint {
  margin: 12px 0 0;
}

/* ---------- loading ---------- */
.rhd .ra-cost__skel {
  display: flex;
  flex-direction: column;
}
.rhd .ra-cost__skel-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}

/* ---------- documents ---------- */
.rhd .ra-cost__docs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rhd .ra-cost__docs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}
.rhd .ra-cost__docs-bar .rhd-note {
  margin: 0;
  flex: 1 1 320px;
  max-width: 620px;
}
.rhd .ra-cost__docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rhd .ra-cost__bulk {
  display: flex;
  flex-direction: column;
}
.rhd .ra-cost__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-cost__panel-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cost__panel-k {
  font:
    700 13px "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-cost__panel-meta {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-cost__panel-title .ra-cost__panel-meta {
  font-size: 13px;
}
.rhd .ra-cost__drop {
  margin: 16px;
}
.rhd .ra-cost__drop .rhd-drop {
  padding: 28px 20px;
}
.rhd .ra-cost__drop .rhd-drop__k {
  font-size: 38px;
}
.rhd .ra-cost__drop .rhd-drop__title {
  font-size: 15px;
}
.rhd .ra-cost__reading {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cost__qrow {
  flex-wrap: wrap;
  gap: 6px 12px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-cost__qfile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rhd .ra-cost__qmeta {
  font:
    400 12px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-cost__qmeta .rhd-err {
  font-size: 12px;
}
.rhd .ra-cost__qside {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rhd .ra-cost__fname {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  overflow-wrap: anywhere;
}
.rhd .ra-cost__status--wait {
  color: var(--ink-2);
}
.rhd .ra-cost__status--busy {
  color: var(--amber);
}
.rhd .ra-cost__panel-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.rhd .ra-cost__panel-foot--end {
  justify-content: flex-end;
}
.rhd .ra-cost__summary {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cost__pad {
  padding: 12px 16px 0;
}
.rhd .ra-cost__single {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 16px;
}
.rhd .ra-cost__file {
  font:
    400 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
  padding: 8px 0;
  max-width: 100%;
}

.rhd .ra-cost__doc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-cost__doc:last-child {
  border-bottom: 0;
}
.rhd .ra-cost__doc-copy {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rhd .ra-cost__doc-meta {
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-cost__doc-link {
  font:
    600 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cost__del,
.rhd .ra-cost__del:hover {
  color: var(--beni);
}
.rhd .ra-cost__del:hover {
  background: var(--beni-wash);
}
.rhd .ra-cost__groups th {
  padding-top: 9px;
  padding-bottom: 0;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
.rhd .ra-cost__group {
  text-align: center !important;
  border-bottom: 1px solid color-mix(in srgb, var(--on-ai) 35%, transparent) !important;
}
.rhd .ra-cost__group--stateside {
  color: var(--hl) !important;
}

/* shop P&L */
.rhd .ra-pnl .rhd-panel__band {
  flex-wrap: wrap;
  gap: 10px;
}
.rhd .ra-pnl__figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-pnl__fig {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-right: 1px solid var(--rule);
}
.rhd .ra-pnl__fig:last-child {
  border-right: 0;
}
.rhd .ra-pnl__fig-label {
  font:
    600 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-pnl__fig-value {
  font:
    700 26px / 1.1 "IBM Plex Mono",
    monospace;
}
.rhd .ra-pnl__fig-value--pos {
  color: var(--ok);
}
.rhd .ra-pnl__fig-value--neg {
  color: var(--beni);
}
.rhd .ra-pnl__fig-note {
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-pnl__empty {
  margin: 0;
  padding: 16px 18px;
  font:
    400 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-pnl__cars {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rhd .ra-pnl__car {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.rhd .ra-pnl__cars li:last-child .ra-pnl__car {
  border-bottom: 0;
}
.rhd .ra-pnl__car:hover {
  background: var(--paper);
}
.rhd .ra-pnl__car-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-pnl__car-name b {
  font-size: 14.5px;
  color: var(--ink);
}
.rhd .ra-pnl__car-profit {
  font:
    700 16px "IBM Plex Mono",
    monospace;
}
@media (max-width: 600px) {
  .rhd .ra-pnl__fig {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
}

/* Shared email pieces — Outbox entries, linked emails, live threads, compose
   (design-mockups/app-rebuild/Screen-Outbox.dc.html, Screen-Customers / Car / Hunt detail). */

/* ---------- list frames ---------- */
.rhd .ra-mail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.rhd .ra-mail__sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rhd .ra-mail__sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
.rhd .ra-mail__label {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-mail__link {
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
}
.rhd .ra-mail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rule);
  background: var(--card);
  min-width: 0;
}
.rhd .ra-mail__list > li + li {
  border-top: 1px solid var(--rule);
}
.rhd .ra-mail__note {
  margin: 0;
  font:
    400 13.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-mail__note--info {
  padding: 12px 16px;
  background: var(--ai-wash);
  border: 1.5px solid var(--ai);
  color: var(--ink);
  font-weight: 500;
}
.rhd .ra-mail__small {
  margin: 0;
  font:
    400 12px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* ---------- one outbox email ---------- */
.rhd .ra-mail__entry {
  min-width: 0;
}
.rhd .ra-mail__head {
  display: block;
  width: 100%;
  padding: 12px 16px 10px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rhd .ra-mail__head:hover {
  background: var(--paper);
}
.rhd .ra-mail__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.rhd .ra-mail__st {
  flex: none;
  padding: 5px 8px;
  font-size: 10.5px;
}
.rhd .ra-mail__kind {
  font:
    500 12px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-mail__subject {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
  font:
    600 14.5px / 1.35 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-mail__when {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  white-space: nowrap;
}
.rhd .ra-mail__to {
  display: block;
  margin-top: 8px;
  font:
    500 12px / 1.45 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
/* compact (record pages): status + subject, then kind · when */
.rhd .ra-mail__entry--compact .ra-mail__head {
  padding: 11px 14px;
}
.rhd .ra-mail__entry--compact .ra-mail__line {
  gap: 8px;
  flex-wrap: nowrap;
}
.rhd .ra-mail__entry--compact .ra-mail__st {
  padding: 4px 6px;
  font-size: 10px;
}
.rhd .ra-mail__entry--compact .ra-mail__subject {
  flex: 1 1 auto;
  font-size: 13.5px;
}
.rhd .ra-mail__meta {
  display: block;
  margin-top: 4px;
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-mail__err {
  margin: 0 16px 12px;
  padding: 9px 12px;
  background: var(--beni-wash);
  border: 1.5px solid var(--beni);
  font:
    500 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  overflow-wrap: anywhere;
}
.rhd .ra-mail__body {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rhd .ra-mail__entry--compact .ra-mail__body,
.rhd .ra-mail__entry--compact .ra-mail__acts {
  padding-left: 14px;
  padding-right: 14px;
}
.rhd .ra-mail__entry--compact .ra-mail__err {
  margin-left: 14px;
  margin-right: 14px;
}
.rhd .ra-mail__frame {
  height: 384px;
  display: block;
}
.rhd .ra-mail__pre {
  margin: 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    400 14px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-mail__editbox {
  padding: 14px;
  border: 1.5px dashed var(--ink-2);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .ra-mail__grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.rhd .ra-mail__editbox .rhd-in {
  background: var(--card);
}
.rhd .ra-mail__warn {
  margin: 0;
  font:
    500 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .ra-mail__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 12px;
}
.rhd .ra-mail__acts--flush,
.rhd .ra-mail__entry--compact .ra-mail__acts--flush {
  padding: 0;
}
.rhd .ra-mail__acts-note {
  margin-right: auto;
  font:
    400 12px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-mail__acts-note--err {
  color: var(--beni);
}
.rhd .ra-mail__discard {
  color: var(--beni);
}
.rhd .ra-mail__discard:hover {
  color: var(--beni);
}

/* ---------- live threads ---------- */
.rhd .ra-mail__thread-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rhd .ra-mail__thread-row:hover,
.rhd .ra-mail__thread-row[aria-expanded="true"] {
  background: var(--paper);
}
.rhd .ra-mail__thread-main {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rhd .ra-mail__thread-subj {
  font:
    500 14px / 1.35 "IBM Plex Sans",
    sans-serif;
  overflow-wrap: anywhere;
}
.rhd .ra-mail__thread-subj--unread {
  font-weight: 700;
}
.rhd .ra-mail__thread-meta {
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rhd .ra-mail__thread-open {
  padding: 12px 14px 14px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

/* thread view */
.rhd .ra-mail__tv {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rhd .ra-mail__tv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.rhd .ra-mail__tv-title {
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
  font:
    700 16px / 1.3 "Shippori Mincho B1",
    serif;
  overflow-wrap: anywhere;
}
.rhd .ra-mail__x {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1.5px solid var(--rule);
  border-radius: 2px;
  background: none;
  color: var(--ink);
  font:
    500 16px / 1 "IBM Plex Mono",
    monospace;
  cursor: pointer;
}
.rhd .ra-mail__x:hover {
  background: var(--paper-2);
}
.rhd .ra-mail__msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  min-width: 0;
}
.rhd .ra-mail__msg--draft {
  background: transparent;
  border: 1.5px dashed var(--ink-2);
  gap: 6px;
}
.rhd .ra-mail__msg-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-mail__msg-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rhd .ra-mail__msg-to {
  font:
    400 12px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-mail__msg-text {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    400 14px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-mail__msg--draft .ra-mail__msg-text {
  color: var(--ink-2);
}
.rhd .ra-mail__atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
.rhd .ra-mail__att {
  display: inline-flex;
  gap: 6px;
  padding: 5px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  font:
    600 11.5px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-mail__att small {
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-mail__msg-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.rhd .ra-mail__tv-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* compose modal */
.rhd .ra-mail__compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Customers list + customer detail (design-mockups/app-rebuild/Screen-Customers.dc.html). */

/* Page root: lays its children out exactly as .rhd-main__inner would. */
.rhd .ra-cust {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.rhd .ra-cust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}
.rhd .ra-cust__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
.rhd .ra-cust__card:hover {
  color: var(--ink);
  background: var(--paper);
}
.rhd .ra-cust__card--archived {
  border-color: var(--rule);
  box-shadow: none;
  opacity: 0.75;
}
.rhd .ra-cust__name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
  font:
    600 16px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cust__archived {
  flex: none;
  padding: 4px 6px;
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ink-2);
  font:
    600 10px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rhd .ra-cust__mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-cust__notes {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font:
    400 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* new-customer modal */
.rhd .ra-cust__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .ra-cust__label-note {
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* ---------- detail ---------- */
.rhd .ra-cust__back {
  align-self: flex-start;
  font:
    500 13.5px / 1 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cust__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-cust__about {
  margin: 0;
  max-width: 620px;
  white-space: pre-wrap;
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-cust__del {
  color: var(--beni);
  background: transparent;
  border-color: var(--rule);
  box-shadow: none;
}
.rhd .ra-cust__del:hover {
  color: var(--beni);
  background: var(--beni-wash);
}
.rhd .ra-cust__edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
.rhd .ra-cust__edit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.rhd .ra-cust__edit-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.rhd .ra-cust__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.rhd .ra-cust__main {
  flex: 2 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rhd .ra-cust__aside {
  flex: 1 1 320px;
  min-width: 0;
}

/* small panel head: red kanji + sans title (the detail screens' Cars / Hunts / Email heads) */
.rhd .ra-cust__phead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-cust__phead-k {
  font:
    700 13px "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-cust__phead-title {
  margin: 0;
  flex: 1;
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cust__phead-n {
  margin-left: 6px;
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-cust__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.rhd .ra-cust__row:last-child {
  border-bottom: 0;
}
.rhd .ra-cust__row:hover {
  color: var(--ink);
  background: var(--paper);
}
.rhd .ra-cust__row-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rhd .ra-cust__row-copy b {
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cust__row-copy span {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-cust__none {
  margin: 0;
  padding: 14px 16px;
  font:
    400 13.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-cust__mailbody {
  padding: 14px 16px;
}
.rhd .ra-cust__copy {
  gap: 8px;
}
.rhd .ra-cust__title {
  font-size: 36px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .rhd .ra-cust__title {
    font-size: 30px;
  }
}

/* Hunt "For: …" line with the in-place customer picker (CustomerLinkControl). */
.rhd .ra-custlink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font:
    500 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-custlink__line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rhd .ra-custlink__quiet {
  color: var(--ink-2);
}
.rhd .ra-custlink__warn {
  color: var(--amber);
  font-weight: 600;
}
.rhd .ra-custlink__alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--amber-wash);
  border: 1.5px solid var(--amber);
  font-size: 13.5px;
}
.rhd .ra-custlink__k {
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  color: var(--amber);
}
.rhd .ra-custlink__act {
  padding: 0;
  background: none;
  border: 0;
  color: var(--amber);
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rhd .ra-custlink__picker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.rhd .ra-custlink__picker .rhd-sel {
  min-width: 0;
  max-width: 100%;
}

/* Hunt detail (/app/orders/:id) — page-only layout on top of the app library. */

.rhd .ra-hunt {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ---------- header ---------- */
.rhd .ra-hunt__back {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: 0;
  color: var(--amber);
  font:
    500 13.5px / 1 "IBM Plex Sans",
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rhd .ra-hunt .rhd-ph {
  padding-bottom: 20px;
}
.rhd .ra-hunt .rhd-ph__copy {
  gap: 10px;
}
.rhd .ra-hunt .rhd-ph__title {
  font-size: 36px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.rhd .ra-hunt__prefs {
  margin: 0;
  font:
    400 15px / 1.55 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rhd .ra-hunt__paused {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1.5px dashed var(--ink-2);
  font:
    500 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-hunt__paused-k {
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ink-2);
}
.rhd .ra-hunt__paused-text {
  flex: 1 1 260px;
}

/* ---------- two-column layout ---------- */
.rhd .ra-hunt__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}
.rhd .ra-hunt__main {
  flex: 3 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rhd .ra-hunt__aside {
  flex: 1 1 330px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 760px) {
  .rhd .ra-hunt__main,
  .rhd .ra-hunt__aside {
    flex-basis: 100%;
  }
}

/* ---------- side cards ---------- */
.rhd .ra-hunt__card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-hunt__card-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font:
    600 14.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-hunt__card-k {
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-hunt__card-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rhd .ra-hunt__card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .ra-hunt__strip {
  padding: 8px 16px;
  background: var(--paper-2);
  font:
    400 12px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-hunt__row {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rhd .ra-hunt__row + .ra-hunt__row {
  border-top: 1px solid var(--rule);
}
.rhd .ra-hunt__row-title {
  font:
    600 14px / 1.35 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-hunt__row-mono {
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-hunt__row-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rhd .ra-hunt__row-line > :first-child {
  min-width: 0;
}
.rhd a.ra-hunt__row-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: var(--ink);
  text-decoration: none;
}
.rhd a.ra-hunt__row-link + a.ra-hunt__row-link {
  border-top: 1px solid var(--rule);
}
.rhd a.ra-hunt__row-link:hover .ra-hunt__row-title {
  color: var(--amber);
}
.rhd .ra-hunt__row-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rhd .ra-hunt__amount {
  font:
    600 13.5px "IBM Plex Mono",
    monospace;
  white-space: nowrap;
}
.rhd .ra-hunt__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rhd .ra-hunt__row-actions > :first-child {
  margin-right: auto;
}
.rhd .ra-hunt__empty-note {
  padding: 12px 16px;
  margin: 0;
}

/* schedule: next / last run cells */
.rhd .ra-hunt__runs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.rhd .ra-hunt__runs > div {
  background: var(--card);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rhd .ra-hunt__runs-label {
  font:
    500 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-hunt__runs-value {
  font:
    600 14px "IBM Plex Mono",
    monospace;
}
.rhd .ra-hunt__runs-sub {
  font:
    400 11.5px / 1.35 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* local switch with a testid + accessible name (library Switch takes neither) */
.rhd .ra-hunt__switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font:
    600 12px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* bid form */
.rhd .ra-hunt__bidform {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .ra-hunt__bidform-foot {
  display: flex;
  justify-content: flex-end;
}

/* email */
.rhd .ra-hunt__email-btns {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-hunt__email-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ---------- run progress ---------- */
.rhd .ra-hunt__run {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .ra-hunt__run-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  justify-content: space-between;
}
.rhd .ra-hunt__run-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font:
    600 15px / 1.35 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-hunt__run-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  animation: ra-hunt-pulse 1.4s ease-in-out infinite;
}
.rhd .ra-hunt__run-dot--ok {
  background: var(--ok);
  animation: none;
}
.rhd .ra-hunt__run-dot--bad {
  background: var(--beni);
  animation: none;
}
.rhd .ra-hunt__run-dot--idle {
  background: var(--ink-2);
  animation: none;
}
@keyframes ra-hunt-pulse {
  50% {
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rhd .ra-hunt__run-dot {
    animation: none;
  }
}
.rhd .ra-hunt__run-count {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font:
    500 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-hunt__run-count > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- results ---------- */
.rhd .ra-hunt__results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.rhd .ra-hunt__bucket {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rhd .ra-hunt__bucket-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font:
    600 13px / 1.3 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ra-tone, var(--ink-2));
}
.rhd .ra-hunt__bucket-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ra-tone, var(--ink-2));
}
.rhd .ra-hunt__bucket-dot--ring {
  background: transparent;
  border: 1.5px solid var(--ra-tone, var(--ink-2));
}
.rhd .ra-hunt__bucket--ok {
  --ra-tone: var(--ok);
}
.rhd .ra-hunt__bucket--amber {
  --ra-tone: var(--amber);
}
.rhd .ra-hunt__bucket--ai {
  --ra-tone: var(--ai);
}
.rhd .ra-hunt__bucket--ink {
  --ra-tone: var(--ink-2);
}
.rhd .ra-hunt__bucket--beni {
  --ra-tone: var(--beni);
}
.rhd .ra-hunt__bucket .rhd-note {
  margin: -4px 0 0;
  max-width: 680px;
}

.rhd .ra-hunt .rhd-result__photo .rhd-photo {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.rhd .ra-hunt__result-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.rhd .ra-hunt__result-head .rhd-result__title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rhd .ra-hunt__spec {
  font:
    500 13px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-hunt__when {
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink);
}
.rhd .ra-hunt__when--past {
  color: var(--beni);
}
.rhd .ra-hunt__when-local {
  color: var(--ink-2);
}
.rhd .ra-hunt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}
.rhd .ra-hunt__reason {
  margin: 2px 0 0;
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rhd .ra-hunt__photos {
  padding: 0 16px 14px;
}
.rhd .ra-hunt__lotactions {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 340px;
}
.rhd .ra-hunt__followup {
  padding: 12px 16px;
}
.rhd .ra-hunt__result-msg {
  padding: 0 16px 12px;
  margin: 0;
}
.rhd .ra-hunt__nosheet {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border: 1.5px dashed var(--rule);
  border-radius: 2px;
  font:
    600 13px / 1 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  white-space: nowrap;
}

/* collapsed poor/failed/missed section */
.rhd .ra-hunt__more {
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-hunt__more-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  background: none;
  border: 0;
  color: var(--ink);
  text-align: left;
  font:
    600 14.5px / 1.3 "IBM Plex Sans",
    sans-serif;
  cursor: pointer;
}
.rhd .ra-hunt__more-n {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  white-space: nowrap;
}
.rhd .ra-hunt__more-plus {
  display: inline-block;
  margin-left: 6px;
  color: var(--amber);
  transition: transform 0.2s;
}
.rhd .ra-hunt__more-toggle[aria-expanded="true"] .ra-hunt__more-plus {
  transform: rotate(45deg);
}
.rhd .ra-hunt__more-body {
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* run history */
.rhd .ra-hunt__history {
  display: flex;
  flex-direction: column;
}
.rhd .ra-hunt__hrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.rhd .ra-hunt__hrow + .ra-hunt__hrow {
  border-top: 1px solid var(--rule);
}
.rhd .ra-hunt__hrow:hover {
  background: var(--paper);
}
.rhd .ra-hunt__hrow[aria-pressed="true"] {
  background: var(--amber-wash);
  border-left-color: var(--amber);
}
.rhd .ra-hunt__hrow-text {
  font:
    500 14px / 1.4 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-hunt__hrow-text--quiet {
  color: var(--ink-2);
}
.rhd .ra-hunt__hrow-new {
  margin-left: 8px;
  color: var(--beni);
  font-weight: 600;
}
.rhd .ra-hunt__hrow-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-hunt__hrow-view {
  font:
    600 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}

/* digest preview */
.rhd .ra-hunt__digest-ok {
  margin: -18px -18px 0;
  padding: 10px 18px;
  background: var(--ok-wash);
  border-bottom: 1px solid var(--rule);
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ok);
}
.rhd .ra-hunt__digest-meta {
  font:
    500 12.5px / 1.7 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-hunt__digest-meta b {
  font-weight: 500;
  color: var(--ink);
}
.rhd .ra-hunt__digest-frame {
  min-height: 420px;
  height: 60vh;
}

@media (max-width: 760px) {
  .rhd .ra-hunt .rhd-ph__title {
    font-size: 30px;
  }
  .rhd .ra-hunt .rhd-result__photo {
    flex-basis: 170px;
  }
  .rhd .ra-hunt .rhd-bidrange__cell {
    padding: 10px;
  }
  .rhd .ra-hunt__lotactions {
    flex-basis: 100%;
    max-width: none;
  }
}

.rhd .ra-hunt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rhd .ra-hunt__more-sum {
  margin: -4px 0 14px;
}

/* ---------- Ninja sheet phase ---------- */
.rhd .ra-hunt__ninja {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .ra-hunt__run .ra-hunt__ninja {
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.rhd .ra-hunt__run > .ra-hunt__ninja:first-child,
.rhd .ra-hunt__run > div:first-child > .ra-hunt__ninja {
  padding-top: 0;
  border-top: 0;
}
.rhd .ra-hunt__ninja-detail {
  overflow-wrap: anywhere;
}

/* Hunts (/app/orders), the hunt form modal and the needs-sheet pieces shared with the hunt
   detail page. Design: design-mockups/app-rebuild/Screen-Hunts, Screen-Hunt-Form,
   Screen-Hunt-Detail ("Needs auction sheet"). */

/* ---------- page ---------- */
.rhd .ra-hunts {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---------- hunt tiles ---------- */
.rhd .ra-hunts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 22px;
}
.rhd .ra-hunts__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.rhd .ra-hunts__tile:hover {
  color: var(--ink);
}
.rhd .ra-hunts__tile:hover .ra-hunts__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rhd .ra-hunts__tile--done {
  opacity: 0.82;
}
.rhd .ra-hunts__unseen {
  position: absolute;
  right: -10px;
  top: -10px;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: var(--beni);
  color: #fff8ee;
  font:
    600 13px / 1 "IBM Plex Mono",
    monospace;
  border-radius: 15px;
  border: 1.5px solid var(--ink);
}
.rhd .ra-hunts__main {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.rhd .ra-hunts__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.rhd .ra-hunts__head > .rhd-tag {
  flex: none;
}
.rhd .ra-hunts__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font:
    600 16.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-hunts__for {
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-hunts__for b {
  font-weight: 500;
  color: var(--ink);
}
.rhd .ra-hunts__sites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.rhd .ra-hunts__sites .rhd-site {
  font-size: 10.5px;
  padding: 3px 4px 2px;
}
.rhd .ra-hunts__searches {
  margin-left: 4px;
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-hunts__prefs {
  margin: 0;
  font:
    400 13.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rhd .ra-hunts__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.rhd .ra-hunts__stat {
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  border-right: 1px solid var(--rule);
}
.rhd .ra-hunts__stat:last-child {
  border-right: 0;
}
.rhd .ra-hunts__stat-n {
  font:
    600 15px "IBM Plex Mono",
    monospace;
}
.rhd .ra-hunts__stat-n--small {
  font-size: 12.5px;
  line-height: 1.5;
}
.rhd .ra-hunts__stat-n--hot {
  color: var(--beni);
}
.rhd .ra-hunts__stat-n--quiet {
  color: var(--ink-2);
}
.rhd .ra-hunts__stat-label {
  font:
    500 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-hunts__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--rule);
}
.rhd .ra-hunts__acts-run {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rhd .ra-hunts__acts-run .rhd-b-note {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.rhd .rhd-b.ra-hunts__running:disabled {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  cursor: progress;
}
.rhd .rhd-b.ra-hunts__del {
  margin-left: auto;
  padding: 8px 10px;
  color: var(--beni);
}
.rhd .rhd-b.ra-hunts__del:hover {
  background: var(--beni-wash);
  color: var(--beni);
}

/* ---------- needs-sheet queue ---------- */
.rhd .ra-sheetq__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rhd .ra-sheetq__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-sheetq__row:last-child {
  border-bottom: 0;
}
.rhd .ra-sheetq__thumb {
  flex: 0 0 72px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--card) 6px 12px);
  border: 1px solid var(--rule);
  font:
    500 9.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-sheetq__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rhd .ra-sheetq__body {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rhd .ra-sheetq__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.rhd .ra-sheetq__car {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-sheetq__spec,
.rhd .ra-sheetq__time {
  font:
    500 12.5px / 1.45 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-sheetq__time {
  color: var(--ink);
}
.rhd .ra-sheetq__time--soon {
  color: var(--beni);
}
.rhd .ra-sheetq__local {
  color: var(--ink-2);
}
.rhd .ra-sheetq__status {
  margin: 0;
  font:
    400 13px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-sheetq__status--bad {
  color: var(--beni);
}
.rhd .ra-sheetq__status--warn {
  color: var(--amber);
}
.rhd .ra-sheetq__skel {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-sheetq__msg {
  margin: 0;
  padding: 14px 16px;
}
.rhd .ra-sheetq__banner {
  padding: 12px 16px 0;
}

/* ---------- follow-up controls (request / import / upload) ---------- */
.rhd .ra-sheet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rhd .ra-sheet__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rhd .ra-sheet__btns .rhd-b:not(:disabled) {
  background: var(--paper);
}
.rhd .ra-sheet__btns .rhd-b:not(:disabled):hover {
  background: var(--paper-2);
}
.rhd .ra-sheet__line {
  margin: 0;
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-sheet__line--ok {
  color: var(--ok);
}
.rhd .ra-sheet__line--warn {
  color: var(--amber);
}
.rhd .ra-sheet__line--bad {
  color: var(--beni);
}
.rhd .ra-sheet__line--quiet {
  font-style: italic;
}
.rhd .ra-sheet__translating {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: var(--ai-wash);
  border: 1.5px solid var(--ai);
  font:
    400 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-sheet__translating .rhd-b__dot {
  flex: none;
  margin-top: 4px;
}
.rhd .ra-sheet__translating b {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.rhd .ra-sheet__busy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* import-from-reply modal */
.rhd .ra-sheet__modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rhd .ra-sheet__atts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .ra-sheet__att {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rhd button.ra-sheet__att:hover:not(:disabled),
.rhd button.ra-sheet__att:focus-visible {
  border-color: var(--amber);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--amber);
}
.rhd .ra-sheet__att:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rhd .ra-sheet__att--file {
  cursor: default;
  background: transparent;
  border-style: dashed;
}
.rhd .ra-sheet__att-thumb {
  flex: 0 0 64px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, var(--card) 5px 10px);
  border: 1px solid var(--rule);
  font:
    600 10px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-sheet__att-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rhd .ra-sheet__att-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font:
    500 13px "IBM Plex Mono",
    monospace;
  overflow-wrap: anywhere;
}
.rhd .ra-sheet__att-name small {
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-sheet__importing {
  position: absolute;
  inset: -4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  background: var(--card);
  opacity: 0.96;
}
.rhd .ra-sheet__importing b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-sheet__importing span {
  max-width: 320px;
  font:
    400 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* emailed photo strip + lightbox */
.rhd .ra-sheet__photos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.rhd .ra-sheet__photos-label {
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-sheet__lightbox {
  max-width: 100%;
  max-height: 85vh;
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  background: var(--card);
}

/* ---------- hunt form modal ---------- */
.rhd .rhd-modal.ra-huntform {
  max-width: 720px;
}
.rhd .ra-huntform .rhd-modal__body {
  gap: 18px;
}
.rhd .ra-huntform .rhd-modal__foot {
  align-items: center;
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
}
.rhd .ra-huntform__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rhd .ra-huntform__err {
  margin-right: auto;
  flex: 1 1 240px;
}
.rhd .ra-huntform .rhd-choices {
  background: var(--paper);
}
.rhd .ra-huntform .rhd-choice[aria-pressed="true"] {
  background: var(--card);
}
.rhd .ra-huntform__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rhd .ra-huntform__label {
  font:
    600 13.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-huntform__label-opt {
  font-weight: 400;
  color: var(--ink-2);
}
.rhd .ra-huntform__newcust {
  padding: 14px;
  border: 1.5px dashed var(--ink-2);
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.rhd .ra-huntform__newcust .rhd-in {
  height: 40px;
  font-size: 14.5px;
  background: var(--card);
}
.rhd .ra-huntform__newcust-label {
  grid-column: 1 / -1;
  font:
    600 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-huntform__hint {
  margin: 0;
  font:
    400 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-huntform__searches-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.rhd .ra-huntform__add {
  padding: 0;
  border: 0;
  background: none;
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
  cursor: pointer;
}
.rhd .ra-huntform__add:hover {
  text-decoration: underline;
}

/* one search card */
.rhd .ra-huntform__search {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  min-width: 0;
}
.rhd .ra-huntform__search-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rhd .ra-huntform__search-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rhd .ra-huntform__search-n {
  flex: none;
  font:
    600 12px "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .ra-huntform__search-sum {
  flex: 1;
  min-width: 0;
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
  overflow-wrap: anywhere;
}
.rhd .ra-huntform__search-caret {
  flex: none;
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-huntform__search--open .ra-huntform__search-caret {
  color: var(--amber);
}
.rhd .ra-huntform__search-remove {
  flex: none;
  margin-right: 8px;
  color: var(--beni);
}
.rhd .ra-huntform__search-remove:hover {
  background: var(--beni-wash);
  color: var(--beni);
}
.rhd .ra-huntform__editor {
  padding: 14px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.rhd .ra-huntform__editor .rhd-f {
  font-size: 12.5px;
  gap: 6px;
}
.rhd .ra-huntform__editor .rhd-in {
  height: 40px;
  font-size: 14px;
  background: var(--card);
}
.rhd .ra-huntform__editor .rhd-in[type="number"] {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}
.rhd .ra-huntform__editor .rhd-in:disabled {
  background: var(--paper-2);
}
.rhd .ra-huntform__editor .rhd-seg {
  align-self: stretch;
  display: flex;
  flex-wrap: nowrap;
  background: var(--card);
}
.rhd .ra-huntform__editor .rhd-seg__opt {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  height: 37px;
  font-size: 13px;
}
.rhd .ra-huntform__pair {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.rhd .ra-huntform__pair > .rhd-f {
  flex: 1;
}
.rhd .ra-huntform__full {
  grid-column: 1 / -1;
}
.rhd .ra-huntform__make-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.rhd .ra-huntform__reach {
  font:
    500 11px "IBM Plex Mono",
    monospace;
  color: var(--ok);
}
.rhd .ra-huntform__reach--part {
  color: var(--amber);
}
.rhd .ra-huntform__loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font:
    500 11px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .ra-huntform__loading .rhd-b__dot {
  width: 6px;
  height: 6px;
}
.rhd .ra-huntform .rhd-fchip--mono {
  min-width: 42px;
  justify-content: center;
}
.rhd .ra-huntform .rhd-fchip:not([aria-pressed="true"]) {
  background: var(--card);
}

@media (max-width: 760px) {
  .rhd .ra-hunts {
    gap: 22px;
  }
  .rhd .ra-huntform__editor {
    grid-template-columns: 1fr 1fr;
  }
  .rhd .ra-huntform__editor .ra-huntform__gearbox,
  .rhd .ra-huntform__editor .ra-huntform__pair {
    grid-column: 1 / -1;
  }
}

/* /app/my-shop — the standing searches you run for your own lot (ra-shop__*). */
.rhd .ra-shop {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rhd .ra-shop__how {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-shop__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
}
.rhd .ra-shop__step + .ra-shop__step {
  border-left: 1px solid var(--rule);
}
.rhd .ra-shop__step-n {
  font:
    700 18px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-shop__step-title {
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-shop__step-body {
  font:
    400 13.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-shop__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rhd .ra-shop__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 18px;
}
.rhd .ra-shop__card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-shop__card--off {
  box-shadow: none;
  border-style: dashed;
  border-color: var(--ink-2);
}
.rhd .ra-shop__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.rhd .ra-shop__name {
  flex: 1;
  min-width: 0;
  font:
    700 18px / 1.25 "Shippori Mincho B1",
    serif;
  color: var(--ink);
  text-decoration: none;
}
.rhd a.ra-shop__name:hover {
  color: var(--amber);
}
.rhd .ra-shop__looking {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 14px;
}
.rhd .ra-shop__searches {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .ra-shop__searches li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font:
    500 13.5px / 1.4 "IBM Plex Mono",
    monospace;
}
.rhd .ra-shop__prefs {
  margin: 0;
  font:
    italic 400 13.5px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-shop__card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.rhd .ra-shop__stat {
  font:
    400 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-shop__stat b {
  font:
    600 14px "IBM Plex Mono",
    monospace;
  color: var(--ink);
}
.rhd .ra-shop__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 760px) {
  .rhd .ra-shop__how {
    grid-template-columns: 1fr;
  }
  .rhd .ra-shop__step + .ra-shop__step {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* Help guide (/app/help): sticky contents on the left, the guide on the right; stacked on phones. */

.rhd .ra-help {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.rhd .ra-help__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* ---------- contents ---------- */
.rhd .ra-help__toc {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-help__toc-label {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-help__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rhd .ra-help__toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  font:
    500 14px / 1.25 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-help__toc a:hover,
.rhd .ra-help__toc a[aria-current] {
  background: var(--paper-2);
}
.rhd .ra-help__toc a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.rhd .ra-help__toc-k {
  flex: none;
  min-width: 34px;
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}

/* ---------- sections ---------- */
.rhd .ra-help__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  max-width: 820px;
}
.rhd .ra-help__section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 28px 28px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  scroll-margin-top: 24px;
}
.rhd .ra-help__section:focus,
.rhd .ra-help__topic:focus {
  outline: none;
}
.rhd .ra-help__section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-help__section-title {
  margin: 0;
  font:
    800 28px / 1.1 "Shippori Mincho B1",
    serif;
}
.rhd .ra-help__summary {
  margin: 6px 0 0;
  font:
    400 15px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-help__jump {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.rhd .ra-help__jump a {
  color: var(--amber);
  text-underline-offset: 3px;
  font:
    500 13.5px / 1.4 "IBM Plex Sans",
    sans-serif;
}

/* ---------- a topic ---------- */
.rhd .ra-help__topic {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
  scroll-margin-top: 24px;
}
.rhd .ra-help__topic-title {
  margin: 0;
  font:
    700 19px / 1.25 "Shippori Mincho B1",
    serif;
}
.rhd .ra-help__p,
.rhd .ra-help__steps,
.rhd .ra-help__list {
  margin: 0;
  font:
    400 15px / 1.6 "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-help__steps,
.rhd .ra-help__list {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rhd .ra-help__steps {
  list-style: decimal;
}
.rhd .ra-help__list {
  list-style: disc;
}
.rhd .ra-help__steps li::marker {
  color: var(--beni);
  font-weight: 700;
}
.rhd .ra-help__list li::marker {
  color: var(--ink-2);
}
.rhd .ra-help__p b,
.rhd .ra-help__steps b,
.rhd .ra-help__list b,
.rhd .ra-help__table b,
.rhd .ra-help__note b {
  font-weight: 600;
}

.rhd .ra-help__table {
  overflow-x: auto;
  border: 1.5px solid var(--ink);
}
.rhd .ra-help__table table {
  width: 100%;
  border-collapse: collapse;
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-help__table thead th {
  padding: 9px 12px;
  text-align: left;
  background: var(--ai);
  color: var(--on-ai);
  font:
    600 10.5px / 1.2 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rhd .ra-help__table tbody th,
.rhd .ra-help__table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
}
.rhd .ra-help__table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.rhd .ra-help__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  background: var(--amber-wash);
  border-left: 3px solid var(--amber);
  font:
    400 14px / 1.55 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-help__note-k {
  flex: none;
  font:
    700 14px / 1.5 "Shippori Mincho B1",
    serif;
  color: var(--amber);
}

@media (max-width: 900px) {
  .rhd .ra-help__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .rhd .ra-help__toc {
    position: static;
  }
  .rhd .ra-help__toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}
@media (max-width: 760px) {
  .rhd .ra-help__section {
    padding: 18px 16px 20px;
    /* Clear the sticky phone bar. */
    scroll-margin-top: 72px;
  }
  .rhd .ra-help__topic {
    scroll-margin-top: 72px;
  }
  .rhd .ra-help__section-title {
    font-size: 24px;
  }
  .rhd .ra-help__table tbody th {
    white-space: normal;
  }
}

/* Cars (/app/vehicles) — page layout on the Right Hand DMS app library. */
.rhd .ra-cars {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* search box in the header */
.rhd .ra-cars__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  width: 300px;
  max-width: 100%;
  border: 1.5px solid var(--ink);
  background: var(--card);
  border-radius: 2px;
}
.rhd .ra-cars__search:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.rhd .ra-cars__search-k {
  font:
    700 13px "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-cars__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font:
    400 14px "IBM Plex Sans",
    sans-serif;
  color: var(--ink);
}
.rhd .ra-cars__search input::placeholder {
  color: var(--ink-2);
}

.rhd .ra-cars .rhd-ph__actions {
  flex-direction: column;
  align-items: flex-start;
}

/* stage groups */
.rhd .ra-cars__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-cars__group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 0 10px;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rhd .ra-cars__group-k {
  font:
    700 14px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-cars__group-title {
  margin: 0;
  font:
    700 21px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .ra-cars__group-n {
  font:
    500 14px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-cars__group-chev {
  margin-left: auto;
  font:
    500 16px / 1 "IBM Plex Mono",
    monospace;
  color: var(--amber);
}
.rhd .ra-cars__more {
  align-self: flex-start;
  background: transparent;
  border-color: var(--rule);
}

/* car cards */
.rhd .ra-cars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}
.rhd .ra-cars__card {
  display: flex;
  gap: 12px;
  padding: 12px;
  min-width: 0;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
.rhd .ra-cars__card:hover {
  color: var(--ink);
  transform: translate(1px, 1px);
  box-shadow: 5px 5px 0 var(--shadow);
}
.rhd .ra-cars__thumb {
  flex: 0 0 96px;
  height: 72px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--card) 6px 12px);
  border: 1px solid var(--rule);
  font:
    500 9.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-cars__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rhd .ra-cars__card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rhd .ra-cars__card-stage {
  align-self: flex-start;
}
.rhd .ra-cars__card-title {
  font:
    600 14.5px / 1.3 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-cars__card-id {
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhd .ra-cars__card-spec {
  font:
    400 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-cars__card-money {
  font:
    600 13px "IBM Plex Mono",
    monospace;
}

/* add a car I won */
.rhd .ra-cars__add {
  max-width: 540px;
}
.rhd .ra-cars__add-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-cars__add-url {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-cars__add-manual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.rhd .ra-cars__swap {
  align-self: flex-start;
  justify-self: start;
  padding: 0;
  background: none;
  border: 0;
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rhd .ra-cars__swap--full {
  grid-column: 1 / -1;
}
.rhd .ra-cars__add-err {
  margin: 0;
}

@media (max-width: 760px) {
  .rhd .ra-cars__search {
    width: 100%;
  }
  .rhd .ra-cars .rhd-ph__actions {
    width: 100%;
  }
}

/* 404 — sits outside the app shell, so it brings its own .rhd root. */
.rhd.ra-404 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}
.rhd .ra-404__card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  padding: 40px 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-404__mark {
  position: absolute;
  right: -30px;
  bottom: -60px;
  font:
    800 220px / 1 "Shippori Mincho B1",
    serif;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
.rhd .ra-404__title {
  margin: 0;
  font:
    800 64px / 1 "Shippori Mincho B1",
    serif;
}
.rhd .ra-404__sub {
  margin: 0 0 6px;
  max-width: 340px;
  font:
    400 15px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* Outbox (design-mockups/app-rebuild/Screen-Outbox.dc.html). */
.rhd .ra-out {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.rhd .ra-out__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rhd .ra-out__gtitle {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  font:
    700 18px / 1.25 "Shippori Mincho B1",
    serif;
}
.rhd .ra-out__gtitle a {
  color: var(--ink);
  text-decoration: none;
}
.rhd .ra-out__gtitle a:hover {
  text-decoration: underline;
}
.rhd .ra-out__gtitle > span:not(.ra-out__gcount) {
  margin-left: -4px;
}
.rhd .ra-out__gcount {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-out__card {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  min-width: 0;
}
.rhd .ra-out__card .ra-mail__list,
.rhd .ra-mail__list.ra-out__card {
  border: 1.5px solid var(--ink);
}
.rhd .ra-out__card .ra-mail__list {
  border: 0;
}
.rhd .ra-out__card .ra-mail__thread-row {
  padding: 12px 16px;
}
.rhd .ra-out__skel-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}
.rhd .ra-out__skel-row + .ra-out__skel-row {
  border-top: 1px solid var(--rule);
}

/* Settings → Cost assumptions (CostAssumptionsSettings.tsx): tariff lookup + per-car costs. */

.rhd .ra-costs__pad {
  padding: 12px 16px 0;
  margin: 0;
}
.rhd .ra-costs__muted {
  font:
    400 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-costs__muted b {
  color: var(--ink);
  font-weight: 600;
}
.rhd .ra-costs__ok {
  font:
    500 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ok);
}
.rhd .ra-costs__bad {
  margin: 0;
  padding: 10px 16px;
  font:
    500 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--beni);
}
.rhd .ra-costs__skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

/* The panel's offset shadow must stay inside the tab frame. */
.rhd .ra-costs {
  margin: 0 6px 6px 0;
}

/* high marks */
.rhd .ra-costs__marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px 16px;
}
.rhd .ra-costs__mark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1.5px solid var(--ink);
  background: var(--amber-wash);
  min-width: 0;
}
.rhd .ra-costs__mark-k {
  font:
    600 12px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rhd .ra-costs__mark-rate {
  font:
    700 24px / 1.1 "IBM Plex Mono",
    monospace;
  color: var(--beni);
}

/* rates table */
.rhd .ra-costs__table {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule);
}
.rhd .ra-costs__table thead,
.rhd .ra-costs__table tbody {
  display: contents;
}
.rhd .ra-costs__tr th,
.rhd .ra-costs__tr td {
  padding: 0;
  text-align: left;
  font-weight: inherit;
  min-width: 0;
}
.rhd .ra-costs__tr {
  display: grid;
  grid-template-columns: 120px 140px minmax(260px, 1.3fr) minmax(0, 1.4fr) 76px;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 16px;
  border-bottom: 1px dashed var(--rule);
  font:
    400 13px "IBM Plex Sans",
    sans-serif;
  min-width: 0;
}
.rhd .ra-costs__tr--head {
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-costs__tr--high {
  background: var(--beni-wash);
}
.rhd .ra-costs__rate {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  font:
    600 13px "IBM Plex Mono",
    monospace;
}
.rhd .ra-costs__evidence {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--ai);
  background: var(--ai-wash);
  color: var(--ai);
  font:
    500 11.5px "IBM Plex Mono",
    monospace;
  text-decoration: none;
  white-space: nowrap;
}
.rhd .ra-costs__evidence:hover {
  background: var(--card);
}

/* add a manual rate */
.rhd .ra-costs__add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  padding: 14px 16px;
}
.rhd .ra-costs__grow {
  flex: 1 1 220px;
  min-width: 0;
}

/* per-car cost fields */
/* Four fixed columns so every section's fields line up; fields align by their label (top), so a
   field with a hint below it doesn't push its neighbours down. */
.rhd .ra-costs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  padding: 6px 16px 16px;
  align-items: start;
}
/* Starts a new row inside a section (freight volumes under the freight prices). */
.rhd .ra-costs__break {
  grid-column: 1 / -1;
  height: 0;
}
.rhd .ra-costs__h,
.rhd .ra-costs__fees,
.rhd .ra-costs__span {
  grid-column: 1 / -1;
}
.rhd .ra-costs__h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-costs__h:first-child {
  border-top: none;
}
.rhd .ra-costs__span {
  margin: 0;
}
.rhd .ra-costs__fees {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}
.rhd .ra-costs__fee {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) repeat(4, minmax(96px, 1fr));
  gap: 8px;
  align-items: center;
  min-width: 520px;
}
.rhd .ra-costs__fee--head {
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* "Default" lines up with the site names that sit after their checkbox. */
.rhd .ra-costs__fee-site--default {
  padding-left: 26px;
}
.rhd .ra-costs__fee-site {
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-costs__fee-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rhd .ra-costs__fee-cap {
  display: none;
  font:
    600 10px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-costs__use {
  margin-left: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ai);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.rhd .ra-costs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 760px) {
  /* Phone: each rate is a small card — class and rate on one line, then the evidence, the note
     and the remove button, each on its own line. */
  .rhd .ra-costs__tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "class rate"
      "evidence evidence"
      "note note"
      "act act";
    gap: 4px 12px;
  }
  .rhd .ra-costs__tr > :nth-child(1) {
    grid-area: class;
    font-weight: 600;
  }
  .rhd .ra-costs__tr > :nth-child(2) {
    grid-area: rate;
    justify-self: end;
  }
  .rhd .ra-costs__tr > :nth-child(3) {
    grid-area: evidence;
  }
  .rhd .ra-costs__tr > :nth-child(4) {
    grid-area: note;
  }
  .rhd .ra-costs__tr > :nth-child(5) {
    grid-area: act;
  }
  .rhd .ra-costs__tr > :nth-child(5):empty {
    display: none;
  }
  .rhd .ra-costs__evidence {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Fees: each site stacks into a 2×2 of captioned boxes instead of a scrolling row. */
  .rhd .ra-costs__fees {
    overflow-x: visible;
  }
  .rhd .ra-costs__fee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--rule);
  }
  .rhd .ra-costs__fee--head {
    display: none;
  }
  .rhd .ra-costs__fee-site {
    grid-column: 1 / -1;
  }
  .rhd .ra-costs__fee-site--default {
    padding-left: 0;
    font-weight: 600;
  }
  .rhd .ra-costs__fee-cap {
    display: block;
  }
  .rhd .ra-costs__tr--head {
    display: none;
  }
  .rhd .ra-costs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Settings (/app/settings) — design-mockups/app-rebuild/Screen-Settings.dc.html */

.rhd .ra-settings {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.rhd .ra-settings .rhd-ph__mark {
  right: 60px;
}

/* numbered section: 壱 Account … */
.rhd .ra-settings__sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rhd .ra-settings__h {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font:
    700 21px / 1.2 "Shippori Mincho B1",
    serif;
}
.rhd .ra-settings__n {
  font:
    700 22px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}

/* rows inside a panel */
.rhd .ra-settings__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px;
  min-width: 0;
}
.rhd .ra-settings__row--end {
  align-items: flex-end;
}
.rhd .ra-settings__row--between {
  justify-content: space-between;
}
.rhd .ra-settings__row + .ra-settings__row,
.rhd .ra-settings__site + .ra-settings__site {
  border-top: 1px solid var(--rule);
}
.rhd .ra-settings__grow {
  flex: 1 1 260px;
  min-width: 0;
}
.rhd .ra-settings__line {
  flex-basis: 100%;
}
.rhd .ra-settings__site-help {
  margin: 6px 0 0 18px;
  max-width: 68ch;
}
.rhd .ra-settings__muted {
  font:
    400 14px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-settings__muted b {
  color: var(--ink);
  font-weight: 600;
}
.rhd .ra-settings__label {
  font:
    500 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-settings__ok {
  font:
    500 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ok);
}
.rhd .ra-settings__bad {
  font:
    500 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--beni);
}

/* quiet ink-bordered button on paper (Refresh / Reset / Change password / Test connection) */
.rhd .ra-settings__qbtn {
  background: var(--paper);
}

/* status dot: filled = connected, hollow = not */
.rhd .ra-settings__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  border: 1.5px solid var(--ok);
}
.rhd .ra-settings__dot--off {
  background: transparent;
  border-color: var(--ink-2);
}
.rhd .ra-settings__dot--bad {
  background: var(--beni);
  border-color: var(--beni);
}

/* auction-site rows */
.rhd .ra-settings__site-name {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rhd .ra-settings__site-name b {
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-settings__site-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font:
    500 12.5px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-settings__site-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 0 16px 14px;
}
.rhd .ra-settings__site-form .rhd-f {
  flex: 1 1 180px;
}
.rhd .ra-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* mailbox provider choice cards */
.rhd .ra-settings__providers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.rhd .ra-settings__providers .rhd-choice {
  padding: 12px 14px;
}
.rhd .ra-settings__providers .rhd-choice[aria-pressed="true"] {
  padding: 11px 13px;
}
.rhd .ra-settings__providers .rhd-choice__title {
  font-size: 14.5px;
}
.rhd .ra-settings__provider-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 16px 14px;
}
.rhd .ra-settings__autosend {
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
}
.rhd .ra-settings__autosend .rhd-check {
  gap: 12px;
}
.rhd .ra-settings__autosend .rhd-check input {
  margin-top: 1px;
}
.rhd .ra-settings__autosend-title {
  display: block;
  font:
    600 14px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-settings__autosend-desc {
  display: block;
  margin-top: 3px;
  font:
    400 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-settings__mblist {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font:
    400 12px / 1.4 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

/* field grids (identity, sheet requests) */
.rhd .ra-settings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
}
.rhd .ra-settings__grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* shop address: two columns, street lines full width; one column on phones */
.rhd .ra-settings__grid--address {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rhd .ra-settings__span2 {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .rhd .ra-settings__grid--address {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rhd .ra-settings__grid .rhd-f > span:first-child {
  font-size: 13px;
}
.rhd .ra-settings__unset {
  border-style: dashed;
  border-color: var(--beni);
}
.rhd .ra-settings__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
}
.rhd .ra-settings__foot-note {
  margin-right: auto;
  font:
    400 12.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

.rhd .ra-settings__skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

@media (max-width: 760px) {
  .rhd .ra-settings__providers {
    grid-template-columns: 1fr;
  }
  .rhd .ra-settings__row--between > .rhd-b {
    margin-left: auto;
  }
}

.rhd .ra-settings__grid--flush {
  padding: 0;
}
.rhd .ra-settings__span {
  grid-column: 1 / -1;
  justify-content: flex-end;
}
.rhd .ra-settings__status {
  font-size: 14.5px;
}
.rhd .ra-settings__block {
  display: block;
  margin-top: 3px;
}
.rhd .ra-settings__gap-top {
  margin-top: 8px;
}
.rhd .ra-settings__fm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-settings__fm-row {
  align-items: flex-end;
}
.rhd .ra-settings__fm-row > .rhd-f {
  flex: 1 1 280px;
}
.rhd .ra-settings__danger,
.rhd .ra-settings__danger:hover {
  color: var(--beni);
}

/* "Your account" / "<shop> settings" group headings */
.rhd .ra-settings__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: -10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.rhd .ra-settings__group-h {
  margin: 0;
  font:
    600 12.5px / 1.4 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-settings__group-sub {
  margin: 0;
  font:
    400 14px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-settings__group .rhd-banner {
  margin-bottom: 4px;
}

/* the shop's shared sections; a bare fieldset so `disabled` can make them read-only */
.rhd .ra-settings__shared {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* tabs: the strip and its panel read as one ledger page */
.rhd .ra-settings__tabs {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rhd .ra-settings__panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 20px 18px 24px;
  background: transparent;
}
.rhd .ra-settings__panel > .ra-settings__group-sub {
  margin-bottom: -8px;
}
@media (max-width: 600px) {
  .rhd .ra-settings__panel {
    padding: 14px 10px 18px;
  }
}

/* Today (/app/today) — design-mockups/app-rebuild/Screen-Today.dc.html */

.rhd .ra-today {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* figures strip: auto-fit cells with ink hairlines between them */
.rhd .ra-today__figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-today__figs .rhd-fig {
  background: var(--card);
  padding: 16px 18px;
}

.rhd .ra-today__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}
.rhd .ra-today__main {
  flex: 3 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rhd .ra-today__aside {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-today__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhd .ra-today__section .rhd-sh__title,
.rhd .ra-today__h2 {
  margin: 0;
  font:
    700 22px / 1.2 "Shippori Mincho B1",
    serif;
}

.rhd .ra-today__msg {
  margin: 0;
  padding: 16px;
}

/* Needs you */
.rhd .ra-today__count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: var(--beni);
  color: #fff8ee;
  font:
    600 11px / 1 "IBM Plex Mono",
    monospace;
  letter-spacing: 0;
  border-radius: 10px;
}
.rhd .ra-today__need {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-today__need:last-child {
  border-bottom: 0;
}
.rhd .ra-today__need-dot {
  flex: none;
  align-self: flex-start;
  margin-top: 5px;
}
.rhd .ra-today__need-dot .rhd-dot {
  display: block;
  width: 10px;
  height: 10px;
}
.rhd .ra-today__need-copy {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rhd .ra-today__need-title {
  font:
    600 15px / 1.35 "IBM Plex Sans",
    sans-serif;
  text-wrap: pretty;
}
.rhd .ra-today__need-detail {
  font:
    400 13px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-today__need-act {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.rhd .ra-today__ago {
  font:
    500 12px / 1 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  white-space: nowrap;
}
.rhd .ra-today__need-btn {
  padding: 9px 13px;
  font-size: 13.5px;
  background: var(--paper);
}
.rhd .ra-today__need-btn:hover {
  background: var(--paper-2);
}
.rhd .ra-today__need--skel {
  padding: 16px;
  flex-wrap: nowrap;
}
.rhd .ra-today__need--skel .ra-today__need-copy {
  gap: 8px;
}
.rhd .ra-today__skel-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule);
}
.rhd .ra-today__skel-btn {
  flex: none;
  width: 96px;
  height: 32px;
}
.rhd .ra-today__empty {
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.rhd .ra-today__empty .rhd-empty__seal {
  width: 64px;
  height: 64px;
  font-size: 26px;
}

/* Hunts running today: a grid "table" that restacks into cards on phones */
.rhd .ra-today__hunts {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  min-width: 0;
}
.rhd .ra-today__hunt {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.3fr) 148px 150px;
  gap: 16px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.rhd .ra-today__hunts > .ra-today__hunt:last-child {
  border-bottom: 0;
}
.rhd a.ra-today__hunt:hover {
  background: var(--paper);
  color: var(--ink);
}
.rhd .ra-today__hunt--head {
  padding: 10px 16px;
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-today__hunt--skel {
  padding: 15px 16px;
}
.rhd .ra-today__who {
  font:
    600 14px / 1.3 "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhd .ra-today__wants {
  font:
    400 14px / 1.3 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhd .ra-today__state .rhd-tag {
  font-size: 10.5px;
  padding: 6px 9px;
}
.rhd .ra-today__run {
  font:
    500 12.5px / 1.3 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}

/* Auction site status */
.rhd .ra-today__site {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.rhd button.ra-today__site:hover {
  background: var(--paper);
}
.rhd .ra-today__site--skel {
  cursor: default;
}
.rhd .ra-today__site-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rhd .ra-today__site-name {
  flex: 1;
  min-width: 0;
  font:
    600 14px / 1.2 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-today__site-note {
  font:
    400 13.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rhd .ra-today__site-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font:
    500 12px / 1.3 "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-today__site-err {
  padding: 3px 6px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px dashed var(--rule);
}
.rhd .ra-today__site-foot {
  margin: 0;
  padding: 10px 16px;
  font:
    400 12px / 1.4 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .rhd .ra-today__hunt--head,
  .rhd .ra-today__hunt--skel .rhd-skel:nth-child(n + 3) {
    display: none;
  }
  .rhd .ra-today__hunt {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 14px 16px;
  }
  .rhd .ra-today__who {
    grid-column: 1;
    grid-row: 1;
    font-size: 15px;
    white-space: normal;
  }
  .rhd .ra-today__state {
    grid-column: 2;
    grid-row: 1;
  }
  .rhd .ra-today__state .rhd-tag {
    font-size: 10px;
    padding: 5px 8px;
  }
  .rhd .ra-today__wants,
  .rhd .ra-today__run {
    grid-column: 1 / -1;
  }
  .rhd .ra-today__wants {
    line-height: 1.4;
    white-space: normal;
  }
}
.rhd .ra-today__site:last-child {
  border-bottom: 0;
}

/* Cost ledger — the "Costs & profit" body on the car page (Screen-Car-Detail.dc.html §3/§4). */

.rhd .ra-ledger {
  display: flex;
  flex-direction: column;
  min-width: 0;
  container-type: inline-size;
}

/* ---------- stat band ---------- */
.rhd .ra-ledger__band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background-color: var(--ink);
  color: var(--paper);
}
.rhd .ra-ledger__band-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-right: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  min-width: 0;
}
.rhd .ra-ledger__band-k {
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.rhd .ra-ledger__band-v {
  font:
    600 22px "IBM Plex Mono",
    monospace;
  overflow-wrap: anywhere;
}
.rhd .ra-ledger__band-v--hl {
  color: var(--hl);
}
.rhd .ra-ledger__band-v--neg {
  color: var(--beni-wash);
}
.rhd .ra-ledger__band-n {
  font:
    400 12px "IBM Plex Mono",
    monospace;
  opacity: 0.75;
}

/* ---------- missing checklist ---------- */
.rhd .ra-ledger__missing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__missing-label {
  font:
    600 12px "IBM Plex Sans",
    sans-serif;
  margin-right: 4px;
}
.rhd .ra-ledger__miss {
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  padding: 6px 9px;
  border: 1.5px dashed var(--beni);
  color: var(--beni);
  border-radius: 2px;
}

/* ---------- category tiles ---------- */
.rhd .ra-ledger__cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__cat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--card);
  padding: 10px 12px;
}
.rhd .ra-ledger__cat--empty {
  background: var(--paper-2);
}
.rhd .ra-ledger__cat--empty > * {
  opacity: 0.55;
}
.rhd .ra-ledger__cat-k {
  font:
    500 11.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-ledger__cat-v {
  font:
    600 14.5px "IBM Plex Mono",
    monospace;
}
.rhd .ra-ledger__cat-n {
  font:
    400 11px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-ledger__pad-note {
  margin: 0;
  padding: 12px 16px;
}

/* ---------- lines ---------- */
.rhd .ra-ledger__lines {
  display: flex;
  flex-direction: column;
}
.rhd .ra-ledger__scroll {
  overflow-x: auto;
}
.rhd .ra-ledger__scroll-in {
  min-width: 640px;
}
.rhd .ra-ledger__row {
  display: grid;
  grid-template-columns:
    52px minmax(84px, 120px) minmax(80px, 1fr) minmax(84px, 150px) 92px minmax(110px, 150px)
    auto;
  grid-template-areas: "date cat desc amt usd src act";
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  font:
    400 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-ledger__row--head {
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-ledger__c-date {
  grid-area: date;
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  white-space: nowrap;
}
.rhd .ra-ledger__row--head .ra-ledger__c-date {
  font: inherit;
}
.rhd .ra-ledger__c-cat {
  grid-area: cat;
}
.rhd .ra-ledger__c-desc {
  grid-area: desc;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhd .ra-ledger__c-amt {
  grid-area: amt;
  text-align: right;
  font:
    500 12.5px "IBM Plex Mono",
    monospace;
}
.rhd .ra-ledger__c-usd {
  grid-area: usd;
  text-align: right;
  font:
    600 13px "IBM Plex Mono",
    monospace;
}
.rhd .ra-ledger__row--head .ra-ledger__c-amt,
.rhd .ra-ledger__row--head .ra-ledger__c-usd {
  font: inherit;
}
.rhd .ra-ledger__c-src {
  grid-area: src;
  min-width: 0;
}
.rhd .ra-ledger__c-act {
  grid-area: act;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.rhd .ra-ledger__fxline {
  display: block;
  font-size: 10.5px;
  color: var(--ink-2);
}
.rhd .ra-ledger__src {
  display: inline-flex;
  gap: 5px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button.ra-ledger__src {
  cursor: pointer;
}
.rhd button.ra-ledger__src:hover {
  background: var(--paper-2);
}
.rhd .ra-ledger__src--manual {
  border-style: dashed;
}
.rhd .ra-ledger__src--auction {
  border-color: var(--amber);
}
.rhd .ra-ledger__src-k {
  font-family: "Shippori Mincho B1", serif;
  color: var(--beni);
}
.rhd .ra-ledger__link {
  padding: 0;
  border: 0;
  background: none;
  font:
    500 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.rhd .ra-ledger__link--danger {
  color: var(--beni);
}
.rhd .ra-ledger__add-wrap {
  padding: 10px 16px;
}
.rhd .ra-ledger__add {
  padding: 0;
  border: 0;
  background: none;
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
  cursor: pointer;
}

/* inline add / edit */
.rhd .ra-ledger__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__form-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.rhd .ra-ledger__form-foot .rhd-err {
  font-size: 12.5px;
  margin-right: auto;
}
.rhd .ra-ledger__fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(120px, 2fr) minmax(90px, 1fr) 84px 148px;
  gap: 6px;
  align-items: center;
}
.rhd .ra-ledger__fields--fx {
  grid-template-columns:
    minmax(110px, 1.1fr) minmax(120px, 2fr) minmax(90px, 1fr) 84px minmax(80px, 0.8fr)
    148px;
}
.rhd .ra-ledger__fields--nodate {
  grid-template-columns: minmax(110px, 1.1fr) minmax(120px, 2fr) minmax(90px, 1fr) 84px;
}
.rhd .ra-ledger__fields .rhd-in {
  height: 32px;
  font-size: 13px;
  min-width: 0;
  padding: 0 8px;
}
.rhd .ra-ledger__fields .rhd-sel select {
  padding-right: 24px;
}
.rhd .ra-ledger__fields .rhd-sel__arrow {
  right: 8px;
}
.rhd .ra-ledger__num {
  text-align: right;
}

/* ---------- documents ---------- */
.rhd .ra-ledger__docs {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid var(--ink);
}
.rhd .ra-ledger__docs-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__docs-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-ledger__docs-k {
  color: var(--beni);
}
.rhd .ra-ledger__upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .ra-ledger__upload .rhd-sel {
  min-width: 200px;
}
.rhd .ra-ledger__doc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__doc-chip {
  font-size: 12px;
  padding: 6px 9px;
}
.rhd .ra-ledger__doc-file {
  flex: 1 1 160px;
  min-width: 0;
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-ledger__doc-state {
  font:
    500 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
}
.rhd .ra-ledger__doc-state--ok {
  color: var(--ok);
}
.rhd .ra-ledger__doc-btn.rhd-b:not(.rhd-b--primary) {
  background: var(--paper);
}

/* ---------- review & apply ---------- */
.rhd .ra-ledger__review {
  margin: 14px 16px 16px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--shadow);
}
.rhd .ra-ledger__review-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background-color: var(--ai);
  background-image: var(--wood);
  color: var(--on-ai);
}
.rhd .ra-ledger__review-k {
  font:
    700 13px "Shippori Mincho B1",
    serif;
}
.rhd .ra-ledger__review-title {
  flex: 1;
  min-width: 0;
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.04em;
}
.rhd .ra-ledger__review-file {
  margin-left: 8px;
  font:
    400 12px "IBM Plex Mono",
    monospace;
  letter-spacing: 0;
  opacity: 0.8;
  overflow-wrap: anywhere;
}
.rhd .ra-ledger__review-x {
  background: none;
  border: 0;
  color: inherit;
  font:
    500 18px / 1 "IBM Plex Mono",
    monospace;
  cursor: pointer;
  padding: 0 2px;
}
.rhd .ra-ledger__review-note {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font:
    400 13px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-ledger__review-pad {
  padding: 10px 14px 0;
}
.rhd .ra-ledger__warn-list {
  margin: 0;
  padding-left: 18px;
}
.rhd .ra-ledger__fx {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__fx-label {
  font:
    600 13px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-ledger__fx-in.rhd-in {
  width: 110px;
  font-weight: 600;
  background: var(--card);
}
.rhd .ra-ledger__fx-note {
  font:
    500 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-ledger__fx-note.rhd-err {
  color: var(--beni);
}
.rhd .ra-ledger__review-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__review-row .rhd-in {
  background: var(--card);
}
.rhd .ra-ledger__review-usd {
  flex: none;
  width: 96px;
  text-align: right;
  font:
    600 13px "IBM Plex Mono",
    monospace;
}
.rhd .ra-ledger__x {
  flex: none;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--beni);
  font-size: 13px;
  cursor: pointer;
}
.rhd .ra-ledger__review-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
}
.rhd .ra-ledger__review-apply {
  display: flex;
  gap: 14px;
  align-items: center;
}
.rhd .ra-ledger__total {
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-ledger__review-errs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 0 14px 11px;
}
.rhd .ra-ledger__review-errs .rhd-err {
  font-size: 12.5px;
}

/* ---------- narrow: the ledger reflows by its own width ---------- */
@container (max-width: 560px) {
  .rhd .ra-ledger__scroll-in {
    min-width: 0;
  }
  .rhd .ra-ledger__row--head {
    display: none;
  }
  .rhd .ra-ledger__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "cat usd"
      "desc desc"
      "date amt"
      "src act";
    gap: 4px 10px;
    padding: 10px 14px;
  }
  .rhd .ra-ledger__c-cat {
    font-weight: 600;
    font-size: 13.5px;
  }
  .rhd .ra-ledger__c-desc {
    white-space: normal;
    font-size: 12.5px;
    color: var(--ink-2);
  }
  .rhd .ra-ledger__c-amt {
    font-size: 11.5px;
    color: var(--ink-2);
  }
  .rhd .ra-ledger__fxline {
    display: inline;
    margin-left: 4px;
  }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .rhd .ra-ledger__band {
    grid-template-columns: 1fr 1fr;
  }
  .rhd .ra-ledger__band-cell {
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  }
  .rhd .ra-ledger__band-v {
    font-size: 18px;
  }
  .rhd .ra-ledger__cats {
    grid-template-columns: 1fr 1fr;
  }
  .rhd .ra-ledger__fields,
  .rhd .ra-ledger__fields--fx,
  .rhd .ra-ledger__fields--nodate {
    grid-template-columns: 1fr 1fr;
  }
  .rhd .ra-ledger__f-desc {
    grid-column: 1 / -1;
  }
  .rhd .ra-ledger__review-row {
    flex-wrap: wrap;
  }
  .rhd .ra-ledger__review-row .ra-ledger__fields {
    flex: 1 1 100%;
  }
  .rhd .ra-ledger__review-usd {
    flex: 1;
    width: auto;
  }
  .rhd .ra-ledger__upload,
  .rhd .ra-ledger__upload .rhd-sel {
    flex: 1 1 100%;
    min-width: 0;
  }
}
.rhd .ra-ledger__doc-state--none {
  color: var(--ink-2);
  font-style: italic;
}
.rhd .ra-ledger__group + .ra-ledger__group {
  border-top: 1.5px solid var(--ink);
}
.rhd .ra-ledger__group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-ledger__group-k {
  font:
    700 13px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-ledger__group-label {
  flex: 1;
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-ledger__group-total {
  font:
    600 13.5px "IBM Plex Mono",
    monospace;
}
.rhd .ra-ledger__labor {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-ledger__labor .rhd-in {
  width: 110px;
}
.rhd .ra-ledger__labor-k {
  font:
    600 11px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rhd .ra-ledger__labor-eq {
  font:
    600 13px "IBM Plex Mono",
    monospace;
  color: var(--ink);
}

/* Car detail (/app/vehicles/:id) — page layout on the Right Hand DMS app library. */
.rhd .ra-car {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.rhd .ra-car__back {
  align-self: flex-start;
  font:
    500 13.5px / 1 "IBM Plex Sans",
    sans-serif;
}

/* off-ramp banner */
.rhd .ra-car__offword {
  color: var(--beni);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* header */
.rhd .ra-car__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-car__head-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rhd .ra-car__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rhd .ra-car__for {
  font:
    500 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-car__title {
  margin: 0;
  font:
    800 34px / 1.08 "Shippori Mincho B1",
    serif;
  overflow-wrap: anywhere;
}
.rhd .ra-car__idrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rhd .ra-car__idrow .rhd-frame {
  font-size: 14px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rhd .ra-car__capture {
  padding: 6px 10px;
  background: var(--card);
  border: 1.5px dashed var(--beni);
  border-radius: 2px;
  font:
    600 13px "IBM Plex Sans",
    sans-serif;
  color: var(--beni);
  cursor: pointer;
}
.rhd .ra-car__head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
.rhd .ra-car__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.rhd .ra-car__actions .rhd-b {
  padding: 11px 15px;
  font-size: 14px;
}
.rhd .ra-car__actions .rhd-b.ra-car__quiet,
.rhd .ra-car__quiet {
  background: transparent;
  color: var(--beni);
  border-color: var(--rule);
  box-shadow: none;
}
.rhd .ra-car__actions .rhd-b.ra-car__quiet:hover {
  background: var(--beni-wash);
  color: var(--beni);
}
.rhd .ra-car__act-err {
  margin: 0;
  max-width: 360px;
  text-align: right;
  font-size: 12.5px;
}

/* post-auction result check */
.rhd .ra-car__win {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--ink-2);
  background: var(--paper-2);
}
.rhd .ra-car__win--won {
  background: var(--ok-wash);
  border-color: var(--ok);
  box-shadow: 4px 4px 0 var(--shadow);
}
.rhd .ra-car__win-seal {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink-2);
  color: var(--ink-2);
  border-radius: 50%;
  transform: rotate(-8deg);
  font:
    700 15px / 1 "Shippori Mincho B1",
    serif;
}
.rhd .ra-car__win--won .ra-car__win-seal {
  border-color: var(--ok);
  color: var(--ok);
}
.rhd .ra-car__win-text {
  flex: 1 1 300px;
  font:
    500 14.5px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-car__win-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* stepper: off-ramp cars show the stop they left from in wash, not vermilion */
.rhd .ra-car__stepper--off .rhd-stepper__dot--now {
  background: var(--beni-wash);
  color: var(--beni);
  border-color: var(--beni);
  box-shadow: 3px 3px 0 var(--shadow);
}

/* body: main column + side rail; the rail drops under the main column when narrow */
.rhd .ra-car__body {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}
.rhd .ra-car__main {
  flex: 3 1 620px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rhd .ra-car__rail {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* numbered, stage-locked sections */
.rhd .ra-car__sec {
  min-width: 0;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-car__sec--locked {
  background: transparent;
  border: 1.5px dashed var(--ink-2);
  box-shadow: none;
}
.rhd .ra-car__sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-car__sec--locked .ra-car__sec-head {
  border-bottom: 1.5px dashed var(--ink-2);
}
.rhd .ra-car__sec-n {
  font:
    700 13px "IBM Plex Mono",
    monospace;
  color: var(--beni);
}
.rhd .ra-car__sec-title {
  flex: 1;
  margin: 0;
  font:
    600 15px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-car__sec--locked .ra-car__sec-title {
  color: var(--ink-2);
}
.rhd .ra-car__sec-locked {
  font:
    600 10.5px / 1 "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-car__sec-reason {
  padding: 14px 16px;
  font:
    400 13.5px / 1.45 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-car__link {
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
}

/* 1 auction */
.rhd .ra-car__auction {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}
.rhd .ra-car__sheet {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .ra-car__sheet-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 6px;
  text-align: center;
  background: repeating-linear-gradient(0deg, var(--paper-2) 0 1px, var(--card) 1px 12px);
  border: 1.5px solid var(--ink);
  font:
    500 10.5px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-car__sheet-img--has {
  padding: 0;
  background: var(--card);
}
.rhd .ra-car__sheet-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rhd .ra-car__sheet-btn {
  padding: 7px 0;
  font-size: 12.5px;
}
.rhd .ra-car__sheet-btn--quiet {
  background: transparent;
  border-color: var(--rule);
  box-shadow: none;
}
.rhd .ra-car__upload {
  cursor: pointer;
}
.rhd .ra-car__auction-info {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rhd .ra-car__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 0;
  font:
    400 13.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-car__facts dt {
  color: var(--ink-2);
}
.rhd .ra-car__facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font:
    500 13px "IBM Plex Mono",
    monospace;
}

/* figure cells (grades, bid & outcome) */
.rhd .ra-car__cells {
  display: grid;
  gap: 1px;
  background: var(--rule);
}
.rhd .ra-car__cells--grades {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule);
}
.rhd .ra-car__cells--bid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rhd .ra-car__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--card);
}
.rhd .ra-car__cells--bid .ra-car__cell {
  padding: 12px 16px;
}
.rhd .ra-car__cell-label {
  font:
    500 10px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-car__cells--bid .ra-car__cell-label {
  font-size: 10.5px;
}
.rhd .ra-car__cell-value {
  font:
    600 17px / 1.3 "IBM Plex Mono",
    monospace;
  overflow-wrap: anywhere;
}
.rhd .ra-car__cells--grades .ra-car__cell:last-child .ra-car__cell-value {
  font-size: 14px;
  line-height: 1.6;
}
.rhd .ra-car__cells--bid .ra-car__cell-value {
  font-size: 15px;
}
.rhd .ra-car__cell-value--ok,
.rhd .ra-car__cell-value--beni,
.rhd .ra-car__cell-value--amber {
  font-family: "IBM Plex Sans", sans-serif;
}
.rhd .ra-car__cell-value--ok {
  color: var(--ok);
}
.rhd .ra-car__cell-value--beni {
  color: var(--beni);
}
.rhd .ra-car__cell-value--amber {
  color: var(--amber);
}

.rhd .ra-car__note {
  display: block;
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rhd .ra-car__mono-ink {
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink);
}
.rhd .ra-car__conf {
  margin-left: 8px;
  color: var(--ok);
}
.rhd .ra-car__check {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--amber);
  background: var(--amber-wash);
  color: var(--amber);
  font-size: 11.5px;
}
.rhd .ra-car__flags-k {
  color: var(--amber);
  font-weight: 600;
}
.rhd .ra-car__rec {
  font-weight: 600;
  color: var(--amber);
}
.rhd .ra-car__rec--bid {
  color: var(--ok);
}
.rhd .ra-car__rec--avoid {
  color: var(--beni);
}

/* 4 importing & documents */
.rhd .ra-car__docbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-car__doctype {
  flex: 0 1 240px;
  min-width: 0;
}
.rhd .ra-car__docs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rhd .ra-car__doc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-car__doc:last-child {
  border-bottom: 0;
}
.rhd .ra-car__doc-type {
  display: inline-flex;
  gap: 6px;
  padding: 6px 9px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
  font:
    600 12px / 1 "IBM Plex Sans",
    sans-serif;
  white-space: nowrap;
}
.rhd .ra-car__doc-type > span {
  font-family: "Shippori Mincho B1", serif;
  color: var(--beni);
}
.rhd .ra-car__doc-file {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
  font:
    500 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-car__textbtn {
  padding: 0;
  background: none;
  border: 0;
  font:
    500 12.5px "IBM Plex Sans",
    sans-serif;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rhd .ra-car__empty {
  margin: 0;
  padding: 12px 16px;
  font:
    400 13px / 1.5 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}

/* 5 sales & marketing */
.rhd .ra-car__sales {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
.rhd .ra-car__sales .ra-car__empty {
  padding: 0;
}
.rhd .ra-car__blurb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
}
.rhd .ra-car__blurb-k {
  font:
    600 10.5px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-car__blurb p {
  margin: 0;
  font:
    400 14px / 1.55 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-car__sales-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.rhd .ra-car__listed {
  font:
    500 13.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-car__listed .rhd-mono {
  font-size: 15px;
  font-weight: 600;
}

/* side rail cards */
.rhd .ra-car__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
}
.rhd .ra-car__card--flush {
  padding: 0;
  gap: 0;
}
.rhd .ra-car__card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rhd .ra-car__card-k {
  font:
    700 13px "Shippori Mincho B1",
    serif;
  color: var(--beni);
}
.rhd .ra-car__card-title {
  margin: 0;
  font:
    600 14.5px "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-car__emails {
  padding: 12px 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* edit modal */
.rhd .ra-car__edit {
  max-width: 680px;
}
.rhd .ra-car__edit .rhd-modal__body {
  padding: 0;
  gap: 0;
}
.rhd .ra-car__edit-group {
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.rhd .ra-car__edit-group:last-child {
  border-bottom: 0;
}
.rhd .ra-car__edit-group legend {
  float: left;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  font:
    600 11px "IBM Plex Sans",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rhd .ra-car__edit-grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.rhd .ra-car__edit-grid .rhd-f {
  font-size: 12.5px;
}

@media (max-width: 760px) {
  .rhd .ra-car__title {
    font-size: 28px;
  }
  .rhd .ra-car__head-side {
    align-items: flex-start;
    width: 100%;
  }
  .rhd .ra-car__actions {
    justify-content: flex-start;
  }
  .rhd .ra-car__act-err {
    text-align: left;
  }
  .rhd .ra-car__main,
  .rhd .ra-car__rail {
    flex-basis: 100%;
  }
  .rhd .ra-car__sheet {
    flex: 1 1 100%;
  }
  .rhd .ra-car__sheet-img {
    aspect-ratio: auto;
    height: 180px;
  }
  .rhd .ra-car__cells--grades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rhd .ra-car__cells--bid .ra-car__cell {
    padding: 10px 12px;
  }
}

/* breadcrumbs: back to cars, and over to the auction lot */
.rhd .ra-car__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
}
.rhd .ra-car__crumbs .ra-car__back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* quiet moves (pass, lost, archive, undo) sit under the main actions, small but tappable */
.rhd .ra-car__quiets {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 4px;
}
.rhd .ra-car__quiets .ra-car__quiet {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  font:
    500 13px "IBM Plex Sans",
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rhd .ra-car__quiets .ra-car__quiet:hover:not(:disabled) {
  background: var(--beni-wash);
}
.rhd .ra-car__quiets .ra-car__quiet:disabled {
  opacity: 0.5;
  cursor: default;
}

/* what to do next */
.rhd .ra-car__next {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 0;
  padding: 12px 16px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-left-width: 5px;
  font:
    500 14.5px / 1.45 "IBM Plex Sans",
    sans-serif;
}
.rhd .ra-car__next > span:nth-child(2) {
  flex: 1 1 260px;
}
.rhd .ra-car__next-k {
  font:
    800 18px / 1 "Shippori Mincho B1",
    serif;
  color: var(--beni);
}

/* photos */
.rhd .ra-car__gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rhd .ra-car__gallery-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.rhd .ra-car__photo {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  height: 150px;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.rhd .ra-car__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rhd .ra-car__photo-x {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  isolation: isolate;
}
.rhd .ra-car__photo-x::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.rhd .ra-car__photo-add {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1.5px dashed var(--ink-2);
  font:
    600 13.5px "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
  cursor: pointer;
}
.rhd .ra-car__photo-add:hover {
  background: var(--paper);
  color: var(--ink);
}
.rhd .ra-car__gallery-row .ra-car__empty {
  align-self: center;
}
@media (max-width: 600px) {
  .rhd .ra-car__photo {
    width: 72vw;
    height: 48vw;
  }
  .rhd .ra-car__photo-add {
    width: 120px;
    height: 48vw;
  }
}

/* inline edit next to a figure (hammer price) */
.rhd .ra-car__inline-edit {
  min-height: 44px;
  margin-left: 8px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--amber);
  font:
    600 12.5px "IBM Plex Sans",
    sans-serif;
  text-decoration: underline;
  cursor: pointer;
}

/* import milestones */
.rhd .ra-car__miles {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.rhd .ra-car__mile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  border-bottom: 1px solid var(--rule);
}
.rhd .ra-car__mile:last-child {
  border-bottom: 0;
}
.rhd .ra-car__mile-check {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  flex: 1 1 260px;
  cursor: pointer;
}
.rhd .ra-car__mile-check input {
  width: 22px;
  height: 22px;
  accent-color: var(--ok);
  cursor: pointer;
}
.rhd .ra-car__mile-n {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
  font:
    600 12px "IBM Plex Mono",
    monospace;
  color: var(--ink-2);
}
.rhd .ra-car__mile--done .ra-car__mile-n {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--paper);
}
.rhd .ra-car__mile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font:
    400 12.5px / 1.35 "IBM Plex Sans",
    sans-serif;
  color: var(--ink-2);
}
.rhd .ra-car__mile-text b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.rhd .ra-car__mile-date {
  min-height: 44px;
  font:
    500 13px "IBM Plex Mono",
    monospace;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}
.rhd .ra-car__mile-date--todo {
  border-style: dashed;
  color: var(--ink-2);
}

/* the amount sheet */
.rhd .ra-car__sheetform {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: min(380px, 100%);
}
.rhd .ra-car__sheetform .rhd-err {
  margin: 0;
}

/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-heading: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --color-indigo-jp-100: #fff3e4;
    --color-indigo-jp-500: #c28d41;
    --color-indigo-jp-600: #a06f24;
    --color-indigo-jp-700: #7d5411;
    --color-indigo-jp-800: #5a3b0a;
    --color-shu-50: #fdf5f3;
    --color-shu-100: #f9e8e4;
    --color-shu-200: #f0d1ca;
    --color-shu-500: #b25f52;
    --color-shu-600: #98483c;
    --color-shu-700: #7c382e;
    --color-shu-800: #5f2b23;
    --color-washi-100: #f3f2f2;
    --color-matcha-50: #f4f6f1;
    --color-matcha-100: #e7ebe0;
    --color-matcha-200: #cfd8c4;
    --color-matcha-500: #74855f;
    --color-matcha-700: #49563c;
    --color-matcha-800: #3a4530;
    --color-sumi-50: #f8f4f4;
    --color-sumi-100: #eae7e7;
    --color-sumi-200: #d7d3d3;
    --color-sumi-300: #bab6b6;
    --color-sumi-400: #9b9797;
    --color-sumi-500: #7d7979;
    --color-sumi-600: #605d5d;
    --color-sumi-700: #444141;
    --color-sumi-900: #201f1d;
    --radius-jp: 4px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\/3 {
    width: calc(1/3 * 100%);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-full {
    width: 100%;
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .flex-1 {
    flex: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .resize {
    resize: both;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-sumi-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-sumi-200);
    }
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-sumi-200 {
    border-color: var(--color-sumi-200);
  }
  .border-sumi-300 {
    border-color: var(--color-sumi-300);
  }
  .bg-indigo-jp-600 {
    background-color: var(--color-indigo-jp-600);
  }
  .bg-matcha-100 {
    background-color: var(--color-matcha-100);
  }
  .bg-sumi-50 {
    background-color: var(--color-sumi-50);
  }
  .bg-sumi-100 {
    background-color: var(--color-sumi-100);
  }
  .bg-sumi-200 {
    background-color: var(--color-sumi-200);
  }
  .bg-washi-100 {
    background-color: var(--color-washi-100);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .text-center {
    text-align: center;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-matcha-700 {
    color: var(--color-matcha-700);
  }
  .text-shu-600 {
    color: var(--color-shu-600);
  }
  .text-sumi-300 {
    color: var(--color-sumi-300);
  }
  .text-sumi-400 {
    color: var(--color-sumi-400);
  }
  .text-sumi-500 {
    color: var(--color-sumi-500);
  }
  .text-sumi-600 {
    color: var(--color-sumi-600);
  }
  .text-sumi-700 {
    color: var(--color-sumi-700);
  }
  .text-sumi-900 {
    color: var(--color-sumi-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .hover\:bg-amber-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-50);
      }
    }
  }
  .hover\:bg-indigo-jp-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-indigo-jp-700);
      }
    }
  }
  .hover\:bg-matcha-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-matcha-50);
      }
    }
  }
  .hover\:bg-shu-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-shu-50);
      }
    }
  }
  .hover\:bg-sumi-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-sumi-50);
      }
    }
  }
  .hover\:bg-sumi-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-sumi-100);
      }
    }
  }
  .focus\:border-indigo-jp-500 {
    &:focus {
      border-color: var(--color-indigo-jp-500);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-indigo-jp-500 {
    &:focus {
      --tw-ring-color: var(--color-indigo-jp-500);
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
}
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;
  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;
  --font-heading-weight: 600;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}
@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    background-color: var(--color-washi-100);
    color: var(--color-sumi-900);
    font-size: 15px;
    line-height: 1.5;
    font-feature-settings: "kern" 1,
      "liga" 1;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    color: var(--color-sumi-900);
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.012em;
    line-height: 1.18;
  }
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  ::selection {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 30%, transparent);
    }
  }
}
@layer components {
  .jp-card {
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-jp);
    transition: box-shadow 200ms,
      border-color 200ms;
  }
  .jp-card:hover {
    box-shadow: var(--shadow-sm);
  }
  .jp-btn-primary,
  .jp-btn-secondary,
  .jp-btn-ghost,
  .jp-btn-danger,
  .jp-btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 14px;
    line-height: 1.2;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-jp);
    cursor: pointer;
    transition: background-color 150ms,
      color 150ms,
      border-color 150ms;
  }
  .jp-btn-primary:disabled,
  .jp-btn-secondary:disabled,
  .jp-btn-ghost:disabled,
  .jp-btn-danger:disabled,
  .jp-btn-success:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .jp-btn-primary {
    color: var(--color-accent-700);
    border-color: var(--color-accent);
  }
  .jp-btn-primary:hover:not(:disabled) {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    }
  }
  .jp-btn-primary:active:not(:disabled) {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    }
  }
  .jp-btn-secondary {
    color: var(--color-text);
    border-color: var(--color-divider);
  }
  .jp-btn-secondary:hover:not(:disabled) {
    background: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-text) 7%, transparent);
    }
  }
  .jp-btn-secondary:active:not(:disabled) {
    background: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-text) 14%, transparent);
    }
  }
  .jp-btn-ghost {
    color: var(--color-accent-700);
  }
  .jp-btn-ghost:hover:not(:disabled) {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    }
  }
  .jp-btn-ghost:active:not(:disabled) {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    }
  }
  .jp-btn-danger {
    border-color: var(--color-shu-500);
    color: var(--color-shu-700);
  }
  .jp-btn-danger:hover:not(:disabled) {
    background-color: var(--color-shu-100);
    color: var(--color-shu-800);
  }
  .jp-btn-danger:active:not(:disabled) {
    background-color: var(--color-shu-200);
  }
  .jp-btn-success {
    border-color: var(--color-matcha-500);
    color: var(--color-matcha-700);
  }
  .jp-btn-success:hover:not(:disabled) {
    background-color: var(--color-matcha-100);
    color: var(--color-matcha-800);
  }
  .jp-btn-success:active:not(:disabled) {
    background-color: var(--color-matcha-200);
  }
  .jp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-jp) * 0.75);
  }
  .jp-badge-active {
    background-color: var(--color-matcha-100);
    color: var(--color-matcha-800);
  }
  .jp-badge-sold {
    background-color: var(--color-indigo-jp-100);
    color: var(--color-indigo-jp-800);
  }
  .jp-badge-archived {
    background-color: var(--color-sumi-50);
    color: var(--color-sumi-700);
  }
  .jp-input,
  .jp-select {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--color-text);
    caret-color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-jp);
    transition: border-color 150ms;
  }
  .jp-input::placeholder {
    color: var(--color-sumi-400);
  }
  .jp-input:hover,
  .jp-select:hover {
    border-color: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
    }
  }
  .jp-input:focus-visible,
  .jp-select:focus-visible {
    border-color: var(--color-accent);
    outline-offset: 0;
  }
  .jp-label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    color: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-text) 70%, transparent);
    }
  }
  .jp-divider {
    border-top: 1px solid var(--color-divider);
  }
  .jp-link {
    color: var(--color-accent-700);
    text-underline-offset: 3px;
    transition: color 150ms;
  }
  .jp-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }
}
@layer components {
  .kc-quiet {
    color: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-text) 55%, transparent);
    }
  }
  .kc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-text) 78%, transparent);
    }
    padding: 5px 12px 5px 14px;
  }
  .kc-nav:hover {
    background: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-text) 6%, transparent);
    }
    color: var(--color-text);
  }
  .kc-nav[data-active="true"] {
    border-left-color: var(--color-accent);
    color: var(--color-text);
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    }
  }
  .kc-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    color: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-text) 60%, transparent);
    }
    padding: 8px 2px 7px;
  }
  .kc-tab:hover {
    color: var(--color-text);
  }
  .kc-tab[data-active="true"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
  }
  .kc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
  }
  .kc-table th {
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-text) 55%, transparent);
    }
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-divider);
    white-space: nowrap;
  }
  .kc-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--color-divider);
    vertical-align: middle;
  }
  .kc-row {
    cursor: pointer;
  }
  .kc-row:hover {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 7%, transparent);
    }
  }
  [data-density="compact"] .kc-table td {
    padding: 5px 10px;
  }
  [data-density="comfortable"] .kc-table td {
    padding: 13px 10px;
  }
  .kc-table td.kc-clip {
    max-width: 340px;
    min-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kc-act {
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    padding: 5px 11px;
    cursor: pointer;
    color: var(--color-text);
    white-space: nowrap;
  }
  .kc-act:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-700);
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    }
  }
  .kc-act[data-primary="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent-700);
  }
  .kc-act[data-warn="true"][data-primary="true"] {
    border-color: var(--color-accent-600);
    color: var(--color-accent-800);
    background: var(--color-accent-100);
  }
  .kc-link {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--color-accent-700);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .kc-thumb {
    width: 52px;
    height: 38px;
    flex: none;
    background: var(--color-neutral-200);
    border: 3px solid var(--color-surface);
    outline: 1px solid var(--color-divider);
    display: grid;
    place-items: center;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--color-neutral-600);
  }
  .kc-pop {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 230px;
    overflow: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  .kc-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-divider);
    padding: 7px 10px;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    color: var(--color-text);
  }
  .kc-opt:last-child {
    border-bottom: 0;
  }
  .kc-opt:hover {
    background: var(--color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    }
  }
  .kc-opt[data-on="true"] {
    color: var(--color-accent-700);
    box-shadow: inset 2px 0 0 var(--color-accent);
  }
  .kc-scroll {
    overflow-x: auto;
    max-width: 100%;
  }
  .num {
    font-variant-numeric: tabular-nums;
  }
  .tag {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: calc(var(--radius-md) * 0.75);
  }
  .tag-accent,
  .tag-accent-2 {
    background: var(--color-accent-100);
    color: var(--color-accent-800);
  }
  .tag-neutral {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
  }
  .tag-outline {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
  }
  [data-step="done"] {
    background: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-text) 4%, transparent);
    }
  }
  [data-step="now"] {
    box-shadow: inset 0 -2px 0 var(--color-accent);
  }
  [data-step="todo"] {
    opacity: 0.5;
  }
}
@layer utilities {
  .shadow-jp {
    box-shadow: var(--shadow-sm);
  }
  .shadow-jp-md {
    box-shadow: var(--shadow-md);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}


/*# sourceMappingURL=main.e2c1149687df36127a8f.css.map*/