/* src/web/styles.css */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #e8ecf2;
  --line: #dfe3e9;
  --line-bright: #c6ccd6;
  --line-strong: #8b939f;
  --fg: #12161c;
  --dim: #5a6473;
  --accent: #1668c4;
  --accent-fg: #ffffff;
  --accent-hover: #1256a3;
  --accent-wash: #e8f1fc;
  --accent-edge: #a9cdf2;
  --warn: #8a6100;
  --bad: #b3261e;
  --ok: #17663c;
  --vio: #6b3fa0;
  --wash-warn: #fdf4e0;
  --edge-warn: #e5cd94;
  --wash-bad: #fdeceb;
  --edge-bad: #f0bdb8;
  --wash-ok: #e6f5ec;
  --edge-ok: #a9d8bd;
  --wash-vio: #efe8f8;
  --edge-vio: #d9c9f0;
  --control: #eef1f5;
  --control-hover: #e3e8ef;
  --hover-row: #00000008;
  --shadow: 0 6px 20px #1220300f;
  --shadow-bar: 0 1px 0 #0000000a;
  --scrim: #10182866;
  --stage: #8f959e;
  --mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  --sans:
    ui-sans-serif,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  --topbar-h: 52px;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 20px;
  --sp-10: 24px;
  --sp-11: 32px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 22px;
  --text-4xl: 24px;
  --text-5xl: 26px;
  --text-6xl: 28px;
  --text-7xl: 30px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
}
:root[data-theme=dark] {
  --bg: #14161a;
  --panel: #1c1f26;
  --panel-2: #272c37;
  --line: #2c313b;
  --line-bright: #3a4150;
  --line-strong: #606b80;
  --fg: #e4e8f0;
  --dim: #9daabf;
  --accent: #4da3ff;
  --accent-fg: #08121e;
  --accent-hover: #6cb4ff;
  --accent-wash: #1b2b3f;
  --accent-edge: #2b4a69;
  --warn: #e8b84b;
  --bad: #e8695b;
  --ok: #5ec98a;
  --vio: #c0a6f0;
  --wash-warn: #33290f;
  --edge-warn: #6d5a23;
  --wash-bad: #331a17;
  --edge-bad: #6d3730;
  --wash-ok: #16301f;
  --edge-ok: #2f6b47;
  --wash-vio: #2a2140;
  --edge-vio: #453766;
  --control: #252a33;
  --control-hover: #2f3540;
  --hover-row: #ffffff10;
  --shadow: 0 6px 20px #0008;
  --shadow-bar: none;
  --scrim: #000000a6;
  --stage: #0e1013;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.boot {
  padding: 40px;
  color: var(--dim);
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
}
h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  margin: 0 0 10px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  line-height: 1.4;
}
.mono {
  font-family: var(--mono);
}
.num {
  font-variant-numeric: tabular-nums;
}
.muted {
  color: var(--dim);
}
.warn {
  color: var(--warn);
}
.bad {
  color: var(--bad);
}
.ok {
  color: var(--ok);
}
.small {
  font-size: 13px;
}
.right {
  text-align: right;
}
.grow {
  flex: 1;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.row-flex {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.wrap {
  flex-wrap: wrap;
}
.hidden {
  display: none !important;
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  transform: translateY(-300%);
  padding: 8px 14px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus {
  transform: none;
  text-decoration: none;
}
main[tabindex="-1"]:focus {
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  height: var(--topbar-h);
  flex: 0 0 auto;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-bar);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.brand svg {
  display: block;
}
.brand:hover {
  text-decoration: none;
}
.topbar nav {
  display: flex;
  gap: 4px;
}
.topbar nav a {
  padding: 4px 10px;
  border-radius: var(--radius);
  color: var(--dim);
  font-size: 13px;
}
.topbar nav a:hover {
  background: var(--control);
  color: var(--fg);
  text-decoration: none;
}
.topbar nav a.on {
  background: var(--control);
  color: var(--fg);
}
.whoami {
  font-size: 13px;
  color: var(--dim);
  text-align: right;
  line-height: 1.3;
}
.whoami b {
  display: block;
  color: var(--fg);
  font-weight: 600;
}
main {
  padding: 22px var(--sp-9) 60px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-head .sub {
  color: var(--dim);
  font-size: 13px;
  margin-top: 2px;
}
.crumb {
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 6px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}
.card + .card {
  margin-top: var(--sp-7);
}
.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.card-head h2,
.card-head h3 {
  margin: 0;
}
.cols {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 900px) {
  .cols {
    grid-template-columns: 1fr;
  }
}
.siteplan svg {
  display: block;
  width: 100%;
}
.siteplan p {
  margin: 8px 0 0;
}
.siteplan-src b {
  font-weight: 600;
  color: var(--fg);
}
.siteplan button {
  margin-top: 10px;
}
button,
.btn {
  background: var(--control);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button:hover,
.btn:hover {
  background: var(--control-hover);
  text-decoration: none;
}
button.primary,
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
button.primary:hover,
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--dim);
}
button.ghost:hover {
  background: var(--control);
  color: var(--fg);
}
button.danger {
  color: var(--bad);
}
button.small,
.btn.small {
  padding: 2px 8px;
  font-size: 13px;
}
button:disabled,
.btn:disabled,
button.primary:disabled,
.btn.primary:disabled,
button.ghost:disabled,
button.danger:disabled {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--dim);
  cursor: not-allowed;
  opacity: 1;
}
input:where(:not([type=range], [type=checkbox], [type=radio], [type=color], [type=file])),
select,
textarea {
  background: var(--control);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  width: 100%;
}
:where(input[type=range]) {
  accent-color: var(--accent);
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
}
:where(input[type=range]:disabled) {
  opacity: 0.4;
  cursor: default;
}
:where(input[type=checkbox], input[type=radio]) {
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}
.sw {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-bright);
  cursor: pointer;
  transition: background 120ms ease;
}
.sw::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -1px;
  bottom: -4px;
  left: -1px;
}
.sw:hover {
  background: var(--dim);
}
.sw[aria-checked=true],
.sw[aria-checked=true]:hover {
  background: var(--accent);
}
.sw:disabled {
  opacity: 0.4;
  cursor: default;
}
.sw-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  transition: transform 120ms ease;
}
.sw[aria-checked=true] .sw-knob {
  transform: translateX(12px);
}
.sw.sw-preview-on .sw-knob {
  transform: translateX(12px);
}
.sw.sw-preview-off .sw-knob {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .sw,
  .sw-knob {
    transition: none;
  }
}
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
textarea {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
select {
  appearance: none;
  padding-right: 26px;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--dim) 50%),
    linear-gradient(
      135deg,
      var(--dim) 50%,
      transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
label.field {
  display: block;
}
label.field > span {
  display: block;
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 4px;
}
label.field > span .req {
  color: var(--accent);
}
.hint {
  font-size: 13px;
  color: var(--dim);
  margin-top: 4px;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.picker label {
  display: block;
  cursor: pointer;
  padding: 10px 12px;
  background: var(--control);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
}
.picker label:hover {
  background: var(--control-hover);
}
.picker input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.picker label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.picker label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.picker .t {
  font-weight: 600;
  font-size: 13px;
}
.picker .d {
  font-size: 13px;
  color: var(--dim);
  margin-top: 2px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dim);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-bright);
  white-space: nowrap;
}
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  vertical-align: middle;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tr.pick {
  cursor: pointer;
}
tr.pick:hover td {
  background: var(--hover-row);
}
th.right,
td.right {
  text-align: right;
}
.table-wrap {
  overflow-x: auto;
}
tr.linked td {
  background: var(--accent-wash);
}
tr.linked td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
tbody.dimmed tr:not(.linked) td {
  opacity: 0.42;
}
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--control);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  white-space: nowrap;
}
.pill.accent {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  color: var(--accent);
}
.pill.ok {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
  color: var(--ok);
}
.pill.warn {
  background: var(--wash-warn);
  border-color: var(--edge-warn);
  color: var(--warn);
}
.pill.bad {
  background: var(--wash-bad);
  border-color: var(--edge-bad);
  color: var(--bad);
}
.count {
  font-family: var(--mono);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--control);
  border: 1px solid var(--line-bright);
}
.count.on {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  color: var(--accent);
}
.stat {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.stat > div {
  min-width: 78px;
}
.stat .v {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat .k {
  font-size: 12px;
  color: var(--dim);
}
.empty {
  border: 1px dashed var(--line-bright);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  color: var(--dim);
}
.empty h2 {
  color: var(--fg);
}
.empty p {
  max-width: 46ch;
  margin: 0 auto 14px;
}
.error-banner {
  background: var(--wash-bad);
  border: 1px solid var(--edge-bad);
  color: var(--bad);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
}
.screen-error {
  background: var(--wash-bad);
  border: 1px solid var(--edge-bad);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.screen-error-in {
  max-width: 46ch;
}
.screen-error-h {
  display: block;
  font-size: 15px;
  color: var(--fg);
}
.screen-error-acts {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.field-err {
  margin-top: 4px;
  font-size: 13px;
  color: var(--bad);
}
.leverage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
}
.leverage b {
  font-weight: 600;
}
.leverage .big {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.spec {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
}
.spec:hover {
  background: var(--control-hover);
}
.spec.on {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.spec .name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.spec .meta {
  font-size: 13px;
  color: var(--dim);
  margin-top: 2px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.drop {
  border: 1px dashed var(--line-bright);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  color: var(--dim);
  font-size: 13px;
}
.drop.over {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--fg);
}
.progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--control);
  overflow: hidden;
}
.progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width .12s linear;
}
.upload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: 13px;
}
.upload-row .progress {
  grid-column: 1 / -1;
}
.pg-group + .pg-group {
  margin-top: var(--sp-9);
}
.pg-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.pg-group-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}
.pg-where {
  margin-left: auto;
  font-size: 12px;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pg-where::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}
