/* 3D Print Tools — scoped to .tools-page and themed from the site palette.
 *
 * Every rule is prefixed with .tools-page because names like .card, .progress
 * and .actions collide with Bootstrap, and the variables are scoped for the
 * same reason: this file previously set --accent on :root, which would have
 * repainted the whole site now that it loads alongside the shared stylesheet.
 * Colours derive from the site variables, so the light/dark toggle just works.
 */

.tools-page {
    --panel:      var(--card-bg);
    --panel-2:    var(--card-muted-bg);
    --line:       var(--border);
    --ink:        var(--text);
    --ink-dim:    var(--text-muted);
    --accent:     var(--primary);   /* the site accent is orange; interactive bits stay blue */
    --accent-ink: #ffffff;
    --warn:       var(--accent-2);
    --bad:        #ff6b6b;
    --ok:         #43d787;
    --radius:     10px;
    color: var(--ink);
}

/* 3D Print Tools - single-page tool, custom CSS only (no framework needed). */

.tools-page .hidden { display: none !important; }

/* --- header ----------------------------------------------------------- */
/* --- cards ------------------------------------------------------------ */
/* Bootstrap also owns .card, and its display:flex + overflow:hidden were still
   winning because the rules here never set them. overflow:hidden on a card that
   holds a 3D viewport is a clipping accident waiting to happen, so both are
   pinned back to the plain block behaviour this layout assumes. */
.tools-page .card {
    display: block;
    overflow: visible;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    margin: 22px 0;
}
.tools-page .card h2 { margin: 0 0 16px; font-size: 16px; font-weight: 600; }

.tools-page .step {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 12px; font-weight: 700;
}

