/* Palette and layout follow the Claude Design "Studio Workspace" proposal. */
:root {
  --bg: #fbfaf6; --panel: #fff; --panel-2: #f7f5ef; --fg: #1f1d1a; --muted: #6b665c; --faint: #9a9385;
  --line: #e4dfd3; --line-2: #efebe2; --btn-line: #ddd7ca; --hover: #ede9df; --stage: #efece4;
  --accent: #1e5e5a; --accent-fg: #fff; --accent-soft: #e3eeea;
  --warn: #9a5b00; --warn-bg: #fbf1d9; --warn-line: #ead9a8; --warn-fg: #5c4712;
  --ok: #3f8f6b; --err: #b3261e; --amber: #d9a93b;
  --tag: #1e5e5a; --attr: #8a5a1f; --str: #9b3d2e; --pi: #9a9385;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171a19; --panel: #1f2321; --panel-2: #1b1f1d; --fg: #e5e7e3; --muted: #9aa19c; --faint: #737a75;
    --line: #333a36; --line-2: #2a302d; --btn-line: #3d4541; --hover: #2a302d; --stage: #141716;
    --accent: #4fa89b; --accent-fg: #0d1513; --accent-soft: #23342f;
    --warn: #e0b45e; --warn-bg: #2f2812; --warn-line: #4d4120; --warn-fg: #ecd9a0;
    --tag: #6cc1b5; --attr: #e0a06f; --str: #e08f8f; --pi: #7f8682;
  }
}
:root[data-theme="dark"] {
  --bg: #171a19; --panel: #1f2321; --panel-2: #1b1f1d; --fg: #e5e7e3; --muted: #9aa19c; --faint: #737a75;
  --line: #333a36; --line-2: #2a302d; --btn-line: #3d4541; --hover: #2a302d; --stage: #141716;
  --accent: #4fa89b; --accent-fg: #0d1513; --accent-soft: #23342f;
  --warn: #e0b45e; --warn-bg: #2f2812; --warn-line: #4d4120; --warn-fg: #ecd9a0;
  --tag: #6cc1b5; --attr: #e0a06f; --str: #e08f8f; --pi: #7f8682;
}
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 13px/1.4 var(--sans); background: var(--bg); color: var(--fg); display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header */
.topbar { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar img { width: 28px; height: 28px; }
.topbar .brand { font-weight: 600; font-size: 15px; white-space: nowrap; }
.topbar .vsep { width: 1px; height: 18px; background: var(--line); }
.topbar .sub { color: var(--muted); white-space: nowrap; }
.topbar .slash { color: var(--faint); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.switcher { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--accent); font: 500 12.5px var(--mono); cursor: pointer; }
.switcher:hover { border-color: var(--btn-line); background: var(--bg); }
.switcher[hidden], .slash[hidden] { display: none; }
.starting :is(#slash, #proj-menu, #sync-ind, #proj-export) { display: none; }
.sync-ind { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--muted); font: 12px var(--sans); cursor: default; white-space: nowrap; }
.sync-ind[hidden] { display: none; }
.sync-ind #sync-name { font-family: var(--mono); color: var(--fg); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.sync-ind .st::before { content: '·'; margin-right: 6px; color: var(--faint); }
.sync-ind[data-state=permission], .sync-ind[data-state=conflict], .sync-ind[data-state=error] { cursor: pointer; border-color: var(--err); }
.sync-ind[data-state=permission] .st, .sync-ind[data-state=conflict] .st, .sync-ind[data-state=error] .st { color: var(--err); font-weight: 500; }
.sync-ind[data-state=permission]:hover, .sync-ind[data-state=conflict]:hover, .sync-ind[data-state=error]:hover { background: var(--hover); }

select, .btn, input[type=text] { font: inherit; padding: 0 .6rem; height: 30px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--panel); color: var(--fg); }
.btn { font-weight: 500; font-size: 12.5px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn[hidden] { display: none; }
.btn.small { height: 24px; padding: 0 .5rem; font-size: 12px; }
.btn.dl { display: flex; align-items: center; gap: 6px; height: 28px; border: 0; background: var(--accent); color: var(--accent-fg); white-space: nowrap; }
.btn.dl:hover { filter: brightness(.9); }
/* in a narrow output pane the template menu gives way, not the buttons beside it */
#tpl { min-width: 60px; flex: 1 1 auto; text-overflow: ellipsis; }
.btn.dl { flex: none; }
.outbar { container-type: inline-size; }
@container (max-width: 480px) { #download, #print { font-size: 0; gap: 0; padding: 0 9px; } }
#print { display: flex; align-items: center; gap: 6px; height: 28px; flex: none; }
#print[hidden] { display: none; }
#print:disabled { opacity: .5; cursor: wait; }
.ibtn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; flex: none; }
.ibtn:hover { background: var(--hover); color: var(--fg); }
.ibtn[hidden] { display: none; }
select { font-family: var(--mono); font-size: 12px; }

/* panes */
main { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: var(--cols, 248px minmax(0, 1fr) minmax(0, 1fr)); background: var(--panel); }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
#p-out { border-left: 1px solid var(--line); position: relative; }
.splitter { position: absolute; top: 0; bottom: 0; left: -4px; width: 7px; z-index: 5; cursor: col-resize; touch-action: none; }
.splitter:hover, .resizing .splitter { background: var(--line); }
.resizing { cursor: col-resize; user-select: none; }
.resizing iframe { pointer-events: none; }
.phead { height: 40px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.phead .title { font-weight: 600; }
/* the header never widens its pane: in a narrow output pane the title goes and the modes scroll */
.phead { overflow: hidden; }
#p-out .phead { container-type: inline-size; }
@container (max-width: 560px) { #p-out .phead .title { display: none; } }
#modes { flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
#modes::-webkit-scrollbar { display: none; }
#modes button { flex: none; }
/* scrolled to the end, the last mode keeps the bar's inner padding */
#modes > :last-child { margin-right: 2px; }
.phead .spacer, .subbar .spacer { flex: 1; }
.rail-label { display: none; }
.subbar { height: 38px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line-2); background: var(--panel); font-size: 12px; color: var(--muted); }
#kind { color: var(--faint); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* in a narrow editor the file's details give way to its buttons */
#p-src .subbar { container-type: inline-size; }
#p-src .subbar .btn { flex: none; }
@container (max-width: 560px) { #kind { display: none; } }
#crumbs { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; }
#crumbs .sl { color: var(--line); }
#crumbs .last { color: var(--fg); }
.role { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.role[hidden] { display: none; }
/* how the open XML stands against its schema; a click goes to the next problem */
.validity { flex: none; font: 600 11px var(--sans); border: 0; border-radius: 999px; padding: 2px 8px; white-space: nowrap; color: var(--muted); background: var(--panel-2); cursor: default; }
.validity[hidden] { display: none; }
.validity[data-state=valid] { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.validity[data-state=invalid] { color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); cursor: pointer; }

.seg { flex: none; display: flex; gap: 1px; padding: 2px; background: var(--panel); border: 1px solid var(--btn-line); border-radius: 7px; min-width: 0; overflow: hidden; }
.seg.small { border-radius: 6px; gap: 2px; }
.seg button { font: 500 12px var(--sans); height: 24px; padding: 0 9px; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg.small button { height: 22px; border-radius: 4px; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); }
.seg.small button[aria-pressed=true] { background: var(--fg); color: var(--panel); }
.seg[hidden] { display: none; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: .4rem; }
.dot.busy { background: var(--amber); animation: pulse 1s infinite; }
.dot.err { background: var(--err); }
@keyframes pulse { 50% { opacity: .3; } }
#status { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ODD documentation in the output pane */
#docs-bar { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
#docs-bar[hidden] { display: none; }
#docs-bar code { font: 12px var(--mono); color: var(--fg); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.docs-progress { margin: auto; width: min(360px, 90%); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.docs-progress strong { color: var(--fg); font-weight: 600; }
.docs-progress progress { width: 100%; accent-color: var(--accent); }
.docs-progress .hint { margin: 0; font-size: 12px; }

/* enlarged source or output: the pane over the whole window */
#p-src.enlarged, #p-out.enlarged { position: fixed; inset: 0; z-index: 300; border-left: 0; }
#p-out.enlarged .splitter, #p-out.enlarged .cmdfoot, #p-out.enlarged #t-out { display: none; }
#p-out.enlarged #out.stage { padding: 0; }
#p-out.enlarged #out .paper { max-width: none; border-radius: 0; box-shadow: none; }
#p-src.enlarged { border-right: 0; }
#enlarge[aria-pressed=true], #enlarge-src[aria-pressed=true] { color: var(--accent); }

/* collapsed rails: files and output */
#explorer.collapsed, #p-out.collapsed { cursor: pointer; background: var(--panel-2); }
#explorer.collapsed:hover, #p-out.collapsed:hover { background: var(--hover); }
#explorer.collapsed > *:not(.phead), #p-out.collapsed > *:not(.phead) { display: none; }
#explorer.collapsed .phead, #p-out.collapsed .phead { flex-direction: column; height: 100%; padding: 12px 0; gap: 12px; border: 0; background: transparent; justify-content: flex-start; }
#explorer.collapsed .phead > *, #p-out.collapsed .phead > * { display: none; }
#explorer.collapsed .phead > .toggle, #p-out.collapsed .phead > .toggle, #explorer.collapsed .phead > .rail-label, #p-out.collapsed .phead > .rail-label { display: grid; }
.collapsed .rail-label { writing-mode: vertical-rl; font-weight: 600; font-size: 12px; color: var(--muted); display: block !important; }
#explorer.collapsed .phead > .toggle, #p-out.collapsed .phead > .toggle { order: -1; }

/* explorer */
#explorer { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--panel-2); border-right: 1px solid var(--line); }
#pipeline { flex: none; padding: 12px 8px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
#pipeline[hidden] { display: none; }
.cap { font: 600 10.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0 6px 6px; }
.pipe { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 6px; height: 28px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.pipe:hover { background: var(--hover); }
.pipe.on { background: var(--panel); }
.pipe .r { font-size: 11.5px; color: var(--muted); }
.pipe .n { font: 500 12px var(--mono); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe.on .n { color: var(--accent); }
.pipe.off .n { color: var(--faint); }
.pipe.off, .pipe.miss { cursor: default; }
.pipe.miss .n { color: var(--err); }
#tree { flex: 1; min-height: 0; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.row { position: relative; flex: none; display: grid; grid-template-columns: 12px 30px minmax(0, 1fr) 8px; align-items: center; height: 26px; padding: 0 8px 0 calc(6px + var(--d, 0) * 14px); border-radius: 5px; cursor: pointer; }
.row:hover { background: var(--hover); }
.row.sel { background: var(--accent-soft); }
.row.dropover { background: var(--accent); }
.row.dropover * { color: var(--accent-fg) !important; }
.row .cr { font-size: 9px; color: var(--faint); }
.row .tg { font: 600 8.5px var(--mono); letter-spacing: .02em; color: var(--faint); }
.row.sel .tg { color: var(--accent); }
.row .nm { font: 400 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.dir .nm { font-weight: 500; }
.row.sel .nm { color: var(--accent); font-weight: 600; }
.row .rd { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.row .act { display: none; position: absolute; right: 4px; top: 2px; gap: 2px; background: var(--hover); border-radius: 4px; }
.row:hover .act { display: flex; }
.row .act button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 5px; height: 22px; font-size: 12px; }
.row .act button:hover { color: var(--err); }
#dropzone { flex: none; margin: 10px; padding: 10px 12px; border: 1px dashed #c9c1b0; border-radius: 8px; background: transparent; display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; font: inherit; color: var(--fg); }
#dropzone:hover { border-color: var(--accent); }
#dropzone b { font-weight: 500; font-size: 12.5px; }
#dropzone small { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
#explorer.over #dropzone { border-color: var(--accent); background: var(--accent-soft); }
.dropover-overlay { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; background: rgba(30, 94, 90, .08); border: 2px dashed var(--accent); pointer-events: none; }
.dropover-overlay.on { display: grid; }
#drop-msg { padding: 14px 18px; border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px rgba(31, 29, 26, .12); font-size: 14px; font-weight: 500; }

/* editor */
#p-src { position: relative; }
.tabsbar { padding: 0 8px 0 0; background: var(--panel-2); overflow: hidden; align-items: flex-end; }
.tabs { display: flex; align-items: flex-end; min-width: 0; height: 40px; overflow: hidden; }
.tab { position: relative; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 8px 0 12px; margin-bottom: -1px; border: 0; border-right: 1px solid var(--line); border-top: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; min-width: 0; flex: 0 1 auto; font: inherit; }
.tab[aria-selected=true] { background: var(--panel); border-top-color: var(--accent); color: var(--fg); }
.tab .ico { font: 600 8.5px var(--mono); color: var(--accent); flex: none; }
.tab .lbl { font: 500 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tab .x { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; color: var(--faint); font-size: 13px; flex: none; }
.tab .x:hover { background: var(--hover); color: var(--fg); }
.editor { flex: 1; min-height: 0; display: flex; overflow: hidden; background: var(--panel); }
.editor > .cm-editor { flex: 1; min-width: 0; }
.editor[hidden], #preview[hidden] { display: none; }
#preview { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--panel); padding: 1rem; }
#preview img { max-width: 100%; max-height: 100%; object-fit: contain; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 16px 16px; }

/* output */
.outbar label { display: flex; align-items: center; gap: 6px; color: var(--muted); min-width: 0; }
.outbar label[hidden] { display: none; }
.outbar select { height: 28px; max-width: 230px; padding: 0 8px; }
.warn { margin: 10px 14px 0; padding: 8px 12px; border: 1px solid var(--warn-line); border-radius: 7px; background: var(--warn-bg); color: var(--warn-fg); font-size: 12.5px; line-height: 1.45; flex: none; }
.warn[hidden] { display: none; }
#out { flex: 1; min-height: 0; position: relative; display: flex; overflow: auto; background: var(--panel); }
#out.stage { background: var(--stage); padding: 24px; }
#out .paper { flex: 1; max-width: 820px; margin: 0 auto; min-height: 0; background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(31, 29, 26, .08), 0 6px 18px rgba(31, 29, 26, .07); overflow: hidden; }
/* Paged.js draws its own page sheets; drop the single-sheet card chrome. */
#out .paper.paged { max-width: none; width: 100%; background: transparent; border-radius: 0; box-shadow: none; }
/* still laying out: the frame takes its size (Paged.js measures it) but stays out of sight */
#out .paper.loading iframe { visibility: hidden; }
#out .loading-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#out .paper iframe { display: block; }
#out iframe { width: 100%; height: 100%; border: 0; background: #fff; }
#out pre { margin: 0; padding: .75rem 1rem; width: 100%; overflow: auto; font: 12.5px/20px var(--mono); white-space: pre-wrap; word-break: break-word; }
#out .source { flex: 1; min-width: 0; min-height: 0; }
#out pre.err { color: var(--err); }
.filecard { margin: 2rem auto; align-self: flex-start; text-align: center; padding: 2rem 3rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.filecard .ico { font-size: 40px; }
.filecard .name { font-family: var(--mono); margin: .5rem 0 .2rem; }
.filecard .size { color: var(--muted); margin-bottom: 1rem; }
.filecard .btn.primary { background: var(--accent); color: var(--accent-fg); border: 0; height: 30px; }
.bar { position: absolute; top: 0; left: 0; height: 2px; background: var(--accent); width: 0; transition: width .3s; z-index: 2; }
.bar.on { width: 70%; }
.cmdfoot { height: 34px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-top: 1px solid var(--line); background: var(--panel-2); }
.cmdfoot code { flex: 1; min-width: 0; font: 400 11.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdfoot button { height: 24px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--accent); font: 500 12px var(--sans); cursor: pointer; white-space: nowrap; }
.cmdfoot button:hover { background: var(--hover); }

/* start screen */
#start { position: absolute; inset: 0; z-index: 5; overflow: auto; background: var(--bg); display: none; }
#start.on { display: block; }
.start-inner { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.start-inner h2 { margin: 0 0 .25rem; }
.start-inner h3 { margin: 1.5rem 0 .5rem; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.hint { color: var(--muted); }
.prow { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .75rem 0; }
.prow input[type=text] { flex: 1; max-width: 22rem; }
.prow .spacer { flex: 1; }
.chk { display: flex; gap: .4rem; align-items: center; font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.card { text-align: left; font: inherit; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); cursor: pointer; }
.card:hover { border-color: var(--accent); }
.card:disabled { opacity: .5; cursor: wait; }
.card b { display: block; }
.card small { color: var(--muted); }
.plist { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.plist:empty::before { content: 'No saved projects yet'; display: block; padding: .75rem; color: var(--muted); font-size: 13px; }
.plist .item { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-bottom: 1px solid var(--line); }
.plist .item:last-child { border-bottom: 0; }
.plist .item .nm { flex: 1; font-family: var(--mono); font-size: 13px; }
.plist .item small { color: var(--muted); }

@media (max-width: 800px) {
  main { display: flex; flex-direction: column; overflow: auto; }
  #explorer { max-height: 34vh; border-right: 0; border-bottom: 1px solid var(--line); flex: none; }
  .pane { min-height: 60vh; flex: none; }
  #p-out { border-left: 0; border-top: 1px solid var(--line); }
  .splitter { display: none; }
}

/* dialog: confirm, prompt and alert share one element */
#dlg { border: 1px solid var(--line); border-radius: 10px; padding: 0; background: var(--panel); color: var(--fg); width: min(420px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
#dlg::backdrop { background: rgba(20,18,15,.45); }
#dlg form { padding: 20px 22px 16px; }
#dlg h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
#dlg p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
#dlg p:empty { display: none; }
#dlg p b { color: var(--fg); font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
#dlg input { display: block; width: 100%; margin: 0 0 18px; font-family: var(--mono); font-size: 12.5px; }
#dlg input[hidden] { display: none; }
#dlg input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#dlg .actions { display: flex; justify-content: flex-end; gap: 8px; }
#dlg .actions [hidden] { display: none; }
#sync-dlg, #prefs-dlg { border: 1px solid var(--line); border-radius: 10px; padding: 0; background: var(--panel); color: var(--fg); width: min(560px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
#sync-dlg::backdrop, #prefs-dlg::backdrop { background: rgba(20,18,15,.45); }
#sync-dlg form, #prefs-dlg form { padding: 20px 22px 16px; }
#sync-dlg h2, #prefs-dlg h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
#sync-dlg p, #prefs-dlg > form > p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
#sync-dlg .plist { max-height: 50vh; overflow-y: auto; margin-bottom: 18px; }
#sync-dlg .plist .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sync-dlg .actions, #prefs-dlg .actions { display: flex; justify-content: flex-end; gap: 8px; }
#prefs-dlg { width: min(440px, calc(100vw - 32px)); }
#prefs-dlg .field { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#prefs-dlg .field[hidden] { display: none; }
#prefs-dlg .field label { width: 6.5rem; flex: none; color: var(--muted); }
#prefs-dlg .field label.check { width: auto; display: flex; align-items: center; gap: 6px; color: var(--fg); }
#prefs-dlg .field select, #prefs-dlg .field input[type=text] { flex: 1; min-width: 0; }
#prefs-dlg .size { display: flex; align-items: center; gap: 6px; color: var(--muted); }
#prefs-dlg input[type=number] { width: 5rem; height: 30px; padding: 0 .5rem; font: inherit; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--panel); color: var(--fg); }
#prefs-dlg .sample { margin: 6px 0 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow-x: auto; white-space: pre; font-family: var(--editor-font, var(--mono)); font-size: var(--editor-size, 12.5px); }
#prefs-dlg .actions { justify-content: space-between; }
.btn.danger { background: var(--err); color: #fff; border-color: transparent; }
.btn.danger:hover { filter: brightness(.9); border-color: transparent; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

/* splash: covers the app until Python, opm and the last project are loaded */
#splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--bg); transition: opacity .25s ease; }
#splash.done { opacity: 0; pointer-events: none; }
#splash .splash-box { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(300px, calc(100vw - 32px)); }
#splash .splash-name { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
#splash .splash-bar { width: 100%; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
#splash .splash-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
#splash .splash-step { color: var(--muted); font-size: 12px; min-height: 1.4em; text-align: center; }
#splash .splash-size { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; margin-top: -4px; }
#splash .splash-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
#splash.failed .splash-step { color: var(--err); }
@media (prefers-reduced-motion: reduce) { #splash, #splash .splash-bar span { transition: none; } }

/* popover describing a control (src/ui/tip.ts) */
.tip { position: fixed; z-index: 600; max-width: min(280px, calc(100vw - 16px)); padding: 8px 10px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); font: 12.5px/1.45 var(--sans); pointer-events: none; }
.tip[hidden] { display: none; }
.tip strong { display: block; margin-bottom: 2px; font-weight: 600; }
.tip span { color: var(--muted); }

/* project switcher menu */
.menu { position: fixed; z-index: 500; min-width: 220px; max-width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.menu[hidden] { display: none; }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--fg); font: 12.5px var(--sans); text-align: left; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--hover); outline: none; }
.menu button .nm { flex: 1; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu button .ck { width: 12px; color: var(--accent); }
.menu button[aria-checked=true] .nm { color: var(--accent); font-weight: 500; }
.menu button .key { color: var(--muted); font: 11.5px var(--sans); }
.context-menu { min-width: 240px; }
.context-menu button .nm { font-family: var(--sans); }
.menu hr { border: 0; border-top: 1px solid var(--line-2); margin: 4px 2px; }

/* ODD visual editor (src/ui/odd), after ODDity's form; layout per design 4b */
odd-editor { flex: 1; min-height: 0; display: grid; grid-template-columns: 188px minmax(0, 1fr); background: var(--panel); }
odd-editor[hidden] { display: none; }
odd-editor button { font: inherit; color: inherit; }
odd-editor input[type=text], odd-editor input[type=search], odd-editor select, odd-editor textarea { font: var(--odd-size, 12.5px) var(--sans); height: calc(var(--odd-size, 12.5px) + 17.5px); padding: 0 8px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--panel); color: var(--fg); min-width: 0; }
odd-editor input:focus, odd-editor select:focus, odd-editor textarea:focus { outline: none; border-color: var(--accent); }
odd-editor textarea { height: auto; padding: 6px 8px; font-family: var(--mono); resize: vertical; width: 100%; }
odd-editor .spacer { flex: 1; }
odd-editor .odd-side { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 6px 6px; border-right: 1px solid var(--line-2); background: var(--bg); overflow: hidden; }
odd-editor .odd-meta { display: flex; flex-direction: column; gap: 1px; padding: 0 6px 4px; min-width: 0; }
odd-editor .odd-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
odd-editor .odd-source { font: 11.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
odd-editor .odd-add { display: flex; gap: 2px; align-items: center; }
odd-editor .odd-add input { flex: 1; height: 28px; font-family: var(--mono); font-size: 12px; }
odd-editor .odd-add-error { color: var(--err); font-size: 11.5px; padding: 0 6px; }
odd-editor .cap { padding: 8px 6px 0; }
odd-editor .odd-filter { height: 26px !important; font-size: 12px !important; }
odd-editor .spec-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
odd-editor .spec-item { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; text-align: left; }
odd-editor .spec-item:hover { background: var(--hover); }
odd-editor .spec-item .ident { flex: 1; min-width: 0; font: 500 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
odd-editor .mode-badge { font: 600 9.5px var(--sans); border-radius: 999px; padding: 1px 6px; background: var(--accent-soft); color: var(--accent); }
odd-editor .mode-badge.add { background: var(--warn-bg); color: var(--attr); }
odd-editor .mode-badge.delete { background: var(--warn-bg); color: var(--str); }
odd-editor .mode-badge.replace { background: var(--hover); color: var(--fg); }
odd-editor .spec-item.active { background: var(--accent); color: var(--accent-fg); }
odd-editor .spec-item.active .mode-badge { background: rgba(255, 255, 255, .22); color: var(--accent-fg); }
odd-editor .odd-main { min-height: 0; overflow: auto; padding: 14px 16px 40px; }
.odd-error { grid-column: 1 / -1; align-self: start; margin: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--warn-line); border-radius: 7px; background: var(--warn-bg); color: var(--warn-fg); font-size: 12.5px; line-height: 1.45; }
.odd-error span { flex: 1; }
odd-editor .empty-main, odd-editor .empty-models { color: var(--faint); padding: 8px 0; }

/* the selected elementSpec */
odd-editor .spec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
odd-editor .spec-head .ident { font: 600 15px var(--mono) !important; width: 180px; }
odd-editor .spec-head .mode { display: flex; align-items: center; gap: 6px; font: 600 10.5px var(--sans); letter-spacing: .07em; color: var(--muted); }
odd-editor .spec-actions { display: flex; align-items: center; gap: 8px; }
odd-editor .spec-actions > button:not(.icon) { height: 28px; padding: 0 9px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--panel); font-size: 12px; font-weight: 500; cursor: pointer; }
odd-editor .spec-actions > button:not(.icon):hover { border-color: var(--accent); color: var(--accent); }
odd-editor button.icon { width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
odd-editor button.icon:hover { background: var(--hover); color: var(--fg); }
odd-editor button.icon.danger:hover { color: var(--err); }
odd-editor .warn, odd-editor .note { margin: 0 0 10px; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; line-height: 1.45; }
odd-editor .warn { border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-fg); }
odd-editor .note { border: 1px solid var(--line); color: var(--muted); }
odd-editor .note code { color: var(--fg); font-family: var(--mono); }
odd-editor .spec-desc { margin-bottom: 10px; }

/* model cards */
odd-editor .models { display: flex; flex-direction: column; gap: 8px; }
odd-editor model-card { display: block; }
odd-editor .model { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); min-width: 0; }
odd-editor .model-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; min-height: 38px; cursor: pointer; min-width: 0; }
odd-editor .model.open > .model-head { border-bottom: 1px solid var(--line-2); background: var(--panel-2); border-radius: 7px 7px 0 0; }
odd-editor .grip { color: var(--faint); cursor: grab; user-select: none; font-size: 13px; }
odd-editor .grip:active { cursor: grabbing; }
odd-editor .twisty { width: 10px; font-size: 9px; color: var(--faint); }
odd-editor .model-title { font: 600 12.5px var(--sans); white-space: nowrap; }
odd-editor .model-title .beh { font: 500 12px var(--mono); color: var(--str); }
odd-editor .model-head .tag { font: 600 10px var(--sans); color: var(--accent-fg); background: var(--accent); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
odd-editor .model-head .pred { font: 11.5px var(--mono); color: var(--str); background: var(--warn-bg); border-radius: 3px; padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
odd-editor .fires { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }
odd-editor .fires::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
odd-editor .model-tools { display: flex; gap: 1px; }
odd-editor .model.elsewhere > .model-head { opacity: .5; }
odd-editor model-card.drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
odd-editor model-card.drop-after { box-shadow: 0 2px 0 0 var(--accent); }
odd-editor .model-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
odd-editor .row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; height: auto; padding: 0; border-radius: 0; cursor: auto; }
odd-editor .row:hover { background: none; }
odd-editor .field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
odd-editor .field > span { font: 600 10.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
odd-editor .field.grow { flex: 3; }
odd-editor .field.scope { flex: 0 1 110px; }
odd-editor .field.name { flex: 0 1 120px; }
odd-editor .field.invalid cm-field { outline: 1px solid var(--err); border-radius: 6px; }
odd-editor .field-error { color: var(--err); font-size: 11.5px; line-height: 1.3; }
odd-editor .inline { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: var(--muted); }
odd-editor .src-rend { margin-left: auto; height: 30px; }
odd-editor cm-field { display: block; }
odd-editor cm-field .cm-editor { max-height: 280px; }
odd-editor .spec-desc cm-field .cm-host { min-height: 3.2em; }
odd-editor .tmpl-tools { margin-left: 8px; text-transform: none; letter-spacing: 0; }
odd-editor .tmpl-tools button { height: 20px; padding: 0 5px; border: 1px solid var(--btn-line); border-radius: 4px; background: var(--panel); font: 11px var(--mono); cursor: pointer; }
odd-editor .section { border-top: 1px dashed var(--line); padding-top: 10px; }
odd-editor .section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 600 10.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
odd-editor .param, odd-editor .rendition { align-items: flex-start; }
odd-editor .param > .inline, odd-editor .param > button, odd-editor .rendition > button { margin-top: 20px; }
odd-editor .schema-violation { border-left: 2px solid var(--amber); padding-left: 6px; }
odd-editor .nested model-card { margin-top: 6px; }