.pg-where.server::before {
  background: var(--vio);
}
.pg-where.browser::before {
  background: var(--accent);
}
.pg-stage {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 2px 10px;
  padding: 6px 0;
  align-items: baseline;
}
.pg-stage + .pg-stage {
  border-top: 1px solid var(--line);
}
.pg-inline .pg-stage {
  padding: 2px 0;
  border-top: 0;
}
.pg-mark {
  grid-row: 1 / 2;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--dim);
}
.pg-stage.done .pg-mark {
  color: var(--ok);
}
.pg-stage.running .pg-mark {
  color: var(--accent);
}
.pg-stage.failed .pg-mark {
  color: var(--bad);
}
.pg-title {
  grid-column: 2;
  font-size: 13px;
}
.pg-stage.done .pg-title {
  color: var(--dim);
}
.pg-stage.running .pg-title {
  color: var(--fg);
  font-weight: 600;
}
.pg-inline .pg-title {
  font-size: 13px;
  color: var(--dim);
  font-weight: 400;
}
.pg-right {
  grid-column: 3;
  grid-row: 1;
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pg-say {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.5;
  max-width: 66ch;
  margin-top: 2px;
}
.pg-say.bad {
  color: var(--bad);
}
.pg-acts {
  grid-column: 2 / -1;
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pg-bar {
  width: 120px;
}
.pg-inline .pg-bar {
  width: 84px;
}
.pg-sweep {
  height: 6px;
  width: 120px;
  border-radius: var(--radius-pill);
  background: var(--control);
  overflow: hidden;
}
.pg-inline .pg-sweep {
  width: 84px;
}
.pg-sweep > i {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  animation: pg-sweep 1.15s ease-in-out infinite;
}
@keyframes pg-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(264%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-sweep > i {
    animation: none;
    width: 100%;
    opacity: 0.45;
  }
}
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
}
.auth-card .card {
  padding: 22px;
}
.auth-lede {
  color: var(--dim);
  font-size: 13px;
  margin: 6px 0 18px;
}
.seam {
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}
.seam .inner {
  max-width: 52ch;
}
.seam code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--control);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
}
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-region {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-region:empty {
  display: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  max-width: 380px;
  box-shadow: var(--shadow);
}
.toast.bad {
  border-left-color: var(--bad);
}
.toast.ok {
  border-left-color: var(--ok);
}
.toast-text {
  line-height: 1.45;
}
.toast-x {
  flex: none;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-size: 15px;
  line-height: 1;
}
.toast-x:hover {
  background: var(--control);
  color: var(--fg);
}
.toast-errors {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 4px;
  pointer-events: none;
}
.toast-errors .toast.bad {
  width: 100%;
  max-width: none;
  padding: 16px;
  gap: 14px;
  border: 2px solid var(--bad);
  border-left-width: 6px;
  font-size: 15px;
  pointer-events: auto;
}
.toast-errors .toast-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.toast-heading {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}
.toast-error-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bad);
  color: var(--panel);
  font-weight: 800;
}
.toast-dismiss {
  flex: none;
  min-height: 44px;
  padding: 8px 12px;
}
@media (max-width: 480px) {
  .toast-errors .toast.bad {
    flex-wrap: wrap;
    gap: 10px;
  }
  .toast-errors .toast-text {
    flex-basis: calc(100% - 40px);
  }
  .toast-dismiss {
    margin-left: auto;
  }
}
main.bare {
  padding: 0;
  max-width: none;
}
.tk {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 268px);
  min-height: 540px;
}
.tk-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
}
@media (max-width: 900px) {
  .tk {
    height: auto;
  }
  .tk-body {
    grid-template-columns: 1fr;
  }
  .tk-stage {
    height: 62vh;
  }
  .tk-side {
    max-height: none;
  }
}
.tk-stage {
  position: relative;
  overflow: hidden;
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.tk-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.tk-canvas.armed {
  pointer-events: auto;
  cursor: crosshair;
}
.tk-raster,
.tk-overlay {
  pointer-events: auto;
}
.tk-overlay {
  cursor: crosshair;
  touch-action: none;
}
.tk-hud {
  position: absolute;
  left: 10px;
  top: 10px;
  max-width: 62%;
  background: #0f1115f2;
  border: 1px solid #ffffff33;
  border-radius: var(--radius);
  padding: 8px 12px;
  font: 13px/1.5 var(--mono);
  color: #fff;
  pointer-events: none;
  white-space: pre;
}
.tk-side {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  overflow-y: auto;
}
.tk-side h3 {
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.tk-side .row-flex {
  padding: 2px 0;
  gap: 8px;
}
.tk-side .v {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tk-side input.num {
  width: 94px;
  text-align: right;
}
.tk-save {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.tk-big {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tk-table {
  margin-top: 8px;
}
.tk-table td {
  padding: 2px 0;
  border-bottom: 0;
  font-size: 13px;
  white-space: nowrap;
}
.tk-table td:last-child {
  text-align: right;
}
.tk-table tr.muted td {
  color: var(--dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tk-table tr.pick:hover td {
  background: var(--hover-row);
}
.tk-sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-xs);
  margin-right: 6px;
  vertical-align: middle;
}
.tk-samples {
  font: 12px/1.6 var(--mono);
  color: var(--dim);
  margin-top: 6px;
}
.tk-crosscheck {
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.5;
}
.tk-cal {
  margin-top: 10px;
  padding: 10px;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.tk-cal .row-flex {
  margin-top: 8px;
}
.tk-ruler-scale {
  position: absolute;
  z-index: 30;
  width: 330px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 4px 18px #0002;
  overflow: auto;
  display: grid;
  gap: 8px;
}
.tk-ruler-scale.hidden,
.tk-ruler-scale .hidden {
  display: none;
}
.tk-ruler-edit {
  display: grid;
  gap: 8px;
}
.tk-ruler-edit label {
  display: grid;
  gap: 5px;
  font-size: 12px;
}
.tk-ruler-edit input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tk-ruler-suggestions {
  display: grid;
  gap: 6px;
}
.tk-ruler-suggestions p {
  margin: 0;
}
.tk-scale-verification {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 2px solid #248657;
  color: #17683f;
  background: #fff;
  font: 600 13px/16px system-ui, sans-serif;
  transform-origin: top left;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.tk-scale-verification.hidden {
  display: none;
}
.tk-scale-verification.needs-check {
  border-color: #a7650a;
  color: #875108;
}
.tk-read {
  font: 13px/1.6 var(--mono);
  margin-top: 8px;
}
.tk-scale-regions {
  font: 12px/1.6 var(--mono);
}
.tk-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.tk-n {
  font-variant-numeric: tabular-nums;
}
.tk-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.tk-grid button {
  padding: 4px 0;
  justify-content: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tk-keys {
  margin-top: 12px;
  line-height: 2;
}
kbd {
  background: var(--control);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
  font: 12px var(--mono);
  color: var(--fg);
}
.tk-boot {
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.tk-boot-inner {
  width: min(440px, 100%);
  text-align: center;
}
.tk-boot-line {
  font-size: 15px;
}
.tk-boot-detail {
  margin-top: 6px;
  font-family: var(--mono);
  min-height: 1.6em;
}
.tk-bar {
  margin-top: 16px;
  height: 4px;
  border-radius: var(--radius-xs);
  background: var(--control);
  overflow: hidden;
}
.tk-bar > i {
  display: block;
  height: 100%;
  width: 34%;
  background: var(--accent);
  animation: tk-slide 1.1s ease-in-out infinite;
}
@keyframes tk-slide {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(330%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-bar > i {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }
}
.page-head h1 .pill {
  margin-left: 8px;
  vertical-align: middle;
}
.tk-units.armed {
  pointer-events: auto;
  cursor: crosshair;
}
.tk-unit-hint {
  margin-top: 6px;
  min-height: 1.4em;
}
.tk-conserve {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
}
.tk-conserve-line {
  font-variant-numeric: tabular-nums;
}
.tk-conserve .small {
  margin-top: 4px;
}
.tk-unit-list {
  margin-top: 8px;
}
.tk-unit {
  padding: 8px 8px;
  margin-bottom: 6px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.tk-unit:hover {
  border-color: var(--line-bright);
}
.tk-unit.on {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.tk-unit .row-flex {
  padding: 1px 0;
}
.tk-unit-name {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
}
.tk-unit-name:hover,
.tk-unit-name:focus {
  background: var(--control);
  border-color: var(--line-bright);
}
.tk-unit-edges {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.tk-elem {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--fg);
  border: 0;
  border-radius: 0;
  font-size: 13px;
}
.tk-elem-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tk-elem-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.tk-elem-kind {
  font-weight: 600;
  text-transform: capitalize;
}
.tk-elem-tag {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  background: var(--wash-ok);
  border: 1px solid var(--edge-ok);
  color: var(--ok);
}
.tk-elem-x {
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
}
.tk-elem-body {
  overflow-y: auto;
  padding: 10px 12px 12px;
}
.tk-elem .row-flex {
  padding: 2px 0;
  gap: 8px;
}
.tk-elem .v {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tk-elem .tk-table td {
  font-size: 12px;
}
.tk-elem-read {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.tk-elem-q {
  margin-top: 10px;
}
.tk-elem-label {
  color: var(--dim);
  font-size: 12px;
  margin-bottom: 4px;
}
.tk-elem-select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.tk-elem-wbs {
  width: 100%;
  font-size: 13px;
}
.tk-elem-num {
  width: 78px;
  text-align: right;
  font-size: 13px;
}
.tk-elem-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.tk-elem-side {
  justify-content: flex-start;
  text-align: left;
}
.tk-elem-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.tk-elem-note.muted {
  color: var(--dim);
}
.tk-elem-note.ok {
  color: var(--ok);
}
.tk-elem-note.warn {
  color: var(--warn);
}
.tk-elem-note.bad {
  color: var(--bad);
}
.tk-elem-cascade {
  margin-top: 8px;
  padding: 8px 8px;
  border-radius: var(--radius);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  font-size: 12px;
  line-height: 1.5;
}
.tk-elem-vent,
.tk-elem-sides,
.tk-elem-asm {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.tk-layers {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 8px;
}
.tk-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
}
.tk-layer:hover {
  color: var(--accent);
}
.tk-layer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-sw-cut {
  background-color: var(--stage);
  background-image:
    repeating-linear-gradient(
      90deg,
      #fff 0 2px,
      transparent 2px 4px);
}
.theme-btn {
  padding: 4px;
  width: 28px;
  height: 28px;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--dim);
}
.theme-btn:hover {
  background: var(--control);
  color: var(--fg);
}
.theme-btn svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.app.route-takeoff {
  --topbar-h: 0px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.route-takeoff main {
  padding: 0;
  max-width: none;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.route-takeoff main > * {
  flex: 0 0 auto;
}
.route-takeoff main > :last-child {
  flex: 1 1 auto;
  min-height: 0;
}
.route-takeoff .tk {
  height: 100%;
  min-height: 0;
}
.route-takeoff .tk-body {
  gap: 0;
}
.route-takeoff .tk-stage {
  border-radius: 0;
  border-width: 0 1px 0 0;
}
.route-takeoff .tk-side {
  border-radius: 0;
  border-width: 0;
}
.route-takeoff .tk-boot,
.route-takeoff .seam {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  border-width: 0;
}
.chrome-ctx {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
}
.chrome-ctx .sep {
  color: var(--line-bright);
}
.chrome-ctx .title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}
.chrome-ctx .pill {
  font-size: 12px;
  padding: 0 6px;
}
.chrome-ctx .ratio {
  color: var(--dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chrome-ctx .ratio b {
  color: var(--fg);
  font-weight: 600;
}
.chrome-ctx a.back {
  color: var(--dim);
}
.chrome-ctx a.back:hover {
  color: var(--fg);
  text-decoration: none;
}
@media (max-width: 900px) {
  .chrome-ctx .ratio {
    display: none;
  }
}
.pricing-cols {
  grid-template-columns: 1fr minmax(300px, 380px);
}
@media (max-width: 1000px) {
  .pricing-cols {
    grid-template-columns: 1fr;
  }
}
.buildup-section {
  margin-bottom: 18px;
}
.buildup-section h3 {
  margin-bottom: 2px;
}
.buildup-section p {
  margin: 0 0 8px;
}
.totals {
  margin-top: 6px;
  border-top: 2px solid var(--line-bright);
}
.totals td {
  padding: 6px 10px;
  border-bottom: 0;
}
.totals tr.strong td {
  font-weight: 600;
  border-top: 1px solid var(--line);
}
.totals tr.bid td {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  border-top: 2px solid var(--line-bright);
}
.banner {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 13px;
}
.banner-warn {
  background: var(--wash-warn);
  border-color: var(--edge-warn);
}
.banner-bad {
  background: var(--wash-bad);
  border-color: var(--edge-bad);
}
.banner-approval {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
}
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  border: 1px solid var(--line-bright);
  color: var(--dim);
}
.tag-est {
  background: var(--wash-warn);
  border-color: var(--edge-warn);
  color: var(--warn);
}
.tag-changed {
  background: var(--wash-warn);
  border-color: var(--edge-warn);
  color: var(--warn);
}
.tag-same {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
  color: var(--ok);
}
.pill-sent {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
  color: var(--ok);
}
.margin-card {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
}
.bid-live {
  border: 1px solid var(--accent-edge);
  background: var(--accent-wash);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 14px;
}
.bid-live > span {
  display: block;
}
.bid-price {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.bid-live > span.small {
  margin-top: 2px;
}
.margin-global label,
.margin-target label {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 4px;
}
.margin-global {
  margin-bottom: 12px;
}
.margin-global input[type=range] {
  flex: 1;
}
.margin-number {
  width: 72px;
}
.margin-parts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.margin-part {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.margin-target {
  margin-top: 4px;
}
.reasons {
  margin: 8px 0 0;
  padding-left: 18px;
}
.reasons li {
  margin-bottom: 4px;
  font-size: 13px;
}
.diff-flags {
  margin-top: 4px;
}
.diff-card {
  border-color: var(--line-bright);
}
.sheet {
  background: #ffffff;
  color: #101418;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  max-width: 8.5in;
  margin: 0 auto;
}
.sheet h2 {
  font-size: 18px;
  color: #101418;
}
.sheet .muted {
  color: #5a6473;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.sheet-table {
  margin-top: 6px;
}
.sheet-table th {
  color: #5a6473;
  border-bottom: 1px solid #c6ccd6;
  background: transparent;
}
.sheet-table td {
  border-bottom: 1px solid #e6e9ee;
}
.sheet-table tr.sheet-section td {
  font-weight: 600;
  background: #f4f6f8;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sheet-table tr.sheet-total td {
  font-weight: 600;
  font-size: 15px;
  border-top: 2px solid #c6ccd6;
  border-bottom: 0;
}
.sheet-strip {
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-bottom: 1px solid #e6e9ee;
  padding-bottom: 8px;
  font-size: 14px;
}
.sheet-squares {
  text-align: center;
  padding: 30px 0;
}
.sheet-squares .big-number {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.sheet-squares .big-price {
  font-size: 30px;
  font-weight: 600;
  margin-top: 18px;
}
.sheet-foot {
  margin-top: 22px;
  border-top: 1px solid #e6e9ee;
  padding-top: 8px;
}
@media print {
  .topbar,
  .no-print,
  .toasts,
  .toast-errors {
    display: none !important;
  }
  body {
    background: #ffffff;
  }
  main,
  .app {
    display: block;
  }
  .sheet {
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: none;
    page-break-inside: avoid;
  }
  .sheet-table tr {
    page-break-inside: avoid;
  }
  @page {
    margin: 0.6in;
  }
}
.tk-notice {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--wash-warn);
  color: var(--fg);
  border-bottom: 1px solid var(--edge-warn);
}
.tk-notice b {
  font-weight: 600;
}
.tk-notice-check {
  display: block;
}
.tk-notice-check b {
  display: block;
  margin-bottom: 2px;
}
.tk-notice-check span {
  display: block;
}
.tk-traces.armed {
  pointer-events: auto;
  cursor: crosshair;
}
.tk-trace-hint {
  margin-top: 6px;
  line-height: 1.45;
}
.tk-trace-list {
  margin-top: 8px;
}
.tk-trace-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tk-trace-row:last-child {
  border-bottom: 0;
}
.tk-trace-row input.num {
  width: 52px;
  text-align: right;
  padding: 2px 4px;
}
.tk-trace-row .pill {
  font-size: 12px;
  padding: 0 6px;
}
.tk-sw-trace {
  background: #c026d3;
}
.tk-counts.armed {
  pointer-events: auto;
  cursor: copy;
}
.tk-count-kind {
  width: auto;
  flex: 1;
  min-width: 0;
}
.tk-count-strip {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-count-strip .tk-count-kind {
  flex: none;
}
.tk-count-hint {
  margin-top: 6px;
  line-height: 1.45;
}
.tk-count-list {
  margin-top: 8px;
}
.tk-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tk-count-row:last-child {
  border-bottom: 0;
}
.tk-count-n {
  min-width: 22px;
  text-align: right;
  font-weight: 600;
  font-family: var(--mono);
}
.tk-count-orphan {
  margin-top: 8px;
  line-height: 1.45;
}
.tk-count-found:empty {
  display: none;
}
.tk-count-found-card {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, transparent);
}
.tk-count-found-card > * + * {
  margin-top: 6px;
}
.tk-count-found-card .row-flex {
  gap: 6px;
}
.tk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  padding: 4px 10px;
  min-height: 38px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
}
.tk-toolbar button,
.tk-toolbar-extras > * {
  white-space: nowrap;
  flex: none;
}
.route-takeoff .tk-toolbar {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.tk-tool-group {
  display: flex;
  gap: 2px;
}
.tk-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--line-bright);
}
.tk-tool {
  position: relative;
  width: 30px;
  height: 28px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--dim);
}
.tk-tool:hover {
  background: var(--control);
  color: var(--fg);
}
.tk-tool.on {
  background: var(--accent-wash);
  color: var(--accent);
  border-color: var(--accent-edge);
}
.tk-tool svg {
  display: block;
}
.tk-tool-key {
  position: absolute;
  right: 1px;
  bottom: 1px;
  font: 600 12px/1 var(--mono);
  opacity: 0.55;
  letter-spacing: 0;
}
.tk-tool-label {
  font-size: 13px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46ch;
  flex: 0 1 auto;
  min-width: 0;
}
.tk-toolbar-extras {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-tool-aside {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-tool-aside:empty {
  display: none;
}
.tk-tool-aside select {
  width: auto;
  min-width: 0;
  max-width: 22ch;
  height: 26px;
  padding: 0 22px 0 8px;
  font-size: 13px;
}
.tk-actions.on {
  background: var(--control);
  color: var(--fg);
}
.tk-actions-caret {
  margin-left: 4px;
  opacity: 0.7;
}
.tk-stage.tk-zooming .tk-overlay {
  cursor: zoom-in;
}
.tk-stage.tk-panning .tk-overlay {
  cursor: grab;
}
.tk-stage.tk-panning .tk-overlay:active {
  cursor: grabbing;
}
.tk-tool-label.tk-tool-mid {
  max-width: 82ch;
  color: var(--fg);
}
.tk-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  font: 12px/1.5 var(--mono);
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route-takeoff .tk-status {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}
.tk-status-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-facechip {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 46ch;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-pill);
}
.tk-facechip b {
  font-weight: 600;
  color: var(--fg);
  text-transform: capitalize;
}
.tk-facechip .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tk-facechip.weak {
  border-color: color-mix(in srgb, var(--bad) 60%, transparent);
}
.tk-facechip.weak b {
  color: var(--bad);
}
.tk-deducts.armed {
  pointer-events: auto;
  cursor: crosshair;
}
.tk-deduct-hint {
  margin-top: 6px;
  line-height: 1.45;
}
.tk-deduct-list {
  margin-top: 8px;
}
.tk-deduct-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tk-deduct-row:last-child {
  border-bottom: 0;
}
.tk-sw-deduct {
  background: #b3261e;
}
.tk-edge-type {
  width: auto;
  flex: 1;
  min-width: 0;
  text-transform: capitalize;
}
.tk-raster.inverted {
  filter: invert(1) hue-rotate(180deg);
}
.tk-invert:disabled {
  opacity: 0.4;
}
.tk-menu {
  position: absolute;
  z-index: 8;
  min-width: 190px;
  padding: 4px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-size: 13px;
}
.tk-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 4px 8px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: 13px;
}
.tk-menu-item:hover {
  background: var(--accent-wash);
}
.tk-menu-item:focus-visible {
  background: var(--accent-wash);
  outline-offset: -2px;
}
.tk-menu-item.danger {
  color: var(--bad);
}
.tk-menu-item.danger:hover {
  background: var(--wash-bad);
}
.tk-menu-hint {
  color: var(--dim);
  font: 12px var(--mono);
}
.tk-menu-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}
.tk-rules-grid {
  table-layout: auto;
}
.tk-rules-grid th {
  white-space: nowrap;
  text-transform: capitalize;
}
.tk-rules-grid td.tk-cov {
  padding: 2px 4px;
  text-align: center;
}
.tk-cov-cell {
  width: 100%;
  min-width: 40px;
  justify-content: center;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius);
}
.tk-cov-cell.on {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
  color: var(--ok);
}
.tk-cov-cell.on:hover {
  background: var(--edge-ok);
}
.tk-cov-cell.gap {
  background: var(--wash-bad);
  border-color: var(--edge-bad);
  color: var(--bad);
  font-weight: 600;
}
.tk-cov-cell.gap:hover {
  background: var(--edge-bad);
}
.tk-jn {
  margin-top: 12px;
}
.tk-jn > summary {
  cursor: pointer;
  padding: 6px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tk-jn > summary b {
  text-transform: capitalize;
}
.tk-jn-grid th {
  font-size: 12px;
}
.tk-jn-blank {
  background: var(--panel-2);
}
.ov-card.rules-dialog {
  width: 620px;
}
.rules-q {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
}
.tk-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tk-pick-row:last-child {
  border-bottom: 0;
}
.tk-pick-row select {
  width: auto;
  max-width: 190px;
}
.tk-pick-row input.num {
  width: 64px;
  text-align: right;
}
.tk-pick-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.margin-card {
  max-height: calc(100vh - var(--topbar-h) - 24px);
  overflow-y: auto;
}
.table-scroll {
  overflow-x: auto;
}
.buildup {
  min-width: 720px;
}
.buildup td,
.buildup th {
  white-space: nowrap;
}
.buildup td:first-child,
.buildup th:first-child {
  white-space: normal;
  min-width: 190px;
}
.buildup .strong {
  font-weight: 600;
}
.not-ours {
  color: var(--dim);
  text-decoration: line-through;
}
.buildup tr.idle td {
  color: var(--dim);
  background: var(--panel-2);
}
button.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fg);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-bright);
}
button.linkish:hover {
  background: none;
  text-decoration-color: var(--accent);
  color: var(--accent);
}
.trace-row td {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.trace {
  display: block;
  white-space: pre-line;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.7;
  padding: 4px 0 6px;
}
.bid-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 10px;
  margin-top: 12px;
}
.fact {
  min-width: 0;
}
.fact-label {
  font-size: 12px;
  color: var(--dim);
}
.fact-value {
  font-size: 14px;
  font-weight: 500;
}
.fact.strong .fact-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.supply-compare {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--accent-edge);
  font-size: 13px;
  color: var(--dim);
}
.rate-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.segmented {
  display: inline-flex;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  overflow: hidden;
}
.segmented-wide {
  display: flex;
  width: 100%;
}
.segmented-wide .seg {
  flex: 1;
  justify-content: center;
}
button.seg {
  border: 0;
  border-radius: 0;
  background: var(--control);
  color: var(--dim);
  padding: 4px 10px;
  font-size: 13px;
}
button.seg + button.seg {
  border-left: 1px solid var(--line-bright);
}
button.seg:hover {
  background: var(--control-hover);
  color: var(--fg);
}
button.seg.seg-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
button.seg.seg-on:hover {
  background: var(--accent-hover);
}
.margin-parts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.margin-part {
  display: block;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--panel-2);
}
.margin-part.margin-part-own {
  border-color: var(--accent-edge);
  background: var(--accent-wash);
}
.margin-part-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 500;
}
.margin-part input[type=range] {
  flex: 1;
  min-width: 0;
}
.margin-part .margin-number {
  width: 66px;
}
button.lock {
  padding: 2px 8px;
  font-size: 12px;
  border-radius: var(--radius-pill);
}
button.lock.lock-on {
  background: var(--control);
  color: var(--dim);
}
button.lock.lock-off {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
.margin-parts-block {
  margin-top: 18px;
}
.margin-parts-block h3,
.supply-block h3 {
  margin-bottom: 2px;
}
.margin-parts-block p,
.supply-block p {
  margin: 0 0 8px;
}
.supply-block {
  margin-top: 18px;
}
.supply-detail {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--edge-warn);
  background: var(--wash-warn);
  border-radius: var(--radius);
  color: var(--fg);
}
details.guards {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
details.guards summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
details.guards summary:hover {
  color: var(--accent);
}
.guard-row {
  margin-top: 12px;
}
.guard-row > label {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 4px;
}
.guard-row p {
  margin: 4px 0 6px;
}
.guard-row input[type=number] {
  width: 120px;
}
.guard-row .margin-number {
  width: 72px;
}
.banner-ok {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
}
.margin-target {
  margin-top: 12px;
}
.margin-global {
  margin-bottom: 14px;
}
@media (max-width: 1000px) {
  .margin-card {
    max-height: none;
    overflow-y: visible;
    position: static;
  }
}
.margin-card {
  padding-top: 0;
}
.margin-card > .card-head {
  padding-top: 16px;
  margin-bottom: 10px;
  background: var(--panel);
}
.margin-card .bid-live {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* src/web/styles/takeoff-view.css */
.tk-dim-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-dim-label {
  min-width: 34px;
}
.tk-dim-slider {
  flex: 1;
  min-width: 0;
}
.tk-dim-pct {
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tk-layer-pct {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.tk-layer-name {
  cursor: pointer;
}
.tk-layer.sel .tk-layer-name {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tk-paper-swatch {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
}
.tk-paper-swatch.inverted {
  filter: invert(1) hue-rotate(180deg);
}
.tk-paper-swatch.none {
  background:
    repeating-linear-gradient(
      45deg,
      var(--panel),
      var(--panel) 3px,
      var(--line-bright) 3px,
      var(--line-bright) 5px);
}
.tk-paper-note {
  flex: none;
}
.tk-pens {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.tk-pen {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 13px;
}
.tk-pen.on .tk-pen-name {
  color: var(--accent);
}
.tk-pen-ink {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
}
.tk-pen-name {
  flex: none;
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.tk-pen-n {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tk-pen-scope {
  flex: none;
  font-size: 12px;
  color: var(--accent);
}
.tk-pen-mode {
  width: auto;
  flex: none;
  max-width: 104px;
}
.tk-text-runs.armed {
  pointer-events: auto;
  cursor: crosshair;
}
.tk-text-picked {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control);
  font-size: 13px;
  line-height: 1.45;
  max-height: 84px;
  overflow-y: auto;
}
.tk-text-picked.hidden {
  display: none;
}
.tk-reading-mode {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.tk-reading-ghostable {
  border-left: 2px solid transparent;
  padding-left: 6px;
  border-radius: var(--radius-xs);
  cursor: default;
}
.tk-reading-ghostable:hover {
  background: var(--control);
}
.tk-reading-ghostable:focus,
.tk-reading-ghostable:focus-visible {
  border-left-color: #7c3aed;
  background: var(--control);
}
.tk-reading-empty {
  padding: 2px 0 4px 6px;
  font-style: italic;
}
.tk-tint-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 6px 0 0 34px;
}
.tk-tint-legend.hidden {
  display: none;
}
.tk-tint-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tk-tint-sw {
  width: 13px;
  height: 13px;
  flex: none;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-xs);
  background: var(--panel);
}
.tk-tint-sw.none {
  background:
    repeating-linear-gradient(
      45deg,
      var(--panel),
      var(--panel) 3px,
      var(--line-bright) 3px,
      var(--line-bright) 5px);
}
.tk-under {
  margin-top: 10px;
}
.tk-under-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.tk-under-row {
  cursor: pointer;
}
.tk-under-row:hover {
  background: var(--control);
}

/* src/web/styles/sheet-list.css */
.tk-sheets {
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 6px;
  position: relative;
}
.tk-sheet-filters {
  margin-top: 4px;
  gap: 4px;
}
.tk-sheet-filters button.on {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  color: var(--accent);
}
.tk-sheet-list > .muted.small {
  margin-top: 6px;
}
.tk-sheet-note {
  margin-top: 6px;
}
.tk-sheet-find {
  margin-bottom: 2px;
}
.tk-sheet-find-box {
  flex: 1 1 100%;
  min-width: 0;
}
.tk-sheet-find-status {
  flex: 1 1 100%;
}
.tk-sheet-find-status:empty {
  display: none;
}
.tk-sheet {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 2px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.tk-sheet:last-child {
  border-bottom: 0;
}
.tk-sheet:hover {
  color: var(--accent);
}
.tk-sheet-no {
  flex: none;
  min-width: 24px;
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.tk-sheet-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tk-sheet-title,
.tk-sheet-caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-sheet-caption {
  font-size: 12px;
}
.tk-sheet-mark {
  flex: none;
  font-size: 12px;
  padding: 0 4px;
}
.tk-sheet.has-roof .tk-sheet-title {
  color: var(--fg);
}
.tk-sheet.measured .tk-sheet-title {
  font-weight: 600;
}
.tk-sheet.measured .tk-sheet-no {
  color: var(--fg);
}
.tk-sheet.current {
  cursor: default;
  background: var(--accent-wash);
}
.tk-sheet.current:hover {
  color: inherit;
}
.tk-sheet.blocked {
  cursor: not-allowed;
  opacity: 0.55;
}
.tk-sheet.blocked:hover {
  color: inherit;
}
.tk-sheet-pin {
  flex: none;
  border: 0;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--dim);
  font-size: 13px;
  line-height: 1;
}
.tk-sheet-pin:hover,
.tk-sheet-pin.on {
  color: var(--accent);
}
.doc-order {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.doc-pages-from {
  white-space: nowrap;
}
.doc-size,
.doc-when {
  white-space: nowrap;
  width: 92px;
}
.doc-when {
  width: 124px;
}
.tk-sheet.renaming {
  gap: 8px;
}
.tk-sheet-rename {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

/* src/web/styles/canvas-tools.css */
.tk-trace-hint {
  white-space: pre-line;
}
.tk-trace-row.tk-run {
  cursor: pointer;
}
.tk-trace-row.tk-run:hover {
  background: var(--control);
}
.tk-trace-row.tk-run.on {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--accent);
}
.tk-count-area {
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.tk-count-slider {
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.tk-count-slider input[type=range] {
  flex: 1;
  min-width: 90px;
}
.tk-count-grid {
  margin-top: 8px;
}
.tk-count-grid-head {
  align-items: center;
  gap: 6px;
}
.tk-count-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.tk-count-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 2px;
  cursor: pointer;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  color: #12161c;
  background: #ffffff;
}
.tk-count-tile:hover {
  border-color: var(--accent);
}
.tk-count-tile svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tk-count-tile.off {
  color: #9a9a9a;
  background: #f3f4f6;
}
.tk-count-tile.off::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom right,
      transparent calc(50% - 1px),
      #9a9a9a calc(50% - 1px),
      #9a9a9a calc(50% + 1px),
      transparent calc(50% + 1px));
}
.tk-count-score {
  position: absolute;
  right: 2px;
  bottom: 1px;
  padding: 0 2px;
  font-size: var(--text-xs);
  color: #5a6473;
  background: #ffffffd0;
  border-radius: var(--radius-xs);
}
.tk-labels {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.tk-labels-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tk-label-row {
  gap: 4px;
  margin-top: 6px;
}
.tk-label-btn {
  padding-inline: 7px;
}

/* src/web/styles/panels.css */
.tk-asm-select {
  width: 100%;
}
.tk-asm-mix {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.tk-asm-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.tk-asm-row .num {
  font-variant-numeric: tabular-nums;
}
.tk-asm-row > :last-child {
  min-width: 34px;
  text-align: right;
  color: var(--dim);
}
.tk-asm-sel {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.tk-asm-sel-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tk-asm-hint {
  margin-top: 2px;
}
.tk-cost-headline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.tk-cost-big {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.tk-cost-delta {
  margin-top: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tk-cost-delta.flash {
  animation: tk-cost-flash 1.4s ease-out 1;
}
@keyframes tk-cost-flash {
  0% {
    background: var(--accent-wash);
  }
  100% {
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-cost-delta.flash {
    animation: none;
  }
}
.tk-cost-rows {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.tk-cost-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.tk-cost-row .num {
  font-variant-numeric: tabular-nums;
}
.tk-cost-row.tk-cost-sub {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 4px;
}
.tk-cost-row.tk-cost-sub .num {
  font-weight: 600;
}
.tk-cost-foot {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* src/web/styles/project.css */
.spec-codes {
  border: 1px solid var(--accent-edge);
  background: var(--accent-wash);
  border-radius: var(--radius);
  padding: 12px;
}
.spec-codes h3 {
  margin: 0;
}
.row-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ov-card.roof-sheet-dialog {
  width: min(1180px, 96vw);
  max-width: 96vw;
}
.roof-sheet-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.3fr);
  gap: 20px;
  align-items: start;
}
.roof-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.roof-sheet-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  overflow: hidden;
  min-height: 100px;
}
.roof-sheet-card img {
  width: 100%;
  background: white;
}
.roof-sheet-card[aria-pressed=true] {
  outline: 2px solid var(--accent);
}
.roof-sheet-preview {
  min-width: 0;
}
.roof-preview-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.roof-preview-tools output {
  min-width: 55px;
  text-align: center;
}
.roof-preview-stage {
  position: relative;
  height: clamp(280px, 48vh, 640px);
  overflow: hidden;
  background: #dce1e7;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
}
.roof-preview-stage.dragging {
  cursor: grabbing;
}
.roof-preview-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.roof-preview-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.roof-sheet-dialog select {
  max-width: 100%;
}
@media (max-width: 720px) {
  .roof-sheet-layout {
    grid-template-columns: 1fr;
  }
  .roof-sheet-grid {
    max-height: 40vh;
    overflow: auto;
  }
}
@media (max-width: 720px) {
  .row-3 {
    grid-template-columns: 1fr;
  }
}
.wbs-preview {
  font-family: var(--mono);
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--fg);
  white-space: pre;
}
.wbs-preview-table {
  width: auto;
  min-width: 220px;
}
.wbs-preview-table td:last-child {
  font-family: var(--mono);
}
.pill.code {
  font-family: var(--mono);
}
.pill.code.opt {
  border-style: dashed;
}
.filing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.assign-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stamp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-pill);
  font-size: 12px;
  white-space: nowrap;
}
.stamp-chip.assignment {
  font-family: var(--mono);
  font-weight: 600;
  border-color: var(--accent-edge);
  background: var(--accent-wash);
  color: var(--accent);
}
.stamp-chip.note {
  background: var(--control);
  color: var(--dim);
}
.stamp-chip .x {
  border: none;
  background: none;
  min-width: 24px;
  min-height: 24px;
  padding: 0 0 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  opacity: 0.55;
}
.stamp-chip .x:hover {
  opacity: 1;
  color: var(--bad);
}
.project-screen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.project-screen > [style*=margin-top] {
  margin-top: 0 !important;
}
.project-screen > .card + .card {
  margin-top: 0;
}
.project-screen > .card,
.project-screen > [id] > .card,
.project-screen > [id] > [class=card] {
  margin-top: 0;
}
.project-screen .page-head {
  margin: 0;
  align-items: center;
  gap: var(--sp-6);
}
.project-screen .page-head > .grow {
  min-width: 0;
}
.project-screen .page-head h1 {
  margin: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.project-screen .page-head > button,
.project-screen .page-head > .btn {
  min-height: 34px;
  white-space: nowrap;
}
.project-screen .page-head > .primary {
  order: 3;
}
.project-screen .pj-links {
  gap: 6px;
  margin: 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.project-screen .pj-links a {
  padding: 6px 10px;
  border-color: var(--line);
  border-radius: var(--radius);
  line-height: 1.2;
}
.project-screen .pj-links a:first-child {
  color: var(--fg);
  border-color: var(--accent-edge);
  background: var(--accent-wash);
}
.project-screen .leverage,
.project-screen .filing {
  margin: 0;
}
.project-screen .leverage {
  min-height: 40px;
}
.project-screen .filing {
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
}
.project-screen > .card,
.project-screen > [id] > .card {
  min-width: 0;
}
.project-screen .card-head {
  min-height: 30px;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.project-screen .card-head h2 {
  line-height: 1.2;
}
.project-screen .card-head .count {
  flex: 0 0 auto;
}
.project-screen .card-head .btn {
  white-space: nowrap;
}
.project-screen .spec {
  padding: var(--sp-5) var(--sp-6);
}
.project-screen .spec + .spec {
  margin-top: var(--sp-3);
}
.project-screen .spec .name {
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.project-screen .spec .meta {
  gap: var(--sp-5);
  margin-top: var(--sp-3);
}
.project-screen .spec .meta a {
  white-space: nowrap;
}
.project-screen .table-wrap {
  margin-top: var(--sp-4);
}
.project-screen .jobs-table,
.project-screen .jobs {
  min-width: 0;
}
.project-screen .bid-template .row-flex {
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.project-screen .bid-template .table-wrap {
  margin-top: 0;
}
@media (max-width: 720px) {
  .project-screen {
    gap: var(--sp-6);
  }
  .project-screen .page-head {
    align-items: stretch;
  }
  .project-screen .page-head > .grow {
    flex-basis: 100%;
  }
  .project-screen .page-head > button,
  .project-screen .page-head > .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .project-screen .pj-links {
    gap: var(--sp-3);
  }
  .project-screen .pj-links a {
    flex: 1 1 auto;
    text-align: center;
  }
  .project-screen .card {
    padding: var(--sp-6);
  }
  .project-screen .card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .project-screen .card-head .grow {
    flex-basis: calc(100% - 42px);
  }
  .project-screen .filing {
    align-items: stretch;
  }
  .project-screen .filing .grow {
    display: none;
  }
  .project-screen .filing select {
    flex: 1 1 180px;
    min-width: 0 !important;
  }
  .project-screen .spec .meta {
    align-items: flex-start;
  }
}

/* src/web/styles/review.css */
.tk-inc {
  border: 1px solid var(--edge-warn);
  background: var(--wash-warn);
  border-radius: var(--radius);
  padding: 6px 8px;
  margin-bottom: 8px;
}
.tk-inc-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
  color: var(--warn);
}
.tk-inc-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  background: var(--bad);
  color: var(--accent-fg);
  font: 600 12px/1 var(--mono);
  font-style: italic;
}
.tk-inc-item {
  margin-top: 6px;
}
.tk-inc-item:first-of-type {
  margin-top: 8px;
}
.tk-inc-label {
  font-size: 12px;
  font-weight: 600;
}
.tk-inc-why {
  line-height: 1.4;
}
.tk-ver {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.tk-ver-on {
  border: 1px solid var(--edge-ok);
  background: var(--wash-ok);
  border-radius: var(--radius);
  padding: 4px 8px;
}
.tk-ver-tick {
  flex: none;
  color: var(--ok);
  font-weight: 700;
}
.tk-sum-head {
  margin-bottom: 8px;
}
.tk-sum-big-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tk-sum-big {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tk-sum-big.warn {
  color: var(--bad);
}
.tk-sum-big.ok {
  color: var(--ok);
}
.tk-sum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}
.tk-sum-chip {
  border: 1px solid var(--edge-warn);
  background: var(--wash-warn);
  color: var(--warn);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.tk-sum-chip:hover {
  border-color: var(--warn);
}
.tk-sum-chip.on {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--accent-fg);
}
.tk-sum-filters {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  margin-bottom: 6px;
}
.tk-sum-search {
  width: 100%;
  margin-bottom: 6px;
}
.tk-sum-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.tk-sum-row > * {
  flex: 1;
  min-width: 0;
}
.tk-sum-list {
  max-height: 340px;
  overflow-y: auto;
}
.tk-sum-table {
  width: 100%;
}
.tk-sum-tr {
  cursor: pointer;
}
.tk-sum-tr:hover {
  background: var(--hover-row);
}
.tk-sum-tr.sel {
  background: var(--accent-wash);
}
.tk-sum-tr.inc > td:first-child {
  box-shadow: inset 2px 0 0 var(--bad);
}
.tk-sum-badge {
  width: 22px;
  padding-left: 2px;
}
.tk-sum-tick {
  color: var(--ok);
  font-weight: 700;
}
.tk-sum-qty {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tk-sum-foot {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 6px;
}
.tk-sum-totals-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.tk-sum-totals {
  width: 100%;
}
.tk-sum-totals .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tk-sum-totals tr > td:first-child {
  color: var(--dim);
}

/* src/web/styles/pricing-supply.css */
.supply-card .supply-body {
  display: grid;
  gap: 18px;
}
.supply-card .supply-panel + .supply-panel {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.supply-card h3 {
  font-size: 15px;
  margin: 0 0 4px;
}
.supply-card h4 {
  font-size: 13px;
  margin: 0 0 4px;
}
.supply-card .supply-panel > p {
  margin: 0 0 10px;
  max-width: 68ch;
}
.supply-card .supplier-picker {
  min-width: 220px;
}
.supply-card a.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.supply-card .import-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.supply-card .paste-box {
  width: 100%;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
}
.supply-card .import-result:not(:empty),
.supply-card .review {
  margin-top: 12px;
}
.supply-card .tally {
  margin-top: 8px;
}
.supply-card .ignored summary {
  cursor: pointer;
  font-size: 12px;
}
.supply-card .call-grid td {
  vertical-align: middle;
}
.supply-card .price-input {
  width: 92px;
  text-align: right;
}
.supply-card .price-input.quoted {
  border-color: var(--edge-ok);
  font-weight: 600;
}
.supply-card .scope-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border-left: 3px solid var(--edge-warn);
  background: var(--wash-warn);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.supply-card .scope-prompt[hidden] {
  display: none;
}
.supply-card .review-announced {
  border-left: 3px solid var(--edge-warn);
  padding-left: 10px;
}
.supply-card .as-of {
  max-width: 190px;
}
.supply-card .versions-panel .version-list {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.supply-card .version-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.supply-card .version-row .grow {
  flex: 1 1 260px;
  min-width: 0;
}
.supply-card .version-row .pill.in-force {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
  color: var(--ok);
}
.supply-card .version-row .pill.superseded {
  color: var(--dim);
}
.supply-card .version-row .pill.withdrawn {
  background: var(--wash-warn);
  border-color: var(--edge-warn);
  color: var(--warn);
}
.supply-card .pinned-quotes:not(:empty) {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.supply-card .pinned-grid td {
  vertical-align: top;
}
.supply-card .pinned-grid tr.release-pinned td {
  background: var(--wash-warn);
}

/* src/web/styles/compare.css */
.cmp {
  --cmp-base: #1668c4;
  --cmp-revised: #c2410c;
  --cmp-paper: #f4f4f2;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h, 3rem));
  min-height: 0;
}
.cmp-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.cmp-controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.cmp-side {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.cmp-side-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cmp-side label {
  font-size: 12px;
  color: var(--dim);
}
.cmp-swatch {
  width: 3px;
  align-self: stretch;
  border-radius: var(--radius-xs);
  margin-top: 2px;
}
.cmp-side.is-base .cmp-swatch {
  background: var(--cmp-base);
}
.cmp-side.is-revised .cmp-swatch {
  background: var(--cmp-revised);
}
.cmp-page {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmp-pageno {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--dim);
}
.cmp-sheetname {
  font-size: 13px;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-link {
  align-self: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.cmp-link.on {
  border-color: var(--accent);
  color: var(--accent);
}
.cmp-linkchip {
  align-self: center;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 1 auto;
  max-width: 34rem;
  min-width: 0;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12px;
}
.cmp-linkchip b {
  font-weight: 600;
  white-space: nowrap;
}
.cmp-linkchip .cmp-conf {
  font-size: 12px;
}
.cmp-linkchip .cmp-linkn {
  color: var(--dim);
  white-space: nowrap;
}
.cmp-linkchip .cmp-linknote {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cmp-linkchip.ok {
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.cmp-linkchip.warn {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
}
.cmp-linkchip.bad {
  border-color: color-mix(in srgb, var(--bad) 60%, transparent);
}
.cmp-linkchip.bad b,
.cmp-linkchip.bad .cmp-conf {
  color: var(--bad);
}
.cmp-linkchip.is-waiting {
  color: var(--dim);
}
.cmp-modes {
  display: flex;
  gap: 4px;
}
.cmp-modes .on {
  background: var(--accent);
  color: var(--accent-fg);
}
.cmp-blend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--dim);
}
.cmp-blend input {
  width: 7rem;
}
.cmp-stagewrap {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--cmp-paper);
}
.cmp-stage {
  display: block;
  touch-action: none;
  cursor: grab;
}
.cmp-stage:active {
  cursor: grabbing;
}
.cmp-panel {
  width: 24rem;
  flex: 0 0 24rem;
  border-left: 1px solid var(--line);
  background: var(--panel);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cmp-align {
  border-radius: var(--radius);
  padding: 8px 12px;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
}
.cmp-align p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--dim);
}
.cmp-conf {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cmp-align.ok {
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.cmp-align.warn {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
}
.cmp-align.bad {
  border-color: color-mix(in srgb, var(--bad) 60%, transparent);
}
.cmp-align.bad b,
.cmp-align.bad .cmp-conf {
  color: var(--bad);
}
.cmp-caution {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cmp-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmp-headline.none {
  display: block;
  font-size: 14px;
}
.cmp-chip {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}
.cmp-chip.up {
  border-color: color-mix(in srgb, var(--cmp-revised) 55%, transparent);
}
.cmp-chip.down {
  border-color: color-mix(in srgb, var(--cmp-base) 55%, transparent);
}
.cmp-section h3 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--dim);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cmp-table th {
  text-align: right;
  font-weight: 500;
  color: var(--dim);
  font-size: 12px;
  padding-bottom: 4px;
}
.cmp-table th:first-child {
  text-align: left;
}
.cmp-table td {
  padding: 2px 0;
  border-top: 1px solid var(--line);
}
.cmp-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cmp-table .up {
  color: var(--cmp-revised);
}
.cmp-table .down {
  color: var(--cmp-base);
}
.cmp-table .flat {
  color: var(--dim);
}
.cmp-table .cmp-field td {
  font-weight: 600;
}
.cmp-planes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 13px;
}
.cmp-planes .is-zero {
  color: var(--dim);
}
.cmp-planes b {
  font-variant-numeric: tabular-nums;
}
.cmp-outframe {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dim);
}
.cmp-outframe b {
  color: var(--fg);
}
.cmp-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dim);
}
.cmp-credit {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border-left: 3px solid var(--cmp-base);
  background: color-mix(in srgb, var(--cmp-base) 8%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-variant-numeric: tabular-nums;
}
.cmp-credit b {
  color: var(--fg);
}
.cmp-shaky td {
  color: var(--dim);
}
.cmp-flag {
  display: inline-block;
  margin-left: 4px;
  width: 1em;
  height: 1em;
  line-height: 1em;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  cursor: help;
}
.cmp-text {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cmp-text li {
  padding: 2px 0 2px 16px;
  position: relative;
}
.cmp-text .gone::before {
  content: "−";
  position: absolute;
  left: 0;
  color: var(--cmp-base);
}
.cmp-text .came::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--cmp-revised);
}
.cmp-wait {
  color: var(--dim);
  font-size: 14px;
}
.cmp-wait h3 {
  margin: 0 0 4px;
  color: var(--fg);
  font-size: 15px;
}
.cmp-status {
  display: none;
  padding: 6px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
  color: var(--dim);
}
.cmp-status.on {
  display: block;
}
@media (max-width: 60rem) {
  .cmp-body {
    flex-direction: column;
  }
  .cmp-panel {
    width: auto;
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: 45vh;
  }
}
.cmp {
  --cmp-tie: #16a34a;
}
.cmp-align.is-hand {
  border-color: color-mix(in srgb, var(--cmp-tie) 55%, transparent);
}
.cmp-align.is-hand b {
  color: var(--cmp-tie);
}
.cmp-align.is-hand .cmp-conf {
  color: var(--dim);
  font-weight: 500;
}
.cmp-hand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-hand-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cmp-hand-row .cmp-note {
  margin: 0;
}
.cmp-hand-prompt {
  margin: 0;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cmp-tie) 55%, transparent);
  background: color-mix(in srgb, var(--cmp-tie) 10%, transparent);
}
.cmp-nudge button {
  min-width: 30px;
  font-variant-numeric: tabular-nums;
}
.cmp-emphasis .on,
.cmp-hand-row .on {
  background: var(--accent);
  color: var(--accent-fg);
}
.cmp-linkchip.is-hand {
  border-color: color-mix(in srgb, var(--cmp-tie) 55%, transparent);
}
.cmp-linkchip.is-hand b {
  color: var(--cmp-tie);
}
.cmp-optlabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--dim);
}
.cmp-optname {
  flex: 1;
  min-width: 0;
}

/* src/web/styles/layers.css */
.tk-mlayers {
  --tk-mlayer-h: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tk-mlayers-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tk-mlayers-scroll {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 320px;
  min-height: calc(var(--tk-mlayer-h) * 4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overscroll-behavior: contain;
}
.tk-mlayers-spacer {
  position: relative;
  width: 100%;
}
.tk-mlayers-empty:not([hidden]) {
  padding: 6px 2px;
}
.tk-mlayers-hint {
  min-height: 15px;
  line-height: 1.3;
}
.tk-mlayer {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--tk-mlayer-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: calc(4px + var(--tk-mlayer-depth, 0) * 11px);
  padding-right: 4px;
  font-size: 12px;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.tk-mlayer:hover {
  background: var(--hover-row);
}
.tk-mlayer.on {
  background: var(--accent-wash);
}
.tk-mlayer.is-group {
  font-weight: 600;
}
.tk-mlayer.off .tk-mlayer-name,
.tk-mlayer.off .tk-mlayer-n {
  opacity: 0.45;
}
.tk-mlayer.dragging {
  opacity: 0.5;
}
.tk-mlayer.over-top {
  border-top-color: var(--accent);
}
.tk-mlayer.over-bottom {
  border-bottom-color: var(--accent);
}
.tk-mlayer-twist {
  flex: 0 0 auto;
  width: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.tk-mlayer-twist:disabled {
  visibility: hidden;
}
.tk-mlayer-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-mlayer-n {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.tk-mlayer-pct {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.tk-mlayers-dim {
  margin: 6px 0 2px;
}
.tk-mlayer-rename {
  width: 100%;
  height: calc(var(--tk-mlayer-h) - 6px);
  padding: 0 4px;
  font: inherit;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

/* src/web/styles/pages.css */
.pg-ask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}
.pg-ask-box {
  width: min(460px, 100%);
  padding: 18px 20px 16px;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.pg-ask-box h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.pg-ask-box p {
  margin: 0 0 12px;
}
.pg-ask-box select {
  width: 100%;
}

/* src/web/styles/production.css */
:root {
  --pd-bg: var(--bg);
  --pd-card: var(--panel);
  --pd-head: var(--panel-2);
  --pd-line: var(--line);
  --pd-line-soft: var(--line);
  --pd-line-faint: var(--line);
  --pd-line-strong: var(--line-strong);
  --pd-line-bright: var(--line-bright);
  --pd-fg: var(--fg);
  --pd-fg-2: var(--dim);
  --pd-fg-3: var(--dim);
  --pd-fg-4: var(--dim);
  --pd-hover: var(--control);
  --pd-hover-blue: var(--accent-wash);
  --pd-ink: var(--accent);
  --pd-ink-fg: var(--accent-fg);
  --pd-ok-bg: var(--wash-ok);
  --pd-ok-fg: var(--ok);
  --pd-ok-edge: var(--edge-ok);
  --pd-warn-bg: var(--wash-warn);
  --pd-warn-fg: var(--warn);
  --pd-warn-edge: var(--edge-warn);
  --pd-bad-bg: var(--wash-bad);
  --pd-bad-fg: var(--bad);
  --pd-bad-edge: var(--edge-bad);
  --pd-neu-bg: var(--control);
  --pd-neu-fg: var(--dim);
  --pd-neu-edge: var(--line-bright);
  --pd-vio-bg: var(--wash-vio);
  --pd-vio-fg: var(--vio);
  --pd-vio-edge: var(--edge-vio);
  --pd-blu-bg: var(--accent-wash);
  --pd-blu-fg: var(--accent);
  --pd-blu-edge: var(--accent-edge);
  --pd-wash-bad: #fef7f3;
  --pd-wash-fire: #fefaf6;
  --pd-wash-warn: #fefcf7;
  --pd-flag-note: var(--dim);
  --pd-gold: var(--warn);
  --pd-film-a: var(--panel-2);
  --pd-film-b: var(--panel);
  --pd-film-fg: var(--dim);
  --pd-on-photo: #ffffff;
  --pd-on-photo-ok: #b7f0d1;
  --pd-mono: var(--mono);
  --pd-sans: var(--sans);
  --pd-serif:
    Georgia,
    "Times New Roman",
    "Noto Serif",
    serif;
}
[data-theme=dark] {
  --pd-wash-bad: #23191a;
  --pd-wash-fire: #221b18;
  --pd-wash-warn: #201f18;
}
:root {
  --fd-bg: #0e1116;
  --fd-card: #171b22;
  --fd-card-2: #1b1f27;
  --fd-line: #22262e;
  --fd-line-2: #39404d;
  --fd-line-strong: #5d687d;
  --fd-fg: #ffffff;
  --fd-fg-2: #e9ebef;
  --fd-fg-3: #a9b1bf;
  --fd-fg-4: #9aa2b0;
  --fd-ink: #0f1218;
  --fd-accent: #82a5f7;
  --fd-ok: #7fd3ac;
  --fd-ok-bg: #163025;
  --fd-warn: #d9b45f;
  --fd-bad: #f0b896;
  --fd-bad-bg: #331e12;
  --fd-bad-edge: #5c4030;
  --fd-alarm-bg: #2a1410;
  --fd-alarm-edge: #a8481a;
  --fd-ok-edge: #255e44;
  --fd-bezel: #191c23;
  --fd-hover: #1d222b;
  --fd-hatch-a: #262b33;
  --fd-hatch-b: #20242b;
  --fd-hatch-bad-a: #3a2a20;
  --fd-hatch-bad-b: #33251c;
  --fd-paper-fg: #625d54;
  --fd-paper: #f6f5f1;
  --fd-paper-link: #2f5fd0;
  --pd-claim-bg: #191c23;
  --pd-claim-line: #2b303a;
  --pd-claim-fg: #fcfcfb;
  --pd-claim-fg-2: #a9b1bf;
  --pd-claim-fg-3: #9aa2b0;
  --pd-claim-btn-fg: #e9ebef;
  --pd-claim-btn-edge: #82a5f7;
}
.pd {
  color: var(--pd-fg);
  font-family: var(--pd-sans);
  font-size: 16px;
}
.pd-top {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pd-line);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pd-top > .pd-titles {
  flex: 1;
  min-width: 240px;
}
.pd-h1 {
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.pd-sub {
  margin: 0;
  font-size: 16px;
  color: var(--pd-fg-3);
}
.pd-stat-v {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pd-fg);
}
.pd-stat-k {
  font-size: 12px;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
}
.pd-card {
  border: 1px solid var(--pd-line);
  background: var(--pd-card);
  border-radius: var(--radius);
}
.pd-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pd-line);
  background: var(--pd-head);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-2);
}
.pd-card-h .grow {
  flex: 1;
}
.pd-card-b {
  padding: 16px;
  min-width: 0;
}
.pd-card-f {
  padding: 12px 16px;
  border-top: 1px solid var(--pd-line);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13px;
  color: var(--pd-fg-3);
  line-height: 1.7;
}
.pd-acts {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: start;
  margin-bottom: 14px;
}
.pd-acts.is-last {
  margin-bottom: 0;
}
.pd-acts > .pd-figure-k {
  padding-top: 8px;
}
.pd-acts-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 560px) {
  .pd-acts {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-acts > .pd-figure-k {
    padding-top: 0;
  }
}
.pd-cards {
  display: grid;
  gap: 16px;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 330px), 100%), 1fr));
}
.pd-blank {
  padding: 26px;
  text-align: center;
}
.pd-txt {
  font-size: 16px;
}
.pd-kv {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 10px;
  align-items: baseline;
  padding: 8px 14px;
  border-top: 1px solid var(--pd-line-soft);
}
.pd-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
}
.pd-v {
  font-size: 16px;
  color: var(--pd-fg);
  line-height: 1.5;
}
.pd-kv-first {
  margin-top: 8px;
}
.pd-table {
  border: 1px solid var(--pd-line);
  background: var(--pd-card);
  overflow-x: auto;
  border-radius: var(--radius);
}
.pd-th,
.pd-tr {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: 0;
  align-items: baseline;
  min-width: min-content;
}
.pd-th > :not(input, select, textarea, button, .pd-btn),
.pd-tr > :not(input, select, textarea, button, .pd-btn) {
  padding-inline: 9px;
}
.pd-th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
  padding: 8px 4px;
  border-bottom: 1px solid var(--pd-line-bright);
}
.pd-tr {
  padding: 8px 4px;
  border-top: 1px solid var(--pd-line-faint);
  font-size: 16px;
}
button.pd-tr {
  width: 100%;
  text-align: left;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--pd-fg);
}
button.pd-tr:hover {
  background: var(--pd-hover);
}
div.pd-tr:hover {
  background: var(--pd-hover);
}
.pd-tr.is-flagged {
  background: var(--pd-wash-bad);
}
.pd-tr.is-fire {
  background: var(--pd-wash-fire);
}
.pd-tr.is-watch {
  background: var(--pd-wash-warn);
}
.pd-tf {
  padding: 8px 14px;
  border-top: 1px solid var(--pd-line-soft);
  font-size: 13px;
  color: var(--pd-fg-3);
}
.pd-right {
  text-align: right;
}
.pd-num {
  font-family: var(--pd-mono);
  font-size: 15px;
  text-align: right;
  white-space: nowrap;
}
.pd-num-sm {
  font-family: var(--pd-mono);
  font-size: 14px;
}
.pd-dim {
  color: var(--pd-fg-3);
}
.pd-date {
  text-align: right;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pd-date-sm {
  font-size: 14px;
}
.pd-when {
  text-align: right;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pd-note {
  font-size: 13px;
  color: var(--pd-fg-3);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pd-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--pd-neu-bg);
  color: var(--pd-neu-fg);
  position: relative;
  top: -1px;
}
.pd-pill-sm {
  padding: 2px 6px;
}
.pd-pill.is-ok {
  background: var(--pd-ok-bg);
  color: var(--pd-ok-fg);
}
.pd-pill.is-warn {
  background: var(--pd-warn-bg);
  color: var(--pd-warn-fg);
}
.pd-pill.is-bad {
  background: var(--pd-bad-bg);
  color: var(--pd-bad-fg);
}
.pd-pill.is-neu {
  background: var(--pd-neu-bg);
  color: var(--pd-neu-fg);
}
.pd-pill.is-vio {
  background: var(--pd-vio-bg);
  color: var(--pd-vio-fg);
}
.pd-pill.is-blu {
  background: var(--pd-blu-bg);
  color: var(--pd-blu-fg);
}
.pd-pill.is-edged {
  border: 1px solid var(--pd-neu-edge);
}
.pd-pill.is-edged.is-ok {
  border-color: var(--pd-ok-edge);
}
.pd-pill.is-edged.is-warn {
  border-color: var(--pd-warn-edge);
}
.pd-pill.is-edged.is-bad {
  border-color: var(--pd-bad-edge);
}
.pd-pill.is-edged.is-blu {
  border-color: var(--pd-blu-edge);
}
.pd-fg-ok {
  color: var(--pd-ok-fg);
}
.pd-fg-warn {
  color: var(--pd-warn-fg);
}
.pd-fg-bad {
  color: var(--pd-bad-fg);
}
.pd-fg-vio {
  color: var(--pd-vio-fg);
}
.pd-fg-blu {
  color: var(--pd-blu-fg);
}
.pd-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--pd-neu-bg);
  border-left: 3px solid var(--pd-fg-3);
  border-radius: var(--radius);
}
.pd-banner.is-next {
  margin-top: 20px;
  margin-bottom: 0;
}
.pd-banner.is-ok {
  background: var(--pd-ok-bg);
  border-left-color: var(--pd-ok-fg);
}
.pd-banner.is-warn {
  background: var(--pd-warn-bg);
  border-left-color: var(--pd-warn-fg);
}
.pd-banner.is-bad {
  background: var(--pd-bad-bg);
  border-left-color: var(--pd-bad-fg);
}
.pd-banner > .pd-banner-body {
  flex: 1;
  min-width: min(260px, 100%);
}
.pd-banner-h {
  font-size: 18px;
  font-weight: 500;
}
.pd-banner-p {
  font-size: 16px;
  color: var(--pd-fg-2);
  margin-top: 2px;
}
.pd-banner-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--pd-card);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
}
.pd-banner.is-ok .pd-banner-tag {
  color: var(--pd-ok-fg);
}
.pd-banner.is-warn .pd-banner-tag {
  color: var(--pd-warn-fg);
}
.pd-banner.is-bad .pd-banner-tag {
  color: var(--pd-bad-fg);
}
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: middle;
  font-size: 13px;
  letter-spacing: .04em;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  background: var(--pd-card);
  border: 1px solid var(--line-strong);
  color: var(--pd-fg-2);
}
.pd-btn:hover {
  background: var(--control-hover);
  border-color: var(--line-strong);
  text-decoration: none;
}
.pd-btn.is-dark {
  background: var(--pd-ink);
  border-color: var(--pd-ink);
  color: var(--pd-ink-fg);
}
.pd-btn.is-blue {
  background: var(--pd-blu-fg);
  border-color: var(--pd-blu-fg);
  color: var(--pd-ink-fg);
}
.pd-btn.is-bad {
  background: var(--pd-card);
  border-color: var(--pd-bad-fg);
  color: var(--pd-bad-fg);
}
.pd-btn.is-bad:hover {
  background: var(--pd-bad-bg);
  border-color: var(--pd-bad-fg);
}
.pd-btn.is-ok {
  background: var(--pd-ok-fg);
  border-color: var(--pd-ok-fg);
  color: var(--pd-ink-fg);
}
.pd-btn.is-quiet {
  background: transparent;
}
.pd-btn.is-link {
  background: transparent;
  color: var(--pd-blu-fg);
}
.pd-btn.is-link:hover {
  border-color: var(--pd-blu-fg);
}
.pd-btn.is-block {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.pd-btn.is-sm {
  min-height: 30px;
  font-size: 13px;
  letter-spacing: .03em;
  padding: 4px 10px;
}
.pd-btn[disabled],
.pd-btn[disabled]:hover {
  background: var(--pd-head);
  border-color: var(--pd-line);
  color: var(--pd-fg-3);
  cursor: not-allowed;
  opacity: 1;
}
.pd-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pd-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  line-height: 1.4;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--pd-line);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--pd-fg-2);
}
.pd-tab:hover {
  border-color: var(--pd-fg-3);
}
.pd-tab.on {
  background: var(--pd-ink);
  border-color: var(--pd-ink);
  color: var(--pd-ink-fg);
}
.pd-film {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 4px;
  border: 1px solid var(--pd-line);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      135deg,
      var(--pd-film-a) 0 5px,
      var(--pd-film-b) 5px 10px);
}
.pd-film.is-wide {
  aspect-ratio: 4 / 3;
  padding: 6px;
}
.pd-film.is-evidence {
  border-width: 2px;
  border-color: var(--pd-ok-fg);
}
.pd-film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-film-label {
  position: relative;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--pd-film-fg);
  line-height: 1.25;
  white-space: pre-line;
}
.pd-film.is-wide .pd-film-label {
  font-size: 12px;
  line-height: 1.3;
}
.pd-film.is-evidence .pd-film-label {
  color: var(--pd-ok-fg);
}
.pd-film:has(img) .pd-film-label {
  color: var(--pd-on-photo);
  text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
}
.pd-film.is-evidence:has(img) .pd-film-label {
  color: var(--pd-on-photo-ok);
}
button.pd-film {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.pd-films {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 8px;
  padding: 12px 14px;
}
.pd-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 18px;
}
.pd-radius {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pd-line-faint);
  border-left: 3px solid var(--line-strong);
}
.pd-radius:last-child {
  border-bottom: 0;
}
.pd-radius-n {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pd-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.pd-col-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px 8px;
}
.pd-col-h b {
  font-size: 12px;
  letter-spacing: .07em;
  color: var(--pd-fg-2);
  font-weight: 600;
}
.pd-col-h span {
  font-size: 13px;
  color: var(--pd-fg-3);
  font-variant-numeric: tabular-nums;
}
.pd-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-deal {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: var(--pd-card);
  border: 1px solid var(--pd-line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 10px;
  color: var(--pd-fg);
}
.pd-deal:has(button.pd-btn) {
  min-height: 16.5rem;
}
.pd-deal:has(button.pd-btn) > :nth-last-child(2) {
  margin-bottom: auto;
}
.pd-deal:has(button.pd-btn) > :last-child {
  min-height: 4.75rem;
  align-content: flex-start;
  align-items: flex-start;
}
.pd-deal:hover {
  border-color: var(--pd-fg-3);
}
.pd-deal.is-invited {
  border-top-color: var(--pd-blu-fg);
}
.pd-deal.is-in_takeoff {
  border-top-color: var(--pd-warn-fg);
}
.pd-deal.is-submitted {
  border-top-color: var(--pd-vio-fg);
}
.pd-deal.is-lead {
  border-top-color: var(--pd-blu-fg);
}
.pd-deal.is-contacted {
  border-top-color: var(--pd-blu-fg);
}
.pd-deal.is-inspected {
  border-top-color: var(--pd-warn-fg);
}
.pd-deal.is-proposed {
  border-top-color: var(--pd-vio-fg);
}
.pd-deal.is-awarded {
  border-top-color: var(--pd-ok-fg);
}
.pd-deal.is-lost {
  border-top-color: var(--pd-bad-fg);
}
.pd-deal:not(.is-submitted) .pd-btn.is-dark {
  background: var(--pd-card);
  border-color: var(--line-strong);
  color: var(--pd-fg-2);
}
.pd-deal:not(.is-submitted) .pd-btn.is-dark:hover {
  background: var(--control-hover);
}
.pd-deal-a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.pd-deal-b {
  display: block;
  font-size: 15px;
  color: var(--pd-fg-3);
  line-height: 1.4;
  margin-top: 2px;
  min-height: 2.8em;
}
.pd-deal-c {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
}
.pd-deal-c > :first-child {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pd-deal-c > :last-child {
  font-size: 12px;
  color: var(--pd-fg-3);
}
.pd-deal-c > .is-due {
  color: var(--pd-warn-fg);
}
@media (max-width: 1100px) {
  .pd-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .pd-board {
    grid-template-columns: 1fr;
  }
}
.pd-flags {
  padding: 12px 14px;
  border-top: 1px solid var(--pd-line);
  background: var(--pd-bad-bg);
}
.pd-flags-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-bad-fg);
  margin-bottom: 8px;
}
.pd-flag {
  padding: 6px 0;
  border-top: 1px solid var(--pd-bad-edge);
}
.pd-flag-a {
  font-size: 16px;
  color: var(--pd-fg);
}
.pd-flag-b {
  font-size: 13px;
  color: var(--pd-flag-note);
  line-height: 1.5;
  margin-top: 2px;
}
.pd-effect {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--pd-line-soft);
}
.pd-effect-mark {
  font-size: 14px;
  min-width: 18px;
}
.pd-effect-t {
  font-size: 16px;
  color: var(--pd-fg-2);
  line-height: 1.5;
}
.pd-inner-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
  margin-bottom: 8px;
}
.pd-claim {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--pd-claim-bg);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.pd-claim-n {
  text-align: center;
  padding-right: 16px;
  border-right: 1px solid var(--pd-claim-line);
}
.pd-claim-v {
  font-size: 30px;
  font-weight: 600;
  color: var(--pd-claim-fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pd-claim-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-claim-fg-3);
  margin-top: 2px;
}
.pd-claim-t {
  font-size: 16px;
  color: var(--pd-claim-fg-2);
  line-height: 1.55;
  flex: 1;
  min-width: 240px;
}
.pd-claim .pd-btn {
  background: transparent;
  border-color: var(--pd-claim-fg-3);
  color: var(--pd-claim-btn-fg);
}
.pd-claim .pd-btn:hover {
  border-color: var(--pd-claim-btn-edge);
}
.pd-manual {
  border: 1px solid var(--line-strong);
  background: var(--pd-head);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.pd-manual-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.pd-manual-row input {
  flex: 1;
  min-width: 200px;
  font-family: var(--pd-mono);
  font-size: 18px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pd-manual-row input:focus {
  border-color: var(--pd-blu-fg);
}
.pd-manual-row input:focus-visible {
  outline: 2px solid var(--pd-blu-fg);
  outline-offset: 1px;
}
.pd-manual-echo {
  flex: 0 0 300px;
  font-family: var(--pd-mono);
  font-size: 13px;
  color: var(--pd-fg-2);
  background: var(--pd-card);
  border: 1px solid var(--pd-neu-bg);
  border-radius: var(--radius);
  padding: 8px 10px;
  line-height: 1.6;
}
.pd-plot {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--pd-bad-edge);
  border-radius: var(--radius);
  background: var(--pd-wash-fire);
  flex-wrap: wrap;
}
.pd-plot-main {
  flex: 1;
  min-width: 260px;
  padding: 14px 16px;
}
.pd-plot-side {
  flex: 0 0 300px;
  border-left: 1px solid var(--pd-bad-edge);
  padding: 14px 16px;
  background: var(--pd-card);
}
.pd-plot-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--pd-line-soft);
}
.pd-plot-lot {
  font-family: var(--pd-mono);
  font-size: 14px;
  font-weight: 500;
}
.pd-plot-note {
  font-size: 15px;
  color: var(--pd-fg-2);
  line-height: 1.4;
  min-width: 0;
}
.pd-plot-set {
  font-family: var(--pd-mono);
  font-size: 15px;
  color: var(--pd-bad-fg);
}
.pd-plot-applied {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--pd-head);
}
.pd-plot-applied.on {
  background: var(--pd-ok-bg);
}
.pd-plot-applied p {
  margin: 0;
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--pd-fg-3);
  line-height: 1.6;
}
.pd-plot-applied.on p {
  color: var(--pd-ok-fg);
}
.pd-spec-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pd-line);
  background: var(--pd-head);
}
.pd-spec-swatch {
  width: 3px;
  height: 30px;
  border-radius: 1px;
  flex: 0 0 auto;
}
.pd-spec-name {
  font-size: 16px;
  font-weight: 600;
}
.pd-spec-name span {
  font-weight: 400;
  color: var(--pd-fg-2);
}
.pd-spec-meta {
  font-size: 13px;
  color: var(--pd-fg-3);
  margin-top: 2px;
}
.pd-lot {
  position: relative;
  display: block;
  white-space: nowrap;
  font-family: var(--pd-mono);
  font-size: 15px;
  font-weight: 500;
}
.pd-fire-dot {
  position: absolute;
  top: 5px;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pd-bad-fg);
}
.pd-stage {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: 10px;
  align-self: center;
}
.pd-stage-col {
  display: block;
  min-width: 0;
}
.pd-stage-col select {
  width: 100%;
  max-width: 260px;
}
.pd-stage-col > .pd-note {
  margin-top: 2px;
}
.tm-id {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.tm-id-v {
  font-family: var(--pd-mono);
  font-size: 12px;
  color: var(--pd-fg-3);
  overflow-wrap: anywhere;
  min-width: 0;
}
.pd-grid {
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  background: var(--pd-card);
  overflow-x: auto;
}
.pd-grid-in {
  display: grid;
  grid-template-columns: var(--cols);
  min-width: 1000px;
}
.pd-grid-corner {
  padding: 10px 12px;
  background: var(--pd-head);
  border-bottom: 1px solid var(--pd-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
}
.pd-day {
  padding: 10px;
  background: var(--pd-head);
  border-bottom: 1px solid var(--pd-line);
  border-left: 1px solid var(--pd-line-soft);
}
.pd-day b {
  display: block;
  font-size: 12px;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
  font-weight: 600;
}
.pd-day span {
  display: block;
  font-size: 15px;
  color: var(--pd-fg);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.pd-crew-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: var(--cols);
  border-bottom: 1px solid var(--pd-line-soft);
}
.pd-crew {
  padding: 10px 12px;
  background: var(--pd-head);
}
.pd-crew b {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.pd-crew span {
  display: block;
  font-size: 13px;
  color: var(--pd-fg-3);
  margin-top: 2px;
}
.pd-slot {
  padding: 6px;
  border-left: 1px solid var(--pd-line-soft);
  min-height: 70px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pd-shift {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: var(--pd-card);
  border: 1px solid var(--pd-line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 6px;
  color: var(--pd-fg);
}
.pd-shift:hover {
  border-color: var(--pd-fg-3);
}
.pd-shift.is-ok {
  border-left-color: var(--pd-ok-fg);
}
.pd-shift.is-warn {
  border-left-color: var(--pd-warn-fg);
}
.pd-shift.is-bad {
  border-left-color: var(--pd-bad-fg);
}
.pd-shift-lot {
  font-family: var(--pd-mono);
  font-size: 14px;
  font-weight: 500;
}
.pd-shift-spec {
  font-size: 14px;
  color: var(--pd-fg-2);
  line-height: 1.3;
  margin-top: 1px;
}
.pd-shift-del {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.pd-shift-del i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pd-shift-del span {
  font-size: 12px;
  letter-spacing: .01em;
}
.pd-shift-sup {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--pd-line-soft);
}
.pd-shift-sup b {
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--pd-fg-3);
  font-weight: 600;
}
.pd-shift-sup span {
  font-size: 12px;
  color: var(--pd-fg-2);
}
.pd-legend {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  background: var(--pd-card);
}
.pd-legend div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.pd-legend span {
  font-size: 13px;
  color: var(--pd-fg-2);
}
.pd-states {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.pd-state {
  width: 104px;
  flex: 0 0 auto;
}
.pd-state-top {
  display: flex;
  align-items: center;
}
.pd-state-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--pd-card);
  border: 2px solid var(--pd-line);
}
.pd-state-line {
  flex: 1;
  height: 1.5px;
  background: var(--pd-line-soft);
}
.pd-state.is-done .pd-state-dot {
  background: var(--pd-ok-fg);
  border-color: var(--pd-ok-edge);
}
.pd-state.is-done .pd-state-line {
  background: var(--pd-ok-edge);
}
.pd-state.is-exception .pd-state-dot {
  background: var(--pd-warn-fg);
  border-color: var(--pd-warn-edge);
}
.pd-state.is-exception .pd-state-line {
  background: var(--pd-ok-edge);
}
.pd-state-l {
  font-size: 12px;
  letter-spacing: .02em;
  font-weight: 500;
  color: var(--pd-fg-3);
  margin-top: 6px;
  line-height: 1.4;
}
.pd-state.is-done .pd-state-l {
  color: var(--pd-fg);
}
.pd-state.is-exception .pd-state-l {
  color: var(--pd-warn-fg);
}
.pd-state-w {
  font-size: 12px;
  color: var(--pd-fg-3);
  margin-top: 2px;
}
.pd-total {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--pd-line);
  background: var(--pd-head);
}
.pd-total > .grow {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  color: var(--pd-fg-3);
  line-height: 1.7;
}
.pd-figure-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
}
.pd-figure-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 26px;
}
.pd-figure-v.is-sm {
  font-size: 22px;
}
.pd-figure-v.is-md {
  font-size: 18px;
}
.pd-spine {
  display: grid;
  grid-template-columns: 18px minmax(190px, 1fr) minmax(0, 96px) minmax(0, 104px);
  gap: 10px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pd-line-soft);
  padding: 10px 14px;
  font-family: inherit;
  color: var(--pd-fg);
}
button.pd-spine {
  cursor: pointer;
}
button.pd-spine:hover {
  background: var(--pd-hover-blue);
}
.pd-spine-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pd-card);
  border: 2px solid var(--pd-line);
  margin-top: 2px;
}
.pd-spine.is-ok .pd-spine-dot {
  background: var(--pd-ok-fg);
  border-color: var(--pd-ok-edge);
}
.pd-spine.is-warn .pd-spine-dot {
  background: var(--pd-warn-fg);
  border-color: var(--pd-warn-edge);
}
.pd-spine.is-bad .pd-spine-dot {
  background: var(--pd-bad-fg);
  border-color: var(--pd-bad-edge);
}
.pd-spine-a {
  display: block;
  font-size: 16px;
}
.pd-spine.is-loud .pd-spine-a {
  font-weight: 600;
}
.pd-spine-b {
  display: block;
  font-size: 15px;
  color: var(--pd-fg-3);
  line-height: 1.45;
  margin-top: 2px;
}
.pd-spine-w {
  font-size: 14px;
  color: var(--pd-fg-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .pd-spine {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
  }
  .pd-spine > :nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .pd-spine > :nth-child(2) {
    grid-column: 2 / -1;
    grid-row: 1;
  }
  .pd-spine > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  .pd-spine > :nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }
}
.pd-margin {
  padding: 10px 14px;
  border-top: 1px solid var(--pd-line);
  background: var(--pd-head);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pd input,
.pd select,
.pd textarea {
  border-color: var(--pd-line-strong);
  font-size: 16px;
}
.pd ::placeholder {
  color: var(--pd-fg-4);
  opacity: 1;
}
.pd-in-qty {
  width: 62px;
  padding: 2px 4px;
  text-align: right;
  font-family: var(--pd-mono);
  font-size: 14px;
}
.pd-in-figure {
  width: 100%;
  padding: 6px 8px;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pd-in-copy {
  width: 100%;
  padding: 8px 8px;
  font-family: var(--pd-mono);
  font-size: 16px;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pd-sim {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--pd-line);
  background: var(--pd-head);
}
.pd-sim > .pd-figure-k {
  flex: 1;
  min-width: 220px;
}
.pd-add {
  border: 1px solid var(--line-strong);
  background: var(--pd-head);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.pd-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  margin: 10px 0 12px;
}
.pd-intake {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap: 10px 14px;
  padding: 14px 16px;
  align-items: end;
}
.pd-intake .field {
  margin: 0;
}
.pd-intake input,
.pd-intake select {
  width: 100%;
}
.pd-intake-2 {
  grid-column: span 2;
}
.pd-intake-act {
  grid-column: 1 / -1;
  margin-top: 2px;
}
@media (max-width: 720px) {
  .pd-intake {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-intake-2 {
    grid-column: auto;
  }
}
.pd-add .field {
  display: block;
  font-family: var(--pd-sans);
}
.pd-add .field > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
  margin-bottom: 4px;
}
.pd-add .field .req {
  color: var(--pd-bad-fg);
  display: inline;
}
.pd-add input:not([type=file]),
.pd-add select,
.pd-add textarea {
  width: 100%;
  font-family: var(--pd-sans);
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pd-add input[type=file] {
  max-width: 100%;
  font-family: var(--pd-sans);
  font-size: 16px;
  padding: 6px 0;
  color: var(--pd-fg);
}
.pd-add input:focus,
.pd-add select:focus,
.pd-add textarea:focus {
  border-color: var(--pd-blu-fg);
}
.pd-add input:focus-visible,
.pd-add select:focus-visible,
.pd-add textarea:focus-visible {
  outline: 2px solid var(--pd-blu-fg);
  outline-offset: 1px;
}
.pd-add .hint {
  font-size: 12px;
  color: var(--pd-fg-3);
  margin-top: 4px;
}
.pd-add .field-err {
  font-size: 12px;
  color: var(--pd-bad-fg);
  margin-top: 4px;
}
.pd-add-actions {
  display: flex;
  gap: 6px;
}
.pd-jur-lic {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-jur-up {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pd-line);
}
.pd-jur-up-r {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pd-jur-up-r input[type=text] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--pd-sans);
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius-sm);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pd-jur-up-r input[type=file] {
  font-family: var(--pd-sans);
  font-size: 13px;
}
.cmp-coi-face {
  position: relative;
  flex: 0 1 380px;
  min-width: 220px;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.cmp-coi-face img {
  display: block;
  width: 100%;
  height: auto;
}
.cmp-coi-box {
  position: absolute;
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
  border-radius: var(--radius-sm);
}
.pd-quote {
  margin-top: 6px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--pd-line-strong);
  font-family: var(--pd-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pd-fg-3);
  white-space: pre;
  overflow-x: auto;
}
.pd-mail {
  border: 1px solid var(--line-strong);
  background: var(--pd-head);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.pd-mail-shut {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pd-mail-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pd-mail-form input {
  font-family: var(--pd-mono);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pd-mail-body {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--pd-mono);
  font-size: 13px;
  line-height: 1.55;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
  resize: vertical;
}
.pd-mail-body:focus-visible,
.pd-mail-form input:focus-visible {
  outline: 2px solid var(--pd-blu-fg);
  outline-offset: 1px;
}
.pd-mail-off {
  color: var(--pd-warn-fg);
}
.pd-mail-card {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
}
.pd-mail-rows {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.pd-mail-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-top: 1px solid var(--pd-neu-bg);
}
.pd-mail-row.is-off {
  background: var(--pd-wash-warn);
}
.pd-mail-row.is-off .pd-mail-tick {
  opacity: 0.35;
}
.pd-mail-tick {
  flex: 0 0 20px;
  padding-top: 2px;
}
.pd-mail-lot {
  flex: 0 0 80px;
  font-family: var(--pd-mono);
  font-size: 14px;
  font-weight: 600;
}
.pd-mail-what {
  flex: 1;
  min-width: 180px;
  line-height: 1.5;
}
.pd-mail-why {
  color: var(--pd-warn-fg);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 2px;
}
.pd-mail-refused {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--pd-bad-edge);
  border-radius: var(--radius);
  background: var(--pd-wash-bad);
}
.pd-mail-refusal {
  margin-top: 6px;
  line-height: 1.5;
}
.pd-mail-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
@media print {
  .pd {
    --bg: #ffffff;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --fg: #12161c;
    --dim: #5a6473;
    --line: #dfe3e9;
    --line-bright: #c6ccd6;
    --line-strong: #8b939f;
    --ok: #17663c;
    --warn: #8a6100;
    --bad: #b3261e;
    --vio: #6b3fa0;
    --accent: #1668c4;
    background: none;
    font-size: 12pt;
  }
  .pd-crumb,
  .pd-btn,
  .pd-add,
  .pd-tabs {
    display: none !important;
  }
  .pd-table {
    overflow: visible;
    break-inside: auto;
  }
  .pd-th,
  .pd-tr,
  .pd-tf {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pd-card,
  .pd-banner,
  .pd-kv,
  .pd-legend {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pd-pill,
  .pd-tr.is-flagged,
  .pd-tr.is-fire,
  .pd-tr.is-watch,
  .pd-claim {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* src/web/styles/field.css */
.fd-page {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 22px;
  padding: 22px 18px 60px;
  align-items: flex-start;
  min-width: 0;
  background: var(--pd-hover);
  min-height: 100%;
  font-family: var(--pd-sans);
}
.fd-aside {
  flex: 0 1 246px;
  min-width: 230px;
}
.fd-who {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
  margin-bottom: 8px;
}
.fd-title {
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--pd-fg);
}
.fd-note {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--pd-fg-2);
  line-height: 1.6;
}
.fd-screen .fd-note {
  color: var(--fd-fg-3);
}
.fd-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fd-step {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  font-family: inherit;
  color: var(--pd-fg-2);
}
.fd-step:hover {
  border-color: var(--pd-fg-3);
}
.fd-step.on {
  background: var(--pd-card);
  border-color: var(--pd-fg);
  color: var(--pd-fg);
  font-weight: 600;
}
.fd-step b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  width: 14px;
  color: var(--pd-fg-3);
  font-weight: 400;
}
.fd-step.on b {
  color: var(--pd-blu-fg);
}
.fd-step span {
  font-size: 16px;
}
.fd-aside-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pd-line);
}
.fd-aside-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--pd-fg-3);
  margin-bottom: 6px;
}
.fd-aside-p {
  font-size: 12px;
  color: var(--pd-fg-3);
  line-height: 1.65;
  margin-top: 8px;
}
.fd-frame {
  flex: 0 0 376px;
  max-width: 100%;
}
.fd-bezel {
  background: var(--fd-bezel);
  border-radius: 36px;
  padding: 8px;
  box-shadow: 0 20px 44px rgba(25, 28, 35, .22);
}
.fd-screen {
  background: var(--fd-bg);
  border-radius: 28px;
  overflow: hidden;
  height: 748px;
  display: flex;
  flex-direction: column;
  color: var(--fd-fg-2);
}
.fd-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 6px;
  font-size: 13px;
  color: var(--fd-fg-2);
}
.fd-status-r {
  display: flex;
  gap: 6px;
  align-items: center;
}
.fd-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--fd-bad-bg);
  color: var(--fd-bad);
}
.fd-pill.on {
  background: var(--fd-ok-bg);
  color: var(--fd-ok);
}
.fd-batt {
  width: 15px;
  height: 8px;
  border: 1px solid var(--fd-fg-4);
  border-radius: var(--radius-xs);
  display: inline-block;
  position: relative;
}
.fd-batt i {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 9px;
  background: var(--fd-ok);
}
.fd-sync {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 8px;
  border-bottom: 1px solid var(--fd-card-2);
  color: var(--fd-bad);
}
.fd-sync.on {
  color: var(--fd-ok);
}
.fd-sync i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.fd-sync span {
  font-size: 12px;
  line-height: 1.4;
}
.fd-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 18px;
}
.fd-head {
  padding: 12px 18px 0;
}
.fd-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-fg-4);
}
.fd-day {
  font-size: 28px;
  font-weight: 600;
  color: var(--fd-fg);
  letter-spacing: -.02em;
  margin-top: 4px;
}
.fd-big {
  font-size: 24px;
  font-weight: 600;
  color: var(--fd-fg);
  margin-top: 10px;
  letter-spacing: -.015em;
}
.fd-big-sm {
  margin-top: 6px;
}
.fd-h2 {
  font-size: 26px;
  font-weight: 600;
  color: var(--fd-fg);
  margin-top: 10px;
  letter-spacing: -.015em;
}
.fd-line {
  font-size: 20px;
  color: var(--fd-fg-2);
  margin-top: 4px;
}
.fd-line-sm {
  font-size: 18px;
  color: var(--fd-fg-2);
  margin-top: 2px;
}
.fd-meta {
  font-size: 14px;
  color: var(--fd-fg-4);
  margin-top: 4px;
}
.fd-lede {
  font-size: 16px;
  color: var(--fd-fg-3);
  margin-top: 4px;
  line-height: 1.45;
}
.fd-back {
  background: none;
  border: 0;
  color: var(--fd-fg-4);
  font-size: 13px;
  letter-spacing: .03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 14px 8px;
  margin: -14px -8px;
}
.fd-chips {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.fd-chip {
  font-size: 12px;
  letter-spacing: .02em;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--fd-card-2);
  color: var(--fd-fg-3);
}
.fd-chip.is-bad {
  background: var(--fd-bad-bg);
  color: var(--fd-bad);
}
.fd-sect {
  padding: 16px 14px 0;
}
.fd-sect-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-fg-4);
  margin-bottom: 8px;
}
.fd-sect-h.is-warn {
  color: var(--fd-warn);
}
.fd-lots {
  padding: 16px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fd-lot {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: var(--fd-card);
  border: 1px solid var(--fd-line);
  border-left: 4px solid var(--fd-ok);
  border-radius: var(--radius);
  padding: 14px;
}
.fd-lot.is-bad {
  border-left-color: var(--fd-bad);
}
.fd-lot:hover {
  background: var(--fd-hover);
}
.fd-lot-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.fd-lot-n {
  font-family: var(--pd-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--fd-fg);
  letter-spacing: .02em;
}
.fd-lot-sq {
  font-family: var(--pd-mono);
  font-size: 14px;
  color: var(--fd-fg-4);
}
.fd-lot-addr {
  display: block;
  font-size: 18px;
  color: var(--fd-fg-2);
  margin-top: 6px;
  line-height: 1.35;
}
.fd-lot-spec {
  display: block;
  font-size: 14px;
  color: var(--fd-fg-4);
  margin-top: 4px;
}
.fd-lot-del {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fd-line);
  color: var(--fd-ok);
}
.fd-lot.is-bad .fd-lot-del {
  color: var(--fd-bad);
}
.fd-lot-del i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.fd-lot-del span {
  font-size: 16px;
  line-height: 1.35;
}
.fd-callout {
  padding: 12px 14px;
  background: var(--fd-card-2);
  border-radius: var(--radius);
  border-left: 4px solid var(--fd-warn);
}
.fd-callout.is-blue {
  border-left-color: var(--fd-accent);
}
.fd-callout.is-ok {
  background: var(--fd-ok-bg);
  border-left: 0;
}
.fd-callout-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-warn);
}
.fd-callout.is-blue .fd-callout-h {
  color: var(--fd-accent);
}
.fd-callout.is-ok .fd-callout-h {
  color: var(--fd-ok);
}
.fd-callout-t {
  font-size: 16px;
  color: var(--fd-fg-2);
  line-height: 1.45;
  margin-top: 4px;
}
.fd-callout-s {
  font-size: 16px;
  color: var(--fd-fg-4);
  line-height: 1.45;
  margin-top: 6px;
}
.fd-alarm {
  margin-top: 10px;
  padding: 12px 12px;
  background: var(--fd-alarm-bg);
  border: 1px solid var(--fd-alarm-edge);
  border-radius: var(--radius);
}
.fd-alarm-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-bad);
}
.fd-alarm-t {
  font-size: 16px;
  color: var(--fd-fg-2);
  line-height: 1.45;
  margin-top: 4px;
}
.fd-mat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--fd-line);
  color: var(--fd-ok);
}
.fd-mat.is-bad {
  color: var(--fd-bad);
}
.fd-mat i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.fd-mat b {
  flex: 1;
  font-size: 18px;
  color: var(--fd-fg-2);
  line-height: 1.3;
  font-weight: 400;
}
.fd-mat span {
  font-family: var(--pd-mono);
  font-size: 15px;
  white-space: nowrap;
}
.fd-check {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--fd-line);
  padding: 14px 2px;
  cursor: pointer;
  font-family: inherit;
}
.fd-box {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--fd-line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--fd-ink);
  font-size: 16px;
  background: transparent;
}
.fd-box.on {
  border-color: var(--fd-ok);
  background: var(--fd-ok);
}
.fd-check span {
  font-size: 18px;
  color: var(--fd-fg-3);
  line-height: 1.35;
}
.fd-check .on ~ span {
  color: var(--fd-fg-2);
}
.fd-task {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--fd-card);
  border: 1px solid var(--fd-line);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  font-family: inherit;
}
.fd-task:hover {
  border-color: var(--fd-line-2);
}
.fd-task .fd-box {
  width: 26px;
  height: 26px;
  font-size: 18px;
}
.fd-task-b {
  flex: 1;
  min-width: 0;
}
.fd-task-q {
  display: block;
  font-size: 18px;
  color: var(--fd-fg-3);
  line-height: 1.3;
}
.fd-task.on .fd-task-q {
  color: var(--fd-fg-2);
}
.fd-task-h {
  display: block;
  font-size: 16px;
  color: var(--fd-fg-4);
  line-height: 1.4;
  margin-top: 4px;
}
.fd-task-o {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--fd-fg-4);
  margin-top: 6px;
}
.fd-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fd-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
  border: 1px dashed var(--fd-fg-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px;
  font-family: inherit;
  overflow: hidden;
}
.fd-shot.on {
  border-style: solid;
  border-color: var(--fd-line-2);
  background:
    repeating-linear-gradient(
      135deg,
      var(--fd-hatch-a) 0 5px,
      var(--fd-hatch-b) 5px 10px);
}
.fd-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fd-shot span {
  position: relative;
  font-family: var(--pd-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--fd-fg-4);
  text-align: left;
  line-height: 1.3;
}
.fd-shot.on span {
  color: var(--fd-fg-3);
}
.fd-shots.is-square .fd-shot {
  aspect-ratio: 1;
  border-width: 2px;
  justify-content: space-between;
  padding: 10px;
  border-radius: var(--radius-sm);
}
.fd-shots.is-square .fd-shot span {
  font-size: 12px;
  line-height: 1.35;
}
.fd-shot-mark {
  font-size: 24px;
  line-height: 1;
  color: var(--fd-fg-4);
}
.fd-shot.on .fd-shot-mark {
  color: var(--fd-fg-3);
}
.fd-cta {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  padding: 16px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--fd-accent);
  border: 0;
  color: var(--fd-ink);
  font-family: inherit;
  justify-content: center;
  text-align: center;
}
.fd-cta.is-done {
  background: var(--fd-ok);
}
.fd-cta.is-warn {
  background: var(--fd-bad);
}
.fd-cta:disabled,
.fd-raise .fd-cta:disabled {
  background: var(--fd-card-2);
  border: 1px solid var(--fd-fg-4);
  color: var(--fd-fg-4);
  cursor: not-allowed;
  opacity: 1;
}
.fd-cta-note {
  font-size: 12px;
  color: var(--fd-fg-4);
  text-align: center;
  margin-top: 10px;
  line-height: 1.6;
}
.fd-cta-note.is-why {
  color: var(--fd-bad);
}
.fd-btn2 {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fd-btn2 button,
.fd-alt {
  flex: 1;
  font-size: 18px;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--fd-card-2);
  border: 1px solid var(--fd-line-2);
  color: var(--fd-fg-2);
  font-family: inherit;
  justify-content: center;
  text-align: center;
}
.fd-alt {
  width: 100%;
  font-size: 16px;
  padding: 14px 12px;
  margin-top: 10px;
  color: var(--fd-fg-2);
  font-weight: 500;
}
a.fd-alt {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}
.fd-modes {
  padding: 14px 14px 0;
  display: flex;
  gap: 8px;
}
.fd-mode {
  flex: 1;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 44px;
  background: var(--fd-card-2);
  border: 1px solid var(--fd-line-2);
  font-family: inherit;
  color: var(--fd-fg-3);
}
.fd-mode.on {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: var(--fd-ink);
}
.fd-mode b {
  display: block;
  font-size: 13px;
  letter-spacing: .03em;
  font-weight: 600;
}
.fd-mode span {
  display: block;
  font-size: 12px;
  letter-spacing: .01em;
  opacity: .7;
  margin-top: 2px;
}
.fd-count {
  padding: 14px 0;
  border-top: 1px solid var(--fd-line);
}
.fd-count-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.fd-count-top b {
  font-size: 18px;
  color: var(--fd-fg-2);
  line-height: 1.3;
  flex: 1;
  font-weight: 400;
}
.fd-count-top span {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--fd-fg-4);
  white-space: nowrap;
}
.fd-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.fd-step-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--fd-card-2);
  border: 1px solid var(--fd-line-2);
  color: var(--fd-fg-2);
  font-size: 22px;
  cursor: pointer;
  font-family: inherit;
}
.fd-damaged {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.fd-damaged > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-fg-3);
}
.fd-damaged .fd-count-row {
  flex: 0 0 auto;
  gap: 6px;
}
.fd-step-btn.is-sm {
  font-size: 20px;
}
.fd-step-btn:disabled {
  background: var(--fd-card);
  border-color: var(--fd-line);
  color: var(--fd-fg-4);
  cursor: not-allowed;
  opacity: 1;
}
.fd-count-v {
  min-width: 116px;
  text-align: center;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--fd-ok);
}
.fd-count-v.is-short {
  color: var(--fd-bad);
}
.fd-count-v.is-sm {
  min-width: 96px;
  font-size: 18px;
  color: var(--fd-fg-2);
}
.fd-count-v.is-sm.is-broken {
  color: var(--fd-bad);
}
.fd-step-v {
  flex: 1;
  text-align: center;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.fd-short {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--fd-bad-bg);
  border-radius: var(--radius-sm);
}
.fd-short-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-bad);
}
.fd-short .fd-shots {
  margin-top: 8px;
}
.fd-short .fd-shot {
  border-color: var(--fd-bad-edge);
  color: var(--fd-bad);
}
.fd-short .fd-shot.on {
  background:
    repeating-linear-gradient(
      135deg,
      var(--fd-hatch-bad-a) 0 5px,
      var(--fd-hatch-bad-b) 5px 10px);
}
.fd-short .fd-shot span {
  color: var(--fd-bad);
}
.fd-pod {
  background: var(--fd-card);
  border: 1px solid var(--fd-line);
  border-radius: var(--radius);
  padding: 14px;
}
.fd-pod-input {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: var(--fd-fg-2);
  font-family: inherit;
  font-size: 16px;
}
.fd-pod-input::placeholder {
  color: var(--fd-fg-3);
}
.fd-pod-input:focus {
  color: var(--fd-fg);
}
.fd-pod-input:focus-visible {
  outline: 2px solid var(--fd-accent);
  outline-offset: 2px;
}
.fd-pod-name {
  font-size: 16px;
  color: var(--fd-fg-2);
}
.fd-pod-proof {
  margin-top: 14px;
}
.fd-pod-proof .fd-shot {
  aspect-ratio: 16 / 7;
  cursor: default;
}
.fd-pod-none {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fd-fg-3);
  border-top: 1px solid var(--fd-line-2);
  padding-top: 12px;
}
.fd-pod-when {
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--fd-fg-4);
  margin-top: 6px;
}
.fd-shot.is-onphone {
  border-style: dashed;
  border-color: var(--fd-warn);
}
.fd-shot.is-onphone span {
  color: var(--fd-warn);
}
.fd-raise {
  border-radius: var(--radius);
  padding: 14px;
  border: 1px dashed var(--fd-warn);
  background: var(--fd-card);
}
.fd-raise .fd-sect-h {
  margin-bottom: 12px;
}
.fd-raise-l {
  display: block;
  font-size: 15px;
  color: var(--fd-fg-3);
  margin-top: 12px;
  line-height: 1.35;
}
.fd-raise-sel,
.fd-raise-in {
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--fd-card-2);
  border: 1px solid var(--fd-line-2);
  color: var(--fd-fg-2);
  font-family: inherit;
  font-size: 16px;
}
.fd-raise-in::placeholder {
  color: var(--fd-fg-4);
}
.fd-raise-sel:focus-visible,
.fd-raise-in:focus-visible {
  outline: 2px solid var(--fd-accent);
  outline-offset: 2px;
}
.fd-raise .fd-cta {
  margin-top: 14px;
}
.fd-raise .fd-gate-note {
  margin-top: 12px;
}
.fd-gate {
  border-radius: var(--radius);
  padding: 14px;
  border: 2px solid var(--fd-alarm-edge);
  background: var(--fd-bad-bg);
}
.fd-gate.on {
  border-color: var(--fd-ok-edge);
  background: var(--fd-ok-bg);
}
.fd-gate-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-bad);
}
.fd-gate.on .fd-gate-h {
  color: var(--fd-ok);
}
.fd-gate-t {
  font-size: 20px;
  color: var(--fd-fg);
  line-height: 1.35;
  margin-top: 6px;
}
.fd-gate-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.fd-gate-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.fd-gate-row b {
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--fd-fg-3);
  flex: 0 0 104px;
  line-height: 1.4;
  font-weight: 400;
}
.fd-gate-row span {
  flex: 1;
  font-size: 16px;
  color: var(--fd-fg-2);
  line-height: 1.4;
}
.fd-gate .fd-cta {
  margin-top: 14px;
  font-size: 18px;
  padding: 16px 12px;
  background: var(--fd-bad);
}
.fd-gate .fd-alt {
  margin-top: 8px;
  font-size: 18px;
  padding: 16px 12px;
}
.fd-gate.on .fd-cta,
.fd-gate .fd-cta.is-done {
  background: var(--fd-ok);
}
.fd-gate.on .fd-cta {
  background: var(--fd-ok);
}
.fd-gate-note {
  font-size: 16px;
  color: var(--fd-fg-3);
  line-height: 1.5;
  margin-top: 10px;
}
.fd-queue {
  margin-top: 14px;
  padding: 12px 12px;
  background: var(--fd-card);
  border: 1px solid var(--fd-line);
  border-radius: var(--radius);
}
.fd-queue-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-bad);
  margin-bottom: 8px;
}
.fd-queue-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}
.fd-queue-row b {
  font-size: 16px;
  color: var(--fd-fg-3);
  line-height: 1.4;
  font-weight: 400;
}
.fd-queue-row span {
  font-size: 13px;
  color: var(--fd-fg-4);
  white-space: nowrap;
}
.fd-queue-note {
  font-size: 15px;
  color: var(--fd-fg-4);
  line-height: 1.5;
  margin-top: 8px;
}
.fd-plan {
  margin: 14px 14px 0;
  background: var(--fd-paper);
  border-radius: var(--radius);
  padding: 10px;
}
.fd-plan svg {
  display: block;
  width: 100%;
}
.fd-plan-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.fd-plan-foot span {
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--fd-paper-fg);
}
.fd-plan-foot span:last-child {
  color: var(--fd-paper-link);
}
.fd-plan-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-paper-fg);
  margin-bottom: 6px;
}
.fd-plan .siteplan p {
  font-size: 13px;
  color: var(--fd-paper-fg);
  line-height: 1.45;
  margin: 6px 0 0;
}
@media (max-width: 900px) {
  .fd-page {
    padding: 0;
    gap: 0;
    background: var(--fd-bg);
  }
  .fd-aside {
    display: none;
  }
  .fd-frame {
    flex: 1 1 100%;
    width: 100%;
  }
  .fd-bezel {
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: var(--fd-bg);
  }
  .fd-screen {
    border-radius: 0;
    height: auto;
    min-height: 100dvh;
  }
}
.app.route-field main {
  padding: 0;
  max-width: none;
}
@media (max-width: 900px) {
  .app.route-field {
    --topbar-h: 44px ;
  }
  .route-field .topbar nav,
  .route-field .whoami {
    display: none;
  }
}

