/*
  G8 Dental — extras on top of the Gener8 style kit (/kit/css).

  Tooth numbers on the model, the "Inside the tooth" steps, tooth number chips on
  the card, Function / Clinical relevance / facts on the card, the faded tick, and
  the credits line and dialog.
*/

/* Numbering switch uses the number face (--font-mono, now Outfit), like tooth numbers everywhere */
.seg.mono button { font-family: var(--font-mono); letter-spacing: .04em; }
.parts .seg + .seg { margin-top: calc(var(--u) * -.3); }

/* A layer shown faded (from a quick set): pale tick */
.tick.faded::before { opacity: .45; }

/* Tooth numbers in list rows */
.name .tnum { margin-left: 0; }
.tnum { font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); color: var(--muted); min-width: calc(var(--u) * 3.2); }
.name .tnum + .t { margin-left: calc(var(--u) * -.2); }
.parts .nerveSw { margin: 0 calc(var(--u) * .6) calc(var(--u) * .6) 0; }

/* ---- Tooth numbers on the model --------------------------------------------------- */
.tooth-num {
  position: absolute; transform: translate(-50%, -50%);
  min-width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.2); padding: 0 calc(var(--u) * .5);
  display: grid; place-items: center; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); font-weight: 400;
  background: var(--label-bg); color: var(--label-ink);
  border: 1px solid var(--panel-line); box-shadow: 0 1px 3px rgba(40, 32, 20, .14);
  pointer-events: auto; cursor: pointer;
}
.tooth-num:active { background: var(--accent); color: var(--accent-ink); }

/* ---- Inside the tooth (tools panel) -------------------------------------------------- */
.toothhead { display: flex; align-items: baseline; gap: calc(var(--u) * .7); padding: 0 calc(var(--u) * .4); font-weight: 400; font-size: calc(var(--tu) * 1.35); line-height: 1.3; }
.toothhead .tnum { background: var(--raised); border-radius: var(--r-sm); padding: calc(var(--u) * .2) calc(var(--u) * .5); min-width: 0; color: var(--ink); }

/* Five steps as dots joined by a line; each step is a full-height touch target */
.steps { display: flex; flex-direction: column; position: relative; padding: calc(var(--u) * .2) 0; }
.steps::before {
  content: ''; position: absolute; left: calc(var(--u) * 2.15); top: calc(var(--u) * 2.6); bottom: calc(var(--u) * 2.6);
  width: 2px; background: var(--line);
}
.step {
  position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.1);
  min-height: calc(var(--u) * 4.4); padding: 0 calc(var(--u) * .9) 0 calc(var(--u) * 1.4);
  border-radius: var(--r); text-align: left; font-size: calc(var(--tu) * 1.35); color: var(--muted);
}
.step i {
  width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 50%; flex: none;
  background: var(--panel); box-shadow: inset 0 0 0 2px var(--faint);
}
.step.done i { background: var(--accent); box-shadow: none; }
.step[aria-pressed="true"] { color: var(--ink); font-weight: 700; background: var(--raised); }
.step[aria-pressed="true"] i { background: var(--panel); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px var(--accent-soft); }
.step:active { background: var(--press); }

/* Inside a tooth the arch views make no sense: hide them so the steps fit on the panel */
.tools.in-tooth .arch { display: none; }

/* A box with no frame (Dissect anatomy slider) */
.box.plain { border: 0; background: transparent; padding: 0; }

/* ---- Card extras ------------------------------------------------------------------------ */
.nchips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); margin: 0 0 calc(var(--u) * .8); }
.nchip { font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); padding: calc(var(--u) * .3) calc(var(--u) * .6); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.nchip b { font-weight: 400; opacity: .7; margin-right: calc(var(--u) * .5); }
.card-scroll { max-height: calc(var(--u) * 30); overflow: auto; overscroll-behavior: contain; margin-bottom: calc(var(--u) * .4); }
.card-scroll .card-text { max-height: none; overflow: visible; }
.card-more .kicker { margin: calc(var(--u) * .8) 0 calc(var(--u) * .2); }
.card-more p { margin: 0; font-size: calc(var(--tu) * 1.4); line-height: 1.5; }
.facts { margin-top: calc(var(--u) * 1); border-top: 1px solid var(--line); }
.fact { display: flex; justify-content: space-between; gap: calc(var(--u) * 1); padding: calc(var(--u) * .6) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--tu) * 1.3); }
.fact span:first-child { color: var(--muted); }
.fact span:last-child { text-align: right; }

