/* LabBoard's frame around every app: the top bar (brand, the three apps, the signed-in person) and the
   app's own menu on the left. Its own tokens (--lb-*): an app's stylesheet (app.css for Bar Native and
   the account pages, align.css for Mesh Align) is loaded by that app's layout only. */
:root {
  --lb-bg: #f4f5f7; --lb-panel: #ffffff; --lb-text: #1d2330; --lb-muted: #5e6675; --lb-line: #dde1e8;
  --lb-hover: #eceef2; --lb-shadow: 0 10px 30px rgba(16, 24, 40, .18);
  --lb-bar: #1f5fd1; --lb-bar-bg: #e3ecfd;
  --lb-align: #a3480b; --lb-align-bg: #fcebd9;
  --lb-custom: #474e5a; --lb-custom-bg: #e6e9ee;
  --lb-hot: #9a5b00; --lb-hot-bg: #fff1d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lb-bg: #12151b; --lb-panel: #1b2029; --lb-text: #e6e9ef; --lb-muted: #9aa3b2; --lb-line: #2c3340;
    --lb-hover: #232933; --lb-shadow: 0 10px 30px rgba(0, 0, 0, .55);
    --lb-bar: #8fb2ff; --lb-bar-bg: #1c2a45;
    --lb-align: #ffb27a; --lb-align-bg: #3a2414;
    --lb-custom: #c3c9d4; --lb-custom-bg: #2a303b;
    --lb-hot: #ffc35c; --lb-hot-bg: #3a2c12;
  }
}
:root[data-theme="dark"] {
  --lb-bg: #12151b; --lb-panel: #1b2029; --lb-text: #e6e9ef; --lb-muted: #9aa3b2; --lb-line: #2c3340;
  --lb-hover: #232933; --lb-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  --lb-bar: #8fb2ff; --lb-bar-bg: #1c2a45;
  --lb-align: #ffb27a; --lb-align-bg: #3a2414;
  --lb-custom: #c3c9d4; --lb-custom-bg: #2a303b;
  --lb-hot: #ffc35c; --lb-hot-bg: #3a2c12;
}
body { margin: 0; background: var(--lb-bg); color: var(--lb-text); }

/* the top bar */
.lb-top { background: var(--lb-panel); border-bottom: 1px solid var(--lb-line); }
.lb-top-in {
  max-width: 1440px; margin: 0 auto; min-height: 56px; box-sizing: border-box;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.lb-brand {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px;
  color: var(--lb-text); text-decoration: none; white-space: nowrap;
}
.lb-brand svg { flex: none; }
.lb-apps { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.lb-apps a {
  padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--lb-muted); font-weight: 500;
  white-space: nowrap;
}
.lb-apps a:hover { background: var(--lb-hover); color: var(--lb-text); }
.lb-apps a.on-bar { background: var(--lb-bar-bg); color: var(--lb-bar); font-weight: 600; }
.lb-apps a.on-align { background: var(--lb-align-bg); color: var(--lb-align); font-weight: 600; }
.lb-apps a.on-custom { background: var(--lb-custom-bg); color: var(--lb-custom); font-weight: 600; }
.lb-apps a.on-cases, .lb-apps a.on-processes { background: var(--lb-hover); color: var(--lb-text); font-weight: 600; }
.lb-right { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 14px; }
.lb-right > a { color: var(--lb-muted); text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.lb-right > a:hover, .lb-right > a.active { background: var(--lb-hover); color: var(--lb-text); }

/* the signed-in person's menu (a <details class="dd">: wwwroot/board.js shuts and places it) */
.lb-user { position: relative; }
.lb-user > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 8px; font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--lb-text);
}
.lb-user > summary::-webkit-details-marker { display: none; }
.lb-user > summary:hover { background: var(--lb-hover); }
.lb-acct > summary { font-weight: 500; border: 1px solid var(--lb-line); }
.lb-acct-kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lb-muted); }
.lb-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--lb-hover); color: var(--lb-text);
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 700;
}
.lb-user .dd-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 210px; padding: 6px; display: grid;
  background: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: 10px; box-shadow: var(--lb-shadow);
}
.lb-user .dd-menu a, .lb-user .dd-menu button {
  border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 6px; width: 100%;
  font: inherit; font-size: 13px; color: var(--lb-text); text-decoration: none; cursor: pointer; display: block;
}
.lb-user .dd-menu a:hover, .lb-user .dd-menu button:hover { background: var(--lb-hover); }
.lb-user .dd-menu form { margin: 0; }
.lb-who { padding: 6px 10px 8px; border-bottom: 1px solid var(--lb-line); margin-bottom: 4px; font-size: 12px; color: var(--lb-muted); }