/* src/web/styles/help.css */
:root {
  --map-estimator: #6B3FA0;
  --map-rep: #2F5FD0;
  --map-purchasing: #A8681A;
  --map-production: #1F6A4B;
  --map-warehouse: #A8481A;
  --map-foreman: #4B5361;
  --map-service: #1F6172;
}
:root[data-theme=dark] {
  --map-estimator: #B79AE0;
  --map-rep: #7FA6F5;
  --map-purchasing: #DCA85E;
  --map-production: #64C398;
  --map-warehouse: #E39469;
  --map-foreman: #9AA2B0;
  --map-service: #6BB6C8;
}
.help-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
}
.help-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-pill);
  background: var(--pd-card);
  color: var(--pd-fg-2);
  cursor: pointer;
  transition:
    border-color .12s,
    color .12s,
    background .12s;
}
.help-role:hover {
  border-color: var(--pd-fg-4);
  color: var(--pd-fg);
}
.help-role[aria-pressed=true] {
  background: var(--pd-ink);
  border-color: var(--pd-ink);
  color: var(--pd-ink-fg);
}
.help-role .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.help-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) 168px minmax(230px, .82fr);
  gap: 0;
  align-items: start;
}
@media (max-width: 900px) {
  .help-board {
    grid-template-columns: 1fr;
  }
  .help-board .help-gutter {
    display: none;
  }
  .help-wires {
    display: none;
  }
  .help-flows,
  .help-screens {
    max-height: none;
    overflow-y: visible;
  }
}
.help-gutter {
  min-height: 1px;
}
.help-wires {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.help-wire {
  fill: none;
  stroke: var(--pd-vio-fg);
  stroke-width: 1.6;
  opacity: .85;
}
.help-wire.is-seam {
  stroke: var(--pd-bad-fg);
  stroke-dasharray: 4 3;
}
.help-col-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pd-fg-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pd-line);
  margin-bottom: 10px;
  min-height: 27px;
}
.help-toggle {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-pill);
  background: var(--pd-card);
  color: var(--pd-fg-3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color .12s,
    color .12s,
    background .12s;
}
.help-toggle:hover {
  border-color: var(--pd-fg-4);
  color: var(--pd-fg);
}
.help-toggle.is-on {
  background: var(--pd-vio-bg);
  border-color: var(--pd-vio-edge);
  color: var(--pd-vio-fg);
}
.help-flows {
  display: grid;
  gap: 6px;
  position: relative;
  z-index: 2;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
}
.help-flow {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--pd-card);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition:
    border-color .12s,
    box-shadow .12s,
    transform .12s;
}
.help-flow:hover {
  border-color: var(--pd-fg-4);
}
.help-flow.is-on {
  border-color: var(--pd-vio-fg);
  box-shadow: 0 0 0 1px var(--pd-vio-fg);
}
.help-flow.is-dim {
  opacity: .38;
}
.help-flow-t {
  font-size: 16px;
  font-weight: 600;
  color: var(--pd-fg);
  line-height: 1.35;
  margin-bottom: 2px;
}
.help-flow-p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pd-fg-3);
  margin-bottom: 8px;
}
.help-flow-f {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.help-dots {
  display: flex;
  gap: 4px;
}
.help-dot {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--pd-ink-fg);
}
.help-nostaff {
  font-size: 12px;
  font-weight: 600;
  color: var(--pd-fg-4);
}
.help-chain {
  font-size: 12px;
  font-weight: 600;
  color: var(--pd-fg-3);
  margin-left: auto;
}
.help-screens {
  display: grid;
  gap: 2px;
  position: relative;
  z-index: 2;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--pd-line) transparent;
}
.help-flows::-webkit-scrollbar,
.help-screens::-webkit-scrollbar,
.help-aside::-webkit-scrollbar {
  width: 8px;
}
.help-flows::-webkit-scrollbar-track,
.help-screens::-webkit-scrollbar-track,
.help-aside::-webkit-scrollbar-track {
  background: transparent;
}
.help-flows::-webkit-scrollbar-thumb,
.help-screens::-webkit-scrollbar-thumb,
.help-aside::-webkit-scrollbar-thumb {
  background: var(--pd-line);
  border-radius: var(--radius-pill);
}
.help-flows::-webkit-scrollbar-thumb:hover,
.help-screens::-webkit-scrollbar-thumb:hover,
.help-aside::-webkit-scrollbar-thumb:hover {
  background: var(--pd-fg-4);
}
.help-screen {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--pd-fg-3);
  background: var(--pd-card);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  transition:
    border-color .12s,
    color .12s,
    background .12s;
  overflow-wrap: break-word;
}
.help-screen.is-on {
  border-color: var(--pd-vio-edge);
  background: var(--pd-vio-bg);
  color: var(--pd-vio-fg);
}
.help-screen.is-orphan {
  color: var(--pd-fg-4);
}
.help-step-n {
  font-size: 12px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--pd-vio-fg);
  color: var(--pd-ink-fg);
  visibility: hidden;
}
.help-screen.is-on .help-step-n {
  visibility: visible;
}
.help-screen .grow {
  flex: 1;
}
.help-screen .tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--pd-fg-4);
  flex: none;
}
.help-steps {
  margin-top: 20px;
}
.help-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--pd-line-soft);
}
.help-step:first-child {
  border-top: none;
}
.help-step-i {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pd-fg-4);
  padding-top: 2px;
}
.help-step-where {
  font-family: var(--pd-mono);
  font-size: 14px;
  color: var(--pd-vio-fg);
  margin-bottom: 4px;
  word-break: break-all;
}
.help-step-does {
  font-size: 16px;
  line-height: 1.55;
  color: var(--pd-fg);
}
.help-step-writes {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pd-fg-3);
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--pd-line);
}
.help-step-seam {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pd-bad-fg);
  background: var(--pd-bad-bg);
  border-left: 2px solid var(--pd-bad-fg);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  margin-top: 6px;
  padding: 8px 10px;
}
.help-empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 16px;
  color: var(--pd-fg-3);
}
.help-gaps {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}
.help-gap {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 16px;
  color: var(--pd-fg-2);
  line-height: 1.5;
}
.help-gap code {
  font-family: var(--pd-mono);
  font-size: 14px;
  color: var(--pd-fg);
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .help-flow,
  .help-screen,
  .help-role {
    transition: none;
  }
}
.help-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}
.help-aside {
  scrollbar-width: thin;
  scrollbar-color: var(--pd-line) transparent;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
@media (max-width: 1180px) {
  .help-frame {
    grid-template-columns: minmax(0, 1fr);
  }
  .help-aside {
    position: static;
    max-height: none;
  }
}
.help-col {
  min-width: 0;
}
.help-caveat {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pd-fg-3);
  margin: -8px 0 18px;
  max-width: 68ch;
}
.help-area {
  font-size: 12px;
  font-weight: 600;
  color: var(--pd-fg-4);
  padding: 12px 0 4px 8px;
}
.help-area:first-child {
  padding-top: 0;
}
.help-screen-l {
  display: block;
  font-size: 15px;
  color: inherit;
}
.help-screen-p {
  display: block;
  font-family: var(--pd-mono);
  font-size: 13px;
  color: var(--pd-fg-4);
  margin-top: 1px;
  word-break: break-all;
}
.help-screen .tag.is-field {
  color: var(--pd-bad-fg);
}
.help-screen .tag.is-public {
  color: var(--pd-vio-fg);
}
.help-screen .tag.is-hot {
  color: var(--pd-fg-2);
  font-weight: 600;
}
.help-flow.is-pinned {
  box-shadow: 0 0 0 2px var(--pd-vio-fg);
}
.help-pin {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 2px 8px;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-pill);
  background: var(--pd-card);
  color: var(--pd-fg-3);
  cursor: pointer;
}
.help-steps-h {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px 0;
}
@media (prefers-reduced-motion: no-preference) {
  .help-wire {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: help-draw .45s ease-out forwards;
  }
  @keyframes help-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
}
.help-board.is-narrow .help-screens {
  max-height: none;
  overflow-y: visible;
}
.help-board.is-narrow .help-flows {
  max-height: 470px;
}
@media (prefers-reduced-motion: reduce) {
  .help-toggle {
    transition: none;
  }
}
.tk-hint {
  position: fixed;
  z-index: 210;
  transform: translateX(-50%);
  width: 340px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.tk-hint-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tk-hint-head strong {
  font-size: 14px;
}
.tk-hint-body p {
  margin: 0 0 6px;
}
.tk-hint-body p:last-child {
  margin-bottom: 0;
}
.tk-hint-steps {
  margin: 0 0 8px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tk-hint-steps li {
  line-height: 1.45;
}
.tk-hint-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-tool-help {
  width: 460px;
}
.tk-tool-help-premise {
  margin: 0 0 10px;
}
.tk-layer-view-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg);
  background: var(--control);
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.tk-layer-view-note[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tk-hint {
    animation: tk-hint-in .16s ease-out;
  }
  @keyframes tk-hint-in {
    from {
      opacity: 0;
      transform: translate(-50%, -6px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}

/* src/web/styles/bid-sheet.css */
.bid-template details.bid-colours {
  margin-top: 10px;
}
.bid-template details.bid-colours > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--dim);
}
.bid-template details.bid-colours > summary:hover {
  color: var(--accent);
}
.bid-template details.bid-colours[open] > summary {
  margin-bottom: 6px;
}
.bid-sheet-total {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
tr.bid-todo td {
  background: var(--wash-warn);
}
td.bid-label {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src/web/styles/report.css */
.chrome-ctx a.rpt-link {
  color: var(--dim);
  white-space: nowrap;
}
.chrome-ctx a.rpt-link:hover {
  color: var(--fg);
  text-decoration: none;
}
.rpt {
  --rpt-paper: #ffffff;
  --rpt-ink: #101418;
  --rpt-ink-2: #37414f;
  --rpt-dim: #5a6473;
  --rpt-quiet: #6b7280;
  --rpt-rule: #e6e9ee;
  --rpt-rule-2: #c6ccd6;
  --rpt-wash: #f4f6f8;
  --rpt-edge: #b9c6d4;
  --rpt-edge-soft: #d8dde4;
  --rpt-tag-ink: #37556f;
  --rpt-warn-wash: #fdf4e2;
  --rpt-warn-edge: #e0b96a;
  --rpt-warn-ink: #5c4408;
  --rpt-ok-wash: #eef8f0;
  --rpt-ok-edge: #9ccfa6;
  --rpt-ok-ink: #1d5228;
  --rpt-info-wash: #f2f7fb;
  --rpt-plate: #fafbfc;
  background: var(--rpt-paper);
  color: var(--rpt-ink);
  color-scheme: light;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 34px;
  max-width: 8.5in;
  margin: 0 auto;
}
.rpt-section {
  margin-bottom: 30px;
}
.rpt-section:last-of-type {
  margin-bottom: 0;
}
.rpt-h {
  font-size: 13px;
  color: var(--rpt-dim);
  border-bottom: 1px solid var(--rpt-rule-2);
  padding-bottom: 4px;
  margin: 0 0 12px;
}
.rpt-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--rpt-dim);
}
.rpt-cover h1 {
  font-size: 26px;
  color: var(--rpt-ink);
  margin: 2px 0 4px;
  line-height: 1.2;
}
.rpt-sub {
  color: var(--rpt-dim);
  font-size: 14px;
}
.rpt-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.rpt-right {
  text-align: right;
  color: var(--rpt-dim);
  font-size: 13px;
  white-space: nowrap;
}
.rpt-review {
  margin: 16px 0 4px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  border: 1px solid var(--rpt-edge-soft);
  background: var(--rpt-wash);
  color: var(--rpt-ink-2);
}
.rpt-review.unreviewed {
  border-color: var(--rpt-warn-edge);
  background: var(--rpt-warn-wash);
  color: var(--rpt-warn-ink);
}
.rpt-review.reviewed {
  border-color: var(--rpt-ok-edge);
  background: var(--rpt-ok-wash);
  color: var(--rpt-ok-ink);
}
.rpt-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 18px 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rpt-rule);
  border-bottom: 1px solid var(--rpt-rule);
}
.rpt-figure-v {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.rpt-figure-l {
  font-size: 12px;
  color: var(--rpt-dim);
  margin-top: 2px;
}
.rpt-totals {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 28px;
  font-size: 14px;
}
.rpt-totals li {
  break-inside: avoid;
  padding: 2px 0;
}
.rpt-sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-xs);
  margin-right: 6px;
  border: 1px solid rgba(16, 20, 24, 0.35);
}
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.rpt-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rpt-dim);
  border-bottom: 1px solid var(--rpt-rule-2);
  padding: 4px 10px 4px 0;
  background: transparent;
}
.rpt-table td {
  border-bottom: 1px solid var(--rpt-rule);
  padding: 4px 10px 4px 0;
}
.rpt-table th.right,
.rpt-table td.right {
  text-align: right;
  padding-right: 0;
}
.rpt-table td.num {
  font-variant-numeric: tabular-nums;
}
.rpt-table tr.rpt-zero td {
  color: var(--rpt-quiet);
}
.rpt-table tr.rpt-suggested td {
  background: var(--rpt-info-wash);
}
.rpt-table tr.rpt-chosen td {
  background: var(--rpt-ok-wash);
  font-weight: 600;
}
.rpt-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rpt-edge);
  color: var(--rpt-tag-ink);
  margin-right: 4px;
}
.rpt-tag.chosen {
  border-color: var(--rpt-ok-edge);
  color: var(--rpt-ok-ink);
}
.rpt-tag.muted {
  border-color: var(--rpt-edge-soft);
  color: var(--rpt-quiet);
}
.rpt-absent {
  margin: 0;
  padding: 8px 0;
  color: var(--rpt-dim, var(--dim));
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}
.rpt-note {
  margin: 0 0 10px;
  color: var(--rpt-ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.rpt-plate {
  border: 1px dashed var(--rpt-rule-2);
  border-radius: var(--radius-sm);
  min-height: 2.6in;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--rpt-plate);
}
.rpt-plate .rpt-absent {
  max-width: 4.6in;
}
.rpt-plate.drawn {
  display: block;
  border-style: solid;
  background: var(--rpt-paper);
  padding: 10px 12px;
  min-height: 0;
}
.rpt-plate svg {
  display: block;
  width: 100%;
  height: auto;
}
.rpt-foot {
  margin-top: 26px;
  border-top: 1px solid var(--rpt-rule);
  padding-top: 8px;
  color: var(--rpt-dim);
  font-size: 13px;
  line-height: 1.6;
}
.rpt-foot b {
  color: var(--rpt-ink-2);
  font-weight: 600;
}
@media print {
  @page {
    margin: 0.55in;
  }
  .rpt {
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: none;
    font-size: 12pt;
    line-height: 1.45;
  }
  .rpt-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 24pt;
  }
  .rpt-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .rpt-table thead {
    display: table-header-group;
  }
  .rpt-page {
    break-before: page;
    page-break-before: always;
  }
  .rpt-plate {
    min-height: 6.2in;
  }
  .rpt-cover h1 {
    font-size: 22pt;
  }
  .rpt-h {
    font-size: 12pt;
  }
  .rpt-eyebrow,
  .rpt-figure-l,
  .rpt-table th {
    font-size: 12pt;
  }
  .rpt-sub,
  .rpt-right,
  .rpt-review,
  .rpt-totals,
  .rpt-table,
  .rpt-absent,
  .rpt-note,
  .rpt-foot {
    font-size: 12pt;
  }
  .rpt-tag {
    font-size: 12pt;
  }
  .rpt-figure-v {
    font-size: 18pt;
  }
  .rpt-review,
  .rpt-table tr.rpt-suggested td,
  .rpt-table tr.rpt-chosen td,
  .rpt-sw,
  .rpt-plate {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* src/web/styles/drafts.css */
.tk-notice-draft button {
  margin-left: auto;
  flex: none;
}

/* src/web/styles/overlay.css */
.ov-scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
}
.ov-scrim[hidden] {
  display: none;
}
.ov-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 560px;
  max-width: 100%;
  max-height: 100%;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.ov-card:focus {
  outline: none;
}
.ov-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.ov-title {
  font-size: 14px;
}
.ov-x {
  flex: none;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
}
.ov-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px 16px;
}
.ov-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.ov-foot button.danger {
  background: var(--bad);
  border-color: var(--bad);
  color: var(--accent-fg);
}
.ov-foot button.danger:hover {
  background: var(--bad);
  filter: brightness(0.92);
}
.ov-foot .pd-btn.is-bad {
  background: var(--pd-bad-fg);
  border-color: var(--pd-bad-fg);
  color: var(--pd-ink-fg);
}
.ov-say {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
}
.ov-say:last-child {
  margin-bottom: 0;
}
.ov-confirm,
.ov-prompt {
  width: 460px;
}
.ov-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 240;
  min-width: 200px;
  max-width: 320px;
  max-height: 70vh;
  overflow: auto;
  padding: 4px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-size: 13px;
}
.ov-pop:focus {
  outline: none;
}
.ov-pop-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px 6px;
  color: var(--dim);
  font-size: 12px;
}
.ov-pop-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}
.ov-pop-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: 13px;
}
.ov-pop-item:hover {
  background: var(--accent-wash);
}
.ov-pop-item.on {
  font-weight: 600;
}
.ov-pop-item[disabled],
.ov-pop-item[disabled]:hover {
  background: transparent;
}
.ov-pop-tick {
  flex: none;
  width: 12px;
  color: var(--accent);
}
.ov-pop-hint {
  color: var(--dim);
  font: 12px var(--mono);
}
.ov-pop-item .tk-sw {
  margin-right: 0;
}
.tk-ask-pitch {
  min-width: 232px;
}
.tk-ask-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 2px 4px 6px;
}
.tk-ask-chip {
  padding: 4px 0;
  text-align: center;
  font: 12px var(--mono);
}
.tk-ask-chip.on {
  border-color: var(--accent-edge);
  background: var(--accent-wash);
  font-weight: 600;
}
.tk-ask-free {
  width: calc(100% - 8px);
  margin: 0 4px 4px;
}
@keyframes ov-reveal-flash {
  from {
    background: var(--accent-wash);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  to {
    background: transparent;
    box-shadow: inset 3px 0 0 transparent;
  }
}
.sh-block.sh-revealed {
  animation: ov-reveal-flash 1100ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .sh-block.sh-revealed {
    animation: none;
    background: var(--accent-wash);
    box-shadow: inset 3px 0 0 var(--accent);
  }
}
@media (pointer: coarse) {
  .ov-pop-item {
    min-height: 44px;
    padding: 6px 10px;
  }
  .ov-pop-sep {
    margin: 6px 2px;
  }
}

/* src/web/styles/callout-preview.css */
.ov-pop.tk-cpv {
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  padding: 6px;
}
.tk-cpv-name {
  padding: 0 6px 6px;
  color: var(--dim);
  font: 12px var(--mono);
  overflow-wrap: anywhere;
}
.tk-cpv-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin: 0 2px;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tk-cpv-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.tk-cpv-wait {
  color: var(--dim);
  font-size: 12px;
}
.tk-cpv-go {
  width: calc(100% - 4px);
  margin: 6px 2px 2px;
}

/* src/web/styles/sheet-browser.css */
.tk-sheets {
  max-height: min(56vh, 620px);
}
.tk-sheet-thumb {
  flex: none;
  width: 58px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--stage);
  align-self: flex-start;
}
.tk-sheet-thumb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.tk-sheet-thumb-img.ready {
  opacity: 1;
}
.tk-sheet {
  align-items: flex-start;
  padding: 4px 2px;
}
.tk-sheet-no {
  padding-top: 1px;
}
.tk-sheet-pin {
  align-self: flex-start;
  padding-top: 1px;
}
.tk-sheet-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}
.tk-sheet-name {
  gap: 2px;
}
.tk-sheet-doc {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 6px -6px 2px;
  padding: 2px 6px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-sheet-doc:first-child {
  margin-top: 0;
  border-top: 0;
}
.tk-sheet-read {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 4px 0 6px;
  padding: 0 2px;
}
.tk-sheet-read-cost {
  line-height: 1.3;
}
.tk-sheet-read.busy {
  min-height: 22px;
  justify-content: center;
}
.tk-stage.tk-stage-loading::after {
  content: attr(data-tk-loading);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 74%;
  aspect-ratio: var(--tk-sheet-aspect, 1.5);
  max-width: 88%;
  display: grid;
  place-items: center;
  padding: 0 24px;
  box-sizing: border-box;
  text-align: center;
  text-wrap: balance;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--dim) 8%, var(--stage)) 40%,
      color-mix(in srgb, var(--dim) 22%, var(--stage)) 50%,
      color-mix(in srgb, var(--dim) 8%, var(--stage)) 60%);
  background-size: 300% 100%;
  animation: tk-sheet-sweep 1.5s ease-in-out infinite;
  pointer-events: none;
}
.tk-stage.tk-stage-loading.tk-stage-placed::after {
  top: var(--tk-sheet-y);
  left: var(--tk-sheet-x);
  width: var(--tk-sheet-w);
  height: var(--tk-sheet-h);
  max-width: none;
  aspect-ratio: auto;
  transform: none;
}
@keyframes tk-sheet-sweep {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-stage.tk-stage-loading::after {
    animation: none;
  }
}