/* ---- Credits ------------------------------------------------------------------------------- */
.credit { display: block; width: 100%; margin-top: calc(var(--u) * .8); padding: calc(var(--u) * .6) calc(var(--u) * .4); font-size: calc(var(--tu) * 1.2); line-height: 1.35; color: var(--faint); text-align: left; }
.credit u { color: var(--muted); }
.credits p { margin: 0; font-size: calc(var(--tu) * 1.35); line-height: 1.5; user-select: text; -webkit-user-select: text; }
.credits .muted { color: var(--muted); font-size: calc(var(--tu) * 1.2); }

/* ---- Quick sets: three per row --------------------------------------------------------- */
.seg.quick { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.seg.quick button:last-child:nth-child(3n + 2) { grid-column: span 2; }

/* Small print used in several places */
.small { font-size: calc(var(--tu) * 1.2); line-height: 1.4; color: var(--muted); margin: calc(var(--u) * .5) 0 0; }
.parts .sideSw { margin: calc(var(--u) * .4) calc(var(--u) * .6) 0 0; }
.parts .nervehint { margin: calc(var(--u) * .5) calc(var(--u) * .6) calc(var(--u) * .6) 0; }

/* Labels are paused while the age timeline is on (the young mouth is not labelled) */
#pins.paused { display: none; }

/* ---- Age (bite development) --------------------------------------------------------------- */
.agenow { padding: 0 calc(var(--u) * .4); font-weight: 700; font-size: calc(var(--tu) * 1.35); line-height: 1.3; }
.agestops button { font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); }
.agepanel { padding: 0 calc(var(--u) * .6); }
.agepanel .agetitle { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--tu) * 2.1); line-height: 1.15; margin: calc(var(--u) * .2) 0 calc(var(--u) * .6); }
.agepanel p { margin: 0 0 calc(var(--u) * .7); font-size: calc(var(--tu) * 1.35); line-height: 1.5; }
.agepanel .subhead { padding-left: 0; }
.agelegend { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .4) calc(var(--u) * 1); margin: calc(var(--u) * .4) 0 calc(var(--u) * .6); font-size: calc(var(--tu) * 1.2); color: var(--muted); }
.agelegend span { display: flex; align-items: center; gap: calc(var(--u) * .5); }
.agelegend i, .agetooth i { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ageteeth { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * .35); margin: calc(var(--u) * .3) 0 calc(var(--u) * .8); }
.agetooth { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .35); padding: calc(var(--u) * .45) calc(var(--u) * .2); border: 1px solid var(--line); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); }

/* ---- Card extras ------------------------------------------------------------------------------ */
.extra { margin-top: calc(var(--u) * 1); }
.extra .kicker { margin-bottom: calc(var(--u) * .3); }
.canals table { width: 100%; border-collapse: collapse; font-size: calc(var(--tu) * 1.25); }
.canals th, .canals td { text-align: left; padding: calc(var(--u) * .4) 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.canals thead th { color: var(--muted); font-size: calc(var(--tu) * 1.2); }
.canals td { font-family: var(--font-mono); text-align: right; }
.hyoid .seg { margin: calc(var(--u) * .4) 0; }
.hyoid-map { width: 100%; height: auto; display: block; margin: calc(var(--u) * .4) 0; }
.hyoid-map path { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.hyoid-map g.on path { stroke: var(--accent); }
.hyoid-map .node rect { fill: var(--well); stroke: var(--line); }
.hyoid-map .node.bone rect { fill: var(--accent-soft); stroke: var(--accent); }
.hyoid-map text { fill: var(--ink); font-family: var(--font-ui); font-size: 13px; text-anchor: middle; }
.hyoid .attach { margin: 0; }
.hyoid .attach dt { font-weight: 700; font-size: calc(var(--tu) * 1.25); margin-top: calc(var(--u) * .6); }
.hyoid .attach dd { margin: calc(var(--u) * .2) 0 0; font-size: calc(var(--tu) * 1.25); line-height: 1.45; color: var(--muted); }