/* Canonical Design records: the native sequence tools, arranged as a workbench. */
#design-record-context {
  --dc-ink: var(--pv-ink, #24332b);
  --dc-muted: var(--pv-muted, #748178);
  --dc-line: var(--pv-line, #e2e7e1);
  --dc-surface: var(--pv-surface, #fff);
  --dc-subtle: var(--pv-surface-2, #f7f9f6);
  color: var(--dc-ink);
  min-width: 0;
}
#design-record-context [hidden] { display: none !important; }
#design-record-context .dc-header { gap: 20px; margin-bottom: 16px; background: transparent; border: 0; border-radius: 0; }
#design-record-context .dc-document-heading { min-width: 0; }
#design-record-context .dc-breadcrumb { font-size: 12px; margin: 12px 0 6px; color: var(--dc-muted); }
#design-record-context h1 { margin: 0 0 12px; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.25; font-weight: 650; letter-spacing: -.7px; }
#design-record-context .dc-document-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; line-height: 1.6; }
#design-record-context .dc-document-meta > span { padding: 3px 8px; border: 1px solid var(--dc-line); border-radius: 5px; background: var(--dc-subtle); color: var(--pv-ink-2, #56655a); }
#design-record-context .dc-goal { font-size: 13px; color: var(--pv-ink-2, #56655a); margin: 12px 0 0; }
#design-record-context .dc-context-note { padding: 10px 12px; margin-bottom: 20px; font-size: 12px; background: var(--pv-accent-tint, #f1f5ed); border-color: var(--dc-line); color: var(--pv-ink-2, #56655a); }
#design-record-context .dc-document-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--dc-line); border-radius: 0; background: transparent; overflow-x: auto; }
#design-record-context .dc-document-tabs button { position: relative; flex: 0 0 auto; min-height: 44px; margin: 0; padding: 11px 16px; border: 0; border-radius: 5px 5px 0 0; background: transparent; color: var(--dc-muted); font-size: 13px; font-weight: 500; }
#design-record-context .dc-document-tabs button:hover:not(:disabled) { color: var(--dc-ink); background: var(--dc-subtle); }
#design-record-context .dc-document-tabs button[aria-selected="true"] { color: var(--pv-accent-ink, #43563a); background: var(--pv-accent-tint, #f1f5ed); font-weight: 600; }
#design-record-context .dc-document-tabs button[aria-selected="true"]::after { content: ''; position: absolute; inset: auto 12px 0; height: 2px; background: var(--pv-accent, #81906f); border-radius: 2px; }
#design-record-context .dc-document-tabs button:disabled { cursor: not-allowed; opacity: .5; }
#design-record-context :is(button, [role="tabpanel"]):focus-visible { outline: 2px solid var(--pv-accent, #81906f); outline-offset: 3px; }
#design-record-context .dc-sequence-actions { display: flex; align-items: center; gap: 7px; margin: 0; padding: 14px 0 9px; }
#design-record-context .dc-sequence-actions button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#design-record-context button:hover:not(:disabled) { color: var(--dc-ink); }
#design-record-context button.gold:hover:not(:disabled) { color: var(--pv-on-accent, #fff); }
#design-record-context .dc-sequence-actions [data-seq-action="map"] { margin-left: auto; border-color: var(--pv-line-2, #d2dbce); color: var(--pv-accent-ink, #43563a); background: var(--pv-accent-tint, #f1f5ed); }
#design-record-context .dc-sequence-feedback { margin-bottom: 16px; }
#design-record-context .dc-sequence-feedback > p { margin: 4px 0; font-size: 12px; }
#design-record-context .dc-sequence-feedback .ws-error { padding: 10px 12px; border: 1px solid #e7beb3; border-radius: 6px; background: #fff4f0; color: #8a3f2b; }
#design-record-context .dc-record-panel { min-width: 0; }
#design-record-context .dc-record-panel > .ws-section,
#design-record-context .dc-analysis-sidebar > .ws-section { margin: 0; padding: 20px; border: 1px solid var(--dc-line); border-radius: 8px; background: var(--dc-surface); min-width: 0; }
#design-record-context .dc-record-panel .ws-section > header { margin-bottom: 14px; }
#design-record-context .dc-record-panel h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--dc-ink); }
#design-record-context .dc-record-panel .ws-muted { font-size: 12px; line-height: 1.6; color: var(--dc-muted); }
#design-record-context .dc-record-panel .ws-field > span { font-size: 12px; color: var(--pv-ink-2, #56655a); }
#design-record-context #ws-sequence-text { box-sizing: border-box; width: 100%; min-height: 270px; padding: 16px; border: 1px solid var(--dc-line); border-radius: 6px; background: var(--dc-subtle); color: var(--dc-ink); font-size: 13px; line-height: 1.85; letter-spacing: .07em; resize: vertical; }
#design-record-context .dc-annotations-panel { display: grid; gap: 16px; }
#design-record-context .dc-analysis-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); align-items: start; gap: 16px; }
#design-record-context .dc-analysis-sidebar { display: grid; gap: 16px; min-width: 0; }
#design-record-context .dc-analysis-panel .ws-section:has(#ws-sequence-provenance) { grid-column: 1 / -1; }
#design-record-context .dc-record-panel summary { color: var(--pv-ink-2, #56655a); font-size: 13px; }
#design-record-context .dc-record-panel .ws-meta { grid-template-columns: minmax(105px, auto) minmax(0, 1fr); gap: 8px 18px; font-size: 12px; }
#design-record-context #ws-sequence-runs button { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; }
#design-record-context #ws-sequence-runs small { display: block; margin-top: 4px; color: var(--dc-muted); }
#design-record-context #dc-structure { margin-top: 18px; }
#design-record-context .dc-structure-toolbar { padding: 12px; border: 1px solid var(--dc-line); border-radius: 8px; background: var(--dc-surface); }
#design-record-context .dc-structure-toolbar .ws-field { margin: 0; }
#design-record-context .dc-structure-toolbar button[aria-pressed="true"] { background: var(--pv-accent-tint, #f1f5ed); border-color: var(--pv-line-2, #d2dbce); color: var(--pv-accent-ink, #43563a); }
#design-record-context [data-design-structure-status] { font-family: var(--mono, monospace); font-size: 10px; line-height: 1.6; color: var(--dc-muted); }
@media (max-width: 1050px) {
  #design-record-context .dc-analysis-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  #design-record-context .dc-document-tabs button { padding-inline: 12px; font-size: 12px; }
  #design-record-context .dc-record-panel > .ws-section,
  #design-record-context .dc-analysis-sidebar > .ws-section { padding: 15px; }
  #design-record-context .dc-sequence-actions [data-seq-action="map"] { margin-left: 0; }
  #design-record-context #ws-sequence-text { min-height: 220px; padding: 12px; font-size: 12px; }
}

/* Integrated sequence workbench: recorded map, sequence positions, tools and history. */
#design-record-context .dc-document-tabs { gap: 0; }
#design-record-context .dc-document-tabs button { padding-inline: 14px; }
#design-record-context .dc-view-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; font-size: 12px; color: var(--pv-ink-2, #56655a); }
#design-record-context .dc-view-toolbar > div { display: flex; align-items: center; gap: 12px; }
#design-record-context #dc-record-map { height: clamp(320px, calc(100dvh - 440px), 580px); min-width: 0; background: #fff; border: 1px solid var(--dc-line); border-radius: 8px; overflow: hidden; }
#design-record-context .dc-map-unavailable { display: grid; align-content: center; justify-items: center; min-height: 280px; padding: 24px; text-align: center; background: var(--dc-surface); height: 100%; }
#design-record-context .dc-map-unavailable h2 { margin: 0 0 12px; font-size: 18px; }
#design-record-context .dc-map-unavailable p { max-width: 440px; color: var(--dc-muted); font-size: 13px; }
#design-record-context .dc-map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 14px; }
#design-record-context .dc-map-legend button { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 5px 2px; background: transparent; color: var(--pv-ink-2, #56655a); font-size: 12px; }
#design-record-context .dc-map-legend small { color: var(--dc-muted); font-family: var(--mono, monospace); font-size: 10px; }
#design-record-context .dc-map-legend button[aria-pressed=true] { color: var(--pv-accent-ink, #1d4f91); }
#design-record-context .dc-feature-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--feature-color); flex-shrink: 0; }
#design-record-context .dc-map-source { margin: 14px 0 0; text-align: center; font-size: 11px; color: var(--dc-muted); }
#design-record-context .dc-sequence-reader { margin-bottom: 16px; padding: 16px 20px; border: 1px solid var(--dc-line); border-radius: 8px; background: var(--dc-surface); }
#design-record-context .dc-sequence-reader > .ws-muted { margin: 0 0 12px; font-size: 12px; }
#design-record-context .dc-sequence-reader .dc-view-toolbar { padding-top: 0; }
#design-record-context .dc-positioned-sequence { max-height: 320px; overflow: auto; padding: 12px 0; border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); font-family: var(--mono, monospace); font-size: 13px; line-height: 1.9; user-select: none; }
#design-record-context .dc-base-row { display: grid; grid-template-columns: 46px max-content; column-gap: 14px; min-width: max-content; padding: 2px 8px 2px 0; }
#design-record-context .dc-base-number { color: var(--dc-muted); font-size: 11px; text-align: right; }
#design-record-context .dc-bases { white-space: nowrap; }
#design-record-context .dc-bases span { cursor: text; display: inline-block; width: 1ch; }
#design-record-context .dc-bases .dc-base-group { margin-left: 1ch; }
#design-record-context .dc-bases .is-selected { background: var(--pv-accent-tint, #e8eff8); color: var(--pv-accent-ink, #1d4f91); }
#design-record-context .dc-complement { color: var(--dc-muted); white-space: pre; }
#design-record-context .dc-complement-control { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; }
#design-record-context .dc-complement-control input { accent-color: var(--pv-accent, #23518a); width: 14px; height: 14px; }
#design-record-context .dc-sequence-pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; color: var(--dc-muted); }
#design-record-context .dc-enzymes-panel { display: grid; gap: 16px; }
#design-record-context .dc-primers-panel > .ws-section { max-width: 780px; }
#design-record-context .dc-history-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
#design-record-context .dc-history-grid > .ws-section { min-width: 0; border: 1px solid var(--dc-line); background: var(--dc-surface); border-radius: 8px; padding: 18px; margin: 0; }
#design-record-context .dc-history-grid h2 { font-size: 14px; }
#design-record-context .dc-history-grid header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#design-record-context .dc-revision-list { display: grid; gap: 4px; }
#design-record-context .dc-revision-list button { display: flex; justify-content: space-between; text-align: left; gap: 14px; padding: 12px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--dc-ink); }
#design-record-context .dc-revision-list button[aria-current=true] { background: var(--pv-accent-tint, #e8eff8); color: var(--pv-accent-ink, #1d4f91); }
#design-record-context .dc-revision-list strong { font-size: 13px; font-weight: 600; }
#design-record-context .dc-revision-list small { display: block; margin-top: 5px; font-size: 11px; color: var(--dc-muted); }
#design-record-context .dc-revision-list button > span:last-child { font-size: 11px; }
#design-record-context .dc-history-link { display: block; width: 100%; text-align: left; border: 1px solid var(--dc-line); border-radius: 6px; background: var(--dc-surface); color: var(--dc-ink); padding: 12px; margin: 7px 0; overflow-wrap: anywhere; }
#design-record-context .dc-history-link strong { display: block; font-size: 13px; font-weight: 500; }
#design-record-context .dc-history-link small { display: block; margin-top: 4px; font-size: 11px; color: var(--dc-muted); }
#design-record-context .dc-source-text { white-space: pre-wrap; font-size: 12px; overflow-wrap: anywhere; }
#design-sidebar .dl-record-list { border-top: 1px solid var(--pv-line); padding: 18px 0; }
#design-sidebar :is(.dl-record-list,.dc-sidebar-section) h3 { margin: 0 0 12px; color: var(--pv-ink); font-size: 12px; font-weight: 600; }
#design-sidebar .dl-record-list > button { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 9px 8px; margin: 3px 0; color: var(--pv-ink); }
#design-sidebar .dl-record-list > button[aria-current=true] { background: var(--pv-accent-tint); color: var(--pv-accent-ink); }
#design-sidebar .dl-record-list strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
#design-sidebar .dl-record-list small { display: block; margin-top: 4px; color: var(--pv-muted); font-size: 10px; }
#design-sidebar .dc-sidebar-section { padding: 18px 0; border-top: 1px solid var(--pv-line); }
#design-sidebar .dc-sidebar-section p { font-size: 11px; line-height: 1.6; color: var(--pv-muted); }
#design-sidebar .dc-sidebar-section dl { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 5px 10px; margin: 0 0 12px; font-size: 12px; }
#design-sidebar .dc-sidebar-section dt { color: var(--pv-muted); }
#design-sidebar .dc-sidebar-section dd { margin: 0; color: var(--pv-ink); font-family: var(--mono,monospace); font-size: 11px; }
#design-sidebar .dc-sidebar-section button { background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: 5px; color: var(--pv-ink-2); padding: 6px 8px; font-size: 11px; }
#design-sidebar .dc-sidebar-section button:hover:not(:disabled) { color: var(--pv-accent-ink); background: var(--pv-accent-tint); }
#design-sidebar .dc-sidebar-section input { box-sizing: border-box; min-width: 0; width: 100%; height: 31px; padding: 5px 8px; border: 1px solid var(--pv-line); border-radius: 5px; background: var(--pv-surface); color: var(--pv-ink); font-size: 12px; }
#design-sidebar .dc-selection-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
#design-sidebar .dc-range-inputs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 5px; }
#design-sidebar [data-record-find] { display: flex; flex-wrap: wrap; gap: 6px; }
#design-sidebar .dc-side-tool-list { display: grid; gap: 6px; }
#design-sidebar .dc-side-tool-list button { text-align: left; }
@media (max-width: 900px) {
  #design-record-context .dc-history-grid { grid-template-columns: minmax(0,1fr); }
  #design-record-context .dc-document-tabs button { padding-inline: 11px; }
}
@media (max-width: 700px) {
  #design-record-context .dc-sequence-reader { padding: 12px; }
  #design-record-context .dc-sequence-pagination { flex-wrap: wrap; }
  #design-record-context #dc-record-map { height: 360px; }
  #design-record-context .dc-map-legend { justify-content: flex-start; }
}
#design-sidebar .dc-enzyme-visibility { display: grid; gap: 7px; }
#design-sidebar .dc-enzyme-visibility label { display: flex; align-items: center; gap: 7px; color: var(--pv-ink-2); font-size: 12px; }
#design-sidebar .dc-enzyme-visibility input { width: 14px; height: 14px; padding: 0; accent-color: var(--pv-accent); }
#design-sidebar .dc-enzyme-visibility small { margin-left: auto; font-size: 10px; color: var(--pv-muted); }
#design-record-context .dc-context-note { padding: 0; margin: 0 0 14px; border: 0; background: transparent; color: var(--dc-muted); font-size: 12px; }
#design-record-context:not([data-save-state="dirty"]) .dc-sequence-actions :is([data-seq-action="variant"],[data-seq-action="discard"]) { display: none; }
#design-record-context:not([data-record-view="sequence"]) .dc-sequence-actions :is([data-seq-action="import"],[data-seq-action="reverse-complement"]) { display: none; }
#design-record-context[data-record-view="map"] .dc-sequence-actions [data-seq-action="map"] { display: none; }
#design-record-context #dc-record-map { height: clamp(300px, calc(100dvh - 470px), 550px); }
body.preview-ui #design-record-context .dc-context-note { background: transparent; }

/* Preview 9/21: a linear map alongside circular views, and translation in context. */
#design-record-context #dc-record-map.is-linear { overflow: auto; background: var(--dc-surface); display: grid; align-items: center; }
#design-record-context .dc-linear-map { min-width: 650px; font-family: var(--mono, monospace); }
#design-record-context .dc-map-axis { stroke: var(--pv-ink-2, #56655a); stroke-width: 2; }
#design-record-context .dc-map-tick { stroke: var(--dc-muted); }
#design-record-context .dc-map-tick-label { fill: var(--dc-muted); font-size: 11px; }
#design-record-context .dc-map-feature-label { fill: #17231d; font-size: 10px; pointer-events: none; }
#design-record-context .dc-map-selected-range { fill: var(--pv-accent, #23518a); opacity: .13; }
#design-record-context :is(.dc-linear-feature, .dc-linear-site) { cursor: pointer; }
#design-record-context .dc-linear-feature:is(.is-selected, :focus) path { stroke: var(--pv-accent-ink, #23518a); stroke-width: 2; }
#design-record-context .dc-linear-sites line { stroke: var(--pv-warn, #a7783a); stroke-width: 1.5; }
#design-record-context .dc-linear-sites text { fill: var(--pv-ink-2, #56655a); font-size: 10px; }
#design-record-context .dc-linear-site:focus line { stroke: var(--pv-accent-ink, #23518a); stroke-width: 3; }
#design-record-context .dc-translation-control { max-width: 100%; min-height: 31px; border: 1px solid var(--dc-line); border-radius: 5px; background: var(--dc-surface); color: var(--dc-ink); padding: 5px 8px; font-size: 12px; }
#design-record-context .dc-translation-preview { margin-top: 14px; padding: 14px; background: var(--dc-subtle); border: 1px solid var(--dc-line); border-radius: 6px; }
#design-record-context .dc-translation-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; }
#design-record-context .dc-translation-heading span { color: var(--dc-muted); }
#design-record-context .dc-translation-heading button { margin-left: auto; }
#design-record-context .dc-translation-preview pre { margin: 12px 0; font: 13px/1.8 var(--mono, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
#design-record-context .dc-translation-preview p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--dc-muted); }
@media (max-width: 700px) {
  #design-record-context .dc-sequence-reader .dc-view-toolbar > div { flex-wrap: wrap; }
}
/* Right-click sequence menu, digest gel, primer tracks, editable record name. */
.seq-context-menu{position:fixed;z-index:400;min-width:260px;max-width:320px;padding:6px;border:1px solid var(--pv-line,#e3e1db);border-radius:12px;background:var(--pv-surface,#fff);box-shadow:0 12px 32px rgba(23,25,28,.14);display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--pv-ink,#17191c)}
dialog .seq-context-menu{position:absolute}
.seq-context-heading{display:flex;flex-direction:column;gap:2px;padding:8px 10px 6px;border-bottom:1px solid var(--pv-line-2,#eeece6);margin-bottom:4px}
.seq-context-heading strong{font-size:12px;font-weight:600}.seq-context-heading small{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--pv-muted,#6b7079)}
.seq-context-menu [role=menuitem]{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;text-align:left;color:inherit;font:inherit;cursor:pointer}
.seq-context-menu [role=menuitem]:hover,.seq-context-menu [role=menuitem]:focus-visible{background:var(--pv-surface-2,#f9f8f5)}
.seq-context-menu [role=menuitem] span{flex:1}.seq-context-menu [role=menuitem] small{color:var(--pv-muted,#6b7079);font-size:11px}.seq-context-menu [role=menuitem] i{color:var(--pv-muted,#6b7079);font-style:normal}
.seq-context-menu [role=menuitem]:disabled{opacity:.5;cursor:default}
.seq-context-empty{margin:0;padding:8px 10px;font-size:12px;color:var(--pv-muted,#6b7079)}
.dc-enzyme-bulk{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.dc-enzyme-bulk button{height:26px;padding:0 9px;border:1px solid var(--pv-line,#e3e1db);border-radius:6px;background:var(--pv-surface,#fff);color:var(--pv-ink,#17191c);font:inherit;font-size:12px;cursor:pointer}
.dc-enzyme-bulk button:hover{background:var(--pv-surface-2,#f9f8f5)}
.dc-enzyme-visibility small.is-unique{color:var(--pv-ok,#1c6b3a);font-weight:600}
.dc-digest{margin-top:12px}.dc-digest h3{font-size:12px;margin:0 0 6px}
.dc-gel{display:flex;flex-direction:column;gap:4px}
.dc-band{display:flex;align-items:center;gap:8px;font-size:12px}
.dc-band span{width:64px;text-align:right;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.dc-band i{display:block;height:8px;border-radius:2px;background:var(--pv-ink-2,#4b5057)}
.dc-band small{color:var(--pv-muted,#6b7079)}
.dc-linear-primer line{stroke:#5b3fa6;stroke-width:3}.dc-linear-primer path{fill:#5b3fa6}
.dc-linear-primer:hover line{stroke-width:5}
.dc-record-name[contenteditable]{outline:none;border-radius:6px;padding:0 4px;margin-left:-4px;cursor:text}
.dc-record-name[contenteditable]:hover{background:var(--pv-surface-2,#f9f8f5)}
.dc-record-name[contenteditable]:focus{background:var(--pv-surface,#fff);box-shadow:0 0 0 2px var(--pv-accent-tint,#e8eff8)}
.dc-header-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.ws-warning{color:var(--pv-warn,#7a4b00)}
/* ---- Sequence map (studio): two panes like a sequence designer, Truvi-themed ---- */
#design-record-context .dc-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 42%); grid-template-rows: minmax(0, 1fr) auto; gap: 0; height: clamp(520px, calc(100dvh - 330px), 820px); border: 1px solid var(--dc-line); border-radius: 14px; background: var(--dc-surface); overflow: hidden; }
#design-record-context .dc-studio-seq, #design-record-context .dc-studio-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#design-record-context .dc-studio-side { border-left: 1px solid var(--dc-line); }
#design-record-context .dc-studio-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 12px; border-bottom: 1px solid var(--dc-line); background: var(--dc-subtle); }
#design-record-context .dc-studio-label, #design-record-context .dc-studio-tabs button { font: 600 11px/1 var(--sans-app); letter-spacing: .12em; text-transform: uppercase; color: var(--dc-muted); }
#design-record-context .dc-studio-label { color: var(--pv-accent-ink); padding: 0 4px; }
#design-record-context .dc-studio-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#design-record-context .dc-studio-tabs button { position: relative; padding: 10px 10px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; }
#design-record-context .dc-studio-tabs button:hover:not(:disabled) { color: var(--dc-ink); }
#design-record-context .dc-studio-tabs button[aria-selected="true"] { color: var(--pv-accent-ink); }
#design-record-context .dc-studio-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--pv-accent); }
#design-record-context .dc-studio-tabs button:disabled { opacity: .45; cursor: not-allowed; }
#design-record-context .dc-studio-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#design-record-context .dc-studio-tools .button.small { min-height: 30px; padding: 0 10px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
#design-record-context .dc-studio-icon { width: 30px; padding: 0 !important; justify-content: center; }
#design-record-context .dc-studio-zoom { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
#design-record-context .dc-studio-zoom button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--dc-ink); cursor: pointer; }
#design-record-context .dc-studio-zoom button:hover { background: var(--dc-line); }
#design-record-context .dc-studio-zoom input { width: 90px; accent-color: var(--pv-accent); }
#design-record-context .dc-studio-menu { position: relative; }
#design-record-context .dc-studio-menu > summary { list-style: none; cursor: pointer; }
#design-record-context .dc-studio-menu > summary::-webkit-details-marker { display: none; }
#design-record-context .dc-studio-menu .t-menu-list { left: 0; right: auto; min-width: 240px; }
#design-record-context .dc-studio-rows { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 18px 8px; font: 13px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
#design-record-context .dc-st-row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; padding: 22px 0 10px; }
#design-record-context .dc-st-row + .dc-st-row { border-top: 1px dashed var(--dc-line); }
#design-record-context .dc-st-num { text-align: right; padding-top: 1px; font-size: 11px; color: var(--dc-muted); }
#design-record-context .dc-st-strands { position: relative; min-width: 0; }
#design-record-context .dc-st-sites { position: absolute; left: 56px; right: 0; top: 0; height: 22px; pointer-events: none; }
#design-record-context .dc-st-site { position: absolute; top: calc(var(--lvl) * -12px); transform: translateX(-50%); padding: 0 3px; border: 0; background: transparent; color: var(--pv-ink-2); font: 500 10px/1 var(--sans-app); white-space: nowrap; cursor: pointer; pointer-events: auto; }
#design-record-context .dc-st-site::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 6px; background: var(--pv-warn, #a7783a); }
#design-record-context .dc-st-site:hover { color: var(--pv-accent-ink); }
#design-record-context .dc-st-strand { display: flex; white-space: nowrap; letter-spacing: 0; }
#design-record-context .dc-st-strand span { display: inline-block; width: 1ch; text-align: center; line-height: 17px; user-select: none; }
#design-record-context .dc-st-top span { color: var(--dc-ink); cursor: text; }
#design-record-context .dc-st-bottom span { color: var(--dc-muted); }
#design-record-context .dc-st-strand span.is-selected { background: var(--pv-accent-tint); color: var(--pv-accent-ink); }
#design-record-context .dc-st-top span:nth-child(10n) { margin-right: 0; }
#design-record-context .dc-st-ruler { position: relative; height: 16px; border-top: 1px solid var(--pv-ink-2); margin-top: 2px; }
#design-record-context .dc-st-ruler i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-size: 9.5px; color: var(--dc-muted); padding-top: 3px; }
#design-record-context .dc-st-ruler i::before { content: ''; position: absolute; left: 50%; top: -1px; width: 1px; height: 4px; background: var(--pv-ink-2); }
#design-record-context .dc-st-feats { position: relative; margin-top: 6px; }
#design-record-context .dc-st-feat { position: absolute; height: 15px; border: 0; padding: 0 6px; background: var(--c); color: #1c2420; font: 600 10px/15px var(--sans-app); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; opacity: .92; }
#design-record-context .dc-st-feat.is-fwd.has-head { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
#design-record-context .dc-st-feat.is-rev.has-tail { clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); }
#design-record-context .dc-st-feat.is-selected, #design-record-context .dc-st-feat:hover { opacity: 1; outline: 2px solid var(--pv-accent-ink); outline-offset: 1px; }
#design-record-context .dc-studio-view { flex: 1; min-height: 0; overflow: auto; }
#design-record-context .dc-studio-view.is-map { display: grid; place-items: center; padding: 10px; }
#design-record-context .dc-studio-view.is-map > svg { width: 100%; height: auto; max-height: 100%; }
#design-record-context .dc-studio-view.is-linear { align-items: start; overflow: auto; }
#design-record-context .dc-studio-view.is-text { padding: 16px 18px; }
#design-record-context .dc-studio-view h3 { margin: 16px 0 8px; font: 600 12px/1 var(--sans-app); letter-spacing: .08em; text-transform: uppercase; color: var(--dc-muted); }
#design-record-context .dc-studio-dl { display: grid; gap: 10px; margin: 0; }
#design-record-context .dc-studio-dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
#design-record-context .dc-studio-dl dt { font: 500 12px/1.5 var(--sans-app); color: var(--dc-muted); }
#design-record-context .dc-studio-dl dd { margin: 0; font: 400 13px/1.5 var(--sans-app); color: var(--dc-ink); overflow-wrap: anywhere; }
#design-record-context .dc-studio-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#design-record-context .dc-studio-feature-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--dc-ink); text-align: left; cursor: pointer; }
#design-record-context .dc-studio-feature-list button:hover { background: var(--dc-subtle); }
#design-record-context .dc-studio-feature-list i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
#design-record-context .dc-studio-feature-list strong { font: 500 13px/1.3 var(--sans-app); }
#design-record-context .dc-studio-feature-list small { display: block; font: 400 11.5px/1.3 var(--sans-app); color: var(--dc-muted); }
#design-record-context .dc-studio-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--dc-line); background: var(--dc-subtle); font-family: var(--sans-app); }
#design-record-context .dc-studio-status span { display: inline-flex; align-items: baseline; gap: 6px; }
#design-record-context .dc-studio-status small { font: 600 10px/1 var(--sans-app); letter-spacing: .1em; text-transform: uppercase; color: var(--dc-muted); }
#design-record-context .dc-studio-status strong { font: 600 12.5px/1 var(--sans-app); color: var(--dc-ink); font-variant-numeric: tabular-nums; }
#design-record-context .dc-studio-status em { font: 400 12px/1 var(--sans-app); color: var(--dc-muted); }
#design-record-context .dc-studio-clear { margin-left: auto; border: 0; background: transparent; color: var(--pv-accent-ink); font: 500 12px var(--sans-app); cursor: pointer; }
@media (max-width: 1100px) { #design-record-context .dc-studio { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; } #design-record-context .dc-studio-side { border-left: 0; border-top: 1px solid var(--dc-line); } #design-record-context .dc-studio-rows { max-height: 480px; } #design-record-context .dc-studio-view.is-map { min-height: 360px; } }
:root[data-theme=dark] #design-record-context .dc-st-feat { color: #0f1a18; }
/* Studio maps need an explicit box: the map SVGs declare 100% height, which collapses in an auto-height pane. */
#design-record-context .dc-studio-view.is-map { display: flex; align-items: center; justify-content: center; }
#design-record-context .dc-studio-view.is-map > svg.pm-map-svg { width: 100%; height: auto; aspect-ratio: 1000 / 740; max-height: 100%; }
#design-record-context .dc-studio-view.is-map.is-linear { align-items: flex-start; }
#design-record-context .dc-studio-view.is-map.is-linear > svg { width: 100%; height: auto; }
/* In the Sequence map the studio toolbar owns the actions; the native action strip and status line hide. */
#design-record-context[data-record-view="studio"] .dc-sequence-actions, #design-record-context[data-record-view="studio"] .dc-sequence-feedback > #ws-sequence-status { display: none; }
#design-record-context .dc-studio-view.is-linear > svg.dc-linear-map { min-width: 0; }
/* Hover sync between the rows and the map */
#design-record-context .dc-studio-hover-arc { fill: var(--pv-accent, #1F6B4A); opacity: .22; pointer-events: none; }
#design-record-context .dc-studio-hover-tick { stroke: var(--pv-accent-ink, #1F6B4A); stroke-width: 2.5; pointer-events: none; }
#design-record-context .dc-studio-hover-label { fill: var(--pv-accent-ink, #1F6B4A); font: 600 13px var(--sans-app); pointer-events: none; }
#design-record-context .dc-st-row:hover .dc-st-top span { color: var(--pv-accent-ink); }
#design-record-context .dc-st-row:hover .dc-st-num { color: var(--pv-accent-ink); font-weight: 600; }
#design-record-context .dc-studio-hover-slot { font: 500 12px/1 var(--sans-app); color: var(--pv-accent-ink); min-width: 0; }
/* Applied condition banner (from Evolutionary Shortcuts) */
#design-record-context .dc-applied{margin:0 0 14px;padding:14px 16px;border:1px solid var(--pv-accent);border-radius:12px;background:var(--pv-accent-tint,#e7f1ec)}
#design-record-context .dc-applied-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}#design-record-context .dc-applied-head strong{font:600 14px var(--sans-app)}#design-record-context .dc-applied-head span{font-size:12.5px;color:var(--pv-ink-2)}
#design-record-context .dc-applied-close{margin-left:auto;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--pv-muted)}
#design-record-context .dc-applied-regions{list-style:none;margin:10px 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}#design-record-context .dc-applied-regions button{display:grid;gap:1px;padding:6px 10px;border:1px solid var(--pv-line-2);border-radius:8px;background:var(--pv-surface);text-align:left;cursor:pointer;color:var(--pv-ink)}#design-record-context .dc-applied-regions small{font-size:11.5px;color:var(--pv-muted)}
#design-record-context .dc-applied p{margin:4px 0 0;font-size:13px}#design-record-context .dc-applied-caution{color:var(--pv-muted);font-size:12.5px}