/* src/web/styles/identity.css */
.sh-identity {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 12px 0 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  -webkit-user-select: none;
  user-select: none;
}
.sh-divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--line);
}
.sh-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--control);
  color: var(--fg);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.01em;
  cursor: pointer;
}
.sh-logo:hover {
  background: var(--control-hover);
}
.sh-logo.on {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  color: var(--accent);
}
.sh-logo svg:last-child {
  color: var(--dim);
}
.sh-logo.on svg:last-child {
  color: var(--accent);
  transform: rotate(180deg);
}
.sh-app-pop {
  min-width: 236px;
  padding: 4px;
}
.sh-app-menu {
  display: flex;
  flex-direction: column;
}
.sh-app-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  font: 13px/1.5 var(--sans);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sh-app-item:hover {
  background: var(--accent-wash);
}
.sh-app-item.on {
  background: var(--control);
  font-weight: 600;
}
.sh-app-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 4px;
}
.sh-app-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
}
.sh-context-scroll {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.sh-context-scroll > .chrome-ctx {
  flex: none;
}
.sh-context-scroll .chrome-ctx {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.sh-context-scroll .chrome-ctx .title {
  flex: none;
  max-width: none;
  overflow: visible;
}
.sh-context-scroll > .sh-presence {
  flex: none;
  overflow: visible;
}
.sh-load-time {
  flex: none;
  margin-left: auto;
}
.sh-identity .chrome-ctx {
  min-width: 0;
}
.sh-identity .chrome-ctx > :not(.title):not(.chrome-ctx) {
  flex: none;
}
.sh-identity .chrome-ctx .title {
  flex: 0 1 auto;
  min-width: 6ch;
}
.sh-identity .chrome-ctx a.back,
.sh-identity .chrome-ctx .sep {
  display: none;
}
.sh-review {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: 13px/1 var(--sans);
  cursor: pointer;
}
.sh-review:hover {
  background: var(--control);
}
.sh-review svg {
  color: var(--ok);
}
.sh-count {
  border-radius: var(--radius-pill);
  padding: 0 6px;
  background: var(--wash-warn);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sh-count[hidden] {
  display: none;
}
.sh-extras {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sh-extras .tk-save {
  padding: 0;
  border: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.tk-unsaved {
  flex: none;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tk-unsaved[hidden] {
  display: none;
}
.tk-revert {
  flex: none;
  white-space: nowrap;
}
.tk-revert[hidden] {
  display: none;
}
.sh-more {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--control);
  color: var(--fg);
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.sh-more[hidden] {
  display: none;
}
.sh-more:hover {
  background: var(--control-hover);
}
.sh-more.on {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  color: var(--accent);
}
.sh-crumb-pop {
  min-width: 260px;
  max-width: 380px;
  padding: 10px 12px;
}
.sh-crumb-body .chrome-ctx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.sh-crumb-body .chrome-ctx > * {
  flex: none;
  max-width: 100%;
}
.sh-crumb-body .chrome-ctx .title {
  white-space: normal;
  font-weight: 600;
}
.sh-crumb-body .chrome-ctx a.back,
.sh-crumb-body .chrome-ctx .sep {
  display: none;
}
.sh-close {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--dim);
  font: 13px/1 var(--sans);
  cursor: pointer;
}
.sh-close:hover {
  background: var(--control-hover);
  color: var(--fg);
}
@media (max-width: 1100px) {
  .sh-identity .chrome-ctx .ratio {
    display: none;
  }
  .sh-identity .chrome-ctx .pill:not(.warn) {
    display: none;
  }
  .sh-identity .sh-presence {
    flex-shrink: 100;
  }
}
@media (max-width: 900px) {
  .sh-logo-word {
    display: none;
  }
  .sh-identity .sh-extras .tk-save > span:not(.tk-unsaved) {
    display: none;
  }
}

/* src/web/styles/carry.css */
.cmp-carry {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.cmp-carry-go {
  display: block;
  width: 100%;
  margin: 0 0 6px;
}
.cmp-carry-no {
  color: var(--dim);
}
.cmp-carry-why {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--dim);
}
.cmp-carry-why li {
  padding: 2px 0 2px 12px;
  position: relative;
}
.cmp-carry-why li::before {
  content: "·";
  position: absolute;
  left: 4px;
}
.cmp-carry-dialog {
  width: min(40rem, 92vw);
}
.cmp-carry-head {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.cmp-carry-dialog h4 {
  margin: 14px 0 4px;
  font-size: 13px;
  color: var(--dim);
}
.cmp-carry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.cmp-carry-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.cmp-carry-list li:last-child {
  border-bottom: none;
}
.cmp-carry-list .muted {
  flex: 1 1 55%;
}
.cmp-carry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.tk-notice-carry {
  flex-wrap: wrap;
}
.tk-carry-weak {
  color: var(--warn);
}
.tk-carry-list {
  flex-basis: 100%;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
}
.tk-carry-list li {
  padding: 2px 0 2px 12px;
  position: relative;
}
.tk-carry-list li::before {
  content: "·";
  position: absolute;
  left: 4px;
}

/* src/web/styles/waste.css */
.tk-waste {
  margin: 2px 0 4px;
}
.tk-waste-suggestion {
  margin: 1px 0 2px;
}
.tk-waste-row {
  margin-top: 2px;
}
.tk-waste-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius-pill);
  font-size: 12px;
  white-space: nowrap;
}
.tk-waste-chip[hidden],
.tk-waste-row[hidden],
.tk-waste-suggestion[hidden] {
  display: none;
}
.tk-waste-chip.is-suggested {
  background: var(--accent-wash);
  color: var(--fg);
}
.tk-waste-chip.is-yours {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.tk-waste-pop .ov-pop-item.is-suggested {
  box-shadow: inset 2px 0 0 var(--accent);
}
.tk-waste-pop .ov-pop-item.is-measured {
  color: var(--dim);
}
.tk-waste-custom {
  gap: 6px;
}
.tk-waste-custom input {
  width: 56px;
  padding: 2px 4px;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  font: 12px var(--mono);
  text-align: right;
}

/* src/web/styles/board.css */
.pd .bd-crumb {
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--pd-fg-3);
  margin-bottom: 12px;
}
.pd .bd-crumb a {
  color: var(--pd-fg-3);
  text-decoration: none;
  border-bottom: 1px solid var(--pd-line-soft);
}
.pd .bd-crumb a:hover {
  color: var(--pd-fg);
}
.bd-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.bd-name-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bd-codes {
  font-family: var(--pd-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--pd-fg-2);
}
.bd-title {
  font-size: 14px;
  color: var(--pd-fg-3);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.bd-name-main > .bd-title:first-child {
  font-size: 16px;
  color: var(--pd-fg);
}
.bd-lots {
  font-size: 12px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--pd-fg-4);
  white-space: nowrap;
}
.bd-name.is-option {
  padding-left: 10px;
}
.bd-branch {
  color: var(--pd-fg-4);
  font-size: 13px;
  line-height: 1;
}
.bd-name.is-option .bd-codes {
  color: var(--pd-fg-3);
}
.bd-cell {
  display: flex;
  align-items: center;
  align-self: center;
  text-decoration: none;
  color: inherit;
  padding: 2px 4px;
  margin: 0;
  border-radius: var(--radius-sm);
  min-width: 0;
}
.bd-cell:hover {
  background: var(--pd-hover-blue);
}
.bd-cell:focus-visible {
  outline: 2px solid var(--pd-line-strong);
  outline-offset: 1px;
}
.bd-cell .pd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  top: 0;
  padding: 3px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: center;
}
.bd-table .pd-tr {
  align-items: center;
}
.bd-table .pd-th > *,
.bd-table .pd-tr > * {
  min-width: 0;
}
.bd-add {
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bd-attribute {
  padding: 14px 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .bd-lots {
    display: none;
  }
}

/* src/web/styles/palette.css */
.ov-palette {
  width: 640px;
  height: min(560px, 100%);
}
.ov-palette .ov-body {
  padding: 0;
  overflow: hidden;
  display: flex;
}
.pl {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pl-field {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
}
.pl-field:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.pl-field::placeholder {
  color: var(--dim);
}
.pl-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px 0;
}
.pl-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pl-row:hover {
  background: var(--hover-row);
}
.pl-row.on {
  background: var(--accent-wash);
}
.pl-row.on .pl-label {
  color: var(--fg);
}
.pl-row.off {
  color: var(--dim);
  cursor: default;
}
.pl-row.off:hover {
  background: transparent;
}
.pl-kind {
  flex: none;
  width: 62px;
  color: var(--dim);
  font-size: 12px;
}
.pl-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-note {
  color: var(--dim);
}
.pl-note::before {
  content: " · ";
}
.pl-hint {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
}
.pl-empty {
  padding: 18px 16px;
}
.pl-empty .small {
  margin-top: 6px;
}
.pl-more {
  padding: 8px 16px;
}
.pl-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

/* src/web/styles/share.css */
.shr {
  max-width: 8.5in;
  margin: 0 auto 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px 14px;
}
.shr-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.shr-head .grow {
  flex: 1 1 auto;
  min-width: 0;
}
.shr-note {
  margin: 8px 0 0;
  line-height: 1.55;
}
.shr-fresh {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--accent-edge);
  background: var(--accent-wash);
  border-radius: var(--radius);
}
.shr-url {
  width: 100%;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
}
.shr-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.shr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.shr-row:first-child {
  border-top: 0;
}
.shr-row .grow {
  flex: 1 1 auto;
  min-width: 0;
}
.shr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* src/web/styles/portal-access.css */
.pba-note {
  margin: 0 0 10px;
}
.pba-absent {
  margin: 0;
  padding: 8px 0;
  color: var(--dim);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
}
.pba-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pba-row {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.pba-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.pba-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.pba-state {
  margin-top: 2px;
}
.pba-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.pba-line.expired {
  opacity: .85;
}
.pba-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pba-fresh {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.pba-url {
  width: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--fg);
}
.pba-sent {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.pba-sent.simulated {
  border-style: dashed;
  border-color: var(--edge-warn);
  background: var(--wash-warn);
}
.pba-sent-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.pba-sent-subject {
  margin-top: 6px;
  font-weight: 600;
  font-size: 14px;
}
.pba-sent-body {
  margin: 4px 0 0;
  padding: 8px 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.pba-add {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.pba-add h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.pba-others {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pba-others > p {
  margin: 0 0 6px;
}
.pba-events {
  margin-top: 14px;
}
.pba-log {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pba-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.pba-ev:first-child {
  border-top: 0;
}
.pba-ev-when {
  flex: 0 0 auto;
  min-width: 6.5rem;
}
.pba-ev-what {
  flex: 1 1 14rem;
}
.pba-ev.simulated .pba-ev-what {
  color: var(--dim);
}

/* src/web/styles/versions.css */
.vh-card {
  width: 720px;
}
.vh-row {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.vh-row:first-child {
  border-top: none;
  padding-top: 0;
}
.vh-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vh-v {
  flex: none;
}
.vh-acts {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
  columns: 2;
  column-gap: 24px;
  font-size: 12px;
  color: var(--dim);
}
.vh-acts li {
  break-inside: avoid;
}
.vh-none {
  margin: 6px 0 0;
}
.vh-delta:empty {
  display: none;
}
.vh-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12px;
}
.vh-table th,
.vh-table td {
  padding: 2px 8px 2px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.vh-table th {
  color: var(--dim);
  font-weight: 500;
}
.vh-table td.num,
.vh-table th:not(:first-child) {
  text-align: right;
}
.vh-up {
  color: var(--ok);
}
.vh-down {
  color: var(--warn);
}

/* src/web/styles/review-queue.css */
.tk-conf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
}
.tk-conf-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--dim);
  flex: none;
}
.tk-conf[data-state=measured] .tk-conf-dot {
  background: var(--ok);
}
.tk-conf[data-state=inferred] .tk-conf-dot {
  background: var(--accent);
}
.tk-conf[data-state=needs-review] .tk-conf-dot {
  background: var(--warn);
}
.tk-conf-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.sh-review.on {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  color: var(--fg);
  font-weight: 600;
}
.tk-rev {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-rev-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tk-rev-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--control);
  overflow: hidden;
  display: flex;
}
.tk-rev-bar > span {
  background: var(--ok);
  transition: width 160ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .tk-rev-bar > span {
    transition: none;
  }
}
.tk-rev-letters {
  gap: 6px;
}
.tk-rev-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--edge-warn);
  background: var(--wash-warn);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.tk-rev-card .tk-conf {
  color: inherit;
}
.tk-rev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tk-rev-chip {
  font-family: var(--mono);
  font-size: 12px;
}
.tk-rev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tk-rev-actions > button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
}
.tk-rev-actions > button:last-child {
  color: var(--dim);
}
.tk-rev-symptom {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.tk-rev-list > .tk-rev-symptom {
  padding: 8px 8px 2px;
}
.tk-rev-refused {
  border-left: 2px solid var(--edge-warn);
  padding-left: 8px;
}
.tk-rev-batch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px;
}
.tk-rev-keys {
  font-family: var(--mono);
}
.tk-rev-clear {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--edge-ok);
  background: var(--wash-ok);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.tk-rev-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-rev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.tk-rev-row:hover {
  background: var(--hover-row);
}
.tk-rev-row.on {
  background: var(--accent-wash);
}
.tk-rev-row > .grow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-rev-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-size: 13px;
  color: var(--dim);
}
.tk-rev-check {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.tk-rev-foot {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.tk-rev-done {
  border: 1px solid var(--edge-ok);
  background: var(--wash-ok);
  color: var(--ok);
  font-weight: 600;
}
.tk-stage.tk-reviewing {
  cursor: default;
}

/* src/web/styles/annotate.css */
.tk-annotate-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}
.tk-annotate-shape.on {
  background: var(--accent-wash);
  border-color: var(--accent);
}
.tk-annotate-colours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.tk-annotate-colour {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #00000033;
  cursor: pointer;
}
.tk-annotate-colour.on {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.tk-annotate-entry {
  position: absolute;
  z-index: 4;
  min-width: 180px;
  max-width: 60%;
  padding: 2px 6px;
  font: 600 13px var(--sans);
  background: #fffffff2;
  border: 1.5px solid #1668c4;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px #0000002e;
}
.tk-annotate-entry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tk-annotate-text {
  width: 100%;
}
.tk-annotate-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.tk-annotate-strip .tk-annotate-shapes,
.tk-annotate-strip .tk-annotate-colours {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  margin: 0;
}
.tk-annotate-strip .tk-annotate-shape {
  padding: 2px 8px;
  font-size: 12px;
}
.tk-annotate-strip .tk-annotate-colour {
  width: 16px;
  height: 16px;
}
.tk-annotate-mentions {
  min-width: 180px;
  max-width: 260px;
  padding: 4px;
}
.tk-annotate-tray {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.tk-annotate-tray::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin: 2px 4px 2px 0;
  background: #00000033;
}
.tk-annotate-stamp {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-annotate-stamp.on {
  background: var(--accent-wash);
  border-color: var(--accent);
}
.tk-annotate-stamp-new {
  max-width: none;
  padding: 2px 6px;
}
.tk-annotate-new-stamp {
  min-width: 260px;
  max-width: 320px;
  padding: 8px;
}
.tk-annotate-new-stamp label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}
.tk-annotate-new-stamp label > input,
.tk-annotate-new-stamp label > select {
  display: block;
  width: 100%;
  margin-top: 2px;
  font-weight: 400;
}
.tk-thread-entry {
  width: 100%;
  min-height: 44px;
  resize: vertical;
  font: inherit;
}
.tk-thread-row {
  margin: 6px 0;
  padding: 4px 0 4px 8px;
  border-left: 2px solid var(--line, #d8dbe0);
}
.tk-thread-row.resolved {
  opacity: 0.55;
}
.tk-thread-who {
  font-weight: 600;
  font-size: 12px;
}
.tk-thread-body {
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tk-thread-mention {
  padding: 0 2px;
  border-radius: var(--radius-xs);
  background: rgba(15, 23, 42, 0.10);
  font-weight: 600;
}
.tk-thread-mentions {
  min-width: 180px;
  max-width: 260px;
  padding: 4px;
}

/* src/web/styles/collab.css */
.sh-presence {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.sh-presence:empty {
  display: none;
}
.sh-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 150px;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  color: var(--dim);
  font: 12px/1 var(--sans);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.sh-chip-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--panel);
}
.sh-chip.off .sh-chip-dot {
  background: transparent;
  box-shadow: 0 0 0 1px var(--panel), inset 0 0 0 2px var(--ink);
}
.sh-chip.off {
  background: none;
}
.sh-chip.off:hover {
  background: var(--control-hover);
}
.sh-chip-initials {
  display: none;
  flex: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sh-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-chip-more {
  cursor: default;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sh-chip-open {
  flex: none;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--control);
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .sh-chip {
    max-width: 110px;
  }
}
@media (max-width: 900px) {
  .sh-chip-name {
    display: none;
  }
  .sh-chip-initials {
    display: inline;
  }
  .sh-chip {
    padding: 2px 6px;
  }
}
.tk-held {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 2px 8px 2px 6px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  color: var(--dim);
}
.tk-held-who {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tk-held-name {
  font-weight: 600;
}
.tk-conflicts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.tk-conflict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.tk-conflict-who {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-conflict-answers {
  gap: 6px;
}

/* src/web/styles/report-model.css */
.r3d-block {
  max-width: 8.5in;
  margin: 0 auto 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.r3d-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.r3d-head h2 {
  margin: 0 0 2px;
  font-size: 15px;
}
.r3d-sub {
  color: var(--dim);
  font-size: 13px;
  max-width: 46em;
}
.r3d-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--dim);
}
.r3d-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.r3d-sw {
  width: 14px;
  height: 11px;
  border: 1px solid hsl(215, 25%, 24%);
  border-radius: var(--radius-xs);
  flex: none;
}
.r3d-sw.measured {
  background: hsl(215, 38%, 56%);
}
.r3d-sw.inferred {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 2px,
      hsl(215, 25%, 24%) 2px 3px),
    hsl(38, 62%, 59%, 0.55);
}
.r3d-sw.flat {
  background: hsl(215, 8%, 72%);
}
.r3d-sw.open {
  background: transparent;
  border-style: dashed;
}
.r3d-sheet {
  margin-top: 10px;
}
.r3d-sheet-label {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 4px;
}
.r3d-canvas {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  cursor: grab;
  touch-action: none;
}
.r3d-canvas:active {
  cursor: grabbing;
}
.r3d-caption {
  margin-top: 6px;
  font-size: 13px;
  color: var(--dim);
  min-height: 1.4em;
}
.ov-card.tk-roof-model-dialog {
  width: 1200px;
}
.tk-roof-model-dialog .r3d-block {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.tk-roof-model-dialog .r3d-canvas {
  height: clamp(240px, 55dvh, 680px);
}
.chrome-ctx button.rpt-link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  white-space: nowrap;
}
.chrome-ctx button.rpt-link:hover {
  color: var(--fg);
}

/* src/web/styles/topbar.css */
.topbar nav {
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}
.whoami {
  min-width: 0;
}
.whoami > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-signout {
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar nav a {
  white-space: nowrap;
}
.tb-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--dim);
  font-size: 13px;
  line-height: 1.2;
}
.tb-btn:hover {
  background: var(--control);
  color: var(--fg);
}
.tb-btn.on {
  background: var(--control);
  color: var(--fg);
}
.tb-btn svg {
  display: block;
  flex: none;
}
.tb-search {
  min-width: 168px;
  background: var(--bg);
  border-color: var(--line);
}
.tb-search:hover {
  background: var(--panel);
  border-color: var(--line-bright);
  color: var(--fg);
}
.tb-key {
  padding: 1px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
}
.tb-pop {
  min-width: 232px;
}
.tb-pop .ov-pop-head {
  font-size: 12px;
  letter-spacing: .07em;
  font-weight: 600;
}
.tb-pop-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  font-size: 13px;
}
.tb-pop-who b {
  color: var(--fg);
  font-weight: 600;
}
@media (max-width: 1499px) {
  .tb-wide {
    display: none;
  }
  .tb-search {
    min-width: 0;
  }
  .topbar {
    gap: 8px;
  }
  .topbar nav {
    gap: 2px;
  }
}
.tb-burger {
  display: none;
}
@media (max-width: 1199px) {
  .topbar {
    padding: 0 14px;
  }
  .topbar nav a,
  .tb-more,
  .whoami,
  .tb-signout {
    display: none;
  }
  .tb-burger {
    display: flex;
  }
}
.pd .pd-crumb {
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--pd-fg-3);
  margin-bottom: 6px;
}
.pd .pd-crumb a {
  color: var(--pd-fg-3);
  text-decoration: none;
  border-bottom: 1px solid var(--pd-line-soft);
}
.pd .pd-crumb a:hover {
  color: var(--pd-fg);
}
.pd > .pd-crumb {
  margin-bottom: 12px;
}
a.pd-btn {
  display: inline-flex;
  align-items: center;
}
a.pd-btn:hover {
  text-decoration: none;
}
.pd a.pd-note-link {
  color: var(--pd-blu-fg);
}
.pd-err {
  display: block;
  margin-top: 4px;
  color: var(--pd-bad-fg);
  font-size: 13px;
  line-height: 1.35;
}
.pd-add .field.is-bad input,
.pd-add .field.is-bad select {
  border-color: var(--pd-bad-fg);
}
.pd-confirm {
  max-width: 420px;
}
.pd-confirm .ov-say {
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--fg);
}
@media (pointer: coarse) {
  .tb-btn,
  .tb-search {
    min-height: 44px;
  }
  :root {
    --topbar-h: 56px;
  }
}

/* src/web/styles/pricing-fit.css */
.cols.pricing-cols > * {
  min-width: 0;
}
.pricing-cols .table-scroll {
  min-width: 0;
  max-width: 100%;
}
.supply-card {
  min-width: 0;
}
.supply-card select {
  max-width: 100%;
}
@media (max-width: 1300px) {
  .cols.pricing-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1301px) {
  .cols.pricing-cols {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
.state-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0;
}
.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  background: var(--control);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  white-space: nowrap;
  cursor: pointer;
}
.state-chip::after {
  content: "›";
  font-weight: 400;
  opacity: 0.7;
}
.state-chip[aria-expanded=true] {
  border-color: var(--fg);
}
.state-chip[aria-expanded=true]::after {
  content: "⌄";
}
.state-chip.ok {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
  color: var(--ok);
}
.state-chip.warn {
  background: var(--wash-warn);
  border-color: var(--edge-warn);
  color: var(--warn);
}
.state-chip.bad {
  background: var(--wash-bad);
  border-color: var(--edge-bad);
  color: var(--bad);
}
.state-chip.ok[aria-expanded=true] {
  border-color: var(--ok);
}
.state-chip.warn[aria-expanded=true] {
  border-color: var(--warn);
}
.state-chip.bad[aria-expanded=true] {
  border-color: var(--bad);
}
.state-said .banner {
  margin: 6px 0;
}
.state-said .reasons {
  margin: 6px 0 6px 18px;
}
.rail-always {
  display: contents;
}
.rail-step-down {
  margin-top: 4px;
}
.rail-fine {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.rail-fine > .rail-fine-head {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  padding: 2px 0;
}
.rail-fine > .rail-fine-head:hover {
  color: var(--accent);
}
.rail-fine[open] > .rail-fine-head {
  color: var(--fg);
}
.rail-fine[open] > .margin-parts-block {
  margin-top: 10px;
}

/* src/web/styles/proposal-build.css */
.pb-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.pb-body {
  padding: var(--sp-6) var(--sp-7);
}
.pb-field {
  margin-bottom: 8px;
}
.pb-field-k {
  margin-bottom: var(--sp-2);
}
.pb-in,
.pb-lines,
.pb-pick {
  width: 100%;
  font-family: var(--pd-sans);
  font-size: 16px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pb-lines {
  min-height: 76px;
  line-height: 1.5;
  resize: vertical;
}
.pb-in:focus-visible,
.pb-lines:focus-visible,
.pb-pick:focus-visible,
.pb-num:focus-visible {
  outline: 2px solid var(--pd-blu-fg);
  outline-offset: 1px;
}
.pb-figs {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-6);
}
.pb-price {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--pd-line-soft);
}
.pb-price-k {
  margin-bottom: var(--sp-3);
}
.pb-warn {
  margin-top: 8px;
}
.pb-hint {
  margin-top: 6px;
}
.pb-v {
  margin-top: 4px;
}
.pb-gap {
  height: 16px;
}
.pb-boundary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.pb-boundary-k {
  color: var(--pd-gold);
  white-space: nowrap;
}
.pb-boundary-p {
  line-height: 1.5;
}
.pb-sum {
  padding: var(--sp-7) var(--sp-8);
}
.pb-sum-name {
  font-size: 20px;
  font-weight: 600;
  margin-top: 4px;
}
.pb-sum-price {
  font-size: 30px;
  font-weight: 600;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.pb-sum-sq {
  margin-top: 2px;
}
.pb-sum-band {
  margin-top: 14px;
}
.pb-sum-band-k {
  color: var(--pd-gold);
  margin-bottom: var(--sp-3);
}
.pb-sum-note {
  margin-top: 12px;
  line-height: 1.6;
}
.ov-card.pb-preview {
  width: min(1040px, 94vw);
}
.pb-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius);
  background: var(--pd-head);
}
.pb-strip-note {
  grid-column: 1 / -1;
  margin: 0;
}
.pb-num {
  width: 100%;
  font-family: var(--pd-sans);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius);
  background: var(--pd-card);
  color: var(--pd-fg);
}
.pb-doc {
  display: block;
  width: 100%;
  height: min(62vh, 720px);
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--radius);
  background: #fff;
}
.pb-doc-status {
  margin-bottom: 10px;
}
.pb-sent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--pd-line-soft);
}
.pb-signed {
  line-height: 1.8;
}
.pb-sha {
  margin-top: 8px;
  word-break: break-all;
}

