/* The editor's chrome: model tree, property panel, link dialog, context menu.
   Anything positioned by script gets its numbers through custom properties
   set with the CSSOM — the CSP allows no style attributes. */

.outline { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.outline li {
  padding: 2px 4px 2px calc(4px + var(--depth, 0) * 12px);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; align-items: baseline; gap: 6px;
}
.outline .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline li:hover { background: var(--color-bg-hover); }
.outline li .kind-icon { flex: none; align-self: center; color: var(--color-fg-muted); }
.outline li.is-selected { background: var(--color-bg-active); box-shadow: inset 2px 0 0 var(--color-accent); }
.outline .kind { flex: none; width: 2.6em; color: var(--color-fg-muted); font-family: var(--font-mono); font-size: var(--text-xs); text-align: center; }
.outline .repeat { flex: none; color: var(--color-fg-muted); font-size: var(--text-xs); }
/* On a hovered or selected row muted is under AA; the signs step up. */
.outline li:is(:hover, .is-selected) :is(.kind, .repeat) { color: var(--color-fg-secondary); }

.label-action { float: right; margin: -3px 0; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-fg-muted); font: 400 1rem/1.2 var(--font-sans); cursor: pointer; }
.label-action:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
/* The Model heading's + sits under the panel's ×; it keeps clear of it. */
#component-add { margin-right: 20px; }
.asset-new { width: 100%; margin-bottom: 6px; padding: 3px 5px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-fg-primary); font: inherit; font-size: var(--text-sm); }
.asset { margin-bottom: 4px; font-size: var(--text-sm); }
.asset-head { width: 100%; }
.asset-loss { display: grid; grid-template-columns: 1.5em 1fr; gap: 1px 6px; margin: 0; padding: 0 4px; font: var(--text-xs)/1.5 var(--font-mono); }
.asset-loss dt { color: var(--color-fg-muted); }
.asset-loss dd { margin: 0; overflow-wrap: anywhere; }
.asset-form { padding: 4px; }
.asset-form input { width: 100%; min-width: 0; padding: 3px 5px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-fg-primary); font: inherit; }
.asset-form label { color: var(--color-fg-muted); }
.asset-form .mono { font-family: var(--font-mono); }
.asset-form .hint { grid-column: 1 / -1; margin: 0; color: var(--color-fg-muted); font-size: var(--text-xs); line-height: 1.35; }
.asset-remove { grid-column: 1 / -1; justify-self: start; }

.properties { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; align-items: center; margin-bottom: 10px; font-size: var(--text-sm); }
.properties label { color: var(--color-fg-muted); }
.properties input, .properties textarea {
  width: 100%; min-width: 0;
  padding: 3px 5px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg-base); color: var(--color-fg-primary);
  font: inherit;
}
.properties input.number, .properties .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.properties input.number { text-align: right; }
/* A value not taken: the field keeps it, the reason is said under it. */
input[aria-invalid], input[aria-invalid]:focus-visible { border-color: var(--color-danger); }
.field-problem, .properties .hint.field-problem { grid-column: 1 / -1; margin: 0; color: var(--color-danger); font-size: var(--text-xs); }
.properties textarea { resize: vertical; min-height: 3.2em; }
.properties :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; }
.properties .hint { grid-column: 1 / -1; margin: 0; color: var(--color-fg-muted); font-size: var(--text-xs); }
.properties .problem { color: var(--color-danger); }

.sketch { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.sketch svg { width: 100%; height: 36px; border-bottom: 1px solid var(--color-border); }
.sketch rect { fill: var(--color-accent); }
.sketch .num { font-size: var(--text-xs); color: var(--color-fg-secondary); }

.consequences { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; }
.consequences li { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 1px 0; }
.consequence-add { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 4.5em auto auto; gap: 4px; align-items: center; }
.btn-small { padding: 1px 7px; font-size: var(--text-xs); }

.link-dialog {
  width: min(420px, 90vw); padding: 8px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); color: var(--color-fg-primary);
}
.link-dialog::backdrop { background: rgb(0 0 0 / 0.25); }
.link-search { width: 100%; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-base); color: inherit; font: inherit; }
.link-results { max-height: 50vh; margin: 6px 0 0; padding: 0; overflow: auto; list-style: none; font-size: var(--text-sm); }
.link-results li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.link-results li[aria-selected="true"] { background: var(--color-bg-active); }
.link-results li.empty { color: var(--color-fg-muted); cursor: default; }
.link-results .id { color: var(--color-fg-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.link-results li[aria-selected="true"] .id { color: var(--color-fg-secondary); }

.menu {
  position: fixed; left: var(--menu-x, 0); top: var(--menu-y, 0); z-index: var(--z-menu);
  min-width: 190px; padding: 4px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
  font-size: var(--text-sm);
}
.menu button { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* The active item: under the pointer or the keys (they move together). */
.menu button:hover, .menu button:focus { background: var(--color-bg-hover); outline: none; }
/* The way in: each item whose list is open, quieter than the active one. */
.menu button[aria-expanded="true"]:not(:focus):not(:hover) { background: color-mix(in srgb, var(--color-bg-hover) 55%, transparent); }
.menu .menu-right { display: flex; align-items: center; gap: 6px; }
/* An item that opens a list says so with an arrow, never with a key alone. */
.menu .menu-arrow { width: 0.7em; color: var(--color-fg-primary); font-size: var(--text-md); line-height: 1; text-align: right; }
.menu button[aria-expanded="true"] .menu-arrow { color: var(--color-accent); }
.menu button.is-note { color: var(--color-fg-muted); cursor: default; background: none; }
.menu .menu-hint { margin-left: 8px; color: var(--color-fg-muted); font-size: var(--text-xs); }
/* Muted is under AA on the active item's ground: its quiet text steps up. */
.menu button:is(:hover, :focus) :is(kbd, .menu-hint) { color: var(--color-fg-secondary); }

/* Every action as a button with its key, and the list of all keys. */
kbd { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-muted); }
.btn kbd { margin-left: 4px; }
.help-dialog {
  width: min(480px, 92vw); max-height: 86vh; padding: 14px 16px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); color: var(--color-fg-primary);
}
.help-dialog::backdrop { background: rgb(0 0 0 / 0.25); }
.help-keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 14px; font-size: var(--text-sm); }
.help-keys dt, .help-keys dd { margin: 0; }
.help-keys kbd { color: var(--color-fg-primary); }