/* --- dropzone --------------------------------------------------------- */
.tools-page .drop {
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    padding: 34px 18px;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.tools-page .drop.over { border-color: var(--accent); background: rgba(var(--primary-rgb), .06); }
.tools-page .drop-main { margin: 0 0 6px; font-size: 15px; }
.tools-page .drop-sub { margin: 0; color: var(--ink-dim); font-size: 13px; }

.tools-page .link {
    background: none; border: 0; padding: 0;
    color: var(--accent); font: inherit; cursor: pointer;
    text-decoration: underline;
}

.tools-page .filemeta {
    margin-top: 14px; padding: 12px 14px;
    background: var(--panel-2); border-radius: 8px;
    font-size: 14px;
}
.tools-page .filemeta b { font-weight: 600; }
.tools-page .filemeta .muted { color: var(--ink-dim); }

/* --- mode picker ------------------------------------------------------- */
.tools-page .modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.tools-page .mode {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 14px;
    background: var(--panel-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tools-page .mode:hover { border-color: var(--accent); }
.tools-page .mode.active { border-color: var(--accent); background: rgba(var(--primary-rgb), .08); }
.tools-page .mode small { color: var(--ink-dim); font-size: 12.5px; line-height: 1.4; }

.tools-page .mode-art { width: 46px; height: 46px; }
.tools-page .mode-art svg { width: 100%; height: 100%; fill: none; stroke-width: 3; }
.tools-page .s-out { stroke: var(--accent); }
.tools-page .s-in { stroke: var(--ink-dim); stroke-dasharray: 4 3; }
.tools-page .s-hole { fill: var(--panel); stroke: var(--accent); stroke-width: 2.5; }
.tools-page .s-hex { stroke: var(--accent); stroke-width: 2.5; }
.tools-page .s-wire { stroke: var(--accent); stroke-width: 2; }

/* --- options ----------------------------------------------------------- */
.tools-page .opts { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.tools-page .opt-panel { display: none; }
.tools-page .opt-panel.show { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; margin-bottom: 16px; }

.tools-page .opts label { display: block; font-size: 13.5px; font-weight: 600; }
.tools-page .opts .hint { display: block; margin: 3px 0 6px; color: var(--ink-dim); font-weight: 400; font-size: 12.5px; }
.tools-page .opts .fieldrow { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-weight: 400; }

.tools-page .opts input[type=number] {
    width: 100px; padding: 7px 9px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 7px;
    font: inherit;
}
.tools-page .opts select {
    width: 100%; padding: 7px 9px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 7px;
    font: inherit;
}
.tools-page .opts input[type=range] { flex: 1; accent-color: var(--accent); }
.tools-page .opts output { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.tools-page .opts input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tools-page .check { display: flex; gap: 9px; align-items: flex-start; }
.tools-page .check input { margin-top: 3px; accent-color: var(--accent); }
.tools-page .check span { font-weight: 600; }

/* --- buttons ----------------------------------------------------------- */
.tools-page .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.tools-page .primary, .tools-page .secondary {
    padding: 10px 18px; border-radius: 8px;
    font: inherit; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; text-decoration: none; display: inline-block;
}
.tools-page .primary { background: var(--accent); color: var(--accent-ink); }
.tools-page .primary:hover { filter: brightness(1.08); }
.tools-page .secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.tools-page .secondary:hover { border-color: var(--accent); }
.tools-page .primary[disabled] { opacity: .5; cursor: not-allowed; }
.tools-page .est { color: var(--ink-dim); font-size: 13px; }

/* --- progress ---------------------------------------------------------- */
.tools-page .bar { height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.tools-page .bar-fill {
    height: 100%; width: 0;
    background: var(--accent);
    transition: width .35s ease;
}
/* .jobprog, not .progress: Bootstrap owns .progress as a component and forces
   height:1rem + overflow:hidden, which squashed the bar and clipped the status
   line out of sight. */
.tools-page .jobprog { margin: 4px 0 2px; }
.tools-page .jobprog-msg { margin: 9px 0 0; color: var(--ink-dim); font-size: 13.5px; }

/* --- notices ----------------------------------------------------------- */
.tools-page .notice {
    margin: 12px 0; padding: 11px 14px;
    border-radius: 8px; font-size: 13.5px;
    background: rgba(255,107,107,.1);
    border: 1px solid rgba(255,107,107,.35);
    color: var(--bad);
}
.tools-page .notice.warn {
    background: rgba(240,180,41,.1);
    border-color: rgba(240,180,41,.35);
    color: var(--warn);
}
.tools-page .notice ul { margin: 6px 0 0; padding-left: 18px; }

/* --- viewer + stats ---------------------------------------------------- */
.tools-page .viewer {
    position: relative;
    height: 380px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: grab;
}
.tools-page .viewer:active { cursor: grabbing; }
.tools-page .viewer canvas { display: block; }
/* The upload preview is confirmation, not the main event - keep it shorter. */
.tools-page .viewer-sm { height: 260px; margin-top: 14px; }
.tools-page .viewer-hint {
    position: absolute; left: 10px; bottom: 9px;
    color: var(--ink-dim); font-size: 11.5px;
    pointer-events: none;
}
.tools-page .viewer-label {
    position: absolute; left: 10px; top: 9px;
    color: var(--ink-dim); font-size: 11.5px;
    letter-spacing: .04em; text-transform: uppercase;
    pointer-events: none; z-index: 1;
}

/* --- scale grid -------------------------------------------------------- */
.tools-page .lede { margin: -6px 0 16px; color: var(--ink-dim); font-size: 13.5px; }

.tools-page .scale-grid {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) minmax(0,1fr);
    gap: 9px 12px;
    align-items: center;
    margin: 14px 0 16px;
    max-width: 460px;
}
.tools-page .scale-grid .scale-head {
    color: var(--ink-dim); font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em;
}
.tools-page .scale-grid > label { font-weight: 600; font-size: 13.5px; color: var(--ink-dim); }
.tools-page .scale-grid .fieldrow { display: flex; align-items: center; gap: 7px; color: var(--ink-dim); font-size: 13px; }
.tools-page .scale-grid input {
    width: 100%; min-width: 0; padding: 7px 9px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 7px;
    font: inherit;
}
.tools-page .scale-grid input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tools-page .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.tools-page .stat {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 13px;
}
.tools-page .stat .k { display: block; color: var(--ink-dim); font-size: 12px; }
.tools-page .stat .v { display: block; font-size: 17px; font-weight: 600; margin-top: 2px; }
.tools-page .stat .v.good { color: var(--ok); }

@media (max-width: 560px) {
    .tools-page .viewer { height: 280px; }
    .tools-page .card { padding: 16px; }
}

/* --- print simulator ---------------------------------------------------- */
.tools-page .viewer-tall { height: 520px; }

.tools-page .sim-legend {
    position: absolute; left: 10px; bottom: 8px;
    display: flex; gap: 14px;
    font-size: 12px; color: var(--ink-dim);
    pointer-events: none;
}
.tools-page .sim-legend .swatch {
    display: inline-block; width: 10px; height: 10px;
    margin-right: 5px; border-radius: 2px; vertical-align: middle;
}
.tools-page .sim-legend .swatch.perim  { background: #ff731a; }
.tools-page .sim-legend .swatch.infill { background: #3399f2; }

.tools-page .sim-controls {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px;
}
.tools-page .sim-controls input[type=range] { flex: 1; accent-color: var(--accent); }
.tools-page .sim-controls .secondary { padding: 6px 12px; }
.tools-page .sim-controls select {
    padding: 6px 8px; border-radius: 7px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); font: inherit;
}
.tools-page .layer-read {
    min-width: 92px; text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim); font-size: 13px;
}

/* The field wrapper is .fieldrow, NOT .row: Bootstrap owns .row as a grid class
   and applies flex-wrap:wrap plus .row > * { width:100% }, which pushed every
   unit label onto its own line under its input. */

/* --- grouped settings (print simulator) --------------------------------- */
.tools-page .set-group + .set-group {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.tools-page .set-group > h3 {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
/* Each field is a column so the hint can grow without pushing the input out of
   line with its neighbours; margin-top:auto pins every input to the same
   baseline across the row however long the hints are. */
.tools-page .opts .opt-panel > label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tools-page .opts .opt-panel > label > .fieldrow { margin-top: auto; }
.tools-page .opts .opt-panel > label.wide { grid-column: 1 / -1; }

/* The unit sits beside the field rather than wrapping under it. */
.tools-page .opts .fieldrow .unit {
    flex: none;
    font-size: 13px;
    color: var(--ink-dim);
}
.tools-page .opts .fieldrow > input[type=number] { flex: 0 1 110px; width: auto; min-width: 0; }
.tools-page .opts .fieldrow > input[type=range] { min-width: 120px; }
.tools-page .opts output {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
}

/* --- model orientation bar ---------------------------------------------- */
.tools-page .rotate-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.tools-page .rotate-bar .rot-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.tools-page .rotate-bar label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-dim);
}
.tools-page .rotate-bar input[type=number] {
    width: 72px;
    padding: 5px 7px;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--line);
    border-radius: 7px;
    font: inherit;
}
.tools-page .rotate-bar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tools-page .rotate-bar .secondary { padding: 5px 10px; font-size: 13px; }
.tools-page .rotate-bar .est { flex-basis: 100%; }

/* --- image to STL -------------------------------------------------------- */

/* The traced outline sits on a chequerboard so a transparent PNG reads as
   transparent rather than as white artwork on a white card. */
.img-page .outline-wrap {
    display: flex;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background:
        repeating-conic-gradient(var(--panel-2) 0 25%, transparent 0 50%) 0 0 / 18px 18px,
        var(--panel);
}
.img-page .outline-wrap canvas {
    max-width: 100%;
    max-height: 420px;
    /* Nearest-neighbour: the trace is a hard edge and browsers' smoothing makes
       it look softer than the geometry actually is. */
    image-rendering: pixelated;
}
.img-page #trace-note { display: block; margin: 10px 0 0; }
.img-page .warn-text { color: var(--warn, #e0a300); font-weight: 600; }

.img-page .sizebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.img-page .sizebar > label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
}
.img-page .sizebar input[type=number] { flex: 0 0 92px; }
.img-page .sizebar .check { gap: 8px; }
.img-page .sizebar .check input { margin-top: 0; }

.img-page .tips { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.65; }
.img-page .tips li + li { margin-top: 9px; }
.img-page .tips strong { color: var(--ink); }

/* --- text to STL --------------------------------------------------------- */
.text-page .textbox {
    display: block; width: 100%;
    padding: 12px 14px; margin-bottom: 4px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 9px;
    font: 600 21px/1.35 inherit;
    resize: vertical;
}
.text-page .textbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.text-page .opts input[type=text] {
    flex: 1 1 140px; min-width: 0; padding: 7px 9px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 7px; font: inherit;
}
/* Two checkboxes sharing one field row, without inheriting the column layout
   that .opt-panel > label sets up for its children. */
.text-page .checkrow2 { display: flex; gap: 16px; flex-wrap: wrap; }
.text-page .checkrow2 .check { margin: 0; }
.text-page .checkrow2 .check span { font-weight: 400; font-size: 13px; }
.text-page .thin-key { color: #eb3133; font-weight: 600; }
.text-page #loose-note { margin-bottom: 14px; }

/* --- print on fabric ----------------------------------------------------- */
.lace-page .lace-examples { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lace-page .lace-examples .mode { align-items: flex-start; text-align: left; gap: 5px; padding: 13px 14px; }
.lace-page .lace-examples .mode strong { font-size: 13.5px; }
.lace-page .textbox {
    display: block; width: 100%;
    padding: 9px 12px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 8px;
    font: 600 17px/1.35 inherit; resize: vertical;
}
.lace-page .textbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lace-page .opts label.wide { grid-column: 1 / -1; }
/* A setting that has no effect until its switch is on — greyed rather than
   hidden, so the layout does not jump as it is toggled. */
.lace-page .dimmed { opacity: .4; }
.lace-page .dimmed input { cursor: not-allowed; }
.lace-page .thin-key { color: #eb3133; font-weight: 600; }
.lace-page #sandwich-note { margin-top: 4px; }
.lace-page input[type=file] { font: inherit; font-size: 13px; color: var(--ink-dim); max-width: 100%; }
/* The card outline is tall and thin; cap it so the page does not become a
   scroll marathon on an A6 preview. */
.lace-page .outline-wrap canvas { max-height: 520px; }
.lace-page .tips { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.65; }
.lace-page .tips li + li { margin-top: 9px; }
.lace-page .tips strong { color: var(--ink); }

/* --- calibration library ------------------------------------------------- */
.calib-page .test-group {
    margin: 22px 0 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-dim);
}
.calib-page .test-group:first-child { margin-top: 4px; }
.calib-page .test-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
/* These cards are text only — no icon column, and the label leads. */
.calib-page .test-grid .mode { align-items: flex-start; text-align: left; gap: 5px; padding: 13px 14px; }
.calib-page .test-grid .mode strong { font-size: 13.5px; }
.calib-page .reading-head {
    margin: 26px 0 12px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-dim);
}
.calib-page .tips { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.65; }
.calib-page .tips li + li { margin-top: 9px; }
.calib-page .tips strong { color: var(--ink); }
.calib-page .opts input[type=text] {
    flex: 1 1 140px; min-width: 0; padding: 7px 9px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 7px; font: inherit;
}
.calib-page .primary.disabled { opacity: .5; pointer-events: none; }

/* --- engrave & emboss ---------------------------------------------------- */
.stamp-page .place-wrap {
    display: flex; justify-content: center;
    padding: 10px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel);
}
.stamp-page .place-wrap canvas {
    max-width: 100%; max-height: 460px;
    cursor: grab; touch-action: none;
}
.stamp-page .place-wrap canvas:active { cursor: grabbing; }
.stamp-page #place-note { display: block; margin: 10px 0 0; }
.stamp-page .textbox {
    display: block; width: 100%;
    padding: 10px 13px; margin-bottom: 4px;
    background: var(--input-bg); color: var(--input-text);
    border: 1px solid var(--line); border-radius: 9px;
    font: 600 20px/1.35 inherit; resize: vertical;
}
.stamp-page .textbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stamp-page .checkrow2 { display: flex; gap: 16px; flex-wrap: wrap; }
.stamp-page .checkrow2 .check { margin: 0; }
.stamp-page .checkrow2 .check span { font-weight: 400; font-size: 13px; }
.stamp-page input[type=file] { font: inherit; font-size: 13px; color: var(--ink-dim); max-width: 100%; }

/* --- print doctor -------------------------------------------------------- */
.doctor-page .tips { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.65; }
.doctor-page .tips li + li { margin-top: 9px; }
.doctor-page .tips strong { color: var(--ink); }

.doctor-page .viewbar {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px;
}
.doctor-page .viewbar label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.doctor-page .viewbar label:has(input:checked) {
    border-color: var(--accent);
    background: rgba(var(--primary-rgb), .10);
}
.doctor-page .viewbar input { accent-color: var(--accent); }
.doctor-page .viewbar label.disabled { opacity: .45; cursor: not-allowed; }

/* Sits over the canvas, so it must not swallow the drag that spins the model. */
.doctor-page .doc-legend {
    position: absolute; left: 10px; bottom: 8px;
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 12px; color: var(--ink-dim);
    pointer-events: none;
}
.doctor-page .doc-legend .swatch {
    display: inline-block; width: 10px; height: 10px;
    margin-right: 5px; border-radius: 2px; vertical-align: middle;
}

.doctor-page .verdict {
    margin-top: 16px; padding: 12px 14px;
    border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px;
    font-size: 14px;
}
.doctor-page .verdict-ok   { border-left-color: var(--ok, #4cb873); }
.doctor-page .verdict-warn { border-left-color: var(--warn, #f29e26); }
.doctor-page .verdict-fail { border-left-color: #eb3133; }

.doctor-page .checks { margin-top: 6px; }
.doctor-page .checkrow {
    display: grid; grid-template-columns: 108px 1fr; gap: 14px;
    padding: 13px 0; border-top: 1px solid var(--line);
}
.doctor-page .checkrow strong { font-size: 13.5px; }
.doctor-page .checkrow p { margin: 3px 0 0; color: var(--ink-dim); font-size: 13px; line-height: 1.6; }
.doctor-page .checkrow .fixlink { white-space: nowrap; }
.doctor-page [class^="badge-"] {
    align-self: start;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    white-space: nowrap;
}
.doctor-page .badge-ok   { background: rgba(76, 184, 115, .15); color: var(--ok, #4cb873); }
.doctor-page .badge-warn { background: rgba(242, 158, 38, .16); color: var(--warn, #f29e26); }
.doctor-page .badge-fail { background: rgba(235, 49, 51, .15); color: #eb3133; }
.doctor-page .badge-info { background: var(--panel-2); color: var(--ink-dim); }

.doctor-page .orient-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px; margin-top: 16px;
}
.doctor-page .orient-card {
    position: relative;
    padding: 14px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel-2);
}
.doctor-page .orient-card.best { border-color: var(--accent); }
.doctor-page .orient-rank {
    display: inline-block; margin-bottom: 10px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-dim);
}
.doctor-page .orient-card.best .orient-rank { color: var(--accent); }
.doctor-page .orient-figs { display: flex; flex-wrap: wrap; gap: 14px; }
.doctor-page .orient-figs span { display: flex; flex-direction: column; }
.doctor-page .orient-figs b { font-size: 15px; font-variant-numeric: tabular-nums; }
.doctor-page .orient-figs small { color: var(--ink-dim); font-size: 11.5px; }
.doctor-page .orient-note { margin: 11px 0 12px; color: var(--ink-dim); font-size: 12.5px; line-height: 1.55; }
.doctor-page .orient-card .secondary { padding: 6px 12px; font-size: 13px; }

/* The repair options are descriptions with a button, not a picker, so they use
   the mode card's look without its selected state. */
.doctor-page .repair-modes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.doctor-page .mode-static {
    display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
    padding: 16px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--panel-2);
}
.doctor-page .mode-static small { color: var(--ink-dim); font-size: 12.5px; line-height: 1.55; }
.doctor-page .mode-static .secondary { margin-top: auto; }

@media (max-width: 560px) {
    .doctor-page .checkrow { grid-template-columns: 1fr; gap: 6px; }
}