/* src/web/styles/site-plan.css */
.siteplan {
  --sp-paper: #ffffff;
  --sp-ink: #16191f;
  --sp-dim: #5a6473;
  --sp-edge: #d4d4d8;
  --sp-control: #f4f5f7;
  --sp-control-hover: #e9ebef;
  --sp-control-edge: #9aa1ac;
  background: var(--sp-paper);
  color: var(--sp-ink);
  border: 1px solid var(--sp-edge);
  border-radius: var(--radius-lg);
  padding: 10px 12px 12px;
  color-scheme: light;
}
.siteplan svg {
  background: none;
  border-radius: var(--radius-sm);
}
.siteplan p {
  color: var(--sp-ink);
}
.siteplan p.muted,
.siteplan .muted {
  color: var(--sp-dim);
}
.siteplan .siteplan-src b {
  color: var(--sp-ink);
  font-weight: 600;
}
.siteplan button {
  background: var(--sp-control);
  color: var(--sp-ink);
  border: 1px solid var(--sp-control-edge);
  border-radius: var(--radius-sm);
}
.siteplan button:hover {
  background: var(--sp-control-hover);
}

/* src/web/styles/intake.css */
.ix-drop {
  border: 2px dashed var(--line-bright);
  border-radius: var(--radius-lg);
  padding: 44px 26px;
  text-align: center;
  color: var(--dim);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ix-drop:hover {
  border-color: var(--line-strong);
}
.ix-drop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ix-drop.over {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--fg);
}
.ix-drop-lead {
  font-size: var(--text-lg);
  color: var(--fg);
  font-weight: 600;
}
.ix-drop-sub {
  margin-top: 8px;
  font-size: 13px;
  max-width: 58ch;
  margin: 8px auto 0;
}
.ix-drop-glyph {
  color: var(--line-strong);
  margin-bottom: 12px;
}
.ix-drop.over .ix-drop-glyph {
  color: var(--accent);
}
.ix-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ix-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
}
.ix-chip-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  background: var(--control);
  color: var(--dim);
  border: 1px solid var(--line-bright);
}
.ix-chip-icon.pdf {
  background: var(--wash-bad);
  border-color: var(--edge-bad);
  color: var(--bad);
}
.ix-chip-icon.xls,
.ix-chip-icon.xlsx {
  background: var(--wash-ok);
  border-color: var(--edge-ok);
  color: var(--ok);
}
.ix-chip-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ix-chip-meta {
  color: var(--dim);
  white-space: nowrap;
}
.ix-chip-kind {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  color: var(--accent);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ix-chip-kind:hover:not(:disabled) {
  background: var(--accent-edge);
}
.ix-chip-kind::after {
  content: "▾";
  font-size: 0.75em;
  opacity: .8;
}
.ix-chip-kind:disabled {
  opacity: .5;
  cursor: default;
}
.ix-sofar {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 6px 14px;
  align-items: baseline;
}
.ix-sofar-k {
  font-size: 12px;
  color: var(--dim);
}
.ix-sofar-v {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ix-sofar-v.pending {
  font-weight: 400;
  color: var(--dim);
}
.ix-src {
  font-size: 12px;
  color: var(--dim);
  font-family: var(--mono);
}
.ix-recon td {
  vertical-align: top;
}
.ix-recon td.ev {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.5;
  white-space: normal;
  min-width: 22ch;
}
.ix-recon tr.off td {
  opacity: .55;
}
.ix-recon tr.amb td {
  background: var(--wash-warn);
}
.ix-recon tr.amb td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}
.ix-recon td.pick-c {
  width: 28px;
}
.ix-fold {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 10px;
  color: var(--dim);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.ix-fold:hover {
  background: var(--hover-row);
}
.ix-fold-caret {
  display: inline-block;
  transition: transform .12s;
}
.ix-fold[aria-expanded=true] .ix-fold-caret {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .ix-fold-caret {
    transition: none;
  }
}
.ix-bid {
  background: var(--wash-vio);
  border: 1px solid var(--edge-vio);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.ix-bid-fig {
  font-size: var(--text-3xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ix-bid-rough {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--vio);
}
.ix-bid-for {
  font-size: 13px;
  font-weight: 400;
  color: var(--dim);
}
.ix-bid-why {
  margin-top: 8px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.6;
  max-width: 72ch;
}
.ix-bid-why b {
  color: var(--fg);
  font-weight: 600;
}
.ix-bid-wall {
  margin-top: 8px;
  font-size: 12px;
  color: var(--vio);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pj-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 var(--sp-8);
}
.pj-links a {
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--dim);
  background: var(--control);
  border: 1px solid transparent;
}
.pj-links a:hover {
  background: var(--control-hover);
  color: var(--fg);
  text-decoration: none;
}
.pj-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.pl-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--sp-7);
}
.pl-filters .search {
  flex: 1 1 260px;
  min-width: 200px;
}
.pl-filters select {
  width: auto;
  min-width: 130px;
}
.pl-group {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dim);
  margin: var(--sp-9) 0 var(--sp-4);
}
.pl-group:first-child {
  margin-top: 0;
}
.ix-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 0 2px;
  margin-top: var(--sp-8);
  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--bg) 22%);
}

/* src/web/styles/stage-strip.css */
.ss {
  margin: 10px 0 0;
  width: 100%;
  flex: none;
}
.pd-top > .ss {
  flex-basis: 100%;
  order: 9;
}
.ss-rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
}
.ss-li {
  display: contents;
}
.ss-rung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--pd-fg-3);
  text-decoration: none;
  white-space: nowrap;
}
.ss-rung:hover {
  color: var(--pd-fg);
  background: var(--pd-head);
  text-decoration: none;
}
.ss-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--pd-line-strong);
  background: transparent;
}
.ss-dot.is-done {
  background: var(--pd-ok-fg);
  border-color: var(--pd-ok-fg);
}
.ss-rung.is-done {
  color: var(--pd-fg);
}
.ss-rung.is-locked {
  color: var(--pd-fg-4);
}
.ss-rung.is-locked .ss-word {
  text-decoration: underline dotted var(--pd-line-strong);
  text-underline-offset: 3px;
}
.ss-rung.is-here {
  color: var(--pd-fg);
  font-weight: 600;
  background: var(--pd-head);
  box-shadow: inset 0 0 0 1px var(--pd-line-strong);
}
.ss-count {
  font-variant-numeric: tabular-nums;
  color: var(--pd-fg-3);
  font-weight: 400;
}
.ss-rung.is-here .ss-count {
  color: var(--pd-fg-3);
}
.ss-note {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pd-fg-3);
}
.ss-here {
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--pd-fg-4);
}
.ss-here::before {
  content: "▲ ";
}
.ss-why {
  color: var(--pd-fg-3);
}
.ss-verb {
  color: var(--pd-blu-fg);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--pd-line-soft);
}
.ss-verb:hover {
  text-decoration: none;
  border-bottom-color: currentColor;
}
.ss-one-line {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pd-fg);
  text-decoration: none;
}
.ss-one-line:hover {
  text-decoration: none;
}
.ss-one-rung {
  font-weight: 600;
}
.ss-one-count {
  color: var(--pd-fg-3);
  font-variant-numeric: tabular-nums;
}
.ss-one-verb {
  color: var(--pd-blu-fg);
  font-weight: 600;
}
.ss.is-one .ss-rungs,
.ss.is-one .ss-note {
  display: none;
}
.ss.is-one .ss-one-line {
  display: flex;
}
@media (max-width: 480px) {
  .ss .ss-rungs,
  .ss .ss-note {
    display: none;
  }
  .ss .ss-one-line {
    display: flex;
  }
}
.fd-screen .ss {
  margin: 8px 0 0;
}
.fd-screen .ss-one-line {
  color: var(--fd-fg);
  min-height: 44px;
}
.fd-screen .ss-dot {
  border-color: var(--fd-line-strong);
}
.fd-screen .ss-dot.is-done {
  background: var(--fd-ok);
  border-color: var(--fd-ok);
}
.fd-screen .ss-one-count {
  color: var(--fd-fg-3);
}
.fd-screen .ss-one-verb {
  color: var(--fd-ok);
}
.fd-screen .ss-rung {
  color: var(--fd-fg-3);
}
.fd-screen .ss-rung.is-done {
  color: var(--fd-fg);
}
.fd-screen .ss-rung.is-here {
  color: var(--fd-fg);
  background: var(--fd-line);
  box-shadow: none;
}
.fd-screen .ss-note {
  color: var(--fd-fg-3);
}
.fd-screen .ss-here {
  color: var(--fd-fg-4);
}
.fd-screen .ss-verb {
  color: var(--fd-ok);
  border-bottom-color: transparent;
}
@media print {
  .ss {
    display: none !important;
  }
}

/* src/web/styles/roof-head.css */
.rh {
  display: block;
  margin-bottom: 18px;
}
.rh-crumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
}
.rh-back {
  color: var(--line-strong);
  font-size: 15px;
  line-height: 1;
}
.rh-sep {
  color: var(--line-strong);
}
.rh-here {
  color: var(--fg);
}
.rh-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.rh-h1 {
  margin: 0;
}
.rh > .ss {
  margin-top: 8px;
}
.rh-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px var(--sp-8);
  margin-top: 10px;
  border-bottom: 1px solid var(--line);
}
.rh-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.rh-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rh-tab:hover {
  color: var(--fg);
  background: var(--control);
  text-decoration: none;
}
.rh-tab.is-here {
  color: var(--fg);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.rh-tab.is-locked {
  color: var(--line-strong);
}
.rh-tab.is-locked:hover {
  color: var(--dim);
  background: transparent;
}
.rh-tab.is-locked {
  text-decoration: underline dotted var(--line-strong);
  text-underline-offset: 4px;
}
.rh-exports {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: 6px;
}
.rh-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
  max-width: 74ch;
}
.rn-state {
  margin-top: 10px;
}
.rh-docs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}
.rh-docs-k {
  color: var(--dim);
}
.rh-docs-sep {
  color: var(--line-strong);
}
.rh-docs a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rh-docs a:hover {
  color: var(--accent);
}
@media print {
  .rh,
  .rh-docs {
    display: none !important;
  }
}

/* src/web/styles/shell.css */
.sh-shell {
  position: relative;
}
.tk-body.sh-body {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
}
.tk-body.sh-body > .tk-stage {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  border-width: 0;
  border-radius: 0;
}
.sh-column {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.sh-column[hidden],
.sh-resizer[hidden],
.sh-rail[hidden],
.sh-pin[hidden] {
  display: none;
}
.sh-resizer {
  position: relative;
  flex: 0 0 auto;
  width: 6px;
  margin: 0 -1px;
  cursor: col-resize;
  background: transparent;
  border-left: 1px solid var(--line);
  touch-action: none;
}
.sh-resizer:hover,
.sh-resizer.sh-dragging {
  background: var(--accent-wash);
}
.sh-resizer[data-side=left] {
  border-left: 0;
  border-right: 1px solid var(--line);
}
.sh-resizer-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--dim);
  font: 12px/1 var(--sans);
  cursor: pointer;
}
.sh-resizer-grip:hover {
  background: var(--control-hover);
  color: var(--fg);
}
@media (pointer: coarse) {
  .sh-resizer {
    width: 16px;
    margin: 0 -10px 0 -2px;
  }
  .sh-resizer[data-side=left] {
    margin: 0 -2px 0 -10px;
  }
  .sh-resizer-grip {
    width: 16px;
    height: 48px;
  }
}
.sh-rail {
  flex: 0 0 auto;
  width: 28px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  font: 13px/1.3 var(--sans);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.sh-rail[data-side=right] {
  border-right: 0;
  border-left: 1px solid var(--line);
}
.sh-rail:hover,
.sh-rail[aria-expanded=true] {
  background: var(--control);
  color: var(--fg);
}
.sh-rail-caret {
  flex: none;
  font-size: 12px;
  line-height: 1;
}
.sh-rail-label {
  writing-mode: vertical-rl;
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.sh-rail[data-side=left] .sh-rail-label {
  transform: rotate(180deg);
}
.sh-column.sh-peek {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  max-width: calc(100vw - 56px);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.sh-column.sh-peek[data-col=left] {
  left: 28px;
  border-right: 1px solid var(--line);
}
.sh-column.sh-peek[data-col=right] {
  right: 28px;
  border-left: 1px solid var(--line);
}
.sh-pin {
  flex: none;
  align-self: flex-end;
  margin: 6px 8px 0;
}
.sh-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid var(--line);
}
.sh-zone[hidden] {
  display: none;
}
.sh-zone:last-child {
  border-bottom: 0;
}
.sh-zone[data-zone=corrections] {
  margin-top: auto;
}
.sh-zone-head,
.sh-fold-head,
.sh-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  font: 13px/1.3 var(--sans);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.sh-zone-head {
  padding: 8px 12px;
  flex: none;
}
.sh-zone-head:hover,
.sh-fold-head:hover,
.sh-block-head:hover {
  background: var(--control);
}
.sh-zone-label {
  font-weight: 600;
}
.sh-zone-note {
  margin-left: auto;
  color: var(--dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-zone-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.sh-zone:not(.sh-collapsed) {
  min-height: 106px;
}
.sh-zone-tabs:not(.sh-collapsed) {
  min-height: 156px;
}
.sh-zone-body[hidden],
.sh-fold-body[hidden],
.sh-block-body[hidden] {
  display: none;
}
.sh-zone.sh-collapsed {
  flex: 0 0 auto;
}
.sh-twisty {
  flex: none;
  width: 10px;
  color: var(--dim);
  font-size: 10px;
  line-height: 1;
}
.sh-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 8px 10px 0;
  overflow-x: auto;
}
.sh-tabs[hidden] {
  display: none;
}
.sh-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--dim);
  font: 13px/1.3 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.sh-tab:hover {
  color: var(--fg);
}
.sh-tab.on {
  background: var(--panel-2);
  border-color: var(--line);
  border-bottom-color: var(--panel-2);
  color: var(--fg);
  font-weight: 600;
  margin-bottom: -1px;
}
.sh-zone-tabs > .sh-zone-body {
  background: var(--panel-2);
  border-top: 1px solid var(--line);
}
.sh-block {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}
.sh-block:last-child {
  border-bottom: 0;
}
.sh-block[hidden] {
  display: none;
}
.sh-block-primary {
  border-bottom: 0;
}
.sh-block-head {
  padding: 6px 12px 6px 10px;
}
.sh-block-head[hidden] {
  display: none;
}
.sh-block-title {
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-block-body {
  padding: 2px 12px 14px;
}
.sh-block-primary > .sh-block-body {
  padding-top: 0;
}
.sh-badge {
  flex: none;
  border-radius: var(--radius-pill);
  padding: 0 6px;
  background: var(--wash-warn);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sh-badge[hidden] {
  display: none;
}
.sh-note-btn {
  flex: none;
  margin-left: 2px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1;
  cursor: help;
}
.sh-note-btn:hover {
  color: var(--accent);
}
.sh-note-pop {
  max-width: 280px;
  padding: 10px 12px;
}
.sh-note-pop p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
}
.sh-fold {
  flex: none;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.sh-fold[hidden] {
  display: none;
}
.sh-fold-head {
  padding: 8px 12px;
}
.sh-fold-body {
  max-height: 46vh;
  overflow-y: auto;
}
.sh-zone[data-zone=corrections] > .sh-fold {
  border-top: 0;
  margin-top: 0;
}
.sh-zone[data-zone=corrections]:not(.sh-collapsed) > .sh-fold {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.sh-zone[data-zone=corrections]:not(.sh-collapsed) > .sh-fold > .sh-fold-head {
  flex: none;
}
.sh-zone[data-zone=corrections]:not(.sh-collapsed) > .sh-fold > .sh-fold-body {
  flex: 1 1 auto;
  max-height: none;
}
.ov-card.sh-sheet {
  width: 680px;
}
.sh-help {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--dim);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
}
.sh-help:hover {
  background: var(--control-hover);
  color: var(--fg);
}
.sh-shortcuts h3 {
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sh-keys {
  width: 100%;
  border-collapse: collapse;
}
.sh-keys td {
  padding: 2px 0;
  vertical-align: baseline;
  font-size: 13px;
}
.sh-keys td:first-child {
  width: 120px;
  white-space: nowrap;
}

/* src/web/styles/font-confirm.css */
.fc-list {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
}
@media (min-width: 1100px) {
  .fc-list {
    grid-template-columns: 1fr 1fr;
  }
}
.fc-blurb {
  margin: 0;
  padding: 10px 12px 0;
  max-width: 76ch;
  color: var(--dim);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.fc-head-acts {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fc-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.fc-row.is-blind {
  border-left-color: var(--accent);
  background: var(--accent-wash);
}
.fc-row.is-answered {
  border-left-color: var(--ok);
}
.fc-row.is-answered.is-moved {
  border-left-color: var(--warn);
  background: var(--wash-warn);
}
.fc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.fc-ink {
  flex: none;
  width: 108px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--line);
}
.fc-ink.is-empty {
  border-style: dashed;
  background: transparent;
}
.fc-ink-where {
  padding: 4px 6px;
  color: var(--dim);
  font-size: var(--text-xs);
  line-height: 1.3;
  text-align: center;
}
.fc-ask {
  font-size: var(--text);
  font-weight: 600;
}
.fc-says,
.fc-reads,
.fc-said code {
  font-family: var(--mono);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.fc-said {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-was {
  color: var(--dim);
  font-size: var(--text-sm);
}
.fc-was code {
  font-size: var(--text);
}
.fc-meta {
  color: var(--dim);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.fc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fc-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fc-answer {
  flex: 1;
  min-width: 90px;
  max-width: 220px;
  font-family: var(--mono);
  font-size: var(--text-lg);
}
.fc-answer[aria-invalid=true] {
  border-color: var(--bad);
}
.fc-bad {
  flex-basis: 100%;
  color: var(--bad);
  font-size: var(--text-xs);
}
.fc-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.fc-foot-say {
  flex: 1;
  color: var(--dim);
  font-size: var(--text-sm);
}

/* src/web/styles/font-chip.css */
.fc-chip-quiet {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
}
.fc-chip-quiet b {
  color: var(--fg);
}
.fc-chip .btn {
  margin-top: 6px;
}

/* src/web/styles/print.css */
@media print {
  .co-packet .pd {
    padding: 0;
    margin: 0;
    max-width: none;
  }
  .co-packet .co-lot,
  .co-packet .co-block,
  .co-packet .co-absent,
  .co-packet .pd-table,
  .co-packet .pd-th,
  .co-packet .pd-tr {
    font-size: 12pt;
  }
  .co-packet .co-lot {
    break-before: page;
    page-break-before: always;
  }
  .co-packet .co-lot:first-child {
    break-before: auto;
    page-break-before: auto;
  }
  .co-packet .co-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .co-packet .pd-tr,
  .co-packet .pd-film {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .co-packet .co-lot-head {
    break-after: avoid;
    page-break-after: avoid;
  }
  .co-packet .co-block-h {
    break-after: avoid;
    page-break-after: avoid;
  }
  .co-packet .co-provisional {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .co-packet .co-provisional .pd-banner {
    border: 1pt solid;
  }
  .co-packet .pd-film {
    max-height: 1.7in;
  }
  .co-packet .pd-pill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.ps-print {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg, #f1f5f9);
}
.ps-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--panel, #fff);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.ps-bar-gap {
  flex: 1;
}
.ps-status {
  font-size: 13px;
  color: var(--muted, #64748b);
}
.ps-pages {
  flex: 1;
  overflow: auto;
  padding: 20px;
}
.ps-page {
  width: fit-content;
  margin: 0 auto 20px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.ps-canvas {
  display: block;
}
.ps-dialog .ps-group {
  border: 0;
  margin: 0 0 14px;
  padding: 0;
}
.ps-dialog .ps-group legend {
  font-weight: 600;
  font-size: 12px;
  padding: 0 0 4px;
  color: var(--muted, #64748b);
}
.ps-dialog .ps-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.ps-dialog .ps-choice input:disabled + span {
  color: var(--muted, #94a3b8);
}
@media print {
  body.ps-printing > *:not(.ps-print) {
    display: none !important;
  }
  body.ps-printing {
    background: #ffffff;
  }
  html:has(body.ps-printing),
  body.ps-printing,
  body.ps-printing .ps-print,
  body.ps-printing .ps-pages {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .ps-print {
    position: static;
    inset: auto;
    background: #ffffff;
    display: block;
    overflow: visible;
  }
  .ps-pages {
    padding: 0;
    overflow: visible;
  }
  .ps-page {
    margin: 0;
    box-shadow: none;
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .ps-page:first-child {
    break-before: auto;
    page-break-before: auto;
  }
  .ps-page:last-child {
    break-after: avoid;
    page-break-after: avoid;
  }
  .ps-canvas {
    max-width: 100%;
    height: auto;
  }
}

/* src/web/styles/loupe.css */
.tk-loupe {
  border-radius: 50%;
  box-shadow:
    0 0 0 1px #ffffffcc,
    0 0 0 3px #11131899,
    0 6px 18px #00000040;
  background: #fff;
  z-index: 7;
}

/* src/web/styles/legend-card.css */
.tk-legend {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-width: 208px;
  max-width: 300px;
  max-height: calc(100% - 20px);
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-size: 12px;
}
.tk-legend[hidden] {
  display: none;
}
.tk-legend-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  cursor: move;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.tk-legend.dragging {
  opacity: 0.92;
}
.tk-legend-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
.tk-legend-fold {
  padding: 0 6px;
  line-height: 1.4;
  font-size: 12px;
  background: transparent;
  border: 0;
  color: var(--dim);
  cursor: pointer;
}
.tk-legend-fold:hover {
  color: var(--fg);
}
.tk-legend-dock {
  display: flex;
  gap: 1px;
}
.tk-legend-dock-btn {
  padding: 0 4px;
  line-height: 1.4;
  font-size: 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--dim);
  cursor: pointer;
}
.tk-legend-dock-btn:hover {
  color: var(--fg);
  background: var(--panel);
}
.tk-legend-dock-btn.on {
  color: var(--fg);
  background: var(--panel);
}
.tk-legend-dock-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tk-legend-docked {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-legend-docked > .tk-legend-dock {
  justify-content: flex-end;
  padding: 2px 4px 0;
}
.tk-legend-body {
  overflow-y: auto;
  padding: 6px 8px 8px;
}
.tk-legend.collapsed > .tk-legend-body {
  display: none;
}
.tk-legend.collapsed > .tk-legend-head {
  border-bottom: 0;
  border-radius: var(--radius-lg);
}
.tk-legend-group {
  margin: 8px 0 2px;
  padding-bottom: 2px;
  color: var(--dim);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.tk-legend-group:first-child {
  margin-top: 2px;
}
.tk-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 2px 4px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tk-legend-row:hover {
  background: var(--panel-2);
}
.tk-legend-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tk-legend-sw {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-xs);
  border: 1px solid #0003;
}
.tk-legend-sw-none {
  border: 0;
  background: transparent;
}
.tk-legend-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-legend-v {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tk-legend-n {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.tk-legend-stated {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  line-height: 1.4;
}
.tk-legend-stated.ok {
  color: var(--ok);
}
.tk-legend-stated.warn {
  color: var(--warn);
}
.tk-legend-stated.bad {
  color: var(--bad);
}
.tk-legend-scale {
  margin-top: 2px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* src/web/styles/reference.css */
.tk-stage.tk-ref-open > .tk-raster,
.tk-stage.tk-ref-open > .tk-overlay {
  right: var(--tk-ref-w, 0px);
  width: auto;
}
.tk-ref {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  width: var(--tk-ref-w, 0px);
  display: flex;
  flex-direction: column;
  background: var(--stage);
  border-left: 1px solid var(--line-bright);
  overflow: hidden;
}
.tk-ref[hidden] {
  display: none;
}
.tk-ref-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--panel);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-xs);
}
.tk-ref-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.tk-ref-head .grow {
  flex: 1 1 auto;
  min-width: 0;
}
.tk-ref-head button {
  flex: 0 0 auto;
  padding: var(--sp-1) var(--sp-2);
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.2;
  cursor: pointer;
}
.tk-ref-head button:hover {
  border-color: var(--line-bright);
}
.tk-ref-back[hidden] {
  display: none;
}
.tk-ref-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.tk-ref-overlay {
  cursor: grab;
  touch-action: none;
}
.tk-ref-overlay:active {
  cursor: grabbing;
}
.tk-ref-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-left: 6px;
}
.tk-ref-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tk-ref-slot.expanded {
  min-height: 160px;
}
.tk-ref-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.tk-ref-page[hidden] {
  display: none;
}
.tk-ref-head {
  flex: 0 0 auto;
  min-height: 32px;
  box-sizing: border-box;
  padding: 4px;
  gap: 6px;
}
.tk-ref-page-number {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--dim);
}
.tk-ref-page:not(.folded) .tk-ref-page-number::before {
  content: "Page ";
}
.tk-ref-page.folded .tk-ref-title,
.tk-ref-page.folded .tk-ref-body {
  display: none;
}
.tk-ref-page.folded .tk-ref-close {
  margin-left: auto;
}
.tk-ref.folded .tk-ref-close {
  display: none;
}
.tk-ref.folded .tk-ref-stack {
  padding-left: 0;
}
.tk-ref-width-grip {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  z-index: 2;
  cursor: col-resize;
  touch-action: none;
}
.tk-ref-height-grip {
  height: 6px;
  flex: 0 0 6px;
  cursor: row-resize;
  touch-action: none;
  background: var(--line);
}
.tk-ref-width-grip:hover,
.tk-ref-height-grip:hover,
.tk-ref-width-grip:focus-visible,
.tk-ref-height-grip:focus-visible {
  background: var(--accent);
}
.tk-ref-width-grip[hidden],
.tk-ref-height-grip[hidden] {
  display: none;
}

/* src/web/styles/reading-menu.css */
.tk-reading-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.tk-reading-menu > [hidden] {
  display: none;
}
.tk-reading-menu-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tk-reading-menu-rows[hidden] {
  display: none;
}
.tk-reading-menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 2px 6px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tk-reading-menu-row:hover {
  background: var(--panel-2);
}
.tk-reading-menu-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tk-reading-menu-row.primary {
  background: var(--accent-wash);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.tk-reading-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-reading-menu-key {
  flex: 0 0 auto;
  min-width: 14px;
  text-align: right;
  color: var(--dim);
  font-family: var(--mono);
}
.tk-reading-menu-row.primary .tk-reading-menu-key {
  color: inherit;
}
.tk-reading-menu-legend {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.tk-reading-menu-rows[hidden] ~ .tk-reading-menu-legend {
  padding-top: 0;
  border-top: 0;
}
.tk-reading-menu-row-legend {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tk-reading-menu-row-legend.empty {
  opacity: 0.45;
}
.tk-reading-menu-sw {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 2px;
  border-radius: var(--radius-xs);
  border: 1px solid #0003;
}
.tk-reading-menu-sw.round {
  border-radius: 50%;
}
.tk-reading-menu-note {
  color: var(--dim);
}
.tk-reading-menu-note.tk-reading-menu-peek {
  color: var(--fg);
  font-weight: 600;
}
.tk-reading-menu-ghost {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.tk-reading-chip {
  white-space: normal;
  line-height: 1.4;
}

/* src/web/styles/rig.css */
.rig {
  margin: 12px 0 0;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.rig > .rig-summary {
  cursor: pointer;
  padding: 6px 10px;
  color: var(--dim);
  list-style: none;
}
.rig > .rig-summary::-webkit-details-marker {
  display: none;
}
.rig > .rig-summary::before {
  content: "▸ ";
}
.rig[open] > .rig-summary::before {
  content: "▾ ";
}
.rig > .rig-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* src/web/styles/screen-error.css */
.screen-error-inline {
  min-height: 0;
  display: block;
  padding: 8px 12px;
  text-align: left;
  border-radius: var(--radius);
}
.screen-error-inline .screen-error-in {
  max-width: none;
}
.screen-error-inline .screen-error-h {
  font-size: 13px;
}
.screen-error-inline .screen-error-acts {
  justify-content: flex-start;
  margin-top: 10px;
}
.screen-error-inline .screen-error-acts:empty {
  display: none;
}

/* src/web/styles/page-polish.css */
.pl-filters {
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.pl-filters > input,
.pl-filters > select,
.pl-filters > button {
  min-height: 34px;
}
.pl-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pl-results > .pl-group {
  margin: 0;
}
.pl-results > .card {
  margin: 0;
}
.pd > .rig:not(:last-child),
.pd > .pd-banner.is-next:not(:last-child) {
  margin-bottom: 16px;
}
.pd-board {
  gap: 16px;
}
.pd-col {
  gap: 10px;
}
.pd-deal {
  padding: 12px;
}
.pd-grid-corner,
.pd-day {
  padding: 12px;
}
.pd-crew {
  padding: 12px 14px;
}
.pd-slot {
  padding: 8px;
  gap: 6px;
}
.pd-shift {
  padding: 8px;
}
.orders-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.orders-toolbar .pd-tabs {
  margin-bottom: 0;
}
.orders-toolbar > input,
.orders-toolbar > select {
  min-height: 36px;
}
.orders-toolbar > select {
  width: auto;
  min-width: 180px;
}
@media (max-width: 720px) {
  .pl-filters {
    padding: 10px;
  }
  .orders-toolbar > .grow {
    display: none;
  }
  .orders-toolbar > :first-child {
    flex-basis: 100%;
  }
  .orders-toolbar > input,
  .orders-toolbar > select {
    flex: 1 1 180px;
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .pd-top {
    gap: 16px;
  }
  .pd-top > .pd-titles {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* src/web/styles/home-polish.css */
.home-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
}
.home-page > .pd-top {
  margin-bottom: 0;
}
.home-page > .pd-banner {
  margin: 0;
}
.home-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.home-page .home-card {
  overflow: hidden;
}
.home-overview > .home-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-overview .home-card-body,
.home-overview .home-card > .pd-card-b {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home-page .home-overview .home-actions {
  margin-top: auto;
  padding-top: 14px;
}
.home-page .home-card > .pd-card-h {
  min-height: 44px;
  padding: 12px 16px;
}
.home-page .home-card-body,
.home-page .home-card > .pd-card-b {
  padding: 16px;
}
.home-page .home-card-copy {
  max-width: 68ch;
  line-height: 1.55;
}
.home-page .home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.home-page .home-actions .pd-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.home-page .home-card-f,
.home-page .pd-card-f {
  padding: 12px 16px;
  line-height: 1.55;
}
.home-page .home-table-wrap {
  overflow-x: auto;
}
.home-page .home-table-wrap .pd-table {
  min-width: 640px;
}
.home-page .home-week .pd-card-b > div {
  margin-bottom: 16px !important;
}
.home-page .home-week .pd-card-b > div:last-of-type {
  margin-bottom: 0 !important;
}
@media (max-width: 640px) {
  .home-page {
    gap: 16px;
    padding-bottom: 24px;
  }
  .home-page .home-card > .pd-card-h {
    padding-inline: 16px;
  }
  .home-page .home-card-body,
  .home-page .home-card > .pd-card-b {
    padding: 16px;
  }
  .home-page .home-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .home-page .home-actions .pd-btn {
    width: 100%;
  }
  .home-page .pd-card-f {
    padding-inline: 16px;
  }
}
@media (min-width: 960px) {
  .home-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* src/web/styles/field-report-review.css */
.fr-split {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 380px) 1fr;
  align-items: start;
  margin-top: 16px;
}
.fr-rail {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 150px);
  overflow: auto;
}
.fr-rail-h {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pd-fg-2);
  margin: 0;
}
.fr-rail-l {
  display: grid;
  gap: 10px;
}
.fr-drawer {
  display: none;
}
.fr-doc {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.fr-obs-m {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 14px 0;
  font-size: 12px;
}
.fr-dim {
  color: var(--pd-fg-3);
  font-size: 12px;
}
.fr-src {
  border-top: 1px solid var(--pd-line-faint);
  padding: 8px 14px;
}
.fr-src-h {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.fr-src-t {
  margin: 6px 0 0;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 13px;
}
.fr-src-a {
  margin-top: 6px;
}
.fr-obs-a {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--pd-line-faint);
}
.fr-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
}
.fr-thumb {
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  padding: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.fr-thumb img {
  width: 84px;
  height: 64px;
  object-fit: cover;
  display: block;
}
.fr-thumb:focus-visible {
  outline: 2px solid var(--pd-ink);
  outline-offset: 2px;
}
.fr-lightbox-img {
  max-width: 100%;
  height: auto;
  display: block;
}
.fr-sec {
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  background: var(--pd-card);
}
.fr-sec-h {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pd-line-faint);
  background: var(--pd-head);
}
.fr-sec-h h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.fr-sec-b {
  padding: 10px 14px 14px;
}
.fr-sec-a {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.fr-block {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px;
  margin-bottom: 10px;
}
.fr-block-h {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fr-block-a {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.fr-block.is-unsourced {
  border-color: var(--pd-warn-edge);
  background: var(--pd-warn-bg);
}
.fr-warn {
  color: var(--pd-warn-fg);
  font-size: 12px;
}
.fr-block.is-citing {
  border-color: var(--pd-ink);
  box-shadow: inset 3px 0 0 var(--pd-ink);
}
.fr-text {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  font: inherit;
  line-height: 1.55;
  padding: 8px;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  background: var(--pd-bg);
  color: var(--pd-fg);
  resize: vertical;
}
.fr-text:focus-visible {
  outline: 2px solid var(--pd-ink);
  outline-offset: 1px;
}
.fr-photo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.fr-pick,
.fr-cap {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  background: var(--pd-bg);
  color: var(--pd-fg);
}
.fr-cap {
  flex: 1 1 220px;
  min-width: 0;
}
.fr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 320px;
  padding: 2px 6px;
  font-size: 12px;
  border: 1px solid var(--pd-line);
  border-radius: var(--radius-pill);
  background: var(--pd-hover);
}
.fr-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-chip.is-assert {
  border-color: var(--pd-ink);
  background: var(--pd-hover-blue);
}
.fr-chip-x {
  border: 0;
  background: none;
  color: var(--pd-fg-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.fr-chip-x:focus-visible {
  outline: 2px solid var(--pd-ink);
  outline-offset: 1px;
}
.fr-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.fr-returned,
.fr-problems {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--pd-warn-edge);
  background: var(--pd-warn-bg);
  line-height: 1.55;
}
.fr-problems {
  border-color: var(--pd-bad-edge);
  background: var(--pd-bad-bg);
}
.fr-problems ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.fr-say {
  margin: 0 14px 10px;
  line-height: 1.6;
}
.fr-conf {
  border-top: 1px solid var(--pd-line-faint);
  padding: 10px 14px;
}
.fr-conf-h {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fr-conf-p {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}
.fr-conf-p h4 {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--pd-fg-2);
}
.fr-conf-p p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 13px;
}
.fr-conf-a {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.fr-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--pd-line);
  background: var(--pd-bg);
}
@media (max-width: 720px) {
  .fr-split {
    grid-template-columns: 1fr;
  }
  .fr-drawer {
    display: inline-block;
  }
  .fr-rail {
    display: none;
  }
  .fr-rail.is-open {
    display: grid;
    position: static;
    max-height: none;
  }
  .fr-conf-p {
    grid-template-columns: 1fr;
  }
}
@media (pointer: coarse) {
  .fr-rail {
    max-height: none;
    overflow: visible;
    position: static;
  }
}
.fr-pub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.fr-pub-progress {
  flex-basis: 100%;
}
.fr-pub-refused {
  margin-top: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  border: 1px solid var(--pd-bad-edge);
  background: var(--pd-bad-bg);
  line-height: 1.55;
}
.fr-pub-refused ul {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-9);
}
.fr-pub-strip {
  display: inline-flex;
  gap: var(--sp-3);
  align-items: center;
}
.fr-pub-detail {
  display: grid;
  gap: var(--sp-2);
  line-height: 1.55;
}
.fr-pub-detail code {
  font-family: var(--mono);
  font-size: var(--text-sm);
}
.ov-card.fr-vers-card {
  max-width: 46rem;
}
.fr-vers-list {
  display: grid;
  gap: var(--sp-6);
}
.fr-vers-row {
  padding: var(--sp-6);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  background: var(--pd-head);
}
.fr-vers-h {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.fr-vers-hash {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  word-break: break-all;
}
.fr-vers-hash code {
  font-family: var(--mono);
}
.fr-vers-a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
}
.fr-vers-grants {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}
.fr-vers-grants li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  border-top: 1px solid var(--pd-line-faint);
  padding-top: var(--sp-3);
}
.fr-vers-none {
  margin: var(--sp-5) 0 0;
  font-size: var(--text-sm);
}
.fr-vers-say {
  margin: var(--sp-8) 0 0;
  line-height: 1.6;
}
.fr-pub-link {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  background: var(--pd-head);
  word-break: break-all;
}
.fr-pub-link code {
  font-family: var(--mono);
  font-size: var(--text-sm);
}
.ov-card.fr-del-card {
  max-width: 52rem;
}
.fr-del {
  display: grid;
  gap: var(--sp-6);
}
.fr-del-fields {
  display: grid;
  gap: var(--sp-5);
}
.fr-del-lbl {
  display: grid;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--text-sm);
}
.fr-del-in,
.fr-del-text {
  width: 100%;
  font: inherit;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  background: var(--pd-bg);
  color: inherit;
  font-weight: 400;
}
.fr-del-text {
  resize: vertical;
  line-height: 1.55;
}
.fr-del-prev {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  background: var(--pd-head);
}
.fr-del-pre {
  margin: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.fr-del-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.fr-del-said {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.fr-del-said.is-bad {
  color: var(--pd-bad-ink, inherit);
}
.fr-del-hist {
  display: grid;
  gap: var(--sp-4);
}
.fr-del-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-5);
}
.fr-del-row {
  display: grid;
  gap: var(--sp-2);
  border-top: 1px solid var(--pd-line-faint);
  padding-top: var(--sp-4);
  font-size: var(--text-sm);
}
.fr-del-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.fr-lang {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.fr-clip {
  display: grid;
  gap: var(--sp-3);
  border: 1px solid var(--pd-line-faint);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.fr-clip-h {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.fr-clip-a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.fr-audio {
  width: 100%;
  max-width: 100%;
}
.fr-lang-pick {
  max-width: 220px;
}
.fr-pair {
  display: grid;
  gap: var(--sp-4);
  border-top: 1px solid var(--pd-line-faint);
  padding-top: var(--sp-4);
}
.fr-pair-c {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.fr-pair-h {
  margin: 0;
  font-size: var(--text-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.fr-op {
  display: grid;
  gap: var(--sp-2);
  border-left: 2px solid var(--pd-line);
  padding-left: var(--sp-4);
  font-size: var(--text-sm);
}
.fr-op-h {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.fr-op-t {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.fr-op-m {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.fr-off {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  border-left: 2px solid var(--pd-warn-fg);
  padding-left: var(--sp-4);
  color: var(--pd-fg-2);
}
.fr-gloss {
  display: grid;
  gap: var(--sp-4);
}
.fr-gloss-v {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.fr-gloss-l {
  display: grid;
  gap: var(--sp-3);
}
.fr-gloss-r {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
  grid-template-columns: 1fr;
}
.fr-gloss-a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.fr-gloss-t {
  display: grid;
  gap: var(--sp-3);
  border-top: 1px solid var(--pd-line-faint);
  padding-top: var(--sp-4);
}
.fr-gloss-tl {
  margin: 0;
  padding-left: var(--sp-9);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}
@media (min-width: 760px) {
  .fr-gloss-r {
    grid-template-columns: 1fr auto 1fr 1fr auto;
  }
}
.fr-draft {
  display: contents;
}
.fr-draft-c {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-left: 3px solid var(--pd-vio-edge);
  border-radius: var(--radius);
  background: var(--pd-vio-bg);
}
.fr-draft-c.is-stale {
  opacity: 0.72;
}
.fr-draft-h {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.fr-draft-stale {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--pd-warn-edge);
  border-radius: var(--radius);
  background: var(--pd-warn-bg);
  color: var(--pd-fg);
  font-size: var(--text-sm);
}
.fr-draft-blk {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--pd-line-faint);
  border-radius: var(--radius);
  background: var(--pd-card);
}
.fr-draft-blk.is-held {
  border-left: 3px solid var(--pd-warn-edge);
}
.fr-draft-blk-h {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.fr-draft-t {
  margin: 0;
  white-space: pre-wrap;
}
.fr-draft-cite {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--pd-line-faint);
  font-size: var(--text-sm);
}
.fr-draft-cite h5 {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--pd-fg-2);
}
.fr-draft-cite ul {
  margin: 0;
  padding-left: var(--sp-9);
  display: grid;
  gap: var(--sp-2);
}
.fr-draft-a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.fr-draft-bar {
  display: contents;
}
.fr-draft-off {
  max-width: 46ch;
}

/* src/web/styles/field-report-capture.css */
.frc-visit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--pd-line);
}
.frc-visit-row:last-of-type {
  border-bottom: 0;
}
.frc-visit-link {
  font-weight: 600;
  color: var(--pd-blu-fg);
  text-decoration: none;
}
.frc-visit-link:hover,
.frc-visit-link:focus-visible {
  text-decoration: underline;
}
.frc-start {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.frc-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.frc-state .fd-note {
  margin: 0;
  flex: 1 1 180px;
  min-width: 0;
}
.frc-health {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fd-fg-4);
  background: var(--fd-card-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.frc-obs,
.frc-photo {
  display: block;
  margin-bottom: 10px;
}
.frc-obs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.frc-obs-text {
  font-size: 18px;
  line-height: 1.4;
  color: var(--fd-fg);
  margin: 6px 0 4px;
  overflow-wrap: anywhere;
}
.frc-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--fd-card-2);
}
.frc-thumb-none {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 72px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--fd-card-2);
  color: var(--fd-fg-4);
  font-size: 14px;
  border: 1px dashed var(--fd-line-2);
  overflow-wrap: anywhere;
}
.frc-picker {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.frc-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 44px;
  padding: 12px;
}
.frc-pick-l {
  font-size: 16px;
  color: var(--fd-fg-2);
  overflow-wrap: anywhere;
}
.frc-form {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--fd-card);
  border: 1px solid var(--fd-line);
}
.frc-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--fd-fg-4);
  margin: 12px 0 4px;
}
.frc-in,
.frc-text {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 12px;
  min-height: 44px;
  color: var(--fd-fg);
  background: var(--fd-card-2);
  border: 1px solid var(--fd-line-2);
  border-radius: var(--radius-sm);
}
.frc-text {
  min-height: 96px;
  resize: vertical;
}
.frc-in:focus-visible,
.frc-text:focus-visible {
  outline: 2px solid var(--fd-accent);
  outline-offset: 1px;
  border-color: var(--fd-accent);
}
.frc-lang {
  margin: 10px 0 4px !important;
  font-size: 14px;
}
.frc-cats {
  flex-wrap: wrap;
}
.frc-cats .fd-alt {
  flex: 1 1 100px;
  min-height: 44px;
}
.frc-form .fd-alt.on,
.fd-btn2 .fd-alt.on {
  background: var(--fd-ok-bg);
  border-color: var(--fd-ok);
  color: var(--fd-ok);
}
.frc-pending {
  display: block;
  width: 100%;
}
.frc-pending-open {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}
.frc-pending-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.frc-pending-act {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.frc-pending-open:focus-visible,
.frc-pick:focus-visible,
.frc-visit-link:focus-visible {
  outline: 2px solid var(--fd-accent);
  outline-offset: 2px;
}
.frc-health-mime {
  margin-top: 6px;
}
.frc-rec {
  margin: 10px 0 4px;
}
.frc-rec-why {
  margin-top: 8px !important;
}
.frc-rec-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.frc-rec-top .fd-note {
  margin: 0;
  flex: 1 1 150px;
  min-width: 0;
}
.frc-rec-time {
  font-size: 20px;
  font-weight: 600;
  color: var(--fd-fg);
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
}
.frc-rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fd-bad);
  flex: 0 0 auto;
}
.frc-clip {
  display: block;
  margin: 10px 0;
}
.frc-clip.is-part {
  border-left: 4px solid var(--fd-bad);
  padding-left: 8px;
}
.frc-clip-audio {
  display: block;
  width: 100%;
  margin: 10px 0 4px;
  min-height: 44px;
}
@media (max-width: 390px) {
  .frc-obs-top,
  .frc-pending-top,
  .frc-rec-top {
    gap: 6px;
  }
  .fd-screen .fd-btn2 {
    flex-wrap: wrap;
  }
  .fd-screen .fd-btn2 > * {
    flex: 1 1 130px;
  }
}

/* src/web/styles/inbox.css */
.inbox-list {
  display: grid;
  gap: 10px;
}
.inbox-row {
  display: grid;
  gap: 6px;
  padding: var(--sp-7) var(--sp-8);
  color: inherit;
  text-decoration: none;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #d8d5ce);
  border-left: 4px solid var(--blue, #295b88);
  border-radius: var(--radius);
}
.inbox-row.is-held {
  border-left-color: var(--amber, #a86b12);
}
.inbox-row:hover {
  border-color: var(--ink-3, #77736b);
}
.inbox-row:focus-visible {
  outline: 3px solid var(--focus, #246bb2);
  outline-offset: 2px;
}
.inbox-row-top,
.inbox-detail-badges,
.inbox-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.inbox-age {
  margin-left: auto;
  color: var(--ink-3, #68645d);
  font-size: .82rem;
}
.inbox-subject {
  font-size: 1rem;
}
.inbox-from,
.inbox-target,
.inbox-reading {
  color: var(--ink-2, #4f4b45);
  font-size: .9rem;
}
.inbox-warning {
  color: var(--bad, #8d2c21);
  font-size: .86rem;
  font-weight: 650;
}
.inbox-empty {
  padding: 28px;
  text-align: center;
}
.inbox-detail-badges {
  margin: -6px 0 14px;
}
.inbox-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 16px;
  align-items: start;
}
.inbox-message,
.inbox-review {
  padding: 18px 20px;
  min-width: 0;
}
.inbox-body {
  margin: 12px 0 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.inbox-attachments,
.inbox-evidence,
.inbox-refusals,
.inbox-search-results {
  display: grid;
  gap: 8px;
}
.inbox-source-link {
  display: inline-block;
  margin-top: 16px;
}
.inbox-target-detail {
  font-size: 1.05rem;
  font-weight: 650;
}
.inbox-proposal-fields {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr;
  gap: var(--sp-4) var(--sp-6);
}
.inbox-proposal-fields dt {
  color: var(--ink-3, #68645d);
}
.inbox-proposal-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.inbox-field-proof {
  display: block;
  margin-top: 2px;
  color: var(--ink-3, #68645d);
  font-size: .82rem;
}
.inbox-evidence-row {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--wash, #f6f4ef);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.inbox-evidence-row q {
  color: var(--ink-2, #4f4b45);
}
.inbox-refusals,
.inbox-duplicate,
.inbox-exception,
.inbox-action-note {
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--radius-sm);
  background: var(--warn-bg, #fff4dc);
  color: var(--ink-1, #2f2c28);
}
.inbox-duplicate,
.inbox-exception {
  margin-bottom: 12px;
}
.inbox-actions {
  margin-top: 18px;
}
.inbox-action-host {
  margin-top: 12px;
}
.inbox-correct-form,
.inbox-search {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line, #d8d5ce);
  border-radius: var(--radius);
  background: var(--paper, #fff);
}
.inbox-correct-form label {
  display: grid;
  gap: var(--sp-3);
  font-size: .82rem;
  color: var(--ink-3, #68645d);
}
.inbox-control {
  width: 100%;
  min-width: 0;
}
.inbox-search-results {
  grid-column: 1 / -1;
}
.inbox-release-select {
  display: grid;
  gap: var(--sp-4);
  margin: 12px 0;
}
.inbox-release-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.inbox-search-hit {
  padding: 10px 12px;
  text-align: left;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #d8d5ce);
  border-radius: var(--radius-sm);
}
@media (max-width: 760px) {
  .inbox-detail-grid,
  .inbox-correct-form,
  .inbox-search {
    grid-template-columns: 1fr;
  }
  .inbox-age {
    width: 100%;
    margin-left: 0;
  }
}
.inbox-record-context {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.inbox-record {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.inbox-record summary {
  cursor: pointer;
  font-weight: 600;
}
.inbox-record[open] summary {
  margin-bottom: 6px;
}
.inbox-outcome {
  padding: 16px;
  margin-bottom: 14px;
}
.inbox-release-row .inbox-warning {
  grid-column: 2 / -1;
}

/* src/web/styles/touch.css */
.tk-stage {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tk-stage * {
  -webkit-touch-callout: none;
}
.tk {
  -webkit-tap-highlight-color: transparent;
}
.tk-toolbar,
.tk-status,
.sh-identity {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tk input,
.tk textarea,
.tk select,
.tk [contenteditable],
.tk-text-picked,
.sh-note-pop p {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
.tk button,
.tk .btn,
.tk .sh-tab,
.tk .sh-zone-head,
.tk .sh-block-head,
.tk .sh-fold-head {
  touch-action: manipulation;
}
@media (pointer: coarse) {
  .tk-tool {
    width: 40px;
    height: 36px;
  }
  .tk-toolbar button.small {
    min-height: 32px;
  }
  .sh-identity button {
    min-height: 32px;
  }
  .sh-zone-head,
  .sh-block-head,
  .sh-fold-head {
    min-height: 36px;
  }
  .sh-tab {
    min-height: 36px;
  }
  .tk-sheet {
    padding: 8px 2px;
  }
  .tk-menu-item {
    min-height: 36px;
  }
}

/* src/web/styles/index.css */
/*# sourceMappingURL=app.css.map */