/* Likelihood in words, and what the canvas does not need behind "More". */
.properties .field-hint { line-height: 1.35; }
.every { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
/* A number and its unit ("%", "% by 100 h") in one cell. */
.with-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.with-unit .unit, .consequence-add .unit { grid-column: auto; white-space: nowrap; }
.more { grid-column: 1 / -1; margin-top: 4px; }
.more summary { color: var(--color-fg-muted); font-size: var(--text-xs); cursor: pointer; }
.properties-inner { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; align-items: center; margin-top: 6px; }

/* The source view: the left panel, wider, given over to the text. */
.workspace[data-source]:not([data-left="closed"]) { grid-template-columns: 40px max(var(--left-w), 440px) 5px minmax(0, 1fr) 5px var(--right-w); }
.view-source { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 11px; }
.view-source[hidden] { display: none; }
.view-source .label { margin: 0; }
.view-source .count { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.source {
  flex: 1; min-height: 0; width: 100%; resize: none;
  padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg-base); color: var(--color-fg-primary);
  font: 0.75rem/1.5 var(--font-mono); tab-size: 2; white-space: pre;
}
.source-problems { max-height: 30%; margin: 0; padding: 0; overflow: auto; list-style: none; font: var(--text-xs)/1.4 var(--font-mono); }
.source-problems li { padding: 2px 4px; border-radius: var(--radius-sm); white-space: pre-wrap; }
.source-problems li[tabindex] { cursor: pointer; }
.source-problems li[tabindex]:hover { background: var(--color-bg-hover); }
.source-problems .problem-error { color: var(--color-danger); }
.source-problems .problem-blocking { color: var(--color-warning); }
.canvas.is-stale .graph { opacity: 0.45; }
.canvas.is-stale::after {
  content: "stale — the source is not valid";
  /* Centred: the top-left corner holds the view switch. */
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: var(--z-hud);
  padding: 3px 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-bg-elevated); color: var(--color-fg-secondary); font-size: var(--text-xs);
}

/* The app's own dropdown (menu.js), in place of the browser's. */
.pick {
  display: block; width: 100%; min-width: 0;
  padding: 3px 20px 3px 5px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  position: relative;
  background: var(--color-bg-base);
  color: var(--color-fg-primary);
  font: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick:hover { border-color: var(--color-border-strong); }
/* The chevron: a mask, so it takes a token's colour in either theme. */
.pick::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 5px; margin-top: -2.5px;
  background: var(--color-fg-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.every .pick, .consequence-add .pick { width: auto; }
.pick-menu { min-width: max(var(--menu-w, 0px), 120px); max-height: 260px; overflow: auto; z-index: var(--z-pick); }
.pick-menu button[aria-selected="true"] { background: var(--color-bg-active); }

.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.share-dialog input { width: 100%; font-family: var(--font-mono); }
#my-shares { list-style: none; padding: 0; }
#my-shares li { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
#my-shares a { flex: 1; overflow-wrap: anywhere; color: var(--color-accent); }

.ttc-field { display: grid; gap: 4px; min-width: 0; }
.ttc-field input, .ttc-field .pick { min-width: 0; width: 100%; }
.ttc-field .pick { white-space: normal; text-align: left; }
.ttc-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ttc-parts[hidden] { display: none; }
.ttc-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 4px; min-width: 0; }
.ttc-part > .hint:first-child { grid-column: 1 / -1; font-size: var(--text-xs); }
.ttc-part input { min-width: 0; width: 100%; }
.ttc-part > .hint:last-child { font-size: var(--text-xs); }
.ttc-description { margin: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--color-fg-muted); }
.effect:has(.ttc-field) { grid-template-columns: minmax(0, 1fr) auto; }
.effect:has(.ttc-field) .ttc-field { grid-column: 1; grid-row: 2; }
.effect:has(.ttc-field) > .btn { grid-column: 2; grid-row: 1 / 3; }
.horizon-chip:not(:disabled) { cursor: pointer; }