/* Conduit Sketch - application chrome. The sheet itself is styled by the renderer.

   Everything is scoped under .csk-root so the whole stylesheet can be loaded into
   Sparky QC without touching the host page. There is no @page rule here on
   purpose - see the note in js/app.js about printing. */

.csk-root {
  --accent: #2E9BE8;        /* the Sparky blue, from the mark */
  --caution: #E8A33D;       /* needs attention - NOT the accent, see README */
  --redline: #DC0E2F;       /* the red from the wordmark, reserved for QC marks */
  --cable: #1163d6;
  --ground: #188a4d;
  --ok: #00c2a8;
  --radius: 3px;            /* Sparky's corners are squarer than Hot Pass's */
  --rail: 78px;
  --side: 356px;
}

/* Screen background, dark through light. */
.csk-root[data-theme="black"] { --bg:#000000; --panel:#0b0d10; --panel2:#141821; --line:#242a33; --text:#e9eef5; --dim:#8b97a6; --field:#171c24; }
.csk-root[data-theme="dark"] { --bg:#12161A; --panel:#181e27; --panel2:#202833; --line:#2c3542; --text:#e9eef5; --dim:#93a1b3; --field:#232c38; }
.csk-root[data-theme="slate"] { --bg:#2b333f; --panel:#333c4a; --panel2:#3d4756; --line:#4a5566; --text:#eef2f7; --dim:#b3bfcd; --field:#46515f; }
.csk-root[data-theme="gray"] { --bg:#9aa3ae; --panel:#e7ebf0; --panel2:#f2f5f8; --line:#c3cbd5; --text:#1b2129; --dim:#5b6673; --field:#ffffff; }
.csk-root[data-theme="light"] { --bg:#e8ecf1; --panel:#ffffff; --panel2:#f4f7fa; --line:#d6dde6; --text:#161b22; --dim:#5d6773; --field:#ffffff; }

.csk-root, .csk-root * { box-sizing: border-box; }
.csk-root [hidden] { display: none !important; }

.csk-root {
  height: 100%; margin: 0;
  font: 13px/1.45 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text); background: var(--bg);
  overflow: hidden;
}

.csk-root { display: grid; grid-template-rows: auto 1fr auto; }

/* ---------- top bar ---------- */
.csk-root #topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 12px; background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.csk-root .brand { display: flex; align-items: baseline; gap: 7px; user-select: none; }
.csk-root .brand .mark { width: 25px; height: 25px; flex: none; transform: translateY(5px); }
.csk-root .brand .mark svg { width: 100%; height: 100%; display: block; }
.csk-root .brand .name { font-weight: 800; letter-spacing: 1.6px; font-size: 14px; }
.csk-root .brand .sub { color: var(--dim); font-size: 11px; letter-spacing: .4px; }

.csk-root .group { display: flex; align-items: center; gap: 6px; }
.csk-root .group.grow { margin-left: auto; }

.csk-root .btn {
  font: inherit; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
.csk-root .btn:hover { background: var(--field); border-color: var(--accent); }
.csk-root .btn.primary { background: var(--accent); border-color: var(--accent); color: #0d1520; font-weight: 700; }
.csk-root .btn.primary:hover { filter: brightness(1.08); }
.csk-root .btn.sm { padding: 3px 8px; font-size: 12px; }
.csk-root .btn.danger:hover { border-color: var(--redline); color: var(--redline); }

.csk-root .fld { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.csk-root .fld > span { text-transform: uppercase; letter-spacing: .6px; }
.csk-root select, .csk-root input[type="text"], .csk-root input[type="number"],
.csk-root input:not([type]), .csk-root textarea {
  font: inherit; color: var(--text); background: var(--field);
  border: 1px solid var(--line); border-radius: 2px; padding: 4px 6px;
}
.csk-root select:focus, .csk-root input:focus, .csk-root textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.csk-root input[type="checkbox"] { accent-color: var(--accent); }

/* The state control is the one thing in the chrome that changes what the drawing
   means, so when the drawing is not the design it says so in the chrome as well as
   on the sheet. Somebody working in redline mode for an hour should never be able
   to forget which state they are in. */
.csk-root.mode-redline #modeWrap > span,
.csk-root.mode-asbuilt #modeWrap > span { color: var(--redline); font-weight: 700; }
.csk-root.mode-redline #selMode,
.csk-root.mode-asbuilt #selMode { border-color: var(--redline); color: var(--redline); font-weight: 700; }
.csk-root.mode-redline #stage { box-shadow: inset 0 0 0 3px var(--redline); }
.csk-root.mode-asbuilt #stage { box-shadow: inset 0 0 0 3px var(--ok); }

/* ---------- main ---------- */
.csk-root #main { display: flex; min-height: 0; }

.csk-root #toolrail {
  width: var(--rail); flex: 0 0 var(--rail);
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; overflow-y: auto;
}
.csk-root .tool {
  display: grid; gap: 2px; justify-items: center;
  padding: 7px 2px; border: 1px solid transparent; border-radius: var(--radius);
  background: none; color: var(--dim); font: inherit; cursor: pointer;
}
.csk-root .tool b { font-size: 15px; line-height: 1; font-weight: 800; }
.csk-root .tool span { font-size: 10px; letter-spacing: .2px; }
.csk-root .tool:hover { background: var(--panel2); color: var(--text); }
.csk-root .tool.active { background: var(--accent); color: #0d1520; border-color: var(--accent); }
.csk-root .tool.cable b { color: var(--cable); }
.csk-root .tool.redline b { color: var(--redline); }
.csk-root .tool.ground b { color: var(--ground); }
.csk-root .tool.active b { color: inherit; }
.csk-root .tool.ghost { color: var(--dim); }
.csk-root .railgap { flex: 1; }

/* ---------- stage ---------- */
.csk-root #stage { position: relative; flex: 1; min-width: 0; background: var(--bg); overflow: hidden; }
.csk-root #canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.csk-root #canvas:focus { outline: none; }
.csk-root.tool-select #canvas { cursor: default; }
.csk-root.tool-pan #canvas { cursor: grab; }
.csk-root #sheetHost { filter: drop-shadow(0 6px 22px rgba(0,0,0,.45)); }
.csk-root .cs-hit { cursor: pointer; }
.csk-root .cs-hit-lbl { cursor: move; }

.csk-root #sheetTabs {
  position: absolute; left: 10px; bottom: 10px; display: flex; gap: 5px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line); border-radius: 4px; padding: 5px; max-width: calc(100% - 20px);
  overflow-x: auto;
}
.csk-root .sheetTab {
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim); cursor: pointer; white-space: nowrap;
}
.csk-root .sheetTab.active { background: var(--accent); color: #0d1520; border-color: var(--accent); font-weight: 700; }

.csk-root #inlineEdit {
  position: absolute; z-index: 20; background: var(--panel);
  border: 1px solid var(--accent); border-radius: 3px; padding: 6px;
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.csk-root #inlineEdit input { width: 200px; }
.csk-root #inlineEdit .hint { font-size: 10px; color: var(--dim); margin-top: 4px; }

/* ---------- side panel ---------- */
.csk-root #side {
  width: var(--side); flex: 0 0 var(--side); background: var(--panel);
  border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0;
}
.csk-root .tabs { display: flex; border-bottom: 1px solid var(--line); }
.csk-root .tab {
  flex: 1; font: inherit; font-size: 11px; padding: 8px 2px; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--dim);
}
.csk-root .tab:hover { color: var(--text); }
.csk-root .tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }
.csk-root .panes { flex: 1; min-height: 0; overflow-y: auto; }
.csk-root .pane { display: none; padding: 12px; }
.csk-root .pane.active { display: block; }

.csk-root h4 {
  margin: 16px 0 8px; font-size: 10.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--dim); font-weight: 700;
}
.csk-root h4:first-child { margin-top: 0; }

.csk-root .row { display: grid; grid-template-columns: 104px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.csk-root .row > label { font-size: 11.5px; color: var(--dim); }
.csk-root .row > select, .csk-root .row > input, .csk-root .row > textarea { width: 100%; }
.csk-root .row.wide { grid-template-columns: 1fr; }
.csk-root .rowflex { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* feet / inches / fraction, and any other three-across group */
.csk-root .lenpick { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 5px; }
.csk-root .lenpick > div { display: flex; align-items: center; gap: 4px; min-width: 0; }
.csk-root .lenpick input, .csk-root .lenpick select { width: 100%; min-width: 0; }
.csk-root .lenpick .lenunit { font-size: 10px; color: var(--dim); letter-spacing: .4px; }
.csk-root .check { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 12px; }
.csk-root .muted { color: var(--dim); font-size: 11.5px; }
.csk-root .note { color: var(--dim); font-size: 11px; margin: 8px 0 0; line-height: 1.5; }
.csk-root .empty { color: var(--dim); font-size: 12px; padding: 22px 6px; text-align: center; }
.csk-root .ok-note {
  color: var(--text); font-size: 11.5px; line-height: 1.5; margin: 0 0 8px;
  border-left: 3px solid var(--ok); padding: 7px 9px; background: var(--panel2);
}

/* ---------- findings ----------
   The checks are the thing this tool has that a piping isometric does not, so
   they get real presentation rather than a bullet list: severity in the border,
   the rule underneath, and the number in the text. */
.csk-root .finding {
  border-left: 3px solid var(--caution); padding: 7px 9px; margin-bottom: 7px;
  background: var(--panel2); border-radius: 0 2px 2px 0;
}
.csk-root .finding.over { border-left-color: var(--redline); }
.csk-root .finding .fhd { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.csk-root .finding .fhd b { font-size: 9.5px; letter-spacing: 1px; color: var(--caution); }
.csk-root .finding.over .fhd b { color: var(--redline); }
.csk-root .finding .ftext { font-size: 11.5px; line-height: 1.5; margin: 3px 0 3px; }
.csk-root .finding .muted { font-size: 10px; font-family: Consolas, "Courier New", monospace; }

/* component palette */
.csk-root .parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.csk-root .part {
  font: inherit; font-size: 11px; text-align: left; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--panel2);
  color: var(--text); cursor: pointer; line-height: 1.3;
}
.csk-root .part:hover { border-color: var(--accent); }
.csk-root .part.active { background: var(--accent); color: #0d1520; border-color: var(--accent); font-weight: 700; }

/* direction grid */
.csk-root .dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.csk-root .dirbtn {
  font: inherit; font-size: 11px; padding: 5px 2px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer;
}
.csk-root .dirbtn:hover { border-color: var(--accent); }
.csk-root .dirbtn.active { background: var(--accent); color: #0d1520; border-color: var(--accent); font-weight: 700; }

/* schedule tables */
.csk-root table.bom { width: 100%; border-collapse: collapse; font-size: 11px; }
.csk-root table.bom th {
  text-align: left; color: var(--dim); font-size: 9.5px; letter-spacing: .6px;
  text-transform: uppercase; border-bottom: 1px solid var(--line); padding: 5px 4px;
}
.csk-root table.bom td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.csk-root table.bom td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.csk-root .totals { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 11.5px; }
.csk-root .totals span:nth-child(odd) { color: var(--dim); }

/* sheets list */
.csk-root .sheetRow {
  display: flex; align-items: center; gap: 6px; padding: 7px 8px; margin-bottom: 5px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel2);
}
.csk-root .sheetRow.active { border-color: var(--accent); }
.csk-root .sheetRow .nm { flex: 1; font-size: 12px; }
.csk-root .sheetRow .no { color: var(--dim); font-size: 11px; min-width: 20px; }

.csk-root .speclist { display: grid; gap: 6px; }
.csk-root .specRow { border: 1px solid var(--line); border-radius: 3px; padding: 8px; background: var(--panel2); }
.csk-root .specRow .hd { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; }
.csk-root .specRow .hd b { font-size: 12px; }

/* ---------- status ---------- */
.csk-root #status {
  display: flex; align-items: center; gap: 10px; padding: 5px 12px;
  background: var(--panel); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--dim);
}
.csk-root #status .spacer, .csk-root .group .spacer { flex: 1; }
.csk-root .chip {
  padding: 2px 8px; border-radius: 20px; background: var(--panel2);
  border: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.csk-root .fld.inline { color: var(--dim); }
/* A locked length is in force whether or not you are looking at the bar. */
.csk-root .fld.inline.locked > span { color: var(--accent); font-weight: 700; }
.csk-root .fld.inline.locked input { border-color: var(--accent); }
.csk-root #statusText { color: var(--text); }