/* an app: its menu on the left, its page beside it (stacked on a phone) */
.lb-body {
  max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 8px;
  padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
.lb-side {
  flex: 1 1 190px; max-width: 220px; padding: 20px 8px; display: flex; flex-direction: column; gap: 2px;
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.lb-side-title {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-muted);
  padding: 0 12px 8px;
}
.lb-side a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 8px; color: var(--lb-text); text-decoration: none; border: 1px solid transparent;
}
.lb-side a:hover { background: var(--lb-hover); }
.lb-side a.active { background: var(--lb-panel); border-color: var(--lb-line); font-weight: 600; }
.lb-side .lb-cnt {
  min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center;
  background: var(--lb-hover); color: var(--lb-muted);
}
.lb-side .lb-cnt:empty { display: none; }
.lb-side .lb-cnt.hot { background: var(--lb-hot-bg); color: var(--lb-hot); }
.lb-side-foot { margin-top: 12px; padding: 0 4px; }
.lb-page { flex: 999 1 560px; min-width: 0; }
@media (max-width: 760px) {
  .lb-side { max-width: none; flex-direction: row; flex-wrap: wrap; padding: 10px 4px 0; }
  .lb-side-title { width: 100%; padding-bottom: 4px; }
  .lb-side-foot { margin: 0; }
}

