/* ============================================================
   ProjectTelemetry — 2D Takeoff   ·   assets/takeoff.css
   ============================================================ */
.tk-land { display: flex; flex-direction: column; gap: 14px; }
.tk-hint { font-size: 11.5px; color: var(--ink-faint); }
.tk-toffs { display: flex; flex-direction: column; gap: 10px; }
.tk-toffcard { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--bd); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .12s; }
.tk-toffcard:hover { border-color: var(--accent); }
.tk-toff-i { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--bg); color: var(--accent); font-size: 19px; }
.tk-toff-main { flex: 1; min-width: 0; }
.tk-toff-t { font-weight: 700; font-size: 14px; }
.tk-toff-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.tk-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: var(--bg); color: var(--ink-soft); vertical-align: middle; }
.tk-pill.pos { background: #dcfce7; color: #166534; } .tk-pill.mut { background: var(--bg); color: var(--ink-faint); }

.tk-empty { text-align: center; padding: 56px 20px; color: var(--ink-soft); }
.tk-empty i { font-size: 40px; color: var(--ink-faint); }
.tk-empty h3 { margin: 12px 0 4px; font-size: 17px; color: var(--ink); }
.tk-empty p { margin: 0 auto 14px; max-width: 440px; font-size: 13px; }

/* ── workspace ── */
.tk-wrap-outer { display: flex; flex-direction: column; height: calc(100vh - var(--hdr-h, 56px) - 90px); min-height: 520px; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; background: var(--white); }
.tk-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--bd); background: var(--bg); flex-shrink: 0; }
.tk-toff-name { font-weight: 700; font-size: 14px; }
.tk-sheet-sel { max-width: 320px; padding: 5px 8px; border: 1.5px solid var(--bd); border-radius: 6px; font-size: 12.5px; background: var(--white); color: var(--ink); }
.tk-topbar-sp { flex: 1; }
.tk-scalechip { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; background: var(--white); border: 1px solid var(--bd); }
.tk-scalechip.uncal { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }

.tk-body { display: flex; flex: 1; min-height: 0; }
.tk-condrail { width: 240px; flex-shrink: 0; border-right: 1px solid var(--bd); display: flex; flex-direction: column; overflow-y: auto; padding: 12px; gap: 8px; }
.tk-rail-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.tk-conds { display: flex; flex-direction: column; gap: 5px; }
.tk-cond { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background .1s; }
.tk-cond:hover { background: var(--bg); }
.tk-cond.on { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tk-cond-sw { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; }
.tk-cond-main { flex: 1; min-width: 0; }
.tk-cond-t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-cond-t i { font-size: 13px; color: var(--ink-faint); }
.tk-cond-q { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tk-cond-edit { border: none; background: none; color: var(--ink-faint); cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.tk-cond-edit:hover { background: var(--bd); }
.tk-rail-empty { font-size: 12px; color: var(--ink-faint); padding: 8px 4px; }
.tk-add-cond { margin-top: auto; }

/* ── viewer ── */
.tk-viewer { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tk-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--bd); background: var(--bg); flex-shrink: 0; }
.tk-tool { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; background: none; border-radius: 7px; color: var(--ink-soft); cursor: pointer; font-size: 16px; }
.tk-tool:hover { background: var(--white); color: var(--ink); }
.tk-tool.on { background: var(--accent); color: #fff; }
.tk-tb-sp { flex: 1; }
.tk-stage { flex: 1; position: relative; overflow: hidden; background: #4b5563; touch-action: none; cursor: grab; }
.tk-stage.tool-count, .tk-stage.tool-linear, .tk-stage.tool-area, .tk-stage.tool-calibrate { cursor: crosshair; }
.tk-canvaswrap { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.tk-sheet-img { display: block; box-shadow: 0 2px 20px rgba(0,0,0,.35); background: #fff; }
.tk-svg { position: absolute; top: 0; left: 0; overflow: visible; }
.tk-svg .tk-hit:hover { filter: brightness(1.15); }
.tk-stage-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #e5e7eb; font-size: 14px; }
.tk-readout { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(17,24,39,.92); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }

/* ── rollup ── */
.tk-rollup { width: 250px; flex-shrink: 0; border-left: 1px solid var(--bd); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tk-tot { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.tk-tot-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tk-tot-l { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.tk-tot.sm { font-size: 12px; color: var(--ink-soft); padding: 8px 14px; }
.tk-cc-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-top: 4px; }
.tk-cc { width: 100%; border-collapse: collapse; font-size: 12px; }
.tk-cc th { text-align: left; font-size: 10px; text-transform: uppercase; color: var(--ink-faint); padding: 4px 6px; border-bottom: 1px solid var(--bd); }
.tk-cc td { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--bd) 55%, transparent); }
.tk-cc td.num, .tk-cc th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tk-unassigned { color: var(--ink-faint); font-style: italic; }
.tk-push { margin-top: 6px; }

/* ── condition modal extras ── */
.tk-asm { margin-top: 14px; border-top: 1px solid var(--bd); padding-top: 12px; }
.tk-asm-hd { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.tk-asm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--bd); border-radius: 7px; margin-bottom: 6px; }
.tk-asm-nm { font-weight: 600; font-size: 12.5px; flex-shrink: 0; }
.tk-asm-meta { flex: 1; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .tk-condrail { width: 180px; }
  .tk-rollup { display: none !important; }
}