/* digital.css - the digital workspace's own views and controls. The chrome
   (menu bar, library rail, document head, tabs, run setup pane, dock and
   status bar) is shell.css, the same as the circuit library's. */

/* ---------- library rail: the design list and its foot ---------- */
.designlist { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 2px 8px 0; padding: 0 0 12px; border-left: 0; scrollbar-color: #5d6e88 var(--nav-bg); scrollbar-width: thin; }
.designlist .catitem { border-radius: 0 6px 6px 0; }
.designlist .catitem[aria-current="page"] { background: #e8efff; border-left-color: #6995ff; }
.designlist .catitem[aria-current="page"] .catname { color: #15397e; font-weight: 700; }
.designlist .catmeta { font-size: 10.5px; color: var(--nav-muted); }
.designlist .catitem[aria-current="page"] .catmeta { color: #526581; }
.designlist > p { color: var(--nav-muted); font-size: 12px; margin: 8px 6px; }

/* ---------- the view ---------- */
.digital-panel { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 16px 24px; background: var(--canvas); outline-offset: -2px; }
.digital-panel h2 { font-size: 15px; font-weight: 700; letter-spacing: -.005em; margin: 0 0 10px; }
.digital-panel h3 { font-size: 13px; font-weight: 650; margin: 16px 0 8px; }
.digital-panel p { margin: 0 0 12px; line-height: 1.55; }
.digital-panel p, .digital-panel li { max-width: 85ch; }
.digital-panel li + li { margin-top: 7px; }
.digital-panel pre { font: 12px/1.6 var(--mono); padding: 12px 16px; margin: 12px 0 0; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); white-space: pre; overflow: auto; tab-size: 2; }
.digital-panel .code-note, .signal-note { color: var(--ink-3); font-size: 12px; }
.digital-notice { padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--blue); border-radius: 0 3px 3px 0; background: var(--blue-wash); line-height: 1.6; }
.digital-notice h3 { margin: 0 0 6px; }
.digital-notice p { margin: 0; }

/* the document head: a design's JSON beside its Run */
.docaction { flex: none; align-self: center; margin-left: auto; min-height: 28px; display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); color: var(--ink-2); font-size: 11px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.docaction:hover { color: var(--blue); border-color: var(--blue-line); background: var(--blue-wash); }
.dochead .docaction + #head-run, .dochead #head-run:only-of-type { margin-left: 0; }
.dochead .docaction[hidden] + #head-run { margin-left: auto; }

/* ---------- run setup: the modes as a radio list, like the analyses ---------- */
.stage-buttons { display: flex; flex-direction: column; gap: 1px; }
.stage-button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; padding: 5px 6px; border: 0; border-radius: 6px; background: none; color: var(--ink); font-size: 13px; text-align: left; cursor: pointer; }
.stage-button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1.5px solid #aeb6c3; background: var(--canvas); }
.stage-button:hover:not(:disabled) { background: rgba(20,25,34,.04); }
.stage-button[aria-pressed="true"] { font-weight: 650; }
.stage-button[aria-pressed="true"]::before { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 3.2px, var(--canvas) 3.8px); }
.stage-button small { margin-left: auto; color: var(--ink-3); font-size: 10.5px; font-weight: 500; }
.stage-button:disabled { opacity: .55; cursor: default; }
.stage-summary { margin-top: 6px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.stage-summary p { margin: 0 0 5px; }
.stage-status { display: inline-block; margin-bottom: 7px; font-size: 10.5px; font-weight: 650; color: var(--run); }
.stage-status.unavailable { color: #805a14; }
.btn2.wide { display: block; width: 100%; min-height: 30px; margin-top: 6px; text-align: center; }
.btn2.wide:first-child { margin-top: 0; }
#synthesize-digital { color: var(--blue); border-color: var(--blue-line); }
#synthesize-digital:hover:not(:disabled) { background: var(--blue-wash); }
#cancel-digital { color: #763e13; border-color: #d9a57b; background: #fff7ef; }
#run-digital { min-height: 34px; font-size: 13px; }
.corner-label { display: block; margin: 10px 0 4px; font-size: 12px; color: var(--ink-2); }
#digital-corner { width: 100%; min-height: 30px; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); color: var(--ink); font-size: 12.5px; }
.setup .hint { margin-top: 8px; }
.run-details { margin-top: 10px; font-size: 11.5px; }
.run-details summary { cursor: pointer; color: var(--ink-2); }
.run-details p { margin: 7px 0; overflow-wrap: anywhere; }
.run-details pre { max-height: 180px; overflow: auto; margin: 6px 0; padding: 6px; border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); font: 10.5px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ip-run-options[hidden] { display: none; }
.ip-run-options h3 { font-size: 12.5px; font-weight: 650; margin: 0 0 6px; }
.ip-run-options label { font-size: 12px; color: var(--ink-2); display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 6px; align-items: center; margin-top: 6px; }
.ip-run-options input { width: 70px; min-width: 0; padding: 4px 6px; font: 500 12.5px/1 var(--mono); border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); }
.ip-run-options .stage-buttons { margin-bottom: 4px; }
.design-files { display: grid; gap: 1px; }
.design-files a, .design-files button { display: block; width: 100%; padding: 4px 0; border: 0; background: none; color: var(--blue-ink); font-size: 12px; text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.design-files a:hover, .design-files button:hover { text-decoration: underline; }
.flow-details { font-size: 12px; color: var(--ink-3); }
.flow-details > summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; font-weight: 650; padding: 2px 0; }
.flow-details p { margin: 10px 0 0; line-height: 1.55; }
.project-details > summary { font-size: 12.5px; }

/* ---------- library foot: the cell library and a note ---------- */
.libfoot { flex: none; padding: 6px 8px 10px; border-top: 1px solid #293a52; }
.railitem { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 30px; padding: 5px 6px; border: 0; border-radius: 6px; background: none; color: var(--nav-ink); font-size: 12.5px; text-align: left; cursor: pointer; }
.railitem:hover { background: #213149; }
.railitem span { font: 11px/1.4 var(--mono); color: var(--nav-muted); }
.railnote { margin: 6px 6px 0; color: var(--nav-muted); font-size: 11px; line-height: 1.5; }

/* ---------- IP entries ---------- */
.ip-reference-label { display: block; color: var(--ink-3); font-size: 10.5px; font-weight: 400; }
.ip-architecture { margin: 10px 0 14px; border: 1px solid var(--rule); border-radius: 3px; overflow-x: auto; }
.ip-architecture svg { display: block; width: 100%; min-width: 600px; height: auto; }
.ip-architecture figcaption { padding: 0 10px 9px; font-size: 11px; color: var(--ink-3); }
.ip-source-files, .ip-provenance { display: grid; gap: 7px; overflow-wrap: anywhere; }
.ip-provenance { border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 8px; }
.ip-provenance p, .ip-provenance h3 { margin: 0; }
.ip-provenance code { font-size: 11px; word-break: break-all; }

/* ---------- timing, waveforms, tables ---------- */
.timing-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.timing-choices button { min-height: 28px; padding: 4px 9px; border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); color: var(--blue-ink); font-size: 12px; cursor: pointer; }
.timing-choices button:hover { border-color: var(--blue); }
.wave-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--rule); border-radius: 3px; background: #fbfcff; margin-top: 14px; }
.wave-scroll svg { display: block; width: 100%; min-width: 800px; height: auto; }
.wave-viewer { margin-block: 10px; }
.wave-controls, .wave-edge-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-block: 4px; }
.wave-controls button, .wave-edge-controls button, .wave-edge-controls select { min-height: 27px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); background: var(--canvas); font-size: 11.5px; cursor: pointer; }
.wave-edge-controls label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; }
.wave-edge-controls select { max-width: 180px; }
.wave-controls button:hover, .wave-edge-controls button:hover { border-color: var(--blue); color: var(--blue-ink); }
.wave-extent { margin-left: auto; color: var(--ink-3); font: 10.5px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.digital-panel .wave-readout { margin: 5px 0; font: 11.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.wave-viewer .wave-scroll { margin-top: 4px; }
.signal-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 14px; }
.signal-table th, .signal-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.signal-table th { background: var(--panel); color: var(--ink-2); font-weight: 600; }
.delay-table { margin-top: 0; }
.delay-table :is(th, td) { padding: 5px 8px; }
.delay-table :is(th, td):nth-child(n+3) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delay-table td.cellname, .delay-table td.instance { font: 12px/1.4 var(--mono); }
.delay-table td.instance { color: var(--ink-2); }
.observation-details { margin-top: 12px; font-size: 12px; }
.observation-details summary { cursor: pointer; color: var(--ink-2); }
.cell-search { display: flex; align-items: center; gap: 12px; margin: 15px 0 10px; }
#cell-filter { width: 100%; max-width: 340px; min-height: 30px; padding: 4px 7px; border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); color: var(--ink); font-size: 12.5px; }
.cell-search span { white-space: nowrap; font-size: 11.5px; color: var(--ink-3); }
.table-scroll { max-width: 100%; overflow: auto; overflow-x: auto; }
.cell-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.cell-table th, .cell-table td { padding: 6px 9px; border-bottom: 1px solid var(--rule-2); text-align: left; vertical-align: top; }
.cell-table th { background: var(--panel); color: var(--ink-2); font-weight: 600; position: sticky; top: 0; }
.cell-table td:first-child { font-family: var(--mono); }
.cell-table tr.in-design { background: var(--blue-wash); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ---------- a phone: one column, and the page scrolls (as in shell.css) ---------- */
@media (max-width: 899px) {
  .digital-panel { overflow: visible; min-height: 320px; padding: 14px 12px 20px; }
  .stage-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .stage-button { min-height: 36px; border: 1px solid var(--rule); border-radius: 3px; background: var(--canvas); }
  .designlist { overflow: visible; }
}
/* On phones the title-row actions start at the left, as on the circuit library. */
@media (max-width: 560px) { .docaction, .dochead .docaction[hidden] + #head-run { margin-left: 0; } }
@media (max-width: 420px) { .stage-buttons { grid-template-columns: minmax(0, 1fr); } .cell-search { flex-wrap: wrap; } }