/* the home page: the three apps */
.lb-home {
  max-width: 1360px; margin: 0 auto; padding: 40px 16px 64px; box-sizing: border-box;
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.lb-home h1 { margin: 0; font-size: 28px; font-weight: 700; }
.lb-home .lb-lead { margin: 6px 0 28px; color: var(--lb-muted); font-size: 16px; }
.lb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.lb-tile {
  background: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: 14px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.lb-tile.soon { border-style: dashed; }
.lb-tile-head { display: flex; align-items: center; gap: 14px; }
.lb-tile-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.lb-tile h2, .lb-tile h3 { margin: 0; font-size: 19px; font-weight: 700; }
.lb-tile-sub { font-size: 13px; color: var(--lb-muted); }
.lb-tile p { margin: 0; color: var(--lb-text); line-height: 1.6; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-chip { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--lb-hover); color: var(--lb-muted); }
.lb-chip.run { background: var(--lb-bar-bg); color: var(--lb-bar); }
.lb-chip.hot { background: var(--lb-hot-bg); color: var(--lb-hot); }
.lb-open {
  margin-top: auto; align-self: flex-start; padding: 10px 18px; border-radius: 10px; font-weight: 600;
  text-decoration: none; color: #ffffff; border: 1px solid transparent;
}
.lb-open:hover { filter: brightness(1.08); }
.bar .lb-tile-icon { background: var(--lb-bar-bg); color: var(--lb-bar); }
.bar .lb-open { background: #1f5fd1; }
.align .lb-tile-icon { background: var(--lb-align-bg); color: var(--lb-align); }
.align .lb-open { background: #a3480b; }
.custom .lb-tile-icon { background: var(--lb-custom-bg); color: var(--lb-custom); }
.custom .lb-open { background: var(--lb-panel); color: var(--lb-text); border-color: var(--lb-line); }

/* Bar Custom: nothing yet */
.lb-empty {
  margin: 24px 16px; min-height: 420px; border: 2px dashed var(--lb-line); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 40px 20px; text-align: center; color: var(--lb-muted);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.lb-empty h1 { margin: 0; font-size: 20px; color: var(--lb-text); }
.lb-empty p { margin: 0; max-width: 460px; }
.lb-empty a { color: var(--lb-bar); }

/* the price of a run beside an app's Send button (billing, 2026-10-23): in the frame, so every app has it */
.runprice { margin: 8px 0 0; font-size: 13px; color: var(--lb-muted); }
.runprice b { color: var(--lb-text); }
.runprice.warn { color: var(--lb-hot); }
.runprice a { color: inherit; }
.lb-acct-money { font-size: 12px; font-weight: 600; color: var(--lb-muted); }

/* a restoration process: its apps in order, coloured by stage (preparation, restoration, abutments / bars) */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.chain .step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px;
  background: var(--lb-hover); color: var(--lb-text); }
.chain .step b { font-size: 11px; opacity: .75; }
.chain .step button.link { font-size: 11px; color: inherit; cursor: pointer; }
.chain .arrow { color: var(--lb-muted); }
.chain.big .step { font-size: 14px; padding: 6px 12px; }
.st-0 { background: var(--lb-align-bg) !important; color: var(--lb-align) !important; }
.st-1 { background: var(--lb-hot-bg) !important; color: var(--lb-hot) !important; }
.st-2 { background: var(--lb-bar-bg) !important; color: var(--lb-bar) !important; }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* the home page by stage (2026-10-23) */
.lb-quick { margin: -12px 0 24px; }
.lb-quick a { text-decoration: none; color: var(--lb-text); }
.lb-quick a:hover { background: var(--lb-line); }
.lb-stage { margin-bottom: 28px; }
.lb-stage > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.lb-stage-n { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; }
.lb-road { text-align: left; margin: 0; padding-left: 22px; }
.lb-road li { margin: 4px 0; }
.lb-road li.now { color: var(--lb-text); font-weight: 600; }

/* the top bar's menu of every app, by stage */
.lb-appmenu { position: relative; }
.lb-appmenu > summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 8px; color: var(--lb-muted); }
.lb-appmenu > summary::-webkit-details-marker { display: none; }
.lb-appmenu > summary:hover, .lb-appmenu[open] > summary { background: var(--lb-hover); color: var(--lb-text); }
.lb-appmenu .dd-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; padding: 6px;
  background: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: 10px; box-shadow: var(--lb-shadow);
}
.lb-appmenu .dd-menu a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--lb-text); text-decoration: none; }
.lb-appmenu .dd-menu a:hover { background: var(--lb-hover); }
.lb-appmenu .dd-menu .lb-who { border: 0; margin: 4px 0 0; padding: 6px 10px 2px; }
.lb-appmenu .soon { color: var(--lb-muted); font-size: 12px; margin-left: 6px; }

/* the FDI tooth chart (cases, 2026-10-23) */
.toothchart { width: 100%; max-width: 720px; height: auto; display: block; user-select: none; }
.toothchart .tc-jaw { font-size: 11px; fill: var(--lb-muted); text-anchor: middle; }
.toothchart .tc-mid { stroke: var(--lb-line); stroke-dasharray: 3 3; }
.toothchart .tc-num { font-size: 11px; fill: var(--lb-muted); text-anchor: middle; }
.toothchart .tc-kind { font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--c); pointer-events: none; }
.toothchart .tc-tooth rect { fill: var(--lb-panel); stroke: var(--lb-line); stroke-width: 1.5; }
.toothchart .tc-tooth.live { cursor: pointer; }
.toothchart .tc-tooth.live:hover rect, .toothchart .tc-tooth.live:focus-visible rect { stroke: var(--lb-muted); }
.toothchart .tc-tooth:focus { outline: none; }
.toothchart .tc-tooth.abutment rect { fill: color-mix(in srgb, var(--c) 22%, var(--lb-panel)); stroke: var(--c); stroke-width: 2; }
.toothchart .tc-tooth.pontic rect { fill: color-mix(in srgb, var(--c) 8%, var(--lb-panel)); stroke: var(--c); stroke-width: 2; stroke-dasharray: 4 3; }
.region-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }