:root {
  --bg: #f4f6f9; --panel: #ffffff; --fg: #1b2130; --muted: #5f6878; --line: #dde2ea; --head: #eef1f6;
  --accent: #2457c5; --accent-fg: #ffffff;
  --ok: #1d7a3a; --ok-bg: #dcf3e3; --warn: #8a5300; --warn-bg: #fdecd0; --bad: #a3221b; --bad-bg: #fbe0dd; --info-bg: #dde8ff;
  --add-bg: #e3f6e8; --add-strong: #c3ebcd; --del-bg: #fbe7e6; --del-strong: #f4c7c4;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151b; --panel: #1a1e26; --fg: #e5e8ee; --muted: #9aa3b3; --line: #2c323e; --head: #222834;
    --accent: #7aa2ff; --accent-fg: #0d1220;
    --ok: #7ad69a; --ok-bg: #173323; --warn: #f0b860; --warn-bg: #3a2c12; --bad: #ff8f86; --bad-bg: #3d1a18; --info-bg: #1d2a48;
    --add-bg: #15301f; --add-strong: #1f4a2e; --del-bg: #3a1a1a; --del-strong: #5a2524;
  }
}
:root[data-theme="dark"] {
  --bg: #12151b; --panel: #1a1e26; --fg: #e5e8ee; --muted: #9aa3b3; --line: #2c323e; --head: #222834;
  --accent: #7aa2ff; --accent-fg: #0d1220;
  --ok: #7ad69a; --ok-bg: #173323; --warn: #f0b860; --warn-bg: #3a2c12; --bad: #ff8f86; --bad-bg: #3d1a18; --info-bg: #1d2a48;
  --add-bg: #15301f; --add-strong: #1f4a2e; --del-bg: #3a1a1a; --del-strong: #5a2524;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
textarea { width: 100%; resize: vertical; font-family: var(--mono); font-size: 12.5px; }
button { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
button.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
button.ghost { background: transparent; }

.top { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 16px; }
.orgpick { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.orgpick select { min-width: 160px; color: var(--fg); }

.panes { flex: 1; display: grid; min-height: 0;
  /* a saved width can never push the analysis pane below 260px or the page wider than the window */
  grid-template-columns: min(var(--wl, 280px), 40%) 8px minmax(260px, 1fr) 8px
    max(320px, min(var(--wr, 46%), calc(100% - min(var(--wl, 280px), 40%) - 276px))); }
.panes > .list { grid-column: 1; } .panes > #split1 { grid-column: 2; } .panes > .detail { grid-column: 3; }
.panes > #split2 { grid-column: 4; } .panes > .changes { grid-column: 5; }
.panes.wide { grid-template-columns: min(var(--wl, 280px), 40%) 8px 0 0 minmax(0, 1fr); }
.panes.wide .detail, .panes.wide #split2 { display: none; }
/* drag handles between the three panes */
.split { cursor: col-resize; background: var(--line); opacity: .6; transition: opacity .15s, background .15s; touch-action: none;
  position: relative; z-index: 5; }
/* invisible 20px grab area around the thin bar, plus a visible grip in the middle */
.split::before { content: ""; position: absolute; top: 0; bottom: 0; left: -7px; right: -7px; cursor: col-resize; }
.split::after { content: "⋮"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--muted);
  font-size: 18px; line-height: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 1px; pointer-events: none; }
.split:hover::after, .split.drag::after { color: #fff; background: #6366f1; border-color: #6366f1; }
.split:hover, .split.drag { opacity: 1; background: #6366f1; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }
.pane { overflow: auto; border-right: 1px solid var(--line); min-width: 0; }
.pane-head { position: sticky; top: 0; background: var(--panel); padding: 10px; display: flex; gap: 8px; border-bottom: 1px solid var(--line); z-index: 1; }
.pane-head input { flex: 1; min-width: 0; }
.list { background: var(--panel); }
.empty { color: var(--muted); padding: 40px 24px; text-align: center; }

.issue-row { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.issue-row:hover { background: var(--head); }
.issue-row.sel { background: var(--info-bg); }
.issue-row .k { font-weight: 600; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.issue-row .t { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: var(--head); color: var(--muted); white-space: nowrap; }
.pill.deploy, .pill.Deployed, .pill.Approved, .pill.Validated, .pill.Closed { background: var(--ok-bg); color: var(--ok); }
.pill.read, .pill.Analysed, .pill.Fix.proposed, .pill.Proposed, .pill.Running { background: var(--info-bg); color: var(--accent); }
.pill.blocked, .pill.Rejected, .pill.Failed, .pill.Blocked, .pill.Critical { background: var(--bad-bg); color: var(--bad); }
.pill.On.hold, .pill.Analysing, .pill.High, .pill.stale { background: var(--warn-bg); color: var(--warn); }

.detail, .changes { padding: 0 18px 40px; }
.dhead { position: sticky; top: 0; background: var(--bg); padding: 14px 0 10px; z-index: 1; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.dhead h2 { margin: 0 0 6px; font-size: 18px; }
.dhead .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.card h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.card .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.card.lead { border-left: 4px solid var(--accent); }
details.card summary { cursor: pointer; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.waiting { border-style: dashed; color: var(--muted); }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
ul.comp { margin: 0; padding-left: 18px; }

.chg { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; }
.chg-head { display: flex; gap: 8px; align-items: center; padding: 10px 12px; cursor: pointer; flex-wrap: wrap; }
.chg-head .name { font-family: var(--mono); font-weight: 600; }
.chg-head .stats { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.add-n { color: var(--ok); } .del-n { color: var(--bad); }
.chg-note { padding: 0 12px 8px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.chg-actions { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.warnbox { margin: 8px 12px; padding: 8px 10px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); }
.errbox { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: var(--bad-bg); color: var(--bad); white-space: pre-wrap; }

.diff { border-top: 1px solid var(--line); overflow-x: auto; font-family: var(--mono); font-size: 12px; }
.diff table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.diff col.n { width: 46px; }
.diff td { padding: 0 6px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.diff td.n { color: var(--muted); text-align: right; user-select: none; background: var(--head); }
.diff .l.delete, .diff .l.replace { background: var(--del-bg); }
.diff .r.insert, .diff .r.replace { background: var(--add-bg); }
.diff .colhead td { background: var(--head); font-family: inherit; font-weight: 600; padding: 4px 6px; position: sticky; top: 0; }
.diff .fold td { background: var(--head); color: var(--accent); text-align: center; cursor: pointer; padding: 2px; }

.deploy { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 18px 0; }
.deploy h3 { margin: 0 0 8px; font-size: 15px; }
.deploy .grid2 { margin-bottom: 8px; }
.deploy pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 8px; border-radius: 6px; margin: 6px 0 0; }
.hist { font-size: 13px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; }
.hist .h { padding: 6px 0; border-bottom: 1px dashed var(--line); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12.5px; }
label > input, label > select, label > textarea { color: var(--fg); font-size: 14px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); width: min(720px, calc(100vw - 32px)); padding: 18px; }
dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog h3 { margin: 0 0 12px; }
dialog textarea { margin-top: 4px; }

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 10; }

@media (max-width: 900px) {
  body { display: block; }
  .panes, .panes.wide { display: block; overflow: visible; }
  .split { display: none; }
  .pane { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .panes.wide .detail { display: block; }
  .detail, .changes { padding: 0 16px 24px; }
  .list .issues { max-height: 40vh; overflow: auto; }
  .grid2 { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; }
  .orgpick { margin-left: 0; }
}

.chat .msg { padding: 8px 10px; border-radius: 8px; margin: 8px 0; }
.chat .msg.user { background: var(--info-bg); margin-left: 15%; }
.chat .msg.claude { background: var(--head); margin-right: 5%; }
.chat .who { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat .msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-in { margin-top: 10px; }
.chat-in textarea { font-family: inherit; font-size: 14px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.thumb { position: relative; }
.thumb img { height: 64px; border-radius: 6px; border: 1px solid var(--line); display: block; }
.thumb button { position: absolute; top: -8px; right: -8px; padding: 0 6px; border-radius: 10px; line-height: 18px; }

.tabs { display: flex; gap: 2px; margin-top: 10px; border-bottom: 1px solid var(--line); margin-bottom: -11px; }
.tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); padding: 6px 12px; font-weight: 600; }
.tab:hover { color: var(--fg); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.usage { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.ubar { display: grid; grid-template-columns: minmax(90px, max-content) 1fr auto; gap: 10px; align-items: center; margin: 4px 0; font-size: 13px; }
.ulabel { color: var(--muted); }
.utrack { height: 8px; border-radius: 4px; background: var(--head); overflow: hidden; }
.ufill { height: 100%; border-radius: 4px; }
.ufill.ok { background: var(--ok); } .ufill.warn { background: var(--warn); } .ufill.bad { background: var(--bad); }
.thread-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 4px; }
.thread-head h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#detail > .msg { margin-left: 0; margin-right: 0; }
.msg { padding: 8px 10px; border-radius: 8px; margin: 8px 0; }
.msg.user { background: var(--info-bg); margin-left: 12%; }
.msg.claude { background: var(--panel); border: 1px solid var(--line); margin-right: 4%; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
table.files { width: 100%; border-collapse: collapse; font-size: 13px; }
table.files th, table.files td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.files th { color: var(--muted); font-weight: 600; font-size: 12px; }
@media (max-width: 900px) { .ubar { grid-template-columns: 1fr; } table.files { font-size: 12px; } }

.opt-head { margin: 22px 0 4px; font-weight: 700; font-size: 14px; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.chg.data { border-left: 4px solid var(--warn); }
details.script { margin: 4px 12px 8px; }
details.script summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.script pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 8px; border-radius: 6px; margin: 0; }

.card.test .test-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.card.test .tf { margin: 8px 0; }
.card.test .tf h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card.test pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 8px; border-radius: 6px; margin: 0; max-height: 260px; overflow: auto; }
button.mini { padding: 0 8px; font-size: 11px; text-transform: none; letter-spacing: 0; }

.methods { margin: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.methods h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.method-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
button.method.on { border-color: var(--accent); background: var(--info-bg); color: var(--accent); font-weight: 600; }
.methods .ready { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.methods .ready .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.methods .who { margin-bottom: 6px; }

.tracker { background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 16px; }
.trk-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.trk-sum { margin-right: 8px; color: var(--muted); font-size: 13px; }
.trk-arrow { color: var(--muted); font-size: 12px; }
.trk { border-radius: 14px; padding: 3px 10px; font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.trk .ic { font-weight: 700; }
.trk .cnt { font-family: var(--mono); font-size: 11.5px; opacity: .85; }
.trk.done { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.trk.current { background: var(--info-bg); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.trk.failed { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.trk.pending { color: var(--muted); }
.trk.sel { box-shadow: 0 0 0 2px var(--accent); }
.trk-detail { margin-top: 6px; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trk-note { padding: 3px 8px; font-size: 12.5px; min-width: 220px; }
.pbar { height: 4px; background: var(--head); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.pbar div { height: 100%; background: var(--ok); }
.issue-row .nx { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.opt-stat { font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.runbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .trk-arrow { display: none; } }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 96vw); background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(0,0,0,.18); z-index: 20; display: flex; flex-direction: column; }
.drawer[hidden] { display: none; }
.dr-head { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dr-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dr-title b { font-family: var(--mono); font-size: 13px; }
#drSearch { min-width: 180px; }
a.btn { border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; text-decoration: none; color: var(--fg); }
.dr-body { flex: 1; overflow: auto; }
table.csv, table.code { border-collapse: collapse; font-family: var(--mono); font-size: 12px; width: max-content; min-width: 100%; }
table.csv th { position: sticky; top: 0; background: var(--head); text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.csv td { padding: 3px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.csv tbody tr:hover td { background: var(--head); }
table.csv .old { background: var(--del-bg); } table.csv .new { background: var(--add-bg); }
table.csv td.n, table.code td.n { color: var(--muted); text-align: right; user-select: none; background: var(--head); }
table.code td { padding: 0 10px; white-space: pre; line-height: 1.55; vertical-align: top; }
a.dl { text-decoration: none; margin-left: 6px; color: var(--muted); }
a.dl:hover { color: var(--accent); }

.build { margin: 6px 0 8px; }
.bbar { height: 8px; background: var(--head); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; position: relative; }
.bbar div { height: 100%; background: var(--accent); border-radius: 4px; transition: width .6s ease; }
.bbar.indet div { position: absolute; animation: indet 1.4s ease-in-out infinite; }
@keyframes indet { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .bbar.indet div { animation: none; left: 0; } }
.regen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
label.chk { flex-direction: row; align-items: center; gap: 4px; font-size: 12.5px; }
.ready.prev { opacity: .65; }

.notbuilt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }

.newver { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30; background: var(--info-bg); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 8px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.15); }

button.icon { padding: 5px 7px; display: inline-flex; align-items: center; color: var(--muted); }
button.icon:hover, button.icon.on { color: var(--accent); }
.settings { flex: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.settings[hidden] { display: none; }
.panes[hidden] { display: none; }
.set-nav { background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.set-nav h3 { margin: 0 0 10px 8px; font-size: 15px; }
.set-item { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 6px; }
.set-item:hover { background: var(--head); }
.set-item.on { background: var(--info-bg); color: var(--accent); font-weight: 600; }
.set-body { padding: 18px 24px 40px; overflow: auto; max-width: 1280px; min-width: 0; }
.set-body h2 { font-size: 18px; margin: 0 0 8px; display: flex; gap: 10px; align-items: center; }
table.kv td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.kv td:first-child { color: var(--muted); width: 160px; }
@media (max-width: 900px) { .settings { grid-template-columns: 1fr; } .set-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } .set-nav h3 { width: 100%; } }

td.acts { white-space: nowrap; }
td.acts .hint { white-space: normal; max-width: 280px; }

.jira-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.jira-row input { flex: 1; min-width: 140px; }
#jKey { flex: 0 1 160px; }
.jira-search { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; max-height: 260px; overflow: auto; }
.or-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 8px 0 10px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

label.attach { flex-direction: row; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; color: var(--fg); font-size: 13px; }
label.attach:hover { border-color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 12.5px; background: var(--bg); }
.card.drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.msg-files { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }

.review-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.review { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; display: flex; justify-content: center; align-items: stretch; padding: 24px; }
.review[hidden] { display: none; }
.rv { background: var(--panel); border-radius: 10px; width: min(1500px, 100%); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.rv-head { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rv-title b { overflow-wrap: anywhere; }
.rv-note { padding: 8px 16px; color: var(--muted); white-space: pre-wrap; border-bottom: 1px solid var(--line); max-height: 120px; overflow: auto; }
.rv-body { flex: 1; overflow: auto; }
.rv-body .diff { border-top: 0; }
.rv-foot { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; background: var(--bg); }
button.big { padding: 8px 20px; font-weight: 600; font-size: 15px; }
.rv-done { margin: auto; text-align: center; padding: 40px; }
@media (max-width: 900px) { .review { padding: 0; } .rv { border-radius: 0; } }

dialog.confirm { width: min(480px, calc(100vw - 32px)); }
.cf h3 { margin: 0 0 8px; }
.cf-body { margin-bottom: 12px; color: var(--fg); }
.cf label { margin-bottom: 8px; }
.ds-body { padding: 4px 16px 16px; }
.ds-plan { margin: 0; padding-left: 20px; line-height: 1.7; }
.ds-conf { flex-direction: row; align-items: center; gap: 8px; }
.ds-conf input { width: 140px; }
.ds-steps { list-style: none; margin: 0; padding: 0; }
.ds-steps li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ds-steps .ic { width: 20px; text-align: center; font-weight: 700; }
.ds-steps li.done .ic { color: var(--ok); } .ds-steps li.failed .ic { color: var(--bad); }
.ds-steps li.running .ic { color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.ds-steps li.skipped .ic, .ds-steps li.pending .ic { color: var(--muted); }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ds-steps li.running .ic { animation: none; } }
.ds-detail { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ds-pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 10px; border-radius: 6px; margin: 0; }
.hist .h { cursor: pointer; } .hist .h:hover { background: var(--head); }

dialog.testdlg { width: min(720px, calc(100vw - 32px)); }
.tc h3 { margin: 0 0 10px; } .tc h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tc-modes { display: grid; gap: 8px; }
.tc-mode { flex-direction: row; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; color: var(--fg); font-size: 14px; }
.tc-mode:has(input:checked) { border-color: var(--accent); background: var(--info-bg); }
.tc-mode input { margin-top: 3px; }
.tc-tests { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.tc-tests label.chk { font-size: 13.5px; color: var(--fg); }

.files-wrap { overflow-x: auto; }
table.files td { overflow-wrap: break-word; }  /* long paths wrap; short words never split */
.files-card table.files td:nth-child(2) { min-width: 180px; }
table.files td .pill { white-space: nowrap; }

/* review: one Accept / Reject bar per block of changes */
tr.hbar td { background: #eef2ff; border-top: 2px solid #6366f1; padding: 6px 10px; font-family: inherit; }
tr.hbar.accepted td { background: #ecfdf5; border-top-color: #16a34a; }
tr.hbar.rejected td { background: #fef2f2; border-top-color: #dc2626; }
tr.hbar button.sm { padding: 2px 10px; font-size: 12px; margin-left: 6px; }
tr.hrej td.r { text-decoration: line-through; opacity: .5; }

.panes { overflow: hidden; }
.chg, .card { max-width: 100%; box-sizing: border-box; }

/* promotion check */
.okbox { background: #ecfdf5; border: 1px solid #16a34a55; color: #166534; padding: 8px 10px; border-radius: 6px; }
td.ok-t { color: #15803d; font-weight: 600; }
td.bad-t { color: #b91c1c; font-weight: 600; }

/* nothing in a pane may push it wider than the window: wrap instead of scrolling sideways */
.pane { overflow-x: hidden; }
.pane .tabs { flex-wrap: wrap; row-gap: 2px; }
.pane a.fprev, .pane .mono, .pane code { overflow-wrap: anywhere; word-break: break-word; }
.pane pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.pane img, .pane video { max-width: 100%; height: auto; }
.pane table:not(.csv) { max-width: 100%; table-layout: fixed; }
.pane table:not(.csv) td, .pane table:not(.csv) th { overflow-wrap: anywhere; }
.pane .diff { overflow-x: auto; }               /* code comparisons keep their columns; long lines wrap */
.pane .diff td.l, .pane .diff td.r { white-space: pre-wrap; overflow-wrap: anywhere; }
.chg-head .name { overflow-wrap: anywhere; min-width: 0; }
.pane-head input { min-width: 0; flex: 1; }


/* audit log */
.audit { flex: 1; overflow: auto; min-height: 0; }
.aud { padding: 16px 20px; max-width: 100%; box-sizing: border-box; }
.aud-head h2 { margin: 0 0 4px; font-size: 18px; }
.aud-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.aud-filters input { flex: 1; min-width: 200px; }
table.aud-t { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
table.aud-t th { text-align: left; background: var(--head); padding: 6px 10px; font-size: 12px; color: var(--muted); }
table.aud-t th:nth-child(1) { width: 150px; } table.aud-t th:nth-child(2) { width: 120px; } table.aud-t th:nth-child(3) { width: 90px; }
table.aud-t th:nth-child(4) { width: 120px; } table.aud-t th:nth-child(5) { width: 22%; }
table.aud-t td { padding: 6px 10px; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
tr.aud-row { cursor: pointer; } tr.aud-row:hover td, tr.aud-row.open td { background: var(--head); }
tr.aud-more td { background: var(--bg); }
pre.aud-sum { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; margin: 6px 0; }
@media (max-width: 900px) { .views { order: 3; width: 100%; } table.aud-t th:nth-child(1) { width: 110px; } }

/* ---------------------------------------------------------------- app header + navigation (website-style)
   Dark blue bar across the top; nav items are full-height, square, white text; the selected one is marked
   with a lighter band and a white underline - like a portal / Salesforce app header. */
:root { --nav-bg: #0b2e6b; --nav-fg: #ffffff; --nav-hover: #164a9e; --nav-on: #1f5fcf; --tab-on: #1f5fcf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-bg: #0a1a3a; --nav-hover: #15306a; --nav-on: #1f4fb0; --tab-on: #2f6be0; } }
:root[data-theme="dark"] { --nav-bg: #0a1a3a; --nav-hover: #15306a; --nav-on: #1f4fb0; --tab-on: #2f6be0; }
.top { background: var(--nav-bg); color: var(--nav-fg); border-bottom: 0; padding: 0 16px; min-height: 52px; align-items: stretch; gap: 12px; }
.top > * { align-self: center; }
.top .brand { color: #fff; font-size: 18px; letter-spacing: .2px; padding-right: 8px; }
.views { align-self: stretch; display: flex; gap: 0; margin-left: 4px; }
.views .view { align-self: stretch; border: 0; border-radius: 0; background: transparent; color: rgba(255,255,255,.85);
  padding: 0 20px; font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.views .view:hover { background: var(--nav-hover); color: #fff; }
.views .view.on { background: var(--nav-on); color: #fff; border-bottom-color: #fff; }
.views .view:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.top .orgpick { color: rgba(255,255,255,.85); }
.top .orgpick select { background: #fff; color: #1b2130; border-color: transparent; }
.top button.ghost, .top button.icon { color: #fff; border-color: rgba(255,255,255,.35); }
.top button.ghost:hover, .top button.icon:hover { background: var(--nav-hover); }

/* tab bars inside the panes: a grey strip with square tabs; the selected tab is blue with white text */
.tabs { gap: 0; border-bottom: 3px solid var(--tab-on); background: var(--head); border-radius: 6px 6px 0 0; margin-top: 10px; padding: 0; overflow: hidden; }
.tabs .tab { border: 0; border-radius: 0; border-right: 1px solid var(--line); background: transparent; color: var(--fg);
  padding: 9px 18px; font-weight: 600; font-size: 13.5px; }
.tabs .tab:hover { background: #dbe6fb; color: #0b2e6b; }
.tabs .tab.on { background: var(--tab-on); color: #fff; border-right-color: var(--tab-on); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs .tab:hover { background: #1d2a48; color: #fff; } }
:root[data-theme="dark"] .tabs .tab:hover { background: #1d2a48; color: #fff; }
@media (max-width: 900px) { .views { width: 100%; order: 3; } .views .view { flex: 1; padding: 12px 8px; } }


/* focus + priority on the issue list */
:root { --p-high: #d92d20; --p-med: #e08a00; --p-low: #6b7a90; --star: #f5b301; }
.ifilters { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
.ifilters .if { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 4px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; }
.ifilters .if .cnt { color: var(--muted); font-weight: 500; margin-left: 2px; }
.ifilters .if:hover { background: var(--head); }
.ifilters .if.on { background: var(--tab-on, #1f5fcf); border-color: var(--tab-on, #1f5fcf); color: #fff; }
.ifilters .if.on .cnt { color: rgba(255,255,255,.85); }
.issue-row { border-left: 4px solid transparent; }
.issue-row.p-High { border-left-color: var(--p-high); }
.issue-row.p-Medium { border-left-color: var(--p-med); }
.issue-row.p-Low { border-left-color: var(--p-low); }
.issue-row.focus:not(.sel) { background: #fffbea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .issue-row.focus:not(.sel) { background: #2a2614; } }
:root[data-theme="dark"] .issue-row.focus:not(.sel) { background: #2a2614; }
.issue-row .kl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
button.star { border: 0; background: transparent; padding: 0 2px; font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer; }
button.star:hover { color: var(--star); }
button.star.on { color: var(--star); }
button.star.big { font-size: 13.5px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-weight: 600; color: var(--fg); background: var(--panel); }
button.star.big.on { background: #fff4c2; border-color: var(--star); color: #6b4e00; }
.prio { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; color: #fff; text-transform: uppercase; letter-spacing: .3px; }
.prio.p-High { background: var(--p-high); } .prio.p-Medium { background: var(--p-med); } .prio.p-Low { background: var(--p-low); }
.prio-sel.p-High { border-color: var(--p-high); color: var(--p-high); font-weight: 600; }
.prio-sel.p-Medium { border-color: var(--p-med); color: #9a5c00; font-weight: 600; }
.prio-sel.p-Low { border-color: var(--p-low); }


/* plain-English notes on change blocks */
.hovertip { position: fixed; z-index: 1000; max-width: 440px; background: #0b2e6b; color: #fff; padding: 10px 12px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13.5px; line-height: 1.45; pointer-events: none; }
.hovertip .tt-h { font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .8; margin-bottom: 4px; }
.hovertip .hint { color: #c9d6f0; }
.hovertip a { color: #cfe0ff; }
tr.hrow td { cursor: help; }
tr.hrow:hover td.l:not(.equal), tr.hrow:hover td.r:not(.equal) { outline: 1px solid #1f5fcf; outline-offset: -1px; }
.explainbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 16px; padding: 8px 12px; border: 1px solid #c7d7f5;
  background: #eef4ff; border-radius: 6px; font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .explainbar { background: #1d2a48; border-color: #2c3f6b; } }
:root[data-theme="dark"] .explainbar { background: #1d2a48; border-color: #2c3f6b; }
.hb-ex { margin-top: 4px; font-weight: 400; color: var(--fg); white-space: normal; }


/* flow diagram (review of Flow changes) */
.rv-tabs { margin: 8px 16px 0; }
.fv { padding: 8px 16px 16px; }
.fv-legend { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.lg { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line); }
.lg.changed { background: #fff3cd; border-color: #f0b400; color: #6b4e00; }
.lg.added { background: #dcf3e3; border-color: #2f9e44; color: #1d5e2e; }
.lg.removed { background: #fbe0dd; border-color: #c92a2a; color: #8a1c1c; }
.fv-trig { border: 1px solid #f0b400; background: #fffbea; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.fv-logic { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; font-family: var(--mono); font-size: 12.5px; }
.fv-logic .old { color: #a3221b; text-decoration: line-through; } .fv-logic .new { color: #1d7a3a; font-weight: 600; }
.fv-res { margin: 6px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fv-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(0,0,0,.03) 23px 24px), var(--bg); max-height: 62vh; }
.fv-svg { display: block; font-family: inherit; }
.fv-e { fill: none; stroke: #8a94a6; stroke-width: 1.6; }
.fv-e.gone { stroke: #c92a2a; stroke-dasharray: 5 4; }
.fv-el { font-size: 11px; fill: var(--muted); }
.fv-n { cursor: pointer; }
.fv-n rect:first-child { fill: var(--panel); stroke: #b8c0cc; stroke-width: 1.2; }
.fv-n.changed rect:first-child { fill: #fff3cd; stroke: #f0b400; stroke-width: 2.5; }
.fv-n.added rect:first-child { fill: #dcf3e3; stroke: #2f9e44; stroke-width: 2.5; }
.fv-n.removed rect:first-child { fill: #fbe0dd; stroke: #c92a2a; stroke-width: 2; stroke-dasharray: 5 3; }
.fv-n.sel rect:first-child { stroke: #1f5fcf; stroke-width: 3; }
.fv-n:hover rect:first-child { filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.fv-t { font-size: 11px; fill: var(--muted); font-weight: 600; } .fv-l { font-size: 13px; fill: var(--fg); font-weight: 600; }
.fv-badge { font-size: 9.5px; font-weight: 800; fill: #6b4e00; }
.fv-n.added .fv-badge { fill: #1d5e2e; } .fv-n.removed .fv-badge { fill: #8a1c1c; }
.fv-detail { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.fv-detail h4 { margin: 0 0 6px; }
.fv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fv-cols pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 8px; border-radius: 6px; max-height: 300px; overflow: auto; margin: 4px 0 0; }
.fv-cols .del { background: var(--del-strong); } .fv-cols .add { background: var(--add-strong); }
@media (max-width: 900px) { .fv-cols { grid-template-columns: 1fr; } }
.fv-notes ol { margin: 4px 0 0 18px; padding: 0; } .fv-notes li { margin: 3px 0; }

/* flow diagram: focus on the changes */
.fbtn { cursor: pointer; background: var(--panel); }
.fbtn:disabled { opacity: .45; cursor: default; }
.fbtn.on { box-shadow: 0 0 0 2px #1f5fcf; }
.fbtn.all { border-color: #1f5fcf; color: #0b2e6b; background: #eef4ff; }
.fbtn.none { color: var(--fg); }
.fv-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 600; }
.fv-nav button { font-size: 16px; line-height: 1; padding: 2px 10px; }
.fv-n, .fv-eg { transition: opacity .2s; }
.fv-n.dim, .fv-eg.dim { opacity: .18; }
.fv-n.dim:hover { opacity: .6; }
.fv-n.pulse rect:first-child { animation: fvpulse 1.1s ease-out; }
@keyframes fvpulse { 0% { stroke-width: 8; stroke: #1f5fcf; } 100% { stroke-width: 3; } }
@media (prefers-reduced-motion: reduce) { .fv-n.pulse rect:first-child { animation: none; } }
.fv-cols .gap { color: var(--muted); }

/* ---------- sign-in, user menu, administration ---------- */
.auth { position: fixed; inset: 0; z-index: 1000; background: linear-gradient(135deg, var(--nav-bg) 0%, #1f5fcf 100%); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.auth-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); width: min(880px, 100%); background: var(--panel); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-side { background: var(--nav-bg); color: #fff; padding: 36px 32px; }
.auth-side p, .auth-side li { color: #d7e2ff; }
.auth-side ul { padding-left: 18px; line-height: 1.7; }
.auth-brand { font-size: 28px; font-weight: 700; letter-spacing: .3px; margin-bottom: 12px; }
.auth-form { padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.auth-form h2 { margin: 0 0 4px; }
.auth-form label, .sfform label, .admindlg label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.auth-form input { font-size: 15px; padding: 9px 10px; color: var(--fg); }
button.wide { width: 100%; padding: 10px; }
@media (max-width: 720px) { .auth-card { grid-template-columns: 1fr; } .auth-side { padding: 20px; } .auth-side ul { display: none; } }

.userchip { position: relative; margin-left: 4px; }
.uc-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; color: #fff; padding: 4px 8px; }
.uc-btn:hover { background: var(--nav-hover); border-color: transparent; }
.uc-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.uc-txt small { color: #c8d6f5; font-size: 11px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #e7eefc; color: #0b2e6b; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; }
.avatar.big { width: 48px; height: 48px; font-size: 17px; }
.uc-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 6px; z-index: 500; display: flex; flex-direction: column; }
.uc-menu[hidden] { display: none; }
.uc-head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.uc-menu button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 6px; }
.uc-menu button:hover { background: var(--head); }
.uc-menu .uc-out { color: var(--bad); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; }
@media (max-width: 900px) { .uc-txt { display: none; } }

.set-grp { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 14px 8px 4px; }
.admindlg { width: min(720px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); padding: 20px; }
.admindlg.wide { width: min(1100px, calc(100vw - 32px)); }
.admindlg::backdrop { background: rgba(10, 20, 40, .45); }
.admindlg h3 { margin-top: 0; }
.admindlg input, .admindlg select, .sfform input, .sfform select { color: var(--fg); }
.listview .lv-head, .lv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.lv-head label { flex-direction: row; align-items: center; gap: 6px; }
.lv-head input { flex: 1 1 220px; min-width: 0; }
.grow { flex: 1; }
.small { font-size: 12px; }
td.c, th.c { text-align: center; }
table.lv td a { color: var(--accent); text-decoration: none; }
table.lv td a:hover { text-decoration: underline; }
.crumb { margin-bottom: 6px; } .crumb a { color: var(--accent); text-decoration: none; font-size: 13px; }
.ud-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .ud-head h2 { margin: 0; }
.ud-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
table.sfdetail { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.sfdetail th { text-align: right; color: var(--muted); font-weight: 600; font-size: 12.5px; width: 18%; padding: 7px 10px; vertical-align: top; }
table.sfdetail td { padding: 7px 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; width: 32%; }
@media (max-width: 760px) { table.sfdetail th, table.sfdetail td { display: block; width: auto; text-align: left; } table.sfdetail th { padding-bottom: 0; } }
.sfform .sf-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0 14px 14px; margin-bottom: 12px; }
.sfform .sf-sec h4 { margin: 0 -14px 12px; padding: 8px 14px; background: var(--head); border-radius: 8px 8px 0 0; font-size: 13px; }
.sfform .grid2, .admindlg .grid2, .auth-form .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
.req { color: var(--bad); }
label.chk { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--fg) !important; padding: 3px 0; }
label.chk input { width: auto; }
.sf-btns { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; }
.tempbox { margin: 10px 0; padding: 12px 14px; }
.tempbox .tp { font-size: 20px; letter-spacing: 1px; margin: 6px 0; user-select: all; }
.cards3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.prcard h4 { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.prmeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 10px 0 8px; }
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.permgrid fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 10px; min-width: 0; }
.permgrid legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.perm-chk { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; cursor: pointer; }
.perm-chk input { margin-top: 3px; }
.perm-chk span { display: flex; flex-direction: column; }
.chk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; margin-bottom: 8px; }
.matrixwrap, .plwrap, .evwrap { overflow: auto; max-width: 100%; }
.evwrap { max-height: 420px; }
table.matrix th { font-size: 12px; white-space: nowrap; }
table.matrix tr.grp td { background: var(--head); font-weight: 600; font-size: 12px; }
.mini-in { width: 110px; padding: 3px 6px; }
.permlist h4 { margin: 12px 0 4px; font-size: 13px; }
.permlist .perm { display: flex; gap: 10px; padding: 4px 0; } .permlist .perm > span { width: 14px; font-weight: 700; }
.permlist .perm.yes > span { color: var(--ok); } .permlist .perm.no { opacity: .55; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.pl-svg { display: block; }
.pl-box { fill: var(--panel); stroke-width: 2; }
.pl-name { font-weight: 700; font-size: 13px; fill: var(--fg); }
.pl-sub { font-size: 11px; fill: var(--muted); }
.pl-arrow { fill: none; stroke: var(--accent); stroke-width: 2; }
.pl-head { fill: var(--accent); }
.pl-lbl { font-size: 11px; fill: var(--accent); font-weight: 600; }
tr.badrow td { background: var(--bad-bg); }
.chips .pill { margin: 2px; }
[hidden] { display: none !important; }
.perm-chk { flex-direction: row !important; color: var(--fg) !important; } .perm-chk input { width: auto; flex: none; }

/* test cards: one status badge, plain meta line */
.card.test .test-head { display: flex; align-items: flex-start; gap: 10px; }
.card.test .test-head .tt { flex: 1; min-width: 0; }
.tstatus { flex: none; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--head); white-space: nowrap; }
.tstatus.pass { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.tstatus.fail { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.tstatus.run { background: var(--info-bg); color: var(--accent); border-color: transparent; }
.tstatus.manual { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.card.test { border-left: 4px solid var(--line); }
.card.test.ts-pass { border-left-color: var(--ok); } .card.test.ts-fail { border-left-color: var(--bad); }
.card.test.ts-run { border-left-color: var(--accent); } .card.test.ts-manual { border-left-color: var(--warn); }
.test-meta { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
button.linkbtn { background: none; border: 0; color: var(--accent); padding: 6px 4px; text-decoration: underline; }
/* AI model picker */
.modelbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.mb-label { font-weight: 600; font-size: 13px; }
.modelbar select { max-width: 100%; }
.modelbar .hint { flex: 1 1 260px; min-width: 0; }
.mtag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--info-bg); color: var(--accent); }
.warn-t { color: var(--warn); }
/* screenshot evidence */
.tc-shots { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 1px dashed var(--accent); }
.tc-shots .sub { margin-left: 22px; font-size: 13px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.shots a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--muted); font-size: 11.5px; min-width: 0; }
.shots img { width: 100%; height: 96px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; background: var(--head); }
.shots span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* chat message states: waiting (amber) / working (blue) / answered (green) */
.mstate { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.mstate.new { background: var(--warn-bg); color: var(--warn); animation: fdpulse 1.6s ease-in-out infinite; }
.mstate.work { background: var(--info-bg); color: var(--accent); }
.mstate.done { background: var(--ok-bg); color: var(--ok); }
.msg.st-new { background: var(--warn-bg) !important; border: 1px solid var(--warn) !important; border-left: 5px solid var(--warn) !important; }
.msg.st-work { border-left: 5px solid var(--accent) !important; }
.build.wait .bbar > div { background: var(--warn) !important; }
.build.wait .wait-t { font-weight: 600; color: var(--warn); margin-top: 4px; }
.build.wait.off .wait-t { color: var(--bad); }
.build.wait.off .bbar > div { background: var(--bad) !important; }
@keyframes fdpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mstate.new { animation: none; } }
/* "Claude is working" - purple, spinner, moving stripes (different from waiting = amber, answered = green, your messages = blue) */
:root { --work: #6d28d9; --work-bg: #f1eafe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --work: #b794f6; --work-bg: #2a1f45; } }
:root[data-theme="dark"] { --work: #b794f6; --work-bg: #2a1f45; }
:root[data-theme="dark"] { --work: #b794f6; --work-bg: #2a1f45; }
.mstate.work { background: var(--work); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.msg.st-work { background: var(--work-bg) !important; border: 1px solid var(--work) !important; border-left: 5px solid var(--work) !important; }
.build.working .bbar > div { background: repeating-linear-gradient(45deg, var(--work) 0 10px, #8b5cf6 10px 20px) !important; background-size: 28px 28px !important; animation: fdstripes 1s linear infinite; }
.build.working .work-t { font-weight: 600; color: var(--work); margin-top: 4px; }
.spin { width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: fdspin .8s linear infinite; display: inline-block; }
@keyframes fdspin { to { transform: rotate(360deg); } }
@keyframes fdstripes { from { background-position: 0 0; } to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .spin, .build.working .bbar > div { animation: none; } }
/* where Claude is: issue list */
.issue-row.cl-working { box-shadow: inset 4px 0 0 var(--work); background: var(--work-bg); }
.issue-row.cl-waiting { box-shadow: inset 4px 0 0 var(--warn); }
.cl-line { margin-top: 6px; font-size: 12px; padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.cl-line > * { flex: none; } .cl-line { white-space: nowrap; text-overflow: ellipsis; }
.cl-line.working { background: var(--work); color: #fff; }
.cl-line.waiting { background: var(--warn-bg); color: var(--warn); animation: fdpulse 1.6s ease-in-out infinite; }
.spin.dark { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
/* live terminal feed */
.term { margin-top: 8px; background: #0f1222; color: #d6dcff; border-radius: 8px; padding: 8px 10px; font: 12px/1.5 var(--mono); max-width: 100%; overflow: hidden; }
.term-h { display: flex; justify-content: space-between; color: #b794f6; font-weight: 700; margin-bottom: 4px; }
.term-h .hint { color: #8a90b8; font-weight: 400; }
.term .tl { display: flex; gap: 8px; min-width: 0; }
.term .tl:last-child .tx { color: #fff; font-weight: 600; }
.term .tt { color: #7f86b3; flex: none; }
.term .tk { color: #b794f6; flex: none; min-width: 64px; }
.term .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.term .muted { color: #8a90b8; }
@media (prefers-reduced-motion: reduce) { .cl-line.waiting { animation: none; } }
/* AI sparkle - twinkles while Claude works */
.sparkle { width: 16px; height: 16px; flex: none; fill: currentColor; animation: fdtwinkle 1.4s ease-in-out infinite; transform-origin: 50% 50%; }
.sparkle .sp2 { animation: fdtwinkle2 1.4s ease-in-out infinite; transform-origin: 80% 20%; }
@keyframes fdtwinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.72) rotate(20deg); opacity: .7; } }
@keyframes fdtwinkle2 { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
.cl-line.working { gap: 8px; }
.cl-line.working .sparkle { color: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.cl-line .cl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.pill.work-pill { background: var(--work); color: #fff; display: inline-flex; align-items: center; gap: 6px; max-width: 46vw; }
.pill.work-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* behind-the-scenes popup */
.term-x { background: transparent; border: 1px solid #4b4f7a; color: #d6dcff; font-size: 11px; padding: 1px 8px; margin-left: 8px; border-radius: 5px; }
.term-x:hover { border-color: #b794f6; }
.termdlg { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); padding: 16px; display: flex; flex-direction: column; }
.termdlg:not([open]) { display: none; }
.termdlg::backdrop { background: rgba(10, 12, 30, .55); }
.tp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tp-head .sparkle { color: var(--work); width: 20px; height: 20px; }
.tp-head .hint { flex: 1; }
.tp-opt { font-size: 12.5px; }
.tp-prog { margin-bottom: 8px; }
.tp-body { flex: 1; min-height: 240px; max-height: 62vh; overflow: auto; }
.term .tx.wrap { white-space: normal; overflow-wrap: anywhere; }
.term .tl.now .tx { color: #fff; font-weight: 600; }
.term .tl.now .tt::before { content: "▶ "; color: #b794f6; }
@media (prefers-reduced-motion: reduce) { .sparkle, .sparkle .sp2 { animation: none; } }
/* questions from Claude - teal, so they stand out from waiting (amber) and working (purple) */
:root { --ask: #0e7490; --ask-bg: #e0f5fa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ask: #5ccfe6; --ask-bg: #12323a; } }
:root[data-theme="dark"] { --ask: #5ccfe6; --ask-bg: #12323a; }
:root[data-theme="dark"] { --ask: #5ccfe6; --ask-bg: #12323a; }
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ask); color: #fff; font-weight: 800; flex: none; }
.qmark.sm { width: 16px; height: 16px; font-size: 11px; background: #fff; color: var(--ask); }
.msg.ask { background: var(--ask-bg) !important; border: 2px solid var(--ask) !important; border-left-width: 6px !important; }
.msg.asked { border-left: 4px solid var(--ask) !important; }
.ask-h { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ask); margin-bottom: 6px; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }
.ask-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ask-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--panel); border: 1px solid var(--ask); border-radius: 8px; padding: 8px 12px; }
.ask-opt b { background: var(--ask); color: #fff; border-radius: 6px; padding: 0 8px; flex: none; }
.ask-opt:hover { background: var(--ask); color: #fff; } .ask-opt:hover b { background: #fff; color: var(--ask); }
.ask-own { align-self: flex-start; }
.ask-done { margin-top: 8px; font-size: 13px; color: var(--ask); }
.askbanner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--ask-bg); border: 1px solid var(--ask); color: var(--ask); }
.askbanner .hint { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.issue-row.cl-asking { box-shadow: inset 4px 0 0 var(--ask); background: var(--ask-bg); }
.cl-line.asking { background: var(--ask); color: #fff; animation: fdpulse 1.6s ease-in-out infinite; }
.msg.flash { animation: fdflash 1.2s ease-in-out 2; }
@keyframes fdflash { 50% { box-shadow: 0 0 0 6px rgba(14,116,144,.35); } }
@media (prefers-reduced-motion: reduce) { .cl-line.asking, .msg.flash { animation: none; } }
/* new component tag, view-only review */
.pill.newc { background: #ffe9b0; color: #7a4b00; font-weight: 800; letter-spacing: .5px; border: 1px solid #e3b341; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.newc { background: #4a3a10; color: #ffd76a; } }
:root[data-theme="dark"] .pill.newc { background: #4a3a10; color: #ffd76a; }
.viewonly { color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
.pill.Cancelled { background: var(--bad-bg); color: var(--bad); }
.hovertip { pointer-events: auto; }
.hovertip .tt-x { float: right; margin: -4px -6px 0 8px; background: transparent; border: 0; color: #fff; font-size: 14px; padding: 2px 6px; cursor: pointer; opacity: .8; }
.hovertip .tt-x:hover { opacity: 1; background: rgba(255,255,255,.15); }
.edit-key { font-size: 13px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; opacity: .55; }
.dhead h2:hover .edit-key { opacity: 1; }
.keyedit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; font-weight: 400; }
.keyedit #ekKey { width: 150px; font-family: var(--mono); }
.keyedit #ekTitle { flex: 1 1 260px; min-width: 0; }
/* deploy in progress: one purple button that opens the running job */
.running-btn { background: var(--work); color: #fff; border-color: var(--work); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; animation: fdpulse 1.6s ease-in-out infinite; }
.running-btn:hover { filter: brightness(1.1); border-color: var(--work); }
@media (prefers-reduced-motion: reduce) { .running-btn { animation: none; } }
/* story-level deploy result */
.depbadge { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
.depbadge.dep-bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.depbadge.dep-ok { background: var(--ok-bg); color: var(--ok); }
.depbadge.dep-run { background: var(--work); color: #fff; }
.cl-line.depfail { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
.edit-key { opacity: 1 !important; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); }
.cl-line.deprun { background: var(--work); color: #fff; cursor: pointer; animation: fdpulse 1.6s ease-in-out infinite; }
.cl-line.approve { background: color-mix(in srgb, var(--warn) 22%, var(--panel)); border: 1px solid var(--warn); cursor: pointer; }
.cl-line.testrun { background: var(--work); color: #fff; cursor: pointer; animation: fdpulse 1.6s ease-in-out infinite; }
.issue-row:has(.deprun) { box-shadow: inset 4px 0 0 var(--work); }
@media (prefers-reduced-motion: reduce) { .cl-line.deprun, .cl-line.testrun { animation: none; } }
.tests-card .tc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.tests-card .tc-l { font-weight: 600; min-width: 120px; }
.tests-card .tc-v { background: var(--head); padding: 3px 8px; border-radius: 6px; font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.tests-card .tc-in { flex: 1 1 320px; font-family: var(--mono); font-size: 12.5px; }

/* ---------------------------------------------------------------- Delivery workspace */
.delivery { flex: 1; display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 0; }
.delivery[hidden] { display: none; }
.dv-list { overflow: auto; border-right: 1px solid var(--line); background: var(--panel); }
.dv-item { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.dv-item:hover { background: var(--head); }
.dv-item.on { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--accent); }
.dv-i1 { display: flex; align-items: center; gap: 6px; }
.dv-i2 { margin: 2px 0; }
.dv-ai { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; font-size: 12px; }
.dv-ai .sparkle { width: 15px; height: 15px; color: #8a4dd6; }
.dv-ai.ask { background: var(--warn-bg); color: var(--warn); border-radius: 50%; font-weight: 700; }
.dv-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dv-empty { max-width: 720px; margin: 40px auto; padding: 0 16px; text-align: left; }
.dv-flow li { margin: 4px 0; }
.dv-head { padding: 12px 18px 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.dv-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-title h2 { margin: 0; font-size: 19px; }
.dv-steps { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 10px 0 2px; }
.dv-step { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 16px; background: var(--head); border: 1px solid transparent; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dv-step small { font-weight: 400; margin-left: 2px; opacity: .85; }
.dv-step .dv-n { width: 20px; height: 20px; border-radius: 50%; background: var(--panel); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.dv-step.done { background: var(--ok-bg); color: var(--ok); }
.dv-step.cur { background: var(--info-bg); color: var(--accent); border-color: var(--accent); }
.dv-arrow { color: var(--muted); }
.dv-tabs { margin-top: 8px; margin-bottom: -1px; overflow-x: auto; }
.dv-badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-size: 10.5px; }
.dv-badge.ask { background: var(--warn); color: var(--panel); }
.dv-body { flex: 1; overflow: auto; padding: 12px 18px 40px; }
.dv-bar, .dv-docbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
a.btn { display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; color: inherit; text-decoration: none; }
a.btn:hover { border-color: var(--accent); }
.dv-next-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.dv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.kpi b { font-size: 18px; } .kpi span { color: var(--muted); font-size: 12px; }
.kpi.bad b { color: var(--bad); }
.dv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.dv-cols .card { margin: 0; }
.dv-docline { margin: 6px 0; }
.dv-msgmini { margin: 6px 0; font-size: 13px; }
.dv-sess-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-notes { margin-top: 6px; white-space: pre-wrap; }
.dv-transcript { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 10px; border-radius: 6px; max-height: 420px; overflow: auto; margin: 8px 0 0; }
.dv-doc { padding: 18px 26px; }
.dv-decision { border-left: 4px solid var(--ok); margin: 8px 0; }
.dv-decision.bad { border-left-color: var(--bad); }
.md h2.md-h { font-size: 21px; margin: 4px 0 12px; } .md h3.md-h { font-size: 16.5px; margin: 20px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.md h4.md-h, .md h5.md-h { font-size: 14px; margin: 14px 0 6px; }
.md p { margin: 6px 0; } .md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md code { font-family: var(--mono); font-size: 12px; background: var(--head); padding: 0 4px; border-radius: 4px; }
.md blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--accent); background: var(--head); }
.md-tw { overflow-x: auto; margin: 8px 0; }
.md-t { border-collapse: collapse; font-size: 13px; min-width: 60%; }
.md-t th, .md-t td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.md-t th { background: var(--head); }
.reqid { font-family: var(--mono); font-size: 11.5px; background: var(--info-bg); color: var(--accent); padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.dv-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: calc(100vh - 290px); min-height: 360px; }
.dv-editor textarea { height: 100%; resize: none; font-size: 13px; line-height: 1.5; }
.dv-editor .dv-preview { margin: 0; overflow: auto; }
.dv-diff { font-family: var(--mono); font-size: 12px; max-height: 60vh; overflow: auto; margin-top: 10px; white-space: pre-wrap; }
.dv-diff .add { background: var(--add-bg); } .dv-diff .del { background: var(--del-bg); } .dv-diff .hunk { color: var(--accent); margin-top: 6px; }
.dv-dlg { width: min(860px, calc(100vw - 32px)); }
.dv-dlg label { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; font-size: 12.5px; color: var(--muted); }
.dv-dlg label input, .dv-dlg label select, .dv-dlg label textarea { color: var(--fg); }
.files.bl td { vertical-align: middle; }
.files.bl tr[data-item] { cursor: pointer; }
.files.bl tr[data-item]:hover td { background: var(--head); }
.bl-epic td { font-weight: 600; } .bl-feature td.bl-title { font-weight: 500; }
.bl-kind { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 4px; text-transform: uppercase; }
.bl-kind.epic { background: #efe3fb; color: #6b2fb0; } .bl-kind.feature { background: var(--info-bg); color: var(--accent); } .bl-kind.story { background: var(--ok-bg); color: var(--ok); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl-kind.epic { background: #2f2140; color: #c9a4f5; } }
:root[data-theme="dark"] .bl-kind.epic { background: #2f2140; color: #c9a4f5; }
:root[data-theme="dark"] .bl-kind.epic { background: #2f2140; color: #c9a4f5; }
button.tw { padding: 0 4px; border: 0; } .tw-sp { display: inline-block; width: 18px; }
.dv-jmap { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; background: var(--head); padding: 8px 10px; border-radius: 6px; }
.dv-joblog { font-family: var(--mono); font-size: 12px; max-height: 180px; overflow: auto; margin: 8px 0; }
.dv-joblog .ok { color: var(--ok); } .dv-joblog .bad { color: var(--bad); }
.sp-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); gap: 14px; align-items: start; }
.sp-pool { margin: 0; position: sticky; top: 0; max-height: calc(100vh - 260px); overflow: auto; }
.sp-pick { display: flex; gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.sp-card { margin: 0 0 12px; } .sp-card.Active { border-color: var(--accent); } .sp-card.Closed { opacity: .75; }
.sp-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-goal { margin: 6px 0; }
.sp-cap { height: 8px; background: var(--head); border-radius: 4px; overflow: hidden; margin: 8px 0 2px; }
.sp-cap span { display: block; height: 100%; background: var(--accent); }
.sp-cap.over span { background: var(--bad); }
.sp-story { padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; display: flex; gap: 6px; align-items: baseline; }
.board { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; }
.bcol { background: var(--head); border-radius: 8px; padding: 8px; min-height: 200px; }
.bcol-h { font-weight: 700; display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.bcard { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin-bottom: 8px; font-size: 13px; }
.bcard-t { margin: 4px 0 6px; }
.tr-gap td { background: var(--warn-bg); }
.dv-aibtns { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-aibtns .sparkle, .dv-bar .sparkle, .dv-next .sparkle, .card.waiting .sparkle, .dv-docbar .sparkle { width: 13px; height: 13px; fill: currentColor; vertical-align: -2px; animation: none; }
.dv-aibtns .sparkle .sp2, .dv-bar .sparkle .sp2, .dv-next .sparkle .sp2, .card.waiting .sparkle .sp2, .dv-docbar .sparkle .sp2 { animation: none; }
.q-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.orglink { white-space: nowrap; font-size: 12.5px; }
@media (max-width: 800px) {
  .delivery { grid-template-columns: 1fr; } .dv-list { max-height: 30vh; }
  .sp-grid, .dv-editor { grid-template-columns: 1fr; } .board { grid-template-columns: repeat(5, 220px); }
}

/* ---------------------------------------------------------------- views, whose turn, overlaps, current state */
.ifilters { flex-wrap: wrap; }
.ifilters .if.v-me .cnt { background: var(--accent); color: var(--accent-fg); padding: 0 5px; border-radius: 8px; }
.ifilters .if.v-stuck .cnt { background: var(--warn-bg); color: var(--warn); padding: 0 5px; border-radius: 8px; }
.turn { font-weight: 600; }
.turn.me { color: var(--accent); }
.stuck { margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.ovl { font-size: 11.5px; color: var(--warn); margin-top: 3px; }
.ovlbox { margin: 8px 0 0; }
#ownerSel { max-width: 200px; }
.card.brief { border-left: 4px solid var(--ok); }
.brief-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.brief-h h4 { margin: 0 6px 0 0; }
.bf { font-size: 12px; background: var(--head); padding: 1px 8px; border-radius: 10px; }
.bf.turn.me { background: var(--info-bg); }
.foldbtn { display: block; width: 100%; margin: 8px 0; }

/* ---------------------------------------------------------------- Queues + Architect */
.teamview { flex: 1; overflow: auto; padding: 14px 18px 40px; }
.teamview[hidden] { display: none; }
.tm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tm-head h2 { margin: 0; font-size: 19px; }
.tm-head .hint { margin: 0; max-width: 900px; }
.qboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.qcol { background: var(--head); border-radius: 8px; padding: 8px; }
.qcol.member { outline: 2px solid var(--accent); outline-offset: -2px; }
.qcol-h { margin-bottom: 8px; }
.qcard { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin-bottom: 8px; font-size: 13px; }
.qcard.unclaimed { border-left: 4px solid var(--accent); }
.qc1 { display: flex; align-items: center; gap: 6px; }
.qc2 { margin: 4px 0; }
.qbtns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
select.mini { padding: 0 4px; font-size: 11.5px; }
.unc { color: var(--accent); }
.qchip { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.qchip.unc { color: var(--accent); font-weight: 600; }
.qroles { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; }
.qroles .chk { flex-direction: row !important; align-items: center; gap: 4px !important; color: var(--fg) !important; }
.qrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.qrow button { margin-left: auto; }
.arch-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 10px; }
.arch-bar .if { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; }
.arch-bar .if.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.arch-bar .sep { width: 12px; }
.arch-g { margin: 0 0 10px; }
.arch-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.arch-i { display: grid; grid-template-columns: 64px 130px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.arch-i.acked { opacity: .6; }
.arch-rule { font-weight: 600; color: var(--muted); font-size: 12px; }
.arch-act { display: flex; gap: 6px; align-items: baseline; }
.archbox { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--bad-bg); color: var(--fg); border-left: 4px solid var(--bad); font-size: 13px; }
.archbox div { margin: 3px 0; }
.nbadge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 700; margin-left: 4px; }
.nbadge.hi { background: var(--bad); color: #fff; }
@media (max-width: 800px) { .arch-i { grid-template-columns: 1fr; } }
.heicph { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 64px; font-size: 11px; background: var(--head); border-radius: 4px; }

/* ---------------------------------------------------------------- compare orgs */
.cmp-form, .cmp-res { margin: 8px 0 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 6px; background: var(--bg); }
.cmp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmp-form .chk { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; }
.cmp-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.cmp-h button { margin-left: auto; }
.cmp-diff pre { margin: 0; max-height: 360px; overflow: auto; font-family: var(--mono); font-size: 11.5px; white-space: pre; background: var(--panel); padding: 6px; border-radius: 4px; }
.cmp-diff .dl-add { background: var(--add-bg); display: inline-block; min-width: 100%; }
.cmp-diff .dl-del { background: var(--del-bg); display: inline-block; min-width: 100%; }
.cmp-diff .dl-hunk { color: var(--accent); }
/* Test tab: test history list */
.thist { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.th-row { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.th-row:last-child { border-bottom: 0; }
.th-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.th-row .body { margin-top: 4px; overflow-wrap: anywhere; }
/* My notes tab */
.notes-card textarea { width: 100%; box-sizing: border-box; resize: vertical; margin-top: 8px;
  font: 14px/1.5 -apple-system, "Segoe UI", Arial, sans-serif; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.notes-card textarea:focus { outline: 2px solid #2f5bd3; outline-offset: 0; }
.notes-hist { display: flex; flex-direction: column; gap: 8px; }
.nh-row { border-bottom: 1px solid var(--line); padding-bottom: 8px; } .nh-row:last-child { border-bottom: 0; }
.nh-row .body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
/* issue search: clear (×) button inside the box */
.search-box { position: relative; flex: 1; display: flex; min-width: 0; }
.search-box #search { flex: 1; min-width: 0; padding-right: 26px; }
.search-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
  font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 50%; }
.search-x:hover { color: #1d2433; background: rgba(0,0,0,.06); }
/* discussion: Expand button on each message + full-width reader with Previous / Next */
.msg { position: relative; }
.msg .msg-exp { float: right; margin: -2px 0 4px 8px; opacity: .55; width: 26px; height: 26px; padding: 4px; border: 1px solid var(--line);
  border-radius: 5px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.msg .msg-exp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.msg .msg-exp:hover { background: #eef2ff; color: #2f5bd3; }
.msg:hover .msg-exp, .msg .msg-exp:focus { opacity: 1; }
dialog.reader { width: min(1100px, 92vw); height: 86vh; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  display: none; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.reader[open] { display: flex; }
dialog.reader::backdrop { background: rgba(15,23,42,.45); }
.rd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.rd-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-body { flex: 1; overflow-y: auto; padding: 20px 28px; font-size: 16px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
/* discussion colour cues (richText) */
.rt-h { font-weight: 700; color: #1e3a8a; letter-spacing: .02em; }
.rt-good { color: #166534; background: #ecfdf3; border-radius: 3px; padding: 0 3px; }
.rt-bad { color: #991b1b; background: #fef2f2; border-radius: 3px; padding: 0 3px; }
.rt-warn { color: #92400e; background: #fff7e6; border-radius: 3px; padding: 0 3px; font-weight: 600; }
.rt-key { color: #1d4ed8; font-weight: 600; }

/* ---- message formatting: code / SOQL boxes with Copy, markdown tables */
.rich .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.codebox { margin: 6px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--head); white-space: normal; }
.codebox .cb-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 2px 10px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.codebox pre { margin: 0; padding: 8px 10px; font: 12.5px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mdtable { overflow-x: auto; margin: 6px 0; white-space: normal; }
.mdtable table { border-collapse: collapse; font-size: 13px; }
.mdtable th, .mdtable td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.mdtable th { background: var(--head); }

/* ---- message tools: reply, pin, menu; replies, pins, unread, offline */
.msg .msg-tools { float: right; display: inline-flex; gap: 2px; margin: -2px 4px 0 0; opacity: .45; }
.msg:hover .msg-tools, .msg .msg-tools:focus-within { opacity: 1; }
.msg .mt { padding: 1px 6px; font-size: 12px; line-height: 1.4; border-radius: 5px; background: transparent; }
.msg .mt.on { background: var(--warn-bg); border-color: var(--warn); }
.msg.pinned { box-shadow: inset 3px 0 0 #d4a017; }
.msg.unread { box-shadow: inset 3px 0 0 var(--accent); }
.msg.flash { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color 1.5s; }
.inreply { display: block; margin: 2px 0 6px; padding: 3px 8px; border-left: 3px solid var(--line); color: var(--muted); font-size: 12.5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inreply:hover { border-left-color: var(--accent); color: var(--fg); }
.replybar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 8px; background: var(--info-bg); border-radius: 6px; font-size: 13px; overflow: hidden; }
.replybar .hint { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinbox h4 { margin: 0 0 6px; }
.pinrow { display: block; padding: 3px 0; font-size: 13px; text-decoration: none; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinrow:hover { color: var(--accent); }
.newdiv { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; color: var(--accent); font-size: 12px; font-weight: 600; }
.newdiv::before, .newdiv::after { content: ""; flex: 1; border-top: 1px solid var(--accent); }
.unread-dot { margin-left: 6px; color: var(--accent); font-size: 11px; font-weight: 700; }
.offline-note { margin: 4px 0; padding: 4px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: 12.5px; }
.thread-head { display: flex; align-items: center; gap: 8px; }
.thread-head h4 { margin-right: auto; }
.chat-search { width: 220px; padding: 4px 8px; font-size: 13px; }
.msgmenu { position: absolute; z-index: 50; min-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px; display: flex; flex-direction: column; }
.msgmenu button { border: 0; text-align: left; padding: 6px 10px; background: transparent; border-radius: 6px; }
.msgmenu button:hover { background: var(--head); }
.msgmenu button.bad { color: var(--bad); }
.editta { font-family: inherit; font-size: 14px; }

/* ---- top bar tools, Cmd-K finder, help */
.toptools { display: inline-flex; gap: 4px; align-items: center; margin-right: 8px; }
.toptools .tt { padding: 3px 8px; font-size: 14px; line-height: 1.3; }
.toptools .tt.on { border-color: var(--accent); }
.kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; font: 11px var(--mono); color: var(--muted); }
dialog.palette { width: min(760px, 92vw); padding: 0; border: 1px solid var(--line); border-radius: 10px; margin-top: 12vh; background: var(--panel); color: var(--fg); }
dialog.palette::backdrop { background: rgba(15,23,42,.35); }
dialog.palette #palQ { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; padding: 14px 16px; font-size: 16px; background: var(--panel); outline: none; }
.palres { max-height: 55vh; overflow-y: auto; padding: 6px; }
.palitem { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; }
.palitem b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.palitem .hint { margin-left: auto; flex-shrink: 0; }
.palitem.on, .palitem:hover { background: var(--info-bg); }
.palk { flex-shrink: 0; width: 64px; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.kbhelp { padding: 16px 20px; }
.kbhelp td { padding: 4px 12px 4px 0; }

/* ---- Details: drop files, Export link, previews */
.dropcard.drop { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--info-bg); }
.dropcard h4 { display: flex; justify-content: space-between; align-items: center; }
.btnlink { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: inherit; background: var(--panel); }
.btnlink:hover { border-color: var(--accent); }
.imgprev { padding: 12px; text-align: center; }
.imgprev img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.docprev { padding: 14px 18px; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }

/* ---- compact layout */
body.compact { font-size: 13px; }
body.compact .card { padding: 8px 10px; margin-bottom: 8px; }
body.compact .chat .msg { padding: 5px 8px; margin: 5px 0; }
body.compact .issue-row { padding: 6px 8px; }
body.compact .issue-row .t { font-size: 12.5px; }
body.compact .pane-head { padding: 6px; }
/* tab icons */
.tab .ticon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.tab.on .ticon { opacity: 1; }
.tab .ticon.ai { stroke: none; }
.tab .ticon.ai .fill { fill: #7c4dff; }
.tab.on .ticon.ai .fill { fill: currentColor; }
/* top bar tool buttons sit on the dark header: light text, subtle border */
/* folded attention boxes: one line until opened */
details.fold { padding: 5px 10px; margin-bottom: 6px; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
details.fold[open] > summary::before { content: "▾"; }
details.fold > summary .fold-more { margin-left: 2px; text-decoration: underline dotted; }
details.fold[open] > summary .fold-more { display: none; }
details.fold > summary .fold-link { margin-left: auto; font-size: 12.5px; }
details.fold[open] > summary { margin-bottom: 4px; }
details.fold > div { font-size: 13px; margin: 2px 0 2px 16px; }
/* plan usage chip in the top bar + popover */
.usagechip { display: inline-flex; align-items: center; gap: 10px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 12px; cursor: pointer; }
.usagechip:hover { border-color: var(--accent); }
.usagechip .uc-h { font-weight: 700; }
.usagechip .uc-item { display: inline-flex; align-items: center; gap: 4px; }
.usagechip .uc-l { opacity: .8; }
.usagechip .uc-track { width: 38px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.usagechip .uc-fill { display: block; height: 100%; background: var(--ok); }
.usagechip .uc-fill.warn { background: #e08a00; }
.usagechip .uc-fill.bad { background: var(--bad); }
.usagechip .uc-v { font-weight: 600; }
.usagepop { position: fixed; z-index: 60; width: 420px; padding: 10px 14px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.usagepop h4 { margin: 0 0 6px; }
.usagepop .usage { margin: 0; border: 0; padding: 0; }
/* Settings → Appearance: theme cards with a mini preview drawn from each theme's own colours */
.th-grp { margin: 18px 0 8px; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.th-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; text-align: left; border: 2px solid var(--line); border-radius: 10px; background: var(--panel); }
.th-card:hover { border-color: var(--accent); }
.th-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.al-prefs { display: flex; flex-direction: column; gap: 6px; }
.al-pref { align-items: flex-start !important; }
.al-hidden { margin: 0 0 8px; }
.cc-opts { display: flex; flex-direction: column; gap: 10px; }
.cc-opts > label:not(.chk) { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.cc-example { padding: 10px 12px; background: var(--head); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; overflow-x: auto; white-space: pre; }
.th-name { font-weight: 600; font-size: 13.5px; }
.th-desc { font-size: 12px; color: var(--muted); line-height: 1.35; }
.th-prev, .th-half { position: relative; height: 84px; border-radius: 6px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.th-prev::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--nav-bg); }
.th-prev::after { content: ""; position: absolute; left: 8px; right: 8px; top: 24px; bottom: 8px; border-radius: 4px; border: 1px solid var(--line);
  background: linear-gradient(var(--accent), var(--accent)) 8px 8px / 40% 6px no-repeat,
              linear-gradient(var(--fg), var(--fg)) 8px 22px / 70% 4px no-repeat,
              linear-gradient(var(--muted), var(--muted)) 8px 32px / 55% 4px no-repeat,
              linear-gradient(var(--head), var(--head)) 0 0 / 100% 100% no-repeat, var(--panel); }
.th-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.th-auto::before, .th-auto::after { display: none; }
.th-auto .th-half { height: 100%; border: 0; border-radius: 0; }
.th-half::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--nav-bg); }
.th-half::after { content: ""; position: absolute; left: 8px; right: 8px; top: 24px; bottom: 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); }
label.chk { display: flex; gap: 8px; align-items: center; cursor: pointer; }

/* status strip under the header: progress tracker on the left, terminal / AI usage / tools on the right (keeps the header to one line) */
.subbar { display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.subbar .tracker { flex: 1; min-width: 0; border-bottom: 0; }
.statusbar { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 16px; flex-wrap: wrap; justify-content: flex-end; }
.statusbar .toptools { margin-right: 0; }
.statusbar .toptools .tt { padding: 2px 8px; font-size: 13px; }
.statusbar #bridge { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
header.top .views { flex-wrap: nowrap; }
header.top .views .view { white-space: nowrap; }

/* ---------------------------------------------------------------- Terminal tab */
.termview { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.termview[hidden] { display: none; }
.term-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.term-bar .hint { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term { flex: 1; min-height: 0; padding: 6px 0 6px 10px; background: #0f1218; }
.term .xterm { height: 100%; }
/* Overview: latest Claude reply + key findings; Details: records table */
.card.latest { border-left: 4px solid #7c4dff; }
.card.latest .brief-h a { margin-left: auto; text-decoration: none; }
.card.latest .latest-h { font-weight: 600; margin-bottom: 4px; }
.card.latest .txt { white-space: pre-wrap; font-size: 13.5px; }
.card.findings .finding { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.card.findings .finding:last-child { border-bottom: 0; }
table.recs td { padding: 3px 10px 3px 0; }
/* Overview top: Issue + Root cause in plain English */
.card.issuecause { border-left: 4px solid var(--accent); padding: 10px 14px; }
.issuecause .ic-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 4px 0; }
.issuecause .ic-row + .ic-row { border-top: 1px solid var(--line); }
.issuecause .ic-k { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; color: var(--muted); padding-top: 2px; }
.issuecause .ic-v { font-size: 14.5px; line-height: 1.5; }

/* App studio (Web / Android / iOS › Apps) */
.prodsub { display: flex; gap: 0; margin: 6px 0 6px 16px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; flex: none; align-self: center; }
.prodsub[hidden] { display: none; }
.prodsub .seg { border: 0; border-radius: 0; background: var(--panel); color: var(--muted); padding: 4px 14px; font-weight: 600; }
.prodsub .seg + .seg { border-left: 1px solid var(--line); }
.prodsub .seg.on { background: var(--tab-on); color: #fff; }
.apps { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; background: var(--bg); }
.apps[hidden] { display: none; }
.apps-list { border-right: 1px solid var(--line); background: var(--panel); overflow: auto; }
.apps-list .pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 10px 14px; }
.app-row .hint { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.app-row.on { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--accent); }
.apps-main { overflow: auto; padding: 14px 18px 40px; min-width: 0; }
.app-add { max-width: 720px; }
.app-add h3 { margin: 0 0 10px; }
.app-add label { display: block; margin: 10px 0; }
.app-add label input:not([type=checkbox]) { width: 100%; }
.app-add label.chk { display: flex; gap: 8px; align-items: center; }
.app-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-head h2 { margin: 0 0 2px; font-size: 18px; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
@media (max-width: 1000px) { .app-grid { grid-template-columns: 1fr; } .apps { grid-template-columns: 1fr; } .apps-list { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--line); } }
table.checks td { vertical-align: top; padding: 5px 6px; }
table.checks .hint { overflow-wrap: anywhere; }
.checks .fix { font-size: 12px; color: var(--warn); margin-top: 2px; }
.ck { display: inline-block; width: 18px; text-align: center; font-weight: 700; }
.ck.ok { color: var(--ok); } .ck.bad { color: var(--bad); } .ck.na { color: var(--muted); }
.avds { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.app-console { padding: 0; overflow: hidden; }
.con-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.con-bar .con-tabs { margin: 0; border-radius: 6px; }
.con-bar .tasks { display: flex; gap: 4px; flex-wrap: wrap; }
.con-host { height: 480px; background: #0f1218; }
.appterm { height: 100%; padding: 6px 0 6px 10px; box-sizing: border-box; }
.appterm[hidden] { display: none; }
.appterm .xterm { height: 100%; }
.app-console > .hint { margin: 0; padding: 6px 10px; }

/* Copado: stories assigned to me */
.cpmark { font-size: 11.5px; margin-top: 3px; }
.cpmark.mine { color: var(--ok, #1a7f37); font-weight: 600; }
.cpmark.other { color: var(--muted); }
.cp-head { padding: 8px 12px; border-bottom: 1px solid var(--line, #ddd); }
.cp-meta { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 12.5px; }
.cp-sub { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cp-row { padding: 8px 10px; margin-bottom: 6px; border: 1px dashed var(--line, #ccc); border-radius: 6px; background: var(--bg); }
.cp-row .k { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.cp-row .t { margin: 2px 0; font-size: 13px; }
.cp-row button { margin-top: 6px; }

/* Settings > Setup check */
.setup-tool h4 { margin: 0; display: flex; gap: 8px; align-items: center; }
.setup-tool .row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.setup-log { max-height: 180px; overflow: auto; background: var(--bg2, rgba(127,127,127,.08)); padding: 8px; border-radius: 6px; white-space: pre-wrap; }
.setup-log.failed { color: var(--bad); }
.setup-dlg { width: min(640px, calc(100vw - 32px)); }
.sr-tool { padding: 10px 0; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
.sr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sr-mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--info-bg); }
.sr-mark.ok { background: var(--ok-bg); color: var(--ok); }
.sr-mark.bad { background: var(--bad-bg); color: var(--bad); }
a.ghost.mini { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px; border: 1px solid var(--line, rgba(127,127,127,.35)); border-radius: 6px; text-decoration: none; color: var(--accent); }
a.ghost.mini:hover { background: var(--info-bg); }
.lic-banner { padding: 6px 16px; font-size: 13px; background: var(--info-bg); color: var(--accent); text-align: center; }
.lic-banner.ended { background: var(--bad-bg); color: var(--bad); }
.lic-banner a { font-weight: 600; }

/* ---------------------------------------------------------------- Get started (first launch) */
.startview { overflow: auto; height: 100%; background: var(--bg); }
.st-wrap { max-width: 860px; margin: 0 auto; padding: 40px 24px 32px; }
.st-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.st-top h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.01em; }
.st-top p { margin: 0; color: var(--muted); font-size: 14px; }
.st-progress { min-width: 180px; text-align: right; }
.st-progress-txt { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.st-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width .4s ease; }
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.st-step { display: flex; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.st-step.current { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.st-step.done { opacity: .78; }
.st-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; background: var(--head); color: var(--muted); }
.st-step.current .st-num { background: var(--accent); color: var(--accent-fg); }
.st-step.done .st-num { background: none; color: var(--ok); }
.st-num svg, .st-ico svg { width: 100%; height: 100%; }
.st-step-main { flex: 1; min-width: 0; }
.st-step-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.st-step h3 { margin: 3px 0 4px; font-size: 15.5px; }
.st-step p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.st-tools { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.st-tool { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.st-tool + .st-tool { border-top: 1px solid var(--line); }
.st-ico { flex: none; width: 22px; height: 22px; color: var(--line); }
.st-ico.ok { color: var(--ok); }
.st-ico.busy { color: var(--accent); }
.st-spin { animation: st-spin 1s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-tool-main { flex: 1; min-width: 0; }
.st-tool-name { font-weight: 600; font-size: 14px; }
.st-tool-why { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.st-tool-act { flex: none; display: flex; gap: 6px; align-items: center; }
.st-ver { font-family: var(--mono); font-size: 11.5px; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tag { font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--head); border-radius: 8px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.st-log { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; background: var(--head); border-radius: 6px; padding: 6px 8px; white-space: pre-wrap; max-height: 110px; overflow: auto; }
.st-log.failed { color: var(--bad); }
.st-more { margin-top: 10px; }
.st-more summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.st-note { margin-top: 10px !important; font-size: 12px !important; }
.st-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 16px; }
@media (max-width: 640px) {
  .st-top, .st-step-head, .st-foot { flex-direction: column; align-items: stretch; }
  .st-progress { text-align: left; }
  .st-tool { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- macOS skin (Settings › Appearance › macOS)
   Apple's palette, a light toolbar instead of the navy bar, segmented-control tabs, softer rounded cards. */
:root[data-skin="mac"] {
  --bg: #f5f5f7; --panel: #ffffff; --head: #f0f0f2; --line: #e1e1e5; --fg: #1d1d1f; --muted: #6e6e73;
  --accent: #007aff; --accent-fg: #ffffff; --info-bg: #e5efff;
  --ok: #1f7a33; --ok-bg: #e3f5e8; --warn: #a14a00; --warn-bg: #fff1dc; --bad: #c4001a; --bad-bg: #fde8ea;
  --nav-bg: rgba(236, 236, 238, .86); --nav-fg: #1d1d1f; --nav-hover: rgba(0, 0, 0, .05); --nav-on: rgba(0, 0, 0, .08); --tab-on: #ffffff;
  --mac-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 .5px rgba(0, 0, 0, .04);
}
:root[data-skin="mac"][data-theme="dark"] {
  --bg: #1e1e1e; --panel: #2a2a2c; --head: #323234; --line: #3a3a3c; --fg: #f5f5f7; --muted: #98989d;
  --accent: #0a84ff; --accent-fg: #ffffff; --info-bg: #1b2d4a;
  --ok: #32d74b; --ok-bg: #16331f; --warn: #ffb340; --warn-bg: #3a2c12; --bad: #ff6961; --bad-bg: #3d1a18;
  --nav-bg: rgba(44, 44, 46, .86); --nav-fg: #f5f5f7; --nav-hover: rgba(255, 255, 255, .06); --nav-on: rgba(255, 255, 255, .12); --tab-on: #48484a;
  --mac-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .06);
}
@media (prefers-color-scheme: dark) { :root[data-skin="mac"]:not([data-theme]) {
  --bg: #1e1e1e; --panel: #2a2a2c; --head: #323234; --line: #3a3a3c; --fg: #f5f5f7; --muted: #98989d;
  --accent: #0a84ff; --accent-fg: #ffffff; --info-bg: #1b2d4a;
  --ok: #32d74b; --ok-bg: #16331f; --warn: #ffb340; --warn-bg: #3a2c12; --bad: #ff6961; --bad-bg: #3d1a18;
  --nav-bg: rgba(44, 44, 46, .86); --nav-fg: #f5f5f7; --nav-hover: rgba(255, 255, 255, .06); --nav-on: rgba(255, 255, 255, .12); --tab-on: #48484a;
  --mac-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .06);
} }
[data-skin="mac"] body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
[data-skin="mac"] h1, [data-skin="mac"] h2, [data-skin="mac"] h3 { letter-spacing: -0.015em; }
/* toolbar: light, translucent, hairline below; nav items are rounded pills */
[data-skin="mac"] .top { background: var(--nav-bg); color: var(--nav-fg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); min-height: 48px; }
[data-skin="mac"] .top .brand { color: var(--fg); }
[data-skin="mac"] .views { align-self: center; gap: 2px; }
[data-skin="mac"] .views .view { align-self: center; color: var(--muted); border: 0; border-radius: 7px; padding: 5px 12px; font-weight: 500; font-size: 13.5px; }
[data-skin="mac"] .views .view:hover { background: var(--nav-hover); color: var(--fg); }
[data-skin="mac"] .views .view.on { background: var(--nav-on); color: var(--fg); border: 0; }
[data-skin="mac"] .views .view:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; }
[data-skin="mac"] .top .orgpick { color: var(--muted); }
[data-skin="mac"] .top .orgpick select { background: var(--panel); color: var(--fg); border: 1px solid var(--line); box-shadow: var(--mac-shadow); }
[data-skin="mac"] .top button.ghost, [data-skin="mac"] .top button.icon { color: var(--fg); border-color: var(--line); background: var(--panel); }
[data-skin="mac"] .top button.ghost:hover, [data-skin="mac"] .top button.icon:hover { background: var(--head); }
[data-skin="mac"] .uc-btn { color: var(--fg); border-radius: 8px; }
[data-skin="mac"] .uc-txt small { color: var(--muted); }
[data-skin="mac"] .avatar { background: var(--accent); color: #fff; }
/* panes: segmented-control tabs, rounded cards with a soft shadow */
[data-skin="mac"] .tabs { border-bottom: 0; background: var(--head); border-radius: 9px; padding: 2px; gap: 2px; display: inline-flex; overflow: visible; }
[data-skin="mac"] .tabs .tab { border: 0; border-radius: 7px; padding: 5px 14px; font-weight: 500; font-size: 13px; color: var(--fg); }
[data-skin="mac"] .tabs .tab:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
[data-skin="mac"] .tabs .tab.on { background: var(--tab-on); color: var(--fg); box-shadow: var(--mac-shadow); }
[data-skin="mac"] .card, [data-skin="mac"] .st-step { border-radius: 12px; border-color: var(--line); box-shadow: var(--mac-shadow); }
[data-skin="mac"] button, [data-skin="mac"] input, [data-skin="mac"] select, [data-skin="mac"] textarea { border-radius: 7px; }
[data-skin="mac"] button.primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
[data-skin="mac"] .pill { border-radius: 6px; font-weight: 600; }
[data-skin="mac"] .lic-banner { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
[data-skin="mac"] .settings .set-item.on { border-radius: 7px; }
.st-act { flex: none; white-space: nowrap; padding: 7px 16px; font-weight: 600; font-size: 13px; }
.st-wrap { padding-bottom: 72px; }  /* clear of the status bar */
[data-skin="mac"] .st-step.current { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.lic-banner .lic-start { font-weight: 700; }
.lic-banner .lic-sep { margin: 0 8px; opacity: .5; }
.au-folder { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
.au-folder .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
/* sign-in / welcome side panel keeps a deep colour in the macOS skin (its toolbar colour is light) */
[data-skin="mac"] .auth-side { background: linear-gradient(160deg, #1d63d8, #0a3d91); color: #fff; }
/* bottom-right AI server control: a button while it is off */
.pill.ai-start { background: var(--accent); color: var(--accent-fg); cursor: pointer; }
.pill.ai-start:hover { filter: brightness(1.08); }
.wait-t [data-start-ai] { margin-left: 8px; }
.ai-menu { position: fixed; z-index: 1000; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); display: flex; flex-direction: column; min-width: 190px; }
.ai-menu button { border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.ai-menu button:hover { background: var(--head); }
.ai-menu button.danger { color: var(--bad); }
#chatAiOff { margin-right: 10px; }
#chatSend { white-space: nowrap; flex: none; }
.ai-off { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 8px 10px;
  border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.ai-off button { flex: none; white-space: nowrap; }
.bulkbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; flex-wrap: wrap; }

th.selcol, td.selcol { width: 28px; padding-right: 0; }
.ai-menu-head { padding: 8px 10px 9px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13px; }
#bridge .ai-acct { font-weight: 500; opacity: .85; }
.bulk-acts { margin-left: auto; display: flex; gap: 8px; }
.danger-btn { background: var(--bad); color: #fff; border: 1px solid var(--bad); border-radius: 7px; padding: 6px 14px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.danger-btn:hover { filter: brightness(1.08); }
.danger-btn:disabled { opacity: .6; cursor: default; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--fg); }
th.sortable.on { color: var(--fg); }
.sort-ar { margin-left: 4px; font-size: 10px; opacity: .55; }
th.sortable.on .sort-ar { opacity: 1; color: var(--accent); }
.rulefilter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-left: 6px; }
.rulefilter select { padding: 3px 6px; font-size: 13px; }
.rulefilter { flex-direction: row; white-space: nowrap; }
.rulefilter select { width: auto; margin: 0; }
/* status bar at the bottom of the window (every screen) */
.appfoot { flex: none; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); background: var(--panel); }
.appfoot .statusbar { padding: 4px 16px; margin-left: 0; }
/* personal edition: the compare org is picked in the Changes panel */
body[data-edition="personal"] .top .orgpick { display: none; }
.cmp-org { padding: 2px 6px; font-weight: 600; margin: 0 4px; max-width: 260px; }
body[data-edition="personal"] .top .views { margin-right: auto; }  /* no org picker: keep the icons and name on the right */
/* custom tags (personal edition) */
.if-sep { flex-basis: 100%; height: 0; }
.if.tagf { border-style: dashed; }
.tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.tagchip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 9px; border-radius: 12px; background: var(--info-bg); color: var(--accent); font-size: 12px; font-weight: 600; }
.tagchip button { border: 0; background: transparent; color: inherit; padding: 0 4px; font-size: 14px; line-height: 1; cursor: pointer; opacity: .7; }
.tagchip button:hover { opacity: 1; }
#tagIn { width: 120px; padding: 2px 8px; font-size: 12px; border-radius: 12px; }
.rtags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.rtags span { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--info-bg); border-radius: 10px; padding: 0 7px; }
/* Settings › Work tracking + New issue › Import from */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ws-card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-head .pill { margin-left: auto; }
.ws-card button, .ws-card > .hint:last-child { align-self: flex-start; margin-top: auto; }
.backlink { display: inline-block; margin-bottom: 6px; font-size: 13px; }
.import-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; background: var(--bg); }
.import-box .jira-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.import-box #wKey { flex: 1; min-width: 160px; }
.import-box.none #wSrc { display: none; }
#wResults { max-height: 260px; overflow: auto; margin-top: 6px; }
.wtable td { vertical-align: top; }

/* ---------------------------------------------------------------- org tools (orgtools.js) */
.toolview { flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.t-wrap { display: flex; height: 100%; min-height: 0; }
.t-side { width: 270px; flex: none; border-right: 1px solid var(--line); background: var(--panel); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.t-side label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.t-side label.chk { flex-direction: row; align-items: center; }
.t-types { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.t-type { text-align: left; border: 0; background: transparent; padding: 5px 8px; border-radius: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-type:hover { background: var(--head); }
.t-type.on { background: var(--info-bg); color: var(--accent); font-weight: 600; }
.t-more { padding: 6px 8px; }
.t-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px 40px; }
.t-full { max-width: none; }
.t-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.t-bar h2 { margin: 0; font-size: 18px; }
.t-bar h2 .hint { font-size: 12px; font-weight: 400; margin-left: 8px; }
.t-bar h4 { margin: 0; }
.t-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.t-bar input:not([type=checkbox]) { min-width: 200px; }
.t-right { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.t-org { max-width: 240px; }
.t-table td { vertical-align: top; }
.t-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin: 8px 0; font-size: 13px; color: var(--muted); }
.t-src { margin-top: 8px; }
.t-filetabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.t-filetabs button { font-size: 12px; padding: 3px 10px; border-radius: 6px; }
.t-filetabs button.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.t-code { font-family: var(--mono); font-size: 12px; background: var(--head); border-radius: 8px; padding: 10px 12px; max-height: 560px; overflow: auto; white-space: pre; margin: 0; }
.t-editor { display: flex; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.t-editor textarea { flex: 1; font-family: var(--mono); font-size: 13px; min-height: 120px; }
.t-fields { width: 320px; flex: none; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.t-fields:empty { display: none; }
.t-fieldlist { max-height: 170px; overflow: auto; display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: var(--panel); }
.t-field { display: flex; justify-content: space-between; gap: 8px; border: 0; background: transparent; text-align: left; padding: 3px 6px; font-size: 12px; font-family: var(--mono); border-radius: 4px; }
.t-field:hover { background: var(--head); }
.t-field span { color: var(--muted); font-family: inherit; font-size: 11px; }
.t-scroll { overflow: auto; max-width: 100%; }
.t-grid { font-size: 12.5px; }
.t-grid td { white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.t-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.pill.cmp-changed { background: var(--warn-bg); color: var(--warn); }
.pill.cmp-only_a, .pill.cmp-only_b { background: var(--info-bg); color: var(--accent); }
.pill.cmp-same { background: var(--ok-bg); color: var(--ok); }
.t-cmpfile { margin: 10px 0; }
.t-diff { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12px; margin-top: 6px; }
.t-diff td { padding: 1px 6px; white-space: pre; vertical-align: top; }
.t-diff td.n { color: var(--muted); text-align: right; width: 44px; user-select: none; }
.t-diff tr.colhead td { font-family: inherit; font-weight: 600; background: var(--head); position: sticky; top: 0; }
.t-diff tr.replace td.l, .t-diff tr.delete td.l { background: var(--bad-bg); }
.t-diff tr.replace td.r, .t-diff tr.insert td.r { background: var(--ok-bg); }
.t-diff tr.fold td { color: var(--muted); font-style: italic; background: var(--head); }
.t-loader .card { max-width: 1100px; }
.t-file { cursor: pointer; border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; }
.t-prod { border-color: var(--bad); }
.t-type { flex: none; }  /* long lists scroll instead of squeezing the items */
.t-diff { table-layout: fixed; }
.t-diff td.l, .t-diff td.r { white-space: pre-wrap; word-break: break-all; width: calc(50% - 44px); }
/* the deploy panel's .deploy box must not leak into green .pill.deploy pills (Connected, AI server running...) */
.pill.deploy { padding: 1px 8px; margin: 0; border: 0; border-radius: 10px; }
/* status bar: the AI server pill is the same size as its neighbours in every state */
.statusbar #bridge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin: 0; border: 1px solid transparent;
  border-radius: 6px; font-size: 12px; line-height: 1; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.statusbar #bridge .ai-acct { overflow: hidden; text-overflow: ellipsis; }
.statusbar .usagechip, .statusbar .toptools .tt { height: 24px; box-sizing: border-box; }
/* Orgs & safety, groups */
.rule-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rule-help { font-size: 12px; }
.rule-th { cursor: help; border-bottom: 1px dotted var(--muted); }
.rule-sel { font-weight: 600; }
.rule-sel.r-deploy { color: var(--ok); } .rule-sel.r-data { color: var(--warn); } .rule-sel.r-blocked { color: var(--bad); } .rule-sel.r-read { color: var(--accent); }
.pill.data { background: var(--warn-bg); color: var(--warn); }
.gchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
tr.grp-row td { background: var(--head); padding-top: 8px; padding-bottom: 6px; }
tr.grp-row .hint { margin-left: 8px; }
.grp-sel { padding: 2px 6px; font-size: 12px; max-width: 150px; }
.edit-alias { padding: 0 5px; opacity: .55; }
.edit-alias:hover { opacity: 1; }
.t-side { position: relative; }
.t-grip { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.t-grip:hover, .t-grip:active { background: color-mix(in srgb, var(--accent) 35%, transparent); }
/* SOQL autocomplete */
.t-edwrap { position: relative; flex: 1; display: flex; }
.t-edwrap textarea { flex: 1; }
.t-ac { position: absolute; left: 8px; right: 8px; top: 100%; margin-top: 2px; z-index: 30; max-height: 260px; overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 3px; }
.t-ac-i { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.t-ac-i.on, .t-ac-i:hover { background: var(--info-bg); }
.t-ac-i .hint { font-size: 11.5px; white-space: nowrap; }
/* Org Browser editor */
.ed-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 8px 0 0; }
.ed-tab { border: 1px solid transparent; border-bottom: 0; background: none; padding: 5px 12px; border-radius: 6px 6px 0 0; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.ed-tab.on { background: var(--panel); border-color: var(--line); color: var(--text); font-weight: 600; margin-bottom: -1px; }
.ed-dot { color: var(--warn); margin-left: 5px; }
.ed-main { display: flex; gap: 8px; }
.ed-monaco { flex: 1; height: 62vh; min-height: 320px; border: 1px solid var(--line); border-top: 0; }
.ed-side { width: 300px; max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.ed-ver { border-bottom: 1px solid var(--line); padding: 6px 0; display: grid; gap: 3px; font-size: 12.5px; }
.ed-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ed-actions #edNote { flex: 1; min-width: 220px; }
.ed-actions #edTests { width: 240px; }
.ed-ro { margin: 6px 0; }
.ed-status { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.ed-errs { margin: 6px 0; padding-left: 18px; }
.ed-sum { white-space: pre-wrap; font-size: 12px; max-height: 200px; overflow: auto; margin: 6px 0 0; }
.ed-diff { height: 70vh; width: min(1300px, 92vw); margin-top: 8px; }
.okbox { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.danger-text { color: var(--bad); font-weight: 600; }
.spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: edspin .8s linear infinite; }
@keyframes edspin { to { transform: rotate(360deg); } }
.srcb { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.srcline { font-size: 12.5px; color: var(--muted); margin: -2px 0 6px; display: flex; gap: 8px; align-items: center; }
.srcline .srcb { margin-left: 0; }
.wbulk { display: flex; align-items: center; gap: 10px; padding: 4px 2px 6px; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.trk-org { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 12.5px; color: var(--muted); }
.trk-org select { padding: 2px 6px; font-size: 12.5px; max-width: 220px; }
.trk-detail label.trk-org { flex-direction: row; display: inline-flex; margin: 0 0 0 6px; }
.trk-detail label.trk-org select { width: auto; }
/* SOQL: Results | Query history */
.s-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 8px; }
.s-tab { background: none; border: 1px solid transparent; border-bottom: 0; padding: 5px 14px; border-radius: 6px 6px 0 0; cursor: pointer; color: var(--muted); font-weight: 600; }
.s-tab.on { background: var(--panel); border-color: var(--line); color: var(--text); margin-bottom: -1px; }
.s-hist .s-hrow { cursor: pointer; }
.s-hist .s-hrow:hover td { background: var(--info-bg); }
.s-hist .s-hrow.cur td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.s-star { background: none; border: 0; padding: 0 4px; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; }
.s-star.on, .s-favf.on { color: #d49b00; }
#sFav.s-star { border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; }
.s-hq { font-size: 12px; white-space: pre-wrap; word-break: break-word; max-width: 900px; }
.nowrap { white-space: nowrap; }
#sHistBox .t-bar input { width: 260px; }
/* Settings use the whole window (wide tables like Salesforce connections); long text stays readable */
.set-body { max-width: none; }
.set-body > p.hint, .set-body > .hint { max-width: 1100px; }
.set-body .card { overflow-x: auto; }
.set-body table.files td.acts { white-space: nowrap; }
.set-body table.files td.mono { word-break: break-all; }
#trkOrg.need { outline: 2px solid var(--warn); }
/* "AI is working…" on a message: the twinkling sparkle instead of a spinner */
.mstate.work { display: inline-flex; align-items: center; gap: 5px; }
.mstate.work .sparkle { width: 14px; height: 14px; }

/* issue header: one tidy line; AI next step card */
.dhead .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dhead .meta .star.big { font-size: 18px; padding: 2px 8px; }
.meta-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.srcmeta a { text-decoration: none; }
.tagrow.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.tagrow.inline #tagIn { width: 72px; padding: 3px 8px; font-size: 12px; }
.moremenu { position: relative; }
.dtitle-row { display: flex; align-items: flex-start; gap: 8px; }
.dtitle-row > h2 { flex: 1; min-width: 0; }
.dtitle-more { flex: none; margin-top: 4px; }  /* the issue's ⋯ More (export, move, delete): right of the title */
.moremenu-pop { position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 40; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 4px; display: grid; min-width: 140px; }
.moremenu-pop[hidden] { display: none; }
.moremenu-pop > * { text-align: left; border: 0; justify-content: flex-start; }
.card.ainext { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--work, #7c4dff) 40%, var(--line));
  background: color-mix(in srgb, var(--work, #7c4dff) 7%, var(--panel)); padding: 14px 16px; }
.card.ainext > .sparkle { width: 26px; height: 26px; color: var(--work, #7c4dff); }
.ainext-t { flex: 1; min-width: 220px; }
.ainext-t b { font-size: 15px; }
.ainext-org { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.ainext-org select { width: auto; max-width: 240px; }
.card.ainext #aiNextGo { padding: 9px 18px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.card.ainext #aiNextGo .sparkle { width: 15px; height: 15px; }
.card.ainext.working b { color: var(--work, #7c4dff); }
.trk-ai { display: inline-flex; align-items: center; gap: 4px; color: var(--work, #7c4dff); font-weight: 600; }
.trk-ai .sparkle { width: 14px; height: 14px; }
#trkGoAi .sparkle { width: 13px; height: 13px; vertical-align: -2px; }

/* Settings › Promotion path: boxes left to right, arrows between */
.pp-wrap { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-pool #ppPool { max-height: 62vh; overflow: auto; display: grid; gap: 4px; margin-top: 8px; }
.pp-pool input { width: 100%; }
.pp-g { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0 2px; }
.pp-org { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: grab; }
.pp-org b { word-break: break-all; }
.pp-org .hint { font-size: 11.5px; }
.pp-org:hover, .pp-chip:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.dragging { opacity: .45; }
.pp-flowcard { overflow-x: auto; }
.pp-flow { display: flex; align-items: stretch; gap: 0; padding: 6px 2px 10px; min-height: 230px; }
.pp-box { flex: 0 0 210px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .15s, background .15s, box-shadow .15s; }
.pp-box.start { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.pp-box.empty { border: 2px dashed var(--line); background: transparent; box-shadow: none; }
.pp-box.over { border-color: var(--accent); background: var(--info-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pp-boxh { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pp-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--head); color: var(--muted); letter-spacing: .02em; }
.pp-tag.start { background: var(--ok-bg); color: var(--ok); }
.pp-tag.end { background: var(--info-bg); color: var(--accent); }
.pp-chip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 7px 26px 7px 9px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg, var(--panel)); cursor: grab; }
.pp-chip b { word-break: break-all; font-size: 13px; }
.pp-chip .hint { font-size: 11px; }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.pp-dot.prod { background: var(--bad); }
.pp-x { position: absolute; right: 4px; top: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 5px; }
.pp-x:hover { background: var(--bad-bg); color: var(--bad); }
.pp-warn { flex-basis: 100%; font-size: 11px; color: var(--warn); }
.pp-drop { margin-top: auto; text-align: center; font-size: 12px; color: var(--muted); padding: 10px 6px; border: 1px dashed var(--line); border-radius: 8px; }
.pp-box.empty .pp-drop { border: 0; padding: 40px 6px; }
.pp-link { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--accent); padding: 0 4px; }
.pp-link.dim { color: var(--line); }
.pp-svg { width: 100%; height: 22px; display: block; }
.pp-howsel { font-size: 11.5px; padding: 2px 6px; border-radius: 999px; max-width: 116px; text-align: center; background: var(--info-bg); color: var(--accent); border: 1px solid transparent; font-weight: 600; }
.pp-link.dim .pp-howsel { background: var(--head); color: var(--muted); }
.pp-howlbl { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--info-bg); }
@media (max-width: 900px) { .pp-wrap { grid-template-columns: 1fr; } }
.pp-svg { width: 100%; height: 24px; overflow: visible; }
.pp-link { gap: 4px; }
.pp-link.dim .pp-svg { color: var(--muted); opacity: .45; }
.pp-paths { display: grid; gap: 14px; min-width: 0; }
.pp-pathh { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.pp-name { font-weight: 700; font-size: 14px; border: 1px solid transparent; background: transparent; padding: 3px 8px; border-radius: 6px; width: 220px; }
.pp-name:hover, .pp-name:focus { border-color: var(--line); background: var(--panel); }
.pp-del { margin-left: auto; }
.pp-org.used b { color: var(--muted); }
.t-objbar { display: flex; gap: 4px; }
.t-objbar input { flex: 1; min-width: 0; }
/* type-to-find org pickers (orgpick.js) */
select.opick-hidden { display: none !important; }
.opick { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 160px; max-width: 100%; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.opick:hover { border-color: var(--accent); }
.opick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.opick:disabled { opacity: .6; cursor: default; }
.opick-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opick-c { color: var(--muted); font-size: 11px; }
.t-side .opick, .t-bar .opick { width: 100%; }
.opick-pop { position: fixed; z-index: 1000; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; max-width: 420px; }
.opick-q { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 4px; font: inherit; }
.opick-list { max-height: 300px; overflow: auto; }
.opick-g { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 8px 3px; }
.opick-i { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opick-i b { color: var(--accent); }
.opick-i.on { background: var(--info-bg); }
.opick-i.cur::after { content: " ✓"; color: var(--ok); }
.opick-none { padding: 10px; color: var(--muted); font-size: 13px; }
.mstate.cancelled { color: var(--muted); }
.msg-cancel { margin-left: 6px; }
.card.ainext.working { border-style: solid; }
.card.ainext.working > .sparkle { animation: fdtwinkle 1.4s ease-in-out infinite; }
.ai-off.starting { background: var(--info-bg); color: var(--accent); justify-content: flex-start; gap: 10px; }
.card.ainext .ainext-term { flex-basis: 100%; margin-top: 4px; }
.card.ainext.stalled { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.card.ainext.stalled > .sparkle { color: var(--warn); animation: none; }
/* Ask AI */
.askview { flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.askview[hidden] { display: none; }
.ask-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; min-height: 0; }
.ask-side { border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; background: var(--panel); }
.ask-new { width: 100%; }
.ask-side input { width: 100%; }
.ask-tabs { display: flex; gap: 2px; }
.ask-tabs button { flex: 1; border: 1px solid var(--line); background: none; padding: 5px; border-radius: 6px; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.ask-tabs button.on { background: var(--info-bg); color: var(--accent); border-color: transparent; font-weight: 600; }
.ask-list { overflow: auto; display: grid; gap: 2px; align-content: start; min-height: 0; }
.ask-item { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.ask-item:hover { background: var(--head); }
.ask-item.on { background: var(--info-bg); }
.ask-it-t { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ask-item .hint { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.ask-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warn); }
.ask-dot.working { background: var(--work); animation: fdtwinkle 1.4s ease-in-out infinite; }
.ask-empty { padding: 12px 4px; }
.ask-main { display: flex; flex-direction: column; min-height: 0; padding: 14px 20px; gap: 10px; }
.ask-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ask-title { font-size: 17px; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 4px 8px; border-radius: 6px; flex: 1; min-width: 240px; }
.ask-title:hover, .ask-title:focus { border-color: var(--line); background: var(--panel); }
.ask-org { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.ask-msgs { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-right: 4px; }
.ask-msg { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--panel); max-width: 980px; }
.ask-msg.me { align-self: flex-end; background: var(--info-bg); border-color: transparent; max-width: 760px; }
.ask-msg.ai { align-self: flex-start; width: 100%; }
.ask-msg.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.ask-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.ask-meta .sparkle { width: 14px; height: 14px; color: var(--work); animation: none; }
.ask-save { margin-left: auto; }
.ask-body { white-space: pre-wrap; line-height: 1.5; }
.ask-table { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ask-table-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; background: var(--head); font-size: 12px; }
.ask-table-h .mono { flex: 1; min-width: 200px; word-break: break-word; }
.ask-table .t-scroll { max-height: 320px; overflow: auto; }
.ask-compose { margin: 0; }
.ask-compose textarea { width: 100%; }
.ask-compose #askSend { display: inline-flex; align-items: center; gap: 6px; }
.ask-compose #askSend .sparkle { width: 14px; height: 14px; animation: none; }
.ask-hello { text-align: center; margin: 6vh auto 0; max-width: 680px; display: grid; gap: 10px; justify-items: center; }
.ask-hello > .sparkle { width: 40px; height: 40px; color: var(--work); }
.ask-hello h2 { margin: 0; }
.ask-ex { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.ask-ex button { border-radius: 999px; font-size: 12.5px; }
.ask-hello + .ask-compose { margin-top: auto; }
.views .asktab { font-weight: 600; }
/* Ask AI: every message on the left (colours tell who wrote it); no sideways scroll in the list */
.ask-msg.me { align-self: flex-start; max-width: 980px; }
.ask-list { overflow-x: hidden; }
.ask-item { min-width: 0; }
/* Ask AI: resizable list, full-width messages, details panel on the right */
.ask-wrap { grid-template-columns: var(--askL, 300px) 6px minmax(0, 1fr) 6px var(--askR, 320px); }
.ask-wrap.noinfo { grid-template-columns: var(--askL, 300px) 6px minmax(0, 1fr) 0 0; }
.ask-wrap.noinfo .ask-info, .ask-wrap.noinfo [data-askgrip="R"] { display: none; }
.ask-grip { cursor: col-resize; background: transparent; }
.ask-grip:hover, .ask-grip:active { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ask-msg, .ask-msg.me, .ask-msg.ai { max-width: none; width: 100%; align-self: stretch; }
.ask-head { gap: 10px; }
.ask-title { flex: 0 1 auto; min-width: 160px; max-width: 65%; width: auto; text-overflow: ellipsis; }
.ask-issue { white-space: nowrap; }
.ask-head .t-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.ask-info { border-left: 1px solid var(--line); background: var(--panel); padding: 14px; overflow: auto; min-height: 0; display: grid; align-content: start; gap: 14px; }
.ask-info h4 { margin: 0; }
.ask-info-sec { display: grid; gap: 4px; font-size: 13px; }
.ask-info-sec > .hint:first-child { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ask-info .filechip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-q { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; gap: 3px; }
.ask-q .mono { font-size: 11.5px; word-break: break-word; max-height: 4.5em; overflow: hidden; }
.ask-sv { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-info-empty { padding-top: 6px; }
/* org notes */
.ask-tabs button { font-size: 12px; padding: 5px 4px; }
.notes-list { gap: 6px; }
.notes-g { font-weight: 700; margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.note-row { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--panel); display: grid; gap: 4px; }
.note-t { line-height: 1.45; }
.note-acts { margin-left: 10px; }
.ask-note { font-size: 12.5px; border-left: 3px solid color-mix(in srgb, var(--work) 50%, var(--line)); padding: 3px 0 3px 8px; margin-bottom: 4px; }
#noteQ { width: 200px; }
/* bottom bar: plan limits in full (5-hour and weekly, with reset times) */
.usagechip { display: inline-flex; align-items: center; gap: 10px; padding: 3px 12px; white-space: nowrap; }
.usagechip .uc-item { display: inline-flex; align-items: center; gap: 6px; }
.usagechip .uc-l { font-weight: 600; font-size: 12px; }
.usagechip .uc-track { width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: inline-block; }
.usagechip .uc-fill { display: block; height: 100%; }
.usagechip .uc-v { font-size: 12px; color: var(--muted); }
.usagechip .uc-item.warn .uc-v b { color: var(--warn); }
.usagechip .uc-item.bad .uc-v b { color: var(--bad); }
.usagechip .uc-sep { width: 1px; height: 14px; background: var(--line); }
.msg-next { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--work) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--work) 30%, var(--line)); font-size: 13px; }
.msg-next > .sparkle { width: 18px; height: 18px; color: var(--work); }
.msg-next span { flex: 1; min-width: 220px; }
/* "View differences" cards under a reply, and the side-by-side viewer */
.cmp-cards { display: grid; gap: 6px; margin-top: 10px; }
.cmp-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); cursor: pointer; font: inherit; color: var(--text); }
.cmp-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cmp-card > span:nth-child(2) { display: grid; flex: 1; }
.cmp-ic { font-size: 18px; color: var(--accent); }
.cmp-go { color: var(--accent); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.cd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cd-head .t-right { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.cd-box { height: 72vh; width: min(1500px, 94vw); margin-top: 6px; border: 1px solid var(--line); }
dialog.admindlg:has(.cd-box) { width: 96vw; max-width: 96vw; }
dialog.admindlg .cd-box { width: 100%; height: 76vh; }
/* Learn tab */
.learnview { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.learnview[hidden] { display: none; }
.lr-wrap { padding: 18px 24px 40px; max-width: 1500px; margin: 0 auto; }
.lr-welcome { max-width: 1100px; }
.lr-hello { text-align: center; margin: 10px 0 18px; }
.lr-big { font-size: 46px; }
.lr-hello h1 { margin: 6px 0; }
.lr-welcome h3 { margin: 22px 0 10px; }
.lr-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lr-tcard, .lr-scard { display: grid; gap: 4px; text-align: left; padding: 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s; }
.lr-tcard:hover, .lr-scard:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.lr-tcard.on, .lr-scard.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.lr-tcard.on::after { content: "✓ selected"; color: var(--accent); font-size: 12px; font-weight: 700; }
.lr-ticon { font-size: 24px; }
.lr-ticon.big { font-size: 38px; }
.lr-tmeta { font-size: 11.5px; color: var(--muted); }
.lr-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lr-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lr-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: inherit; color: var(--text); }
.lr-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.lr-note { display: grid; gap: 4px; margin-top: 12px; }
.lr-row .opick { min-width: 280px; }
.lr-go { margin-top: 24px; }
.lr-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 16px 20px; border-radius: 14px; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), color-mix(in srgb, var(--work, #7c4dff) 12%, var(--panel))); border: 1px solid var(--line); }
.lr-rank { display: flex; align-items: center; gap: 10px; }
.lr-rank-ic { font-size: 36px; }
.lr-rank b { font-size: 18px; }
.lr-pts { min-width: 220px; }
.lr-pts > b { font-size: 22px; }
.lr-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; margin: 5px 0 3px; }
.lr-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--work, #7c4dff)); border-radius: 4px; transition: width .4s; }
.lr-bar.sm { height: 5px; margin: 4px 0 2px; display: block; }
.lr-stat { display: flex; align-items: center; gap: 8px; }
.lr-stat b { font-size: 18px; }
.lr-fire { font-size: 26px; }
.lr-ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line) 0); }
.lr-ring span { width: 30px; height: 30px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
.lr-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lr-actions .on { background: var(--info-bg); color: var(--accent); }
.lr-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.lr-side { display: grid; gap: 6px; position: sticky; top: 0; }
.lr-track { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); }
.lr-track > span:last-child { display: grid; flex: 1; }
.lr-track.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.lr-addt { margin-top: 2px; }
.lr-badges { margin-top: 10px; display: grid; gap: 5px; }
.lr-badges h4 { margin: 0 0 2px; }
.lr-badge { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, #f5b400 16%, var(--panel)); border: 1px solid color-mix(in srgb, #f5b400 40%, var(--line)); }
.lr-badge.track { background: color-mix(in srgb, var(--work, #7c4dff) 15%, var(--panel)); border-color: color-mix(in srgb, var(--work, #7c4dff) 40%, var(--line)); }
.lr-nobadge { margin-top: 8px; }
.lr-th { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.lr-th h2 { margin: 0; }
.lr-editnote { background: var(--info-bg); padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; }
.lr-mod { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 10px 12px; margin-bottom: 12px; }
.lr-modh { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lr-modn { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.lr-modh .hint { margin-left: auto; }
.lr-les { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.lr-les:hover { background: var(--head); }
.lr-les.hid { opacity: .5; cursor: default; }
.lr-lt { flex: 1; }
.lr-les.done .lr-lt { color: var(--muted); }
.lr-go { color: var(--muted); font-size: 18px; }
.lr-ed { display: inline-flex; gap: 4px; }
.lr-addl { margin: 4px 0 2px 10px; }
.lr-crumb { font-size: 13px; margin-bottom: 6px; }
.lr-lh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lr-lh h2 { margin: 0; }
.lr-sec { margin-top: 12px; }
.lr-sec h4 { display: flex; align-items: center; gap: 8px; }
.lr-text { line-height: 1.6; font-size: 14.5px; }
.lr-ai-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.lr-steps { padding-left: 22px; display: grid; gap: 6px; margin: 4px 0; }
.lr-steps .chk { display: inline-flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.lr-q { font-weight: 600; margin-bottom: 8px; }
.lr-opts { display: grid; gap: 6px; margin-bottom: 8px; }
.lr-opt { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.lr-opt.right { border-color: var(--ok); background: var(--ok-bg); }
.lr-opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.lr-qres { font-size: 13px; }
.lr-askrow { display: flex; gap: 8px; }
.lr-askrow input { flex: 1; }
.lr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 10px; }
.lr-cheer { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 2000; pointer-events: none;
  font-size: 44px; font-weight: 800; color: var(--work, #7c4dff); text-shadow: 0 4px 18px rgba(124,77,255,.35); animation: lrcheer 1.8s ease-out forwards; text-align: center; }
.lr-cheer span { display: block; font-size: 15px; font-weight: 600; color: var(--muted); }
@keyframes lrcheer { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }
.views .learntab { font-weight: 600; }
@media (max-width: 900px) { .lr-body { grid-template-columns: 1fr; } .lr-side { position: static; } }
.lr-opt { flex-direction: row !important; justify-content: flex-start; text-align: left; margin: 0; font-weight: 500; }
.lr-opt input { margin: 0; flex: none; }
.lr-steps .chk { flex-direction: row !important; }
/* Learn: tab on the right; own topics; new org */
#views { flex: 1; }
.views .learntab { order: 99; margin-left: auto; }
.lr-tcard { position: relative; }
.lr-tcard.mine { border-style: dashed; }
.lr-trm { position: absolute; top: 6px; right: 8px; font-size: 16px; color: var(--muted); padding: 0 5px; border-radius: 5px; }
.lr-trm:hover { background: var(--bad-bg); color: var(--bad); }
.lr-tadd { border-style: dashed; align-content: center; justify-items: center; text-align: center; color: var(--accent); }
.lr-tadd .lr-ticon { font-size: 28px; }
.lr-icons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lr-icon { font-size: 20px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.lr-icon.on { border-color: var(--accent); background: var(--info-bg); }
.lr-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lr-thact { margin-left: auto; display: inline-flex; gap: 6px; }
.lr-empty { margin-bottom: 12px; }
.lr-aitag { font-size: 11px; font-weight: 600; color: var(--work, #7c4dff); background: color-mix(in srgb, var(--work, #7c4dff) 10%, transparent); padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.lr-aitag.done { color: var(--ok); background: var(--ok-bg); }
.lr-goal { margin-top: 2px; font-size: 12px; }
.lr-text { white-space: pre-wrap; }
.lr-tip { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #f5b400 12%, var(--panel)); font-size: 13.5px; }
.lr-buildbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.lr-building { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--work, #7c4dff) 8%, var(--panel)); }
.lr-modh { cursor: pointer; user-select: none; }
.lr-modh:hover b { color: var(--accent); }
.lr-caret { color: var(--muted); width: 14px; text-align: center; }
.lr-modh .hint { margin-left: auto; }
.lr-mod.closed { padding-bottom: 8px; }
.lr-mod.closed .lr-modh { margin-bottom: 2px; }
.lr-modsum { padding-left: 34px; font-size: 12px; }
.lr-modbar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin: -4px 0 8px; font-size: 12.5px; }
.lr-modbar .hint { margin-right: auto; }
/* the lesson's own chat; topic builder */
.lr-chatmsgs { display: grid; gap: 8px; max-height: 460px; overflow: auto; margin: 4px 0 10px; }
.lr-cm { border-radius: 10px; padding: 8px 12px; border: 1px solid var(--line); }
.lr-cm.me { background: var(--info-bg); border-color: transparent; }
.lr-cm.ai { background: var(--panel); }
.lr-cm.wait { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in srgb, var(--work, #7c4dff) 7%, var(--panel)); }
.lr-cmh { font-size: 12px; display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.lr-cmh .sparkle { width: 13px; height: 13px; color: var(--work, #7c4dff); animation: none; }
.lr-cmb { white-space: pre-wrap; line-height: 1.5; }
.lr-topicbuild { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; }
.lr-topicbuild > .sparkle { width: 26px; height: 26px; color: var(--work, #7c4dff); }

/* Ask AI: a record change the AI proposed, waiting for the user's permission */
.dchg { margin-top: 10px; padding: 10px 12px; border-left: 4px solid var(--warn); }
.dchg-h { margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dchg .t-scroll { max-height: 260px; overflow: auto; }
.dchg-done { border-left-color: var(--ok); }
.dchg-partial { border-left-color: var(--warn); }
.dchg-failed { border-left-color: var(--bad); }
.dchg-declined { border-left-color: var(--line); opacity: .85; }
.dchg-running { border-left-color: var(--accent); }
.act-cmd { padding: 6px 8px; background: var(--head); border-radius: 6px; white-space: pre-wrap; word-break: break-all; font-size: 12px; }
.act-apex { max-height: 220px; overflow: auto; padding: 6px 8px; background: var(--head); border-radius: 6px; font-size: 12px; }

/* Seed Data (seed.js) */
.seed h3 { margin: 0 0 8px; font-size: 15px; }
.seed .card { margin-bottom: 12px; }
.seed-arrow { font-size: 18px; color: var(--muted); }
.seed-where { flex: 1; min-width: 280px; }
.seed-where input { width: 100%; }
.seed-fields { margin-top: 4px; }
.seed-node { display: flex; gap: 24px; flex-wrap: wrap; }
.seed-col { flex: 1; min-width: 280px; }
.seed-lk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 0; }
.seed-sub:not(:empty) { margin: 2px 0 8px 22px; padding-left: 10px; border-left: 2px solid var(--line); }
.seed-sub .seed-col { min-width: 220px; }
.seed-find { width: 100%; margin: 4px 0; }
.seed-kids { max-height: 320px; overflow: auto; }
.seed-mask select { min-width: 160px; }
.seed-fp { max-height: 60vh; overflow: auto; margin: 8px 0; columns: 2; }
.seed-fp label.chk, .admindlg .seed-fp label { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); break-inside: avoid; padding: 2px 0; }
.seed .t-scroll { max-height: 360px; overflow: auto; }
b.bad { color: var(--bad); }
.cn-list { max-height: 60vh; overflow: auto; margin: 8px 0; columns: 2; }
.admindlg .cn-list label { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); break-inside: avoid; padding: 2px 0; }
.cmp-names { min-width: 240px; max-width: 420px; height: 34px; padding: 0 12px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-names::after { content: "▾"; float: right; margin-left: 10px; opacity: .6; }

/* How EagleDesk works (help.js) */
.guide-dlg { padding: 0; }
.guide-dlg > .row-end { padding: 10px 18px 14px; border-top: 1px solid var(--line); }
.guide { display: flex; min-height: 420px; max-height: 72vh; }
.g-nav { width: 220px; flex: none; padding: 18px 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.g-nav h3 { margin: 0 8px 10px; font-size: 14px; }
.g-nav button { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 6px; color: var(--fg); cursor: pointer; font-size: 13px; }
.g-nav button:hover { background: var(--bg); }
.g-nav button.on { background: var(--accent); color: #fff; }
.g-start { margin: auto 10px 0; font-size: 13px; }
.g-body { flex: 1; overflow: auto; padding: 18px 24px; line-height: 1.55; font-size: 14px; }
.g-body h2 { margin: 0 0 10px; font-size: 18px; }
.g-body h4 { margin: 16px 0 4px; }
.g-body ul, .g-body ol { padding-left: 20px; margin: 6px 0; }
.g-body li { margin: 4px 0; }
.g-flow li { margin: 6px 0; }
.g-screens td:first-child { white-space: nowrap; }
@media (max-width: 640px) { .guide { flex-direction: column; max-height: none; } .g-nav { width: auto; border-right: 0; border-bottom: 1px solid var(--line); } }

/* Settings › Connections: orgs, promotion path and work tracking as three tabs */
.set-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.set-main > .set-body { flex: 1; min-height: 0; }
.conn-tabs { padding: 16px 24px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.conn-tabs[hidden] { display: none; }
.conn-tabs h2 { font-size: 18px; margin: 0 0 10px; }
.ct-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ct-tab { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 1px solid transparent; border-bottom: 0; background: transparent;
  padding: 8px 14px 10px; border-radius: 8px 8px 0 0; margin-bottom: -1px; max-width: 300px; }
.ct-tab .hint { display: block; font-size: 12px; font-weight: 400; }
.ct-tab:hover { background: var(--head); }
.ct-tab.on { background: var(--panel); border-color: var(--line); border-bottom: 1px solid var(--panel); color: var(--accent); }
.ct-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--head); color: var(--muted); }
.ct-tab.on .ct-n { background: var(--accent); color: #fff; }
@media (max-width: 700px) { .conn-tabs { padding: 12px 16px 0; } .ct-tab { max-width: none; flex: 1 1 100%; border-radius: 8px; } .ct-tab .hint { display: none; } }
.set-main:has(> .conn-tabs:not([hidden])) > .set-body > h2:first-child { display: none; }  /* the tab already names the page */
/* top tabs: an icon before each label */
.views .view, .learntab { display: inline-flex; align-items: center; gap: 7px; }
.views .view .vi, .learntab .vi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.views .view.on .vi { opacity: 1; }
@media (max-width: 1250px) { .views .view .vi { width: 15px; height: 15px; } .views .view { gap: 5px; } }
header.top .brand { white-space: nowrap; flex: none; }
/* hover help card under a top tab */
.tabtip { position: fixed; z-index: 1000; width: max-content; max-width: min(320px, calc(100vw - 16px)); background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: 7px 11px; font-size: 13px;
  line-height: 1.45; animation: tabtip-in .12s ease-out; }
.tabtip > b { font-size: 14px; }
.tabtip .tt-what { color: var(--muted); margin: 2px 0 6px; }
.tabtip ul { margin: 0 0 8px; padding-left: 18px; }
.tabtip li { margin: 2px 0; }
.tabtip a { color: var(--accent); font-weight: 600; text-decoration: none; }
@keyframes tabtip-in { from { opacity: 0; transform: translateY(-3px); } }
@media (hover: none) { .tabtip { display: none; } }

/* Overview: the top card's jump links and the sections they lead to */
.issuecause .ic-jump { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.issuecause .ic-jump:hover { text-decoration: underline; }
#ovStory, #ovRequest { scroll-margin-top: 8px; border-radius: 10px; transition: box-shadow .3s; }
.ov-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 6px; }
.ov-flash { box-shadow: 0 0 0 3px var(--accent); }

.ov-sec .ov-top { float: right; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--accent); text-decoration: none; font-size: 12px; }
.ov-sec .ov-top:hover { text-decoration: underline; }
details.comps > summary { cursor: pointer; list-style: none; }
details.comps > summary::-webkit-details-marker { display: none; }
details.comps > summary h4::before { content: "▸ "; } details.comps[open] > summary h4::before { content: "▾ "; }
.ov-totop { position: sticky; bottom: 12px; display: block; width: fit-content; margin: 8px 4px 0 auto; z-index: 5; border-radius: 999px; padding: 6px 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.15); font-size: 13px; font-weight: 600;
  color: var(--accent); opacity: 0; pointer-events: none; transition: opacity .15s; }
.ov-totop.show { opacity: 1; pointer-events: auto; }
details.comps > summary .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Overview › Story update: versions, regenerate, delete */
.story-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.story-bar .t-right { margin-left: auto; display: flex; gap: 6px; }
.story-empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.story-empty > div { flex: 1 1 260px; }
.story-off { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-top: 4px;
  border-radius: 8px; background: var(--warn-bg, #fff4e0); color: var(--fg); font-size: 13px; }
.lic-ws { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.lic-ws input { width: 70px; margin-left: 6px; }

/* workspaces: the line under the name in the header, the menu section, Settings */
.ws-chip { position: relative; align-self: center; margin-left: 14px; }
.ws-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit; font-size: 13px; cursor: pointer; }
.ws-btn:hover { background: rgba(255,255,255,.22); }
.ws-btn .ws-lbl { opacity: .75; font-size: 12px; }
.ws-btn .ws-dot { width: 10px; height: 10px; }
.ws-btn { border-color: var(--g, rgba(255,255,255,.35)); background: color-mix(in srgb, var(--g, #5b7cfa) 30%, transparent); }
.ws-btn:hover { background: color-mix(in srgb, var(--g, #5b7cfa) 45%, transparent); }
.ws-colrow { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 8px; font-size: 12px; color: var(--muted); }
.ws-sw { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.uc-menu button.ws-swb, button.ws-swb { border-radius: 50% !important; width: 18px; height: 18px; min-width: 0; padding: 0; border-radius: 50%; background: var(--g); border: 2px solid transparent; cursor: pointer; }
.uc-menu .ws-swb:hover, .ws-swb:hover { background: var(--g); transform: scale(1.15); }
.ws-swb.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--panel) inset; }
.ws-movedlg { min-width: 320px; }
.ws-movedlg .ws-moveto { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin: 4px 0; }
.ws-menu { left: 0; right: auto; }
.ws-sep { border-top: 1px solid var(--line); margin: 4px 0; }
.ws-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g, #5b7cfa); flex: none; display: inline-block; }
.uc-wsbox { border-bottom: 1px solid var(--line); padding: 4px 0 6px; margin-bottom: 4px; }
.uc-wsh { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 12px; }
.uc-menu .uc-wsi { display: flex; align-items: center; gap: 8px; }
.uc-menu .uc-wsi .hint { margin-left: auto; font-size: 11px; }
.uc-menu .uc-wsi.on { font-weight: 600; color: var(--accent); }
tr.ws-locked td { opacity: .6; }
.ws-pill { font-size: 11px; }
header.top { position: relative; z-index: 100; }  /* its menus open over the panes below */

/* Settings › Salesforce orgs: bring orgs into this workspace */
.ws-bring summary { cursor: pointer; }
.ws-bring-grps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px; font-size: 13px; }
.ws-bring-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.ws-bring-gh { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.ws-bring-g .chk { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.ws-copyrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ws-copyrow .hint { flex: 1; }
h2 .ws-pill { font-size: 12px; vertical-align: middle; display: inline-flex; align-items: center; gap: 5px; }

/* the workspace's settings pages: header + set-up steps with their status */
.ct-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ct-head h2 { margin: 0 !important; display: inline-flex; align-items: center; gap: 8px; }
.ct-head h2 .ws-dot { width: 12px; height: 12px; }
.ct-head .ct-acts { margin-left: auto; display: flex; gap: 6px; }
.ct-row { align-items: stretch; }
.ct-arrow { align-self: center; color: var(--muted); padding: 0 2px; }
.ct-tab.st-ok .ct-n { background: var(--ok, #16a34a); color: #fff; }
.ct-tab.st-todo .hint { color: var(--warn, #b45309); }
.ct-tab .hint { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-wsgrp { display: flex; align-items: center; gap: 6px; }
.set-wsname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-wsswitch { margin-left: auto; border: 0; background: transparent; padding: 1px 4px; border-radius: 4px; font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--accent); cursor: pointer; }
.set-wsswitch:hover { background: var(--head); }

/* issue Alerts tab */
.al-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #fff; background: #64748b; margin-left: 4px; }
.al-n.al-high { background: #dc2626; } .al-n.al-medium { background: #d97706; }
.alerts { display: flex; flex-direction: column; gap: 8px; }
.alert-row { border-left: 4px solid #64748b; padding: 10px 12px; }
.alert-row.al-high { border-left-color: #dc2626; } .alert-row.al-medium { border-left-color: #d97706; }
.alert-row.acked { opacity: .6; }
.al-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-kind { font-size: 12px; color: var(--muted); }
.al-acts { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* the AI waits for an answer in the Terminal */
.ask-term { position: fixed; left: 50%; transform: translateX(-50%); bottom: 44px; z-index: 600; display: flex; align-items: center; gap: 12px;
  max-width: min(760px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 10px; background: var(--panel); color: var(--fg);
  border: 2px solid #d97706; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ask-term[hidden] { display: none; }
.ask-term .hint { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* screenshot viewer */
dialog.imgview { width: 96vw; height: 94vh; max-width: 96vw; max-height: 94vh; padding: 10px; box-sizing: border-box; }
dialog.imgview[open] { display: flex; flex-direction: column; }
.iv-stage { position: relative; flex: 1; min-height: 0; overflow: auto; display: flex; background: color-mix(in srgb, var(--fg) 5%, transparent); border-radius: 6px; }
.iv-stage img { display: block; margin: auto; flex: none; max-width: none; user-select: none; }
.iv-stage.pan { cursor: grab; } .iv-stage.dragging { cursor: grabbing; }
.iv-zoom { display: flex; align-items: center; gap: 2px; margin-right: 6px; } .iv-pct { min-width: 72px; }
.iv-tip { margin-top: 6px; text-align: center; font-size: 11px; }
.iv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.brief-next { margin-top: 8px; }
.whatnext { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); font-weight: 600; }
.al-top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 8px; }
/* the deploy screen (confirm + progress) is a dialog sized to its content, not the full window; review screens sit above the header */
.review { z-index: 200; }
#deployScr { align-items: center; }
#deployScr > .rv { width: min(960px, 100%); max-height: calc(100vh - 48px); }
#deployScr .rv-body { flex: 0 1 auto; }
.drawer { z-index: 300; }  /* file preview / side panels open over the header, so their Copy / Download buttons show */
.toast, .newver, .usagepop { z-index: 400; }  /* above the header (z-index 100, for its menus) */

/* to-dos for the person: hard to miss, under the issue title */
.todobox { margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 2px solid #d97706; background: color-mix(in srgb, #f59e0b 10%, var(--panel)); }
.todobox.done { border: 1px solid var(--line); background: var(--panel); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; }
.todobox.done .todo-list { flex-basis: 100%; }
.todo-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.todo-ic { font-size: 16px; }
.todo-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid var(--line); }
.todo-row:first-child { border-top: 0; }
.todo-row input { margin-top: 3px; }
.todo-row > span { display: flex; flex-direction: column; gap: 1px; }
.todo-row.done .todo-t { text-decoration: line-through; color: var(--muted); }
.todo-foot { margin-top: 6px; }
.todo-chip { font-size: 12px; font-weight: 600; color: #b45309; margin-top: 3px; }
.todobox .todo-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; color: var(--fg); font-size: 13px; font-weight: 400; margin: 0; }
.todobox .todo-row input { width: auto; flex: none; margin: 2px 0 0; }
.todobox .todo-row .todo-t { color: var(--fg); }
.todobox .todo-row .hint { font-size: 12px; }
.todobox .todo-row > span { flex: 1; min-width: 0; }
.todobox .todo-t { cursor: pointer; font-weight: 600; display: block; margin: 0; font-size: 13px; }
.todobox .todo-open { flex: none; align-self: center; }
.todo-note { font-size: 12px; color: #b45309; font-weight: 600; }
.todobox .todo-row .todo-when { display: block; font-size: 11px; }
.todo-stale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: #b45309; font-weight: 600; }
.todo-how { margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.todo-how summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); }
.todo-how ol { margin: 6px 0 2px 18px; padding: 0; font-size: 13px; line-height: 1.5; }
.todo-how li { margin: 2px 0; }
.todo-showme { align-self: flex-start; margin-top: 4px; }
.todobox.folded { padding: 6px 10px; }
.todobox.folded .todo-h { margin: 0; flex-wrap: nowrap; }
.todo-first { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-size: 13px; }
.todo-tg { margin-left: auto; flex: none; }
.todo-donelist summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.todobox.todo-full { margin: 0 0 10px; }
.todobox.done.folded { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todobox .todo-open { align-self: flex-start; }
.test-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.test-subtabs .if.on { background: var(--accent); color: #fff; border-color: var(--accent); }
header.top .brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand-by { font-size: 10px; font-weight: 500; opacity: .7; letter-spacing: .02em; }

/* Test runs: one card per run */
.trun { padding: 0; }
.trun > summary.trun-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; }
.trun > summary.trun-h::-webkit-details-marker { display: none; }
.trun > summary.trun-h::before { content: "▸"; color: var(--muted); }
.trun[open] > summary.trun-h::before { content: "▾"; }
.trun[open] > summary.trun-h { border-bottom: 1px solid var(--line); }
.trun > :not(summary) { margin: 0 14px; }
.trun > :last-child { margin-bottom: 12px; }
.trun-sum { display: inline-flex; gap: 6px; }
.rs { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--head); }
.rs-ok { background: #dcfce7; color: #166534; } .rs-bad { background: #fee2e2; color: #991b1b; } .rs-man { background: #fef3c7; color: #92400e; }
.trun-ev { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; font-size: 13px; }
.trun .shots { margin-bottom: 8px; }
.trun-h, .trun-h .hint { text-transform: none; letter-spacing: 0; }

/* Dev Tools (devtools.js) */
.t-wrap.dt { display: flex; gap: 0; align-items: stretch; }
.dt-nav { width: 210px; flex: none; border-right: 1px solid var(--line); padding: 10px 8px; background: var(--panel); position: sticky; top: 0; align-self: flex-start; min-height: calc(100vh - 140px); }
.dt-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 8px 4px; }
.dt-group:first-child { margin-top: 2px; }
.dt-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; color: var(--fg); }
.dt-item:hover { background: var(--head); }
.dt-item.on { background: var(--info-bg); color: var(--accent); font-weight: 600; }
.dt-main { flex: 1; min-width: 0; padding: 12px 18px; }
.dt-head { margin-bottom: 2px; }
.dt-head h2 { margin-right: 12px; }
.dt-help { margin: 0 0 12px; }
.dt-split { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.dt-split > .card { margin: 0; min-width: 0; }
.dt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.dt-grid > .card { margin: 0; }
.dt-pick { max-height: 70vh; display: flex; flex-direction: column; }
.dt-checklist { overflow: auto; flex: 1; min-height: 80px; max-height: 60vh; }
.dt-cls summary { display: flex; align-items: center; gap: 8px; padding: 3px 2px; cursor: pointer; }
.dt-cls summary label { display: inline-flex; gap: 6px; align-items: center; }
.dt-m { display: flex; gap: 6px; align-items: center; padding: 2px 0 2px 28px; font-size: 13px; }
.dt-bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--head); vertical-align: middle; overflow: hidden; }
.dt-bar i { display: block; height: 100%; background: var(--ok); }
.dt-bar i.warn { background: #d99a1e; } .dt-bar i.bad { background: var(--bad); }
.dt-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.dt-stats > div { background: var(--head); border-radius: 8px; padding: 8px 14px; min-width: 110px; display: flex; flex-direction: column; }
.dt-stats b { font-size: 18px; } .dt-stats span { font-size: 12px; color: var(--muted); }
.dt-stats .bad b { color: var(--bad); } .dt-stats .good b { color: var(--ok); }
.dt-err { border-left: 4px solid var(--bad); }
.dt-errline pre, .dt-test pre { white-space: pre-wrap; font-size: 12px; background: var(--bad-bg); color: var(--bad); padding: 6px 8px; border-radius: 6px; margin: 4px 0 8px; }
.ok-card { border-left: 4px solid var(--ok); color: var(--ok); }
.dt-wrap { white-space: pre-wrap; word-break: break-word; }
.dt-raw { max-height: 60vh; overflow: auto; font-size: 12px; }
.dt-log .t-table td { vertical-align: top; }
.dt-lim td:last-child { white-space: nowrap; }
.dt-badrow td { background: var(--bad-bg); }
.dt-tl { max-height: 60vh; overflow: auto; font-size: 12.5px; }
.dt-tlrow { display: grid; grid-template-columns: minmax(200px, 34%) 1fr 70px; gap: 8px; align-items: center; padding: 2px 0; }
.dt-tlname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.dt-tltrack { position: relative; height: 12px; background: var(--head); border-radius: 3px; }
.dt-tltrack i { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; min-width: 2px; }
.dt-tltrack i.flow { background: #8b5cf6; }
.dt-test { display: grid; grid-template-columns: 18px auto 1fr; gap: 6px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
.dt-test.pass > span:first-child { color: var(--ok); } .dt-test.fail > span:first-child { color: var(--bad); }
.dt-test pre { grid-column: 2 / -1; }
.dt-covrow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 13px; }
.dt-covrow:hover { background: var(--head); } .dt-covrow.on { background: var(--info-bg); }
.dt-covrow .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-code { font-family: var(--mono); font-size: 12.5px; max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.dt-code > div { display: grid; grid-template-columns: 48px 1fr; }
.dt-code > div > span { text-align: right; padding-right: 8px; color: var(--muted); user-select: none; border-right: 1px solid var(--line); }
.dt-code code { white-space: pre; padding-left: 8px; }
.dt-code .cy { background: var(--add-bg); } .dt-code .cn { background: var(--del-strong); }
.dt-apex { width: 100%; min-height: 260px; font-family: var(--mono); font-size: 13px; tab-size: 4; resize: vertical; }
.dt-wgroup { margin: 6px 0 10px; } .dt-wgroup > div { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.dt-user { position: relative; display: inline-block; }
.dt-sugg { position: absolute; z-index: 50; top: 100%; left: 0; min-width: 340px; max-height: 300px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.dt-sugg a { display: block; padding: 6px 10px; color: var(--fg); text-decoration: none; } .dt-sugg a:hover { background: var(--head); }
.dt-verdict { border-left: 4px solid var(--accent); } .dt-verdict p { margin: 4px 0; }
.dt-src { margin: 4px 0; padding-left: 18px; } .dt-src li { margin: 2px 0; }
.dt-diff td { background: var(--warn-bg); }
@media (max-width: 900px) { .t-wrap.dt { flex-direction: column; } .dt-nav { width: auto; min-height: 0; position: static; } .dt-split { grid-template-columns: 1fr; } }
.dt .dt-cls summary label, .dt .dt-m, .dt .test-subtabs label { flex-direction: row !important; align-items: center; }
.dt-grid { align-items: start; }
.dt-lim td:nth-child(2) { white-space: nowrap; }
.dt .t-table td:first-child { white-space: nowrap; vertical-align: top; }
.dt-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dt .dt-inl { flex-direction: row !important; align-items: center; gap: 6px; }
.dt-desc td { vertical-align: top; }
.dt-desc td:nth-child(4) { min-width: 260px; }
.dt-wgroup .pill a { color: inherit; text-decoration: none; margin-left: 4px; opacity: .6; }
.dt .dt-pkrow { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) auto; padding-left: 4px; }
.dt-pkrow .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-pkrow .hint { white-space: nowrap; font-size: 12px; }
/* Dev Tools: labels sit to the left of their box, on one line */
.dt .t-bar label, .dt .dt-head label { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.dt .t-bar { align-items: center; gap: 10px; }
.dt .dt-head h2 { margin-right: 16px; }
.dt-desc { table-layout: fixed; width: 100%; }
.dt-desc td { vertical-align: top; overflow-wrap: anywhere; padding-top: 7px; padding-bottom: 7px; }
.dt-desc td:nth-child(4) { min-width: 0; }
.dt-desc tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--head) 45%, transparent); }
.dt-desc .pill { font-size: 11px; }
.dt .t-table td:first-child { white-space: normal; }
.dt-vals summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
.dt-vals > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-height: 180px; overflow: auto; }
.dt-count { margin: 0 0 6px; }
.dt-desc td, .dt .t-table td { vertical-align: top !important; }
.dt .dt-valbtn { border: 0; background: none; padding: 0; text-decoration: none; color: var(--accent); cursor: pointer; font-size: 12.5px; }
.dt-valbtn:hover { text-decoration: underline; }
.dt-desc th.sortable { cursor: pointer; user-select: none; } .dt-desc th.sortable:hover { color: var(--accent); }
.dt-desc th .sort-ar { margin-left: 4px; font-size: 10px; }
.dt-pop { position: fixed; z-index: 500; width: 340px; max-height: 60vh; display: flex; flex-direction: column; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 10px; gap: 8px; }
.dt-pophead { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.dt-pophead .hint { grid-column: 1; font-size: 12px; } .dt-pophead [data-x] { grid-row: 1 / span 2; grid-column: 2; }
.dt-poplist { margin: 0; padding: 4px 4px 4px 34px; overflow: auto; flex: 1; border: 1px solid var(--line); border-radius: 6px; user-select: text; font-size: 13px; }
.dt-poplist li { padding: 2px 0; } .dt-poplist li::marker { color: var(--muted); font-size: 11px; }
.dt-popfoot { display: flex; gap: 6px; flex-wrap: wrap; }
.dt-combo { position: fixed; z-index: 600; max-width: min(640px, 90vw); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 4px; }
.dt-ci { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 5px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.dt-ci:hover, .dt-ci.on { background: var(--info-bg); }
.dt-ci .hint { font-size: 12px; }
.dt-cimore { padding: 4px 10px; font-size: 12px; }
.dt #odO, .dt #wuO, .dt #wuN, .dt #plO, .dt #fhO, .dt #pmO, .dt #pkT { width: 300px; }
.dt #wuO { width: 200px; } .dt #wuN { width: 320px; } .dt #wuOB .hint { font-size: 11.5px; }
/* "Open in Salesforce ↗" (sfGo in devtools.js) */
.sfgo { border: 0; background: none; padding: 0 3px; margin: 0 1px; color: var(--accent); cursor: pointer; font-size: 12px; line-height: 1; border-radius: 4px; font-family: inherit; vertical-align: baseline; }
.sfgo:hover { background: var(--info-bg); }
.sfgo.sfgo-l { border: 1px solid var(--line); padding: 3px 8px; font-size: 12px; margin-left: 6px; }
.sfgo.busy { opacity: .5; pointer-events: none; }
/* Permission analyzer: tiles + matrix */
.dt-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 4px; }
.dt-who > b { font-size: 15px; }
.dt-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dt-tile { min-width: 112px; padding: 8px 12px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); }
.dt-tile b { font-size: 14px; } .dt-tile span { font-size: 11.5px; color: var(--muted); }
.dt-tile.yes { background: var(--ok-bg); border-color: transparent; } .dt-tile.yes b { color: var(--ok); }
.dt-tile.no { background: var(--bad-bg); border-color: transparent; } .dt-tile.no b { color: var(--bad); }
.dt-tilesep { width: 1px; background: var(--line); margin: 0 4px; }
.dt-matrix th { font-size: 12px; white-space: nowrap; }
.dt-matrix td.c, .dt-matrix th:nth-child(n+3) { text-align: center; }
.dt-matrix tbody tr:hover td { background: var(--head); }
.dt-yes { color: var(--ok); font-weight: 700; } .dt-no { color: var(--line); font-weight: 700; }
.dt-fcol { border-left: 2px solid var(--line); }
.dt-matrix .pill { font-size: 11px; }
.pill.dt-kind-profile { background: var(--info-bg); color: var(--accent); }
.pill.dt-kind-group { background: #efe7ff; color: #6d28d9; }
details.card > summary { cursor: pointer; }
.dt-matrix th:first-child, .dt-matrix td:first-child { text-align: left; } .dt-matrix th { vertical-align: bottom !important; }
/* Org health */
.dt-htiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.dt-htile { background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.dt-htile span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.dt-htile b { font-size: 20px; } .dt-htile small { color: var(--muted); font-size: 12px; }
.dt-htile.ok { border-left-color: var(--ok); } .dt-htile.ok b { color: var(--ok); }
.dt-htile.warn { border-left-color: #d99a1e; } .dt-htile.bad { border-left-color: var(--bad); } .dt-htile.bad b { color: var(--bad); }
.dt-hgrid { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(380px, 1.2fr); gap: 12px; align-items: start; }
.dt-hgrid > .card, .dt-hcol > .card { margin: 0; }
.dt-hcol { display: flex; flex-direction: column; gap: 12px; }
.dt-limtab td.num, .dt-limtab th:nth-child(2), .dt-limtab th:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-limtab td:first-child { white-space: nowrap; }
.dt-kv td:first-child { color: var(--muted); width: 120px; }
.dt .nowrap { white-space: nowrap; }
@media (max-width: 1100px) { .dt-hgrid { grid-template-columns: 1fr; } }
.dt-limtab th:first-child, .dt-limtab td:first-child { text-align: left; }
.dt-limtab td.num, .dt-limtab th { padding-right: 14px; }
.dt-limtab td:nth-child(4) { padding-left: 6px; }
.dt-inc { margin: 10px 0; } .dt-inc summary { cursor: pointer; } .dt-inc p { font-size: 12.5px; margin: 6px 0; color: var(--muted); }
.dt .t-table th { text-align: left; }
.dt .dt-limtab th:nth-child(2), .dt .dt-limtab th:nth-child(3) { text-align: right; }
.dt-mlist { margin: 0; padding-left: 16px; } .dt-mlist li { margin: 1px 0; }
.dt-lic { margin-top: 12px; } .dt-lic .t-bar h4 { margin-right: 10px; }
.dt .warnc { color: var(--warn); font-weight: 600; }
.pill.dt-lic-pill { background: #efe7ff; color: #6d28d9; }
.dt-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; margin: 8px 0; }
.dt-facts > div { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.dt-facts span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dt-facts b { font-weight: 500; overflow-wrap: anywhere; }
.dt-copy { padding: 0 !important; text-decoration: none !important; align-self: flex-start; font-size: 12px; }
.dt-cols { columns: 2; } .dt-cols li { break-inside: avoid; }
.dt-htile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-asof { font-size: 12px; margin-left: 4px; }
.dt tr.dt-sel td { background: var(--info-bg) !important; font-weight: 600; }
.dt tr.dt-dprow > td { background: var(--bg) !important; padding: 4px 0 12px 18px; border-left: 3px solid var(--accent); }
.dt tr.dt-dprow .card { margin: 4px 0 0; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.dt-filters { flex-wrap: wrap; } .dt-filters #dpQ { width: 260px; }
.dt-filters .if.on { background: var(--accent); color: #fff; border-color: var(--accent); } .dt-filters .if.on .cnt { color: #fff; opacity: .85; }
.dt-audit { table-layout: fixed; width: 100%; } .dt-audit td { overflow-wrap: anywhere; }
.dt tr.dt-dayrow td { background: var(--head) !important; font-weight: 700; font-size: 12.5px; color: var(--muted); padding: 6px 10px; text-transform: uppercase; letter-spacing: .04em; }
.dt-filters #auF { width: 260px; } .dt-filters select { max-width: 260px; }
/* Events */
.dt-evsplit { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.dt-evgroup > summary { list-style: none; cursor: pointer; } .dt-evgroup > summary::-webkit-details-marker { display: none; }
.dt-evfeed { min-height: 300px; }
.dt-ev { border-bottom: 1px solid var(--line); padding: 6px 2px; }
.dt-ev > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.dt-ev pre { max-height: 360px; overflow: auto; font-size: 12px; margin: 6px 0 0; }
.dt-pubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 16px; margin: 8px 0; }
.dt .dt-pubgrid label { flex-direction: column !important; align-items: stretch !important; gap: 4px; }
#evCh { width: 100%; }
.dt-trace { margin-bottom: 12px; }
.dt-trform { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 6px 0; }
.dt .dt-trform label, .dt .dt-trcustom label { flex-direction: row !important; align-items: center; gap: 6px; }
.dt-trcustom { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; margin: 8px 0; padding: 8px; background: var(--head); border-radius: 8px; }
.dt .dt-inl { display: inline-flex !important; justify-content: flex-start; } .dt .dt-inl input { width: auto; }
.dt #trWho { width: 300px; } .dt #trPre { width: 300px; }
.dt-radios { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.dt .dt-radios label { flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 8px; color: var(--fg); font-size: 13px; }
.dt .dt-radios input { width: auto; margin: 0; }
/* licensing: launch offer, plans, Pro dialog */
.lic-banner.last { background: var(--warn-bg); color: var(--warn); }
.pro-offer { background: var(--ok-bg); color: var(--ok); padding: 8px 12px; border-radius: 8px; }
.pro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.pro-plan { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 4px 8px !important; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--fg) !important; }
.pro-plan:has(input:checked) { border-color: var(--accent); background: var(--info-bg); }
.pro-plan span { width: 100%; font-size: 12.5px; color: var(--muted); padding-left: 24px; }
.pro-list { padding-left: 0; list-style: none; } .pro-list li { margin: 4px 0; }
/* Debug logs: storage, find, error summary, compare */
.dt-lgstore { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .dt-lgstore select { width: auto; font-size: 12.5px; padding: 3px 6px; }
.dt-findbar #lgFind { flex: 1; min-width: 280px; max-width: 560px; }
.dt-filters #lgQ { width: 240px; }
.dt-errsum { border-left: 4px solid var(--bad); }
.dt-errg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.dt-errg.on { background: var(--bad-bg); border-radius: 6px; }
.dt-found { border-left: 4px solid var(--accent); } .dt-foundrow { padding: 6px 0; border-bottom: 1px solid var(--line); }
.dt-hit { font-size: 12px; padding: 1px 0 1px 12px; white-space: pre-wrap; word-break: break-all; } .dt-hit mark { background: #fde68a; }
.dt-cmphead { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 10px; }
.dt-cmphead > div { display: flex; gap: 8px; align-items: flex-start; background: var(--head); border-radius: 8px; padding: 8px 10px; }
/* Debug logs: views, options, side panel, scanability */
.dt-views { flex-wrap: wrap; gap: 6px; } .dt-myview { display: inline-flex; align-items: center; } .dt-myview a { color: var(--muted); text-decoration: none; margin: 0 4px 0 2px; }
.dt-lgopts { flex-wrap: wrap; font-size: 13px; } .dt-lgopts select { width: auto; }
.dt-lgwrap.side { display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--lgside, 560px); gap: 0; align-items: start; }
.dt-lggrip { cursor: col-resize; align-self: stretch; min-height: 300px; background: transparent; border-left: 1px solid var(--line); }
.dt-lggrip:hover { background: var(--info-bg); }
#lgSide { position: sticky; top: 8px; max-height: calc(100vh - 160px); overflow: auto; padding-left: 8px; }
.dt-lgtable th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-errbadge { font-size: 11.5px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.dt-acts button.ghost { padding: 4px 10px; font-size: 13px; margin-right: 4px; } .dt-acts .sfgo { font-size: 14px; padding: 4px 6px; }
.dt-lgwrap.side .dt-lgtable td:nth-child(3), .dt-lgwrap.side .dt-lgtable th:nth-child(3) { display: none; }
.dt-lgwrap.side > #lgListBox { min-width: 0; overflow-x: auto; }
.dt-lgwrap.side .dt-lgtable td:nth-child(7), .dt-lgwrap.side .dt-lgtable th:nth-child(7) { display: none; }  /* size: on hover in the list view */
.dt-lgwrap.side .dt-lgtable td:nth-child(4) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.dt-lgwrap.side .dt-errbadge { max-width: 180px; }
.dt-lgwrap.side .dt-lgtable td:nth-child(8), .dt-lgwrap.side .dt-lgtable th:nth-child(8) { display: none; }
.dt-lgwrap.side .dt-lgtable tbody tr { cursor: pointer; } .dt-lgwrap.side .dt-lgtable tbody tr:hover td { background: var(--info-bg); }
.dt-exc { border-left: 4px solid #d99a1e; } .dt-excpre { background: var(--warn-bg) !important; color: var(--warn) !important; } .dt-hints li { margin: 4px 0; }
/* investigation session */
.dt-inv { border-left: 4px solid var(--accent); margin-bottom: 12px; } .dt-inv.live { border-left-color: #16a34a; }
.dt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; margin-right: 6px; animation: fdpulse 1.6s ease-in-out infinite; }
.dt-invstep { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .dt-invstep input { flex: 1; min-width: 280px; max-width: 520px; }
.dt-invsum { margin: 6px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dt-invtl { border-left: 2px solid var(--line); margin: 10px 0 10px 12px; padding-left: 14px; }
.dt-invst { margin-bottom: 10px; } .dt-invsh { display: flex; gap: 8px; align-items: baseline; margin-left: -27px; }
.dt-invn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.dt-invlog { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; font-size: 13px; } .dt-invlog.bad { background: var(--bad-bg); }
.dt-invlog input { width: auto; } .dt-invnone { padding: 4px 6px; }
.dt-invpast { margin: 0 0 8px; } .dt-invrow { display: flex; gap: 12px; } .dt-invdlg { width: min(560px, 92vw); }
.dt-invdlg label { margin: 8px 0; }
.dt-next { border-left: 4px solid var(--accent); }
.dt-nx { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.dt-nx > div, .dt-nx table, .dt-nx p { width: 100%; } .dt-frame { padding: 3px 0; } .dt-snip { max-height: 320px; margin-top: 6px; }
.dt-mgd { background: var(--warn-bg); border-radius: 8px; padding: 8px 10px; }
.dt-chain { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 4px 0; }
.dt-cmpsec { border-top: 1px solid var(--line); padding: 8px 0; } .dt-cmpsec h4 { margin: 4px 0 8px; }
.dt-split2 { table-layout: fixed; width: 100%; } .dt-split2 td { overflow-wrap: anywhere; vertical-align: top; }
.dt-pathctx { margin: 0 0 6px 6px; font-size: 12.5px; }
.dt-cmphead > div > div { margin-top: 4px; }
.dt-ready { margin: 10px 0; padding: 10px 12px; background: var(--head); border-radius: 10px; max-height: 50vh; overflow: auto; }
.dt-rrow { padding: 6px 0 6px 10px; border-left: 3px solid var(--line); margin: 6px 0; } .dt-rrow > div { font-size: 13px; margin-top: 2px; }
.dt-rrow.ok { border-color: var(--ok); } .dt-rrow.bad { border-color: var(--bad); } .dt-rrow.warn { border-color: #d99a1e; }
.prodlg, .admindlg { max-width: min(760px, 94vw); }
.dt-briefdlg, .dt-evdlg { width: min(900px, 94vw); max-width: min(900px, 94vw); }
.dt-brief2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dt-brieft { width: 100%; font-size: 12.5px; min-height: 320px; }
.dt-evq { background: var(--head); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.dt-evf pre { max-height: 220px; overflow: auto; font-size: 12px; } .dt-evred { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 10px 0; }
.dt-briefdlg .chk, .dt-evdlg .chk { font-size: 12.5px; }
.dt-evqt { white-space: pre-wrap; margin: 4px 0 0; font-size: 12.5px; max-height: 160px; overflow: auto; } .dt-evf pre { max-height: 300px; }
/* ---------------------------------------------------------------- Help Center (helpcenter.js) */
.helpview { height: calc(100vh - 100px); overflow: hidden; background: var(--bg); }
.hc { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: 100%; }
.hc-nav { border-right: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 18px 12px 24px; }
.hc-brand { font-weight: 800; font-size: 17px; letter-spacing: -.01em; padding: 0 10px 10px; }
.hc-navcat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 16px 10px 4px; }
.hc-navlink { display: block; padding: 5px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.hc-navlink:hover { background: var(--head); } .hc-navlink.on { background: var(--info-bg); color: var(--accent); font-weight: 600; }
.hc-navfoot { margin: 20px 10px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.hc-main { overflow: auto; padding: 0 0 60px; }
.hc-main > * { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
.hc-hero { max-width: none !important; text-align: center; padding: 56px 40px 44px !important; margin-bottom: 28px;
  background: linear-gradient(135deg, #0b2e6b 0%, #1f5fcf 60%, #3b82f6 100%); color: #fff; }
.hc-hero h1 { font-size: 38px; margin: 0 0 10px; letter-spacing: -.02em; } .hc-hero p { margin: 0 auto 26px; max-width: 620px; opacity: .9; font-size: 16px; }
.hc-search { margin: 22px auto 8px; } .hc-search input { width: 100%; font-size: 15px; padding: 12px 16px 12px 42px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") no-repeat 14px center; color: var(--fg); }
.hc-search.big { max-width: 640px; margin: 0 auto; } .hc-search.big input { font-size: 17px; padding: 16px 18px 16px 46px; border: 0; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.hc-cat { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
.hc-cat:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(31,95,207,.12); transform: translateY(-2px); }
.hc-cat b { font-size: 15.5px; } .hc-cat span { color: var(--muted); font-size: 13.5px; line-height: 1.45; } .hc-cat small { color: var(--accent); font-weight: 600; font-size: 12px; margin-top: auto; }
.hc-ic { display: inline-grid !important; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--info-bg); color: var(--accent) !important; font-size: 18px !important; font-weight: 700; }
.hc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; } .hc-two h2 { font-size: 18px; margin: 0 0 12px; }
.hc-pop { display: flex; flex-direction: column; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.hc-pop b { color: var(--accent); font-weight: 600; } .hc-pop span { color: var(--muted); font-size: 13px; } .hc-pop:hover b { text-decoration: underline; }
.hc-q { border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; background: var(--panel); }
.hc-q summary { cursor: pointer; padding: 13px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.hc-q summary::-webkit-details-marker { display: none; } .hc-q summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 18px; line-height: 1; }
.hc-q[open] summary::after { content: "–"; } .hc-q p { margin: 0; padding: 0 16px 14px; color: var(--muted); line-height: 1.6; }
.hc-more { display: inline-block; margin-top: 10px; font-weight: 600; }
.hc-crumbs { font-size: 13px; color: var(--muted); margin: 6px auto 0; } .hc-crumbs a { color: var(--accent); }
.hc-article { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; margin-top: 10px; }
.hc-h1 { font-size: 32px; letter-spacing: -.02em; margin: 14px 0 6px; } .hc-lead { font-size: 17px; color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.hc-body { font-size: 15px; line-height: 1.7; } .hc-body h3 { font-size: 18px; margin: 28px 0 8px; scroll-margin-top: 12px; }
.hc-body ul { padding-left: 22px; } .hc-body li { margin: 6px 0; } .hc-body a { color: var(--accent); }
.hc-steps { counter-reset: s; list-style: none; padding: 0 !important; } .hc-steps li { counter-increment: s; position: relative; padding: 10px 0 10px 46px; margin: 0 !important; border-bottom: 1px dashed var(--line); }
.hc-steps li::before { content: counter(s); position: absolute; left: 0; top: 9px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.hc-path { font-weight: 600; background: var(--head); border-radius: 5px; padding: 1px 7px; font-size: 13.5px; white-space: nowrap; }
.hc-tip, .hc-note, .hc-warn { border-radius: 10px; padding: 12px 16px; margin: 18px 0; font-size: 14px; line-height: 1.55; border-left: 4px solid; }
.hc-tip b, .hc-note b, .hc-warn b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.hc-tip { background: var(--ok-bg); border-color: var(--ok); } .hc-note { background: var(--info-bg); border-color: var(--accent); } .hc-warn { background: var(--warn-bg); border-color: #d99a1e; }
.hc-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; } .hc-table td, .hc-table th { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hc-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .hc-table td:nth-child(n+2) { text-align: left; }
.hc-side { position: sticky; top: 16px; align-self: start; } .hc-toc { border-left: 2px solid var(--line); padding: 2px 0 2px 14px; margin-bottom: 22px; }
.hc-toc b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.hc-toc a { display: block; font-size: 13.5px; padding: 3px 0; color: var(--fg); text-decoration: none; } .hc-toc a:hover, .hc-toc a.on { color: var(--accent); }
.hc-helpful { display: flex; align-items: center; gap: 8px; margin: 34px 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.hc-pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-weight: 600; font-size: 14px; } .hc-pn a { color: var(--accent); }
.hc-contact { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 44px !important; padding-top: 22px !important; padding-bottom: 22px !important;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.hc-contact div { flex: 1; min-width: 260px; display: flex; flex-direction: column; } .hc-contact span { color: var(--muted); font-size: 13.5px; }
.hc-btn { display: inline-block; padding: 9px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; }
.hc-btn.primary { background: var(--accent); color: #fff; } .hc-btn.ghost { border: 1px solid var(--line); color: var(--fg); }
.hc-results { margin-top: 18px; } .hc-rlabel { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 6px; }
.hc-result { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; color: var(--fg); text-decoration: none; background: var(--panel); }
.hc-result:hover { border-color: var(--accent); } .hc-result b { color: var(--accent); font-size: 15px; } .hc-result span { color: var(--muted); font-size: 13.5px; }
.hc-rcat { font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .05em; }
.hc-empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; margin-top: 18px; }
.hc-learn { margin-left: 4px; white-space: nowrap; }
@media (max-width: 1000px) { .hc { grid-template-columns: 1fr; } .hc-nav { display: none; } .hc-article, .hc-two { grid-template-columns: 1fr; } .hc-side { display: none; } .hc-main > * { padding-left: 18px; padding-right: 18px; } }
/* Help: its own button in the header (outside the tab row, so a narrow window can't hide it) */
.hdr-help { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: #fff; color: #0b2e6b; border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
.hdr-help:hover { background: #e8f0ff; } .hdr-help.on { background: #ffd54a; color: #0b2e6b; }
#views { min-width: 0; overflow-x: auto; scrollbar-width: none; } #views::-webkit-scrollbar { display: none; }
/* Data Loader: load results, repair and retry */
.ld-groups { display: grid; gap: 10px; } .ld-g { border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: 8px; padding: 8px 12px; }
.ld-g.on { background: var(--bad-bg); } .ld-msgs { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.ld-rows td { vertical-align: top; } .ld-rows input, .ld-rows select { min-width: 120px; width: 100%; font-size: 12.5px; padding: 3px 6px; }
.ld-rows .ld-ch input, .ld-rows .ld-ch select { background: #fff8d6; border-color: #d99a1e; } .ld-err { max-width: 320px; font-size: 12.5px; color: var(--bad); }
.ld-unk td { background: var(--warn-bg); } .ld-foot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; flex-wrap: wrap; }
.btnlink { text-decoration: none; display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; color: var(--fg); font-size: 12.5px; }
.ld-prev { max-height: 40vh; } .ld-dlg { width: min(760px, 94vw); } .ld-conf { margin: 10px 0; }
.ld-dlg .ld-conf { flex-direction: row !important; align-items: center; gap: 8px; } .ld-dlg .ld-conf input { flex: 1; }
/* Anonymous Apex */
.ax { --axEdH: 360px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.ax-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--head); flex-wrap: wrap; }
.ax-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; } .ax-keys { margin-left: auto; font-size: 12px; } .ax-writes .pill { font-size: 11.5px; }
.ax-ed { height: var(--axEdH); min-height: 140px; } .ax-ed .dt-apex { height: 100%; border: 0; border-radius: 0; resize: none; }
.ax-split { height: 6px; cursor: row-resize; background: var(--head); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ax-split:hover { background: var(--info-bg); }
.ax-out { min-height: 180px; display: flex; flex-direction: column; }
.ax-tabs { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; min-height: 40px; }
.ax-tabs button:not(.mini) { border: 0; background: none; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.ax-tabs button.on { background: var(--info-bg); color: var(--accent); font-weight: 600; }
.ax-st { font-weight: 700; font-size: 13.5px; } .ax-st.ok { color: var(--ok); } .ax-st.bad { color: var(--bad); }
.ax-body { padding: 10px 12px; max-height: 420px; overflow: auto; } .ax-empty { color: var(--muted); padding: 18px 6px; text-align: center; }
.ax-lines > div { display: grid; grid-template-columns: 70px 60px 1fr; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ax-lines .mono { white-space: pre-wrap; word-break: break-word; } .ax-lvl { color: var(--muted); font-size: 11.5px; } .ax-ln { font-size: 12px; color: var(--accent); }
.ax-ln.big { display: inline-block; margin: 6px 0; font-size: 13px; font-weight: 600; } .ax-pmsg { color: var(--bad); font-weight: 600; font-family: var(--mono); white-space: pre-wrap; }
.ax-log { max-height: 380px; overflow: auto; font-size: 12px; margin: 0; }
.ax-dd { position: relative; } .ax-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 300px; max-height: 360px; overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 4px; }
.ax-menu a { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 13px; }
.ax-menu a:hover { background: var(--head); } .ax-menu a .hint { margin-left: auto; font-size: 11.5px; white-space: nowrap; } .ax-menu .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ax-del { color: var(--muted); padding: 0 4px; } .ax-del:hover { color: var(--bad); } .ax-mempty { padding: 10px; }
.ax-lock { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px; }
.cmpbar { margin: 8px 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 13px; display: grid; gap: 4px; }
.infobox { background: var(--info-bg); color: var(--fg); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
/* issue page: next action beside the title */
.nextact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.nextact .primary, .nextact .ghost { font-size: 14px; padding: 7px 14px; }
.na-why { color: var(--muted); font-size: 13px; } .na-warn { color: var(--warn); font-weight: 600; }
/* the issue's files: grouped by component, one row per file, names never wrap character by character */
.fl { display: grid; gap: 8px; margin: 10px 0; }
.fl-comp { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.fl-ch { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--head); border-bottom: 1px solid var(--line); font-size: 12.5px; min-width: 0; }
.fl-type { color: var(--muted); white-space: nowrap; } .fl-cname { font-family: var(--mono); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.fl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-top: 1px solid var(--line); }
.fl-comp .fl-row:first-child, .fl-ch + .fl-row { border-top: 0; }
.fl-row:hover { background: var(--head); } .fl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fl-row.todo { box-shadow: inset 3px 0 0 var(--warn); }
.fl-name { min-width: 0; display: flex; flex-direction: column; }
.fl-file { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-sub { font-size: 11.5px; color: var(--muted); }
.fl-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .fl-lines { font-size: 12px; white-space: nowrap; min-width: 64px; text-align: right; }
.fl-acts { display: flex; gap: 6px; align-items: center; font-size: 12px; white-space: nowrap; }
.chip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; background: var(--panel); }
.rv-need { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); } .rv-ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.rv-rej { color: var(--muted); text-decoration: line-through; } .rv-dep { border-color: var(--accent); color: var(--accent); background: var(--info-bg); }
.cmp-same { color: var(--ok); } .cmp-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); font-weight: 600; } .cmp-new { color: var(--accent); }
.cmp-chg { color: var(--fg); } .cmp-err { border-color: var(--bad); color: var(--bad); } .cmp-wait { color: var(--muted); }
@media (max-width: 1100px) { .fl-row { grid-template-columns: minmax(0, 1fr) auto; } .fl-lines, .fl-acts { grid-column: 2; } .fl-chips { grid-column: 1 / -1; justify-content: flex-start; } }
.trk-min { gap: 10px; align-items: center; } .trk-mini { display: inline-flex; gap: 3px; }
.trk-dot { font-size: 11px; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line); color: var(--muted); }
.trk-dot.done { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); } .trk-dot.current { color: var(--accent); border-color: var(--accent); }
.trk-dot.failed { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.fl-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name lines acts" "chips chips chips"; row-gap: 4px; }
.fl-name { grid-area: name; } .fl-lines { grid-area: lines; } .fl-acts { grid-area: acts; } .fl-chips { grid-area: chips; justify-content: flex-start; align-items: center; }
.fl-chips .fl-sub { margin-right: 4px; }
.fl-file { display: flex; min-width: 0; } .fl-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .fl-t { white-space: nowrap; flex: none; }
/* issue list: key + action state, two-line title, compact details */
.issue-row .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rdet { font-size: 12px; color: var(--muted); margin-top: 3px; } .rdet .rstat { color: var(--fg); }
.achip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; color: var(--muted); }
.achip.ac-todo { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); } .achip.ac-ready { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.achip.ac-bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); } .achip.ac-run { color: var(--accent); border-color: var(--accent); background: var(--info-bg); }
.achip.ac-done { color: var(--ok); } .achip.me::before { content: "→ "; }
/* Current state: computed facts, then the written summary */
.rb { display: grid; gap: 4px; margin: 6px 0 8px; } .rb-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 13px; }
.rb-k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; } .rb-src { font-size: 11.5px; color: var(--muted); }
.rb-sum { border-top: 1px solid var(--line); padding-top: 8px; } .rb-sumh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.chat-full .modelbar { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.issue-row .k { flex-wrap: wrap; row-gap: 4px; } .issue-row .k .kl { white-space: nowrap; }
.issue-row .achip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tc-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; } .tc-item { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.tc-acts { justify-content: flex-start; gap: 6px; margin: 6px 0; } .tc-edit { display: flex; gap: 6px; margin: 6px 0; } .tc-edit .tc-in { flex: 1; }
/* review comments */
.cmpanel { margin: 8px 16px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--panel); display: grid; gap: 8px; }
.cm-top { display: flex; gap: 8px; align-items: center; } .cm { border-left: 3px solid var(--line); padding: 4px 10px; } .cm.req { border-left-color: var(--bad); }
.cm.resolved { opacity: .7; } .cm-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; } .cm-b { font-size: 13px; margin-top: 2px; white-space: pre-wrap; }
.cm-r { margin: 6px 0 0 14px; padding-left: 8px; border-left: 2px solid var(--line); } .cm-anchor { font-size: 12px; background: var(--head); padding: 2px 6px; border-radius: 4px; margin-top: 4px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.cm-replybox { display: flex; gap: 6px; margin-top: 6px; } .cm-replybox textarea { flex: 1; } .cm-new { display: grid; gap: 6px; } .cm-new[hidden], .cm-replybox[hidden] { display: none; }
.cm-where { display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap; } .cm-where select { max-width: 420px; } .cm-req { margin-right: auto; font-size: 13px; }
.diff td.nb { cursor: pointer; } .diff td.nb:hover { background: var(--info-bg); } .diff td.nb.has-cm { background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.diff td.nb.has-cm::before { content: "💬"; font-size: 10px; margin-right: 2px; }
/* Get started: checks with fixes, first task, sample log */
.st-fix { margin-top: 4px; font-size: 12.5px; color: var(--warn); } .st-orgs { display: grid; gap: 8px; margin-top: 8px; }
.st-org { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.st-org .st-fix, .st-perms { flex-basis: 100%; } .st-perms { display: flex; flex-wrap: wrap; gap: 6px; } .st-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.st-explore, .st-data { margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: var(--info-bg); font-size: 13.5px; } .st-data { background: var(--head); }
.st-sample { width: min(1100px, 95vw); max-height: 90vh; } .st-sample-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
/* Help › Diagnose & updates */
.dg-card { margin: 12px 0; } .dg-row { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .dg-row:first-child { border-top: 0; }
.dg-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; flex: none; border: 1px solid var(--line); }
.dg-row.ok .dg-ic { color: var(--ok); background: var(--ok-bg); } .dg-row.warn .dg-ic { color: var(--warn); background: var(--warn-bg); }
.dg-row.bad .dg-ic { color: var(--bad); background: var(--bad-bg); } .dg-row.info .dg-ic { color: var(--accent); background: var(--info-bg); }
.dg-fix { font-size: 13px; color: var(--fg); margin-top: 2px; } .dg-file pre { max-height: 300px; overflow: auto; font-size: 12px; } .dg-opt { display: block; margin: 8px 0; }
.dg-notes { white-space: pre-wrap; margin: 8px 0; font-size: 13.5px; }
/* Data Loader: guided steps + side column */
.dl { max-width: 1280px; margin: 0 auto; padding: 18px 24px 40px; }
.dl-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .dl-head h2 { margin: 0 0 4px; font-size: 22px; }
.dl-head p { margin: 0; color: var(--muted); } .dl-head .btnlink { margin-left: auto; white-space: nowrap; }
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.dl-main { display: grid; gap: 14px; } .dl-main > div:empty { display: none; } .dl-off { opacity: .55; pointer-events: none; }
.dl-side { display: grid; gap: 14px; position: sticky; top: 12px; }
.dl-step { padding: 18px 20px; } .dl-sh { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dl-sh h3 { margin: 0; font-size: 16px; } .dl-sh p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.dl-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.dl-fields { display: grid; gap: 14px; padding-left: 38px; } .dl-f { display: grid; gap: 6px; } .dl-l { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dl-f input, .dl-f select { width: 100%; max-width: 420px; padding: 8px 10px; font-size: 14px; } .dl-orgrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dl-orgrow select { max-width: 360px; }
.dl-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dl-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 760px; }
.dl-seg button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); cursor: pointer; }
.dl-seg button span { font-size: 12px; color: var(--muted); line-height: 1.35; } .dl-seg button:hover { border-color: var(--accent); }
.dl-seg button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--info-bg); }
.dl-drop { margin-left: 38px; display: flex; align-items: center; gap: 12px; padding: 22px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; background: var(--head); }
.dl-drop:hover, .dl-drop.over { border-color: var(--accent); background: var(--info-bg); } .dl-drop-ic { font-size: 22px; color: var(--accent); }
.dl-map select { min-width: 260px; } .dl-step .t-scroll { margin-left: 38px; }
.dl-empty { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 14px; border-left: 4px solid var(--warn); }
.dl-empty h3 { margin: 0 0 4px; } .dl-empty p { margin: 0 0 10px; color: var(--muted); } .dl-empty-ic { font-size: 26px; }
.dl-tips ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); } .dl-tips li { margin: 5px 0; }
.dl-recent h4 { margin-top: 0; } .dl-ld { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); cursor: pointer; margin-top: 6px; font-size: 13px; }
.dl-ld:hover { border-color: var(--accent); } .dl-ldc .pill { font-size: 11px; }
@media (max-width: 1100px) { .dl-grid { grid-template-columns: 1fr; } .dl-side { position: static; } .dl-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dl-note { font-size: 13px; color: var(--warn); background: var(--warn-bg); padding: 8px 12px; border-radius: 8px; max-width: 760px; }
.dl-main .card, .dl-side .card { margin: 0; } .dl-step > p, .dl-step > .errbox, .dl-step > button, .dl-step > .hint { margin-left: 38px; }
#wsMenu { z-index: 400; max-height: 70vh; overflow: auto; }
.att-note { flex-basis: 100%; color: var(--warn); font-size: 12px; } .att-note:empty { display: none; }

/* Apex tests */
.ts { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.7fr); }
.ts > .ts-pick { grid-column: 1; grid-row: 1; } .ts > #tsOut { grid-column: 2; grid-row: 1; min-width: 0; }
.ts-pick { padding: 0; max-height: calc(100vh - 210px); overflow: hidden; }
.ts-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.ts-head h4, .ts-sec h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ts-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 9px; background: var(--head); color: var(--fg); font-size: 11px; letter-spacing: 0; }
.ts-count:empty { display: none; }
input.ts-search { margin: 0 14px 6px; width: calc(100% - 28px); box-sizing: border-box; padding: 7px 10px; }
.ts-all { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 6px 14px 6px 38px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); cursor: pointer; }
.ts-list { max-height: none; padding: 4px 0; }
.ts-note { padding: 18px 14px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.ts-cls.on { background: color-mix(in srgb, var(--info-bg) 45%, transparent); }
.ts-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 64px; align-items: center; gap: 4px; min-height: 32px; padding: 0 14px 0 10px; }
.ts-row:hover { background: var(--head); }
.ts-row .sfgo { opacity: 0; transition: opacity .12s; }
.ts-row:hover .sfgo, .ts-row .sfgo:focus-visible { opacity: 1; }
button.ts-tw { border: 0; background: none; padding: 0; width: 22px; height: 22px; font-size: 16px; line-height: 1; color: var(--muted); transition: transform .12s; cursor: pointer; }
button.ts-tw.open { transform: rotate(90deg); color: var(--fg); }
button.ts-tw:disabled { visibility: hidden; }
.ts-name { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.ts-name .mono, .ts-m .mono { font-family: inherit; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-name .mono { font-weight: 600; }
.ts-n { text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-methods { padding: 2px 0 6px; }
.ts-m { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; min-height: 26px; padding: 0 14px 0 58px; cursor: pointer; color: var(--fg); }
.ts-m:hover { background: var(--head); }
.ts-m .mono { font-size: 12.5px; }
.ts-foot { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--panel); }
.ts-selrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; font-size: 12.5px; margin-bottom: 8px; }
.ts-btns { display: flex; gap: 8px; }
.ts-btns button { flex: 1; padding: 8px 10px; }

.ts-empty { text-align: center; padding: 36px 24px; border-style: dashed; }
.ts-empty-ic { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: var(--info-bg); color: var(--accent); display: grid; place-items: center; font-size: 16px; }
.ts-empty h4 { margin: 0 0 10px; font-size: 15px; }
.ts-empty ol { display: inline-block; text-align: left; margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.ts-running { display: flex; gap: 12px; align-items: flex-start; padding: 18px; }
.ts-running .spin { margin-top: 3px; }
.ts-running p { margin: 4px 0 0; }

.ts-res { padding: 0; overflow: hidden; }
.ts-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ts-banner.good { background: var(--ok-bg); } .ts-banner.bad { background: var(--bad-bg); }
.ts-banner > div { flex: 1; display: flex; flex-direction: column; }
.ts-banner b { font-size: 15px; } .ts-banner.good b { color: var(--ok); } .ts-banner.bad b { color: var(--bad); }
.ts-banner > div span { font-size: 12.5px; color: var(--muted); }
.ts-banner-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; }
.ts-banner.good .ts-banner-ic { background: var(--ok); } .ts-banner.bad .ts-banner-ic { background: var(--bad); }
.ts-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ts-tiles > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); }
.ts-tiles > div:last-child { border-right: 0; }
.ts-tiles span { font-size: 11.5px; color: var(--muted); }
.ts-tiles b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ts-tiles .dt-bar { width: 100%; }
.ts b.good { color: var(--ok); } .ts b.bad { color: var(--bad); }
.ts-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.ts-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ts-seg button { border: 0; border-radius: 0; background: none; padding: 3px 10px; font-size: 12px; color: var(--muted); }
.ts-seg button + button { border-left: 1px solid var(--line); }
.ts-seg button.on { background: var(--info-bg); color: var(--accent); font-weight: 600; }
.ts-tests { margin: 0 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ts-test { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 70px; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ts-test:last-child { border-bottom: 0; }
.ts-test.fail { background: color-mix(in srgb, var(--bad-bg) 35%, transparent); }
.ts-st { font-weight: 700; } .ts-test.pass .ts-st { color: var(--ok); } .ts-test.fail .ts-st { color: var(--bad); }
.ts-tn { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ts-tn .mono { font-family: inherit; }
.ts-tn b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-tn span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-ms { text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ts-test pre { grid-column: 2 / -1; margin: 2px 0 2px; white-space: pre-wrap; font-size: 12px; background: var(--panel); color: var(--bad); border: 1px solid var(--line); border-left: 3px solid var(--bad); padding: 8px 10px; border-radius: 6px; }
.ts-stack { color: var(--muted); }
.ts .t-table { width: 100%; border-collapse: collapse; }
.ts-cov { margin: 0 16px 16px; width: calc(100% - 32px) !important; }
.ts .t-table th, .ts-hist .t-table th { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--head); }
.ts .t-table td, .ts-hist .t-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle !important; }
.ts .t-table tr:last-child td, .ts-hist .t-table tr:last-child td { border-bottom: 0; }
.ts .t-table .num, .ts-hist .t-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-pct { display: inline-flex; align-items: center; gap: 8px; } .ts-pct b { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.ts-hist { padding: 0 0 4px; overflow: hidden; }
.ts-hist .t-table { width: 100%; border-collapse: collapse; }
.ts-hist .t-table td:first-child, .ts-hist .t-table th:first-child { padding-left: 16px; }
.ts-what { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
@media (max-width: 900px) { .ts > #tsOut { grid-column: 1; grid-row: auto; } .ts-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-pick { max-height: none; } }
.ts > #tsOut > .card { margin-top: 0; }
.ts-cov a.mono { font-family: inherit; font-size: 13px; text-decoration: none; font-weight: 600; } .ts-cov a.mono:hover { text-decoration: underline; }
.ts-what.mono { font-family: inherit; font-size: 12.5px; }

/* Get started reminder on every start until the required steps are done */
.admindlg.stpop { width: min(460px, calc(100vw - 32px)); position: relative; padding: 22px 22px 18px; }
.stpop h3 { margin: 0 28px 4px 0; }
.stpop-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.stpop-x:hover { background: var(--head); color: var(--fg); }
/* setup wizard: one step at a time */
.admindlg.stwiz { width: min(620px, calc(100vw - 32px)); }
.wz-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 16px; padding: 0; counter-reset: none; }
.wz-steps li { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; font-size: 12px; color: var(--muted); background: var(--head); line-height: 1.25; }
.wz-steps li span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--panel); border: 1px solid var(--line); }
.wz-steps li.on { color: var(--fg); background: var(--info-bg); font-weight: 600; } .wz-steps li.on span { border-color: var(--accent); color: var(--accent); }
.wz-steps li.done span { background: var(--ok); border-color: var(--ok); color: #fff; }
.wz-body { min-height: 190px; } .wz-body h4 { margin: 0 0 8px; font-size: 15px; } .wz-body p { margin: 8px 0; }
.wz-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 8px; }
.wz-ok { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 10px 0; border-radius: 8px; background: var(--ok-bg); }
.wz-ok svg { flex: none; width: 22px; height: 22px; color: var(--ok); } .wz-ok div { display: grid; gap: 2px; }
.wz-q { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.wz-q code { flex: 1 1 260px; padding: 7px 10px; border-radius: 6px; background: var(--head); font-size: 12px; overflow-wrap: anywhere; }
.wz-res { width: 100%; margin: 8px 0; font-size: 13px; }
.wz-nav { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); gap: 8px; } .wz-gap { flex: 1; }
.stwiz .noorg-de { margin-top: 12px; font-size: 13px; }
@media (max-width: 560px) { .wz-steps { grid-template-columns: 1fr 1fr; } }
.boot-err { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg); padding: 16px; }
.boot-err .card { max-width: 560px; }
.boot-err h3 { margin-top: 0; }
/* AI box actions: in a narrow column the tip moves to its own line instead of squeezing the buttons */
.chat-actions { flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.chat-actions .hint { flex: 1 1 220px; min-width: 0; }
.chat-actions #chatSend { margin-left: auto; align-self: center; }
/* org tools without a connected org */
.noorg { max-width: 640px; width: 100%; margin: 40px auto; padding: 22px 24px; flex: none; align-self: center; height: auto; }
.noorg h3 { margin: 0 0 6px; }
.noorg-de { margin-top: 18px; padding: 14px 16px; border-radius: 8px; background: var(--info-bg); }
.noorg-de p { margin: 8px 0 0; }

/* Org Compare - the Data Loader's layout */
.cmp .cmp-modes { max-width: none; margin-bottom: 12px; }
.cmp-form { padding: 16px 18px; display: grid; gap: 14px; }
.cmp-orgs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.cmp-orgs .dl-orgrow select { max-width: none; flex: 1; min-width: 0; }
button.cmp-swap { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 16px; margin-bottom: 2px; }
.cmp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cmp-fields .dl-f input { max-width: none; }
.cmp-namesrow { display: flex; gap: 6px; align-items: center; } .cmp-namesrow .cmp-names { flex: 1; text-align: left; padding: 8px 10px; }
.cmp-go { display: flex; gap: 8px; align-items: center; } .cmp-go .primary { min-width: 140px; }
.cmp-empty { padding: 20px 22px; border-style: dashed; color: var(--muted); }
.cmp-empty h3 { margin: 0 0 6px; color: var(--fg); font-size: 15px; } .cmp-empty p { margin: 6px 0; }
.cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; margin: 8px 0; }
.cmp-legend .pill + .pill, .cmp-legend .pill { margin-left: 6px; }
.cmp-res-head { margin: 4px 0 8px; } .cmp-res-head .hint { margin: 6px 0 0; }
.cmp-res { padding: 12px 14px; overflow-x: auto; }
.cmp-none { padding: 10px 2px; }
@media (max-width: 760px) { .cmp-orgs { grid-template-columns: 1fr; } button.cmp-swap { justify-self: center; transform: rotate(90deg); } }
.cli-missing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; white-space: normal; }
.cli-missing .hint { color: inherit; opacity: .8; }
.cmp-form { border-style: solid; background: var(--panel); }
.cmp-orgs .opick { flex: 1; min-width: 0; }
.about-ver { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
/* "Install the Salesforce CLI" window */
.admindlg.clidlg { width: min(440px, calc(100vw - 32px)); position: relative; text-align: center; padding: 26px 26px 20px; }
.clidlg-ic { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; background: var(--info-bg); color: var(--accent); display: grid; place-items: center; font-size: 22px; }
.clidlg h3 { margin: 0 0 8px; } .clidlg p { margin: 6px 0; }
.clidlg .row-end { justify-content: center; margin-top: 16px; }
/* test dialog: how the screenshots should look */
.tc-shotq { display: grid; gap: 10px; margin: 8px 0 8px 26px; padding: 10px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.tc-q { display: grid; gap: 4px; } .tc-ql { font-size: 12.5px; font-weight: 600; }
.tc-opts { display: flex; flex-wrap: wrap; gap: 4px 16px; } .tc-opts label { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; }
.tc-note input { width: 100%; box-sizing: border-box; }
/* a request made by a EagleDesk button: its name, with the instructions behind it folded away */
.msg-action { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 4px 0 2px; }
.msg-action .sparkle { width: 14px; height: 14px; fill: var(--accent); }
.msg-instr { margin-top: 4px; } .msg-instr summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.msg-instr .body { margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--line); color: var(--muted); font-size: 13px; }
.wz-res th { text-align: left; }
.wz-acts .btnlink { padding: 7px 12px; font-size: 14px; line-height: 1.2; }

/* first-run tour of the Issues page */
.tour-shade { position: fixed; inset: 0; z-index: 9000; }
.tour-ring { position: fixed; z-index: 9001; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 3px #3b82f6, 0 0 0 9999px rgba(15, 23, 42, .55); transition: all .25s ease; }
.tour-tip { position: fixed; z-index: 9002; width: 320px; max-width: calc(100vw - 16px); background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28); transition: top .25s ease, left .25s ease; }
.tour-n { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #3b82f6; margin-bottom: 4px; }
.tour-t { font-size: 15px; display: block; margin-bottom: 4px; }
.tour-tip p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tour-nav { display: flex; gap: 6px; align-items: center; }
.tour-nav span { flex: 1; }
.hc-tour { display: inline-block; margin-top: 12px; font-weight: 600; }
.wz-steps li small { font-weight: 400; color: var(--muted); }
.ws-card label { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ws-card select { width: 100%; max-width: 100%; min-width: 0; }

/* Org Browser: an open editor fills the page - no scrolling past the list to reach it */
.t-browse .t-main.editing { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.t-browse .t-main.editing > .t-bar, .t-browse .t-main.editing > #bList { display: none; }
.t-browse .t-main.editing > #bSrc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.t-main.editing .ed-card { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.t-main.editing .ed-main { flex: 1; min-height: 0; }
.t-main.editing .ed-monaco { height: auto; min-height: 220px; }
.t-main.editing #edOut { max-height: 30vh; overflow: auto; }
.t-main.editing #edBack { margin-right: 4px; }

/* editor versions: saved copies, numbered */
.ed-newer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 8px 12px; border-radius: 8px;
  background: var(--info-bg); border: 1px solid var(--line); font-size: 13px; }
.ed-vn { display: inline-block; min-width: 26px; padding: 0 5px; border-radius: 6px; background: var(--head); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700; text-align: center; }
.ed-ver-saved .ed-vn { background: var(--info-bg); color: var(--accent); border-color: var(--accent); }
.ed-ver-deployed .ed-vn { background: #e7f6ec; color: #1a7f37; border-color: #1a7f37; }
.ed-dot.saved { color: #1a7f37; }
.ed-main > .ed-monaco { min-width: 0; } .ed-main > .ed-side:not([hidden]) { flex: 0 0 320px; max-width: 40%; overflow: auto; }

/* Seed Data in the Data Loader's layout */
.seed .dl-step h3 { margin: 0; }
.seed-orgs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.seed-orgs .dl-orgrow select { max-width: none; flex: 1; min-width: 0; }
.seed-orgs .seed-arrow { padding-bottom: 8px; font-size: 18px; color: var(--muted); }
.seed-links:empty { display: none; }
.seed-links { font-size: 13px; color: var(--muted); padding: 8px 12px; border-radius: 8px; background: var(--head); }
.seed-row { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 160px; gap: 14px; align-items: end; }
.seed-row .seed-where input, .seed-row .dl-f input { max-width: none; }
.seed-limrow { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.seed-limit input { width: 90px !important; }
.seed-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--head); font-size: 13.5px; }
.seed-miss { flex-basis: 100%; font-size: 12.5px; color: var(--warn); }
.seed-tree { padding-left: 38px; }
.seed-node { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.seed-tree > #seNode > .seed-node > .seed-col { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel); min-width: 0; }
.seed-colh { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.seed-colh span { font-weight: 600; background: var(--head); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; letter-spacing: 0; }
.seed-lk { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.seed-lk:last-child { border-bottom: 0; }
.seed-lk .mono { font-size: 11.5px; }
.seed-kids { max-height: 340px; overflow: auto; padding-right: 4px; }
.seed-find { width: 100%; margin: 0 0 6px; padding: 7px 10px; }
.seed-go { display: flex; gap: 10px; align-items: center; } .seed-go .primary { min-width: 140px; }
.seed #seOut:not(:empty) { margin: 14px 0 0 38px; }
.seed #seOut .card { margin: 0; }
.seed #seRuns { margin-left: 0; }
.seed-plan { width: 100%; margin: 8px 0; padding: 7px 10px; }
.seed-planbtns { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) { .seed-row { grid-template-columns: 1fr; } .seed-orgs { grid-template-columns: 1fr; } .seed-orgs .seed-arrow { display: none; } .seed-tree { padding-left: 0; } }
.seed-tree .seed-lk { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-items: start; }
.seed-tree .seed-lk > input[type=checkbox] { margin-top: 2px; }
.seed-tree .seed-lk > .mono, .seed-tree .seed-lk > .hint, .seed-tree .seed-lk > .pill { grid-column: 2; justify-self: start; }
.seed-tree .seed-lk > .hint:not(.mono) input { width: 64px; padding: 3px 6px; }
.seed-tree .seed-lk > * { margin: 0; line-height: 1.35; }
.seed-tree .seed-lk { padding: 6px 0; }
.seed-tree > #seNode > .seed-node > .seed-col:first-child { max-height: 420px; overflow: auto; }

/* Data Loader / Org Compare / Seed Data pages scroll (the tool view itself doesn't); content stays 1280px wide, centred */
.toolview > .dl { height: 100%; overflow-y: auto; max-width: none; margin: 0;
  padding-left: max(24px, calc((100% - 1280px) / 2)); padding-right: max(24px, calc((100% - 1280px) / 2)); }

/* wide tables (seed preview, load results) scroll inside their card - they never widen the page or slide under the side column */
.dl-grid > *, .dl-main > *, .dl-main .card, .dl-step > div, #seOut, #seOut > *, #seSample { min-width: 0; }
.seed #seSample .t-scroll { max-height: 420px; border: 1px solid var(--line); border-radius: 8px; }
.seed #seSample td, .seed #seSample th { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.seed #seSample thead th { position: sticky; top: 0; background: var(--head); z-index: 1; }

/* Dev Tools forms: labelled fields in a card, the action at the end, and an empty state before the first run */
.dt-main { padding: 18px 24px 40px; }
.dt-head h2 { font-size: 22px; margin-right: 8px; }
.dt-help { margin: 2px 0 16px; font-size: 13.5px; }
.dt-form { padding: 16px 18px; margin: 0 0 14px; max-width: 1100px; display: grid; gap: 14px; }
.dt-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; }
.dt-fgrid .dl-f[hidden] { display: none; }
.dt-fgrid .dt-fwide { grid-column: span 2; }
.dt-fgrid .dl-f input, .dt-fgrid .dl-f select { max-width: none; }
.dt-fgrid .dt-user { display: block; position: relative; } .dt-fgrid .dt-user input { width: 100%; }
.dl-l i { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; margin-left: 4px; }
.dt-fgo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .dt-fgo .primary { min-width: 150px; }
.dt-empty { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; max-width: 1100px; border-style: dashed; background: var(--panel); }
.dt-empty-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--info-bg); color: var(--accent); }
.dt-empty h3 { margin: 0 0 4px; font-size: 15px; } .dt-empty p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 760px; }
.dt-modes { max-width: 1100px; margin: 0 0 14px; }
@media (max-width: 900px) { .dt-fgrid .dt-fwide { grid-column: auto; } .dt-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dt-fgrid .dl-f input, .dt-fgrid .dl-f select { width: 100%; box-sizing: border-box; }
.dt .dt-fgrid .dl-f input, .dt .dt-fgrid .dl-f select { width: 100% !important; }  /* older fixed widths (#wuN, #odO…) are for the old one-line bars */
.dt-fgrid:has(> .dl-f:only-child) { grid-template-columns: minmax(0, 420px); }

/* Apex tests & coverage: two tabs */
.dt-tabs { display: inline-flex; margin: 0 0 14px; }
.dt-tabs button { padding: 7px 14px; font-size: 13.5px; }
.dt-tabwarn { color: var(--bad); font-weight: 600; font-size: 12px; }
.dt-covrow .dt-runfor { margin-left: 6px; padding: 1px 8px; font-size: 11.5px; white-space: nowrap; }
/* the class name always keeps room; "Run tests" floats over the % and bar on hover instead of reserving a column */
.dt-covrow { grid-template-columns: minmax(90px, 1fr) auto auto; position: relative; }
.dt-covrow .dt-runfor { margin: 0; display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--panel); }
.dt-covrow:hover .dt-runfor, .dt-covrow.on .dt-runfor, .dt-covrow .dt-runfor:focus { display: inline-block; }
/* seed preview rows: a large window */
.admindlg.seed-rows { width: min(1400px, 94vw); max-width: none; }
.admindlg.seed-rows #seSample .t-scroll { max-height: 65vh; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; }
.admindlg.seed-rows #seSample td, .admindlg.seed-rows #seSample th { white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.admindlg.seed-rows #seSample thead th { position: sticky; top: 0; background: var(--head); z-index: 1; }
.seed-rowsh { margin-bottom: 4px; }

/* a split whose divider can be dragged (Coverage: class list | code) */
.dt-split.dt-resizable { grid-template-columns: var(--dtl, minmax(280px, 1fr)) 10px minmax(320px, 2fr); column-gap: 2px; }
.dt-split.dt-resizable[style*="--dtl"] { grid-template-columns: var(--dtl) 10px minmax(320px, 1fr); }
.dt-grip { align-self: stretch; min-height: 120px; cursor: col-resize; border-radius: 4px; position: relative; outline: none; }
.dt-grip::after { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--line); }
.dt-grip:hover::after, .dt-grip.on::after, .dt-grip:focus-visible::after { background: var(--accent); height: 60px; margin-top: -30px; }
.dt-grip:hover, .dt-grip.on { background: var(--info-bg); }
@media (max-width: 900px) { .dt-split.dt-resizable, .dt-split.dt-resizable[style*="--dtl"] { grid-template-columns: 1fr; } .dt-grip { display: none; } }

/* Org Browser: Apex coverage column */
.b-cov { white-space: nowrap; } .b-cov > span:first-child { display: inline-block; min-width: 38px; font-weight: 600; }
.b-cov .bad { color: var(--bad); } .b-cov .good { color: var(--ok); }
.b-cov .dt-bar { width: 70px; vertical-align: middle; }
.b-low { font-size: 12.5px; font-weight: 500; margin-left: 10px; display: inline-flex; gap: 4px; align-items: center; }

/* Apex editor: coverage + tests in one place */
.ed-apex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--head); font-size: 13px; }
.ed-covpill b { font-size: 14px; } .ed-covpill.bad b { color: var(--bad); } .ed-covpill.good b { color: var(--ok); }
.ed-covtg { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; }
.ed-apexgo { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; } .ed-apexgo select { padding: 3px 6px; font-size: 12.5px; }
.ed-covnote { flex-basis: 100%; font-size: 12px; }
.ed-cy { border-left: 4px solid #2da44e; margin-left: 3px; } .ed-cn { border-left: 4px solid #cf222e; margin-left: 3px; }
.ed-cy-l { background: rgba(45, 164, 78, .07); } .ed-cn-l { background: rgba(207, 34, 46, .09); }
.ed-tres { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; margin: 4px 0 8px; font-size: 13px; }
.ed-tres.good { background: #e7f6ec; color: #1a7f37; } .ed-tres.bad { background: var(--del-bg, #fde8e8); color: var(--bad); }
.ed-tres span { color: var(--fg); font-size: 12.5px; }
.ed-test { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ed-test.fail .ts-st { color: var(--bad); } .ed-test.pass .ts-st { color: var(--ok); }
.ed-test pre { white-space: pre-wrap; font-size: 11.5px; margin: 4px 0 0; max-height: 160px; overflow: auto; background: var(--head); padding: 6px; border-radius: 6px; }
.ed-tnone p { margin: 4px 0 0; }
.ed-apex label.ed-covtg { flex-direction: row; display: inline-flex; margin: 0; color: var(--fg); }
/* workspace names: a counter while typing; long names shortened on the button */
.ask-in { position: relative; } .ask-in input { padding-right: 56px; }
.ask-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
#wsBtn b { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* logo: the eagle mark with the EagleDesk wordmark (preview of the new name) */
header.top .brand.brand-logo { flex-direction: row; align-items: center; gap: 9px; }
.brand-mark { height: 31px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(46, 140, 255, .35)); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.brand-name b { font-weight: 800; color: #38a9ff; }
body[data-edition="team"] .brand-name::after { content: "Enterprise"; margin-left: 7px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; vertical-align: 3px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #7c3aed); }
[data-skin="mac"] .brand-name b { color: #1d7ff0; }

/* Settings › AI connection */
.ai-modes { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 14px; }
.ai-card { max-width: 760px; } .ai-card h4 { margin-top: 0; display: flex; gap: 8px; align-items: center; }
.ai-keyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ai-keyrow #aiKey { flex: 1; min-width: 260px; }
.ai-cur { font-weight: 600; color: var(--muted); }
.ai-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 0 0 12px; }
.ai-tile { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 12.5px; color: var(--muted); }
.ai-tile b { font-size: 22px; color: var(--fg); } .ai-tile.bad b { color: var(--bad); } .ai-tile .dt-bar { width: 100%; }
.ai-days td { padding: 4px 8px; } .ai-dbar { display: grid; gap: 2px; width: 160px; }
.ai-dbar i { display: block; height: 5px; border-radius: 3px; background: var(--line); min-width: 0; } .ai-dbar i.api { background: var(--accent); }
@media (max-width: 800px) { .ai-tiles, .ai-modes { grid-template-columns: 1fr; } }
/* which way the AI is connected, under the message box */
.ai-mode { margin-left: auto; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--head); color: var(--muted); text-decoration: none; white-space: nowrap; }
.ai-mode.api { border-color: var(--accent); color: var(--accent); background: var(--info-bg); font-weight: 600; }
.ai-mode:hover { border-color: var(--accent); }
.ai-modes button { position: relative; } .ai-now { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ok); }
.ai-days { width: 100%; } .ai-days th { text-align: left; } .ai-days th.num, .ai-days td.num { text-align: right; padding-right: 18px; }
.ai-flash { animation: aiflash 1.2s ease 2; } @keyframes aiflash { 50% { box-shadow: 0 0 0 3px var(--accent); } }

/* AI connection, friendlier: what's in use, two choices, the key in three steps */
.ai-now-card { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; max-width: 760px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel); margin: 6px 0 4px; }
.ai-now-card > div:first-child { display: grid; gap: 2px; } .ai-now-card b { font-size: 16px; }
.ai-now-card.api { border-color: var(--accent); background: var(--info-bg); }
.ai-srv { display: flex; gap: 8px; align-items: center; }
.ai-pend { max-width: 760px; margin: 6px 0 0; font-size: 13px; color: var(--warn); }
.ai-h { font-size: 14px; margin: 20px 0 8px; }
.ai-modes { margin: 0 0 12px; } .ai-modes button { padding: 14px 16px; }
.ai-step { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .ai-step:last-of-type { border-bottom: 0; }
.ai-step > div { flex: 1; display: grid; gap: 6px; } .ai-step p { margin: 0; }
.ai-sn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--head); border: 1px solid var(--line); }
.ai-step.done .ai-sn { background: var(--ok); border-color: var(--ok); color: #fff; }
.ai-limits { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ai-limits button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; font-weight: 600; }
.ai-limits button.on { border-color: var(--accent); background: var(--info-bg); color: var(--accent); }
.ai-custom { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); font-size: 13px; } .ai-custom input { width: 80px; padding: 5px 8px; }
.ai-go { padding-top: 10px; } .ai-back p { margin: 0 0 10px; }
.ai-empty { margin: 4px 0; }
.ai-wsrow label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; } .ai-wsrow input { max-width: 360px; font-family: var(--mono); }
.ai-wserr { margin-top: 6px; font-size: 12.5px; color: var(--bad); font-weight: 600; }

/* the picture of the issue */
.dg-card { padding: 14px 16px; } .dg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dg-head h4 { margin: 0; font-size: 15px; } .dg-head .hint { margin-right: auto; }
.dg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.dg-col { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel); min-width: 0; }
.dg-col h5 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.dg-col.bad h5 { color: var(--bad); } .dg-col.fix h5 { color: var(--ok); }
.dg-chart { overflow: auto; text-align: center; } .dg-chart svg { max-width: 100%; height: auto; }
.dg-points { margin: 12px 0 4px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; } .dg-points li { margin: 3px 0; }
.dg-legend { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.dg-k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .dg-k.bad { background: #fde8e8; border: 2px solid #cf222e; } .dg-k.fix { background: #e7f6ec; border: 2px solid #1a7f37; margin-left: 10px; }
.dg-none { display: flex; gap: 14px; align-items: flex-start; border-style: dashed; } .dg-ic { font-size: 26px; } .dg-none p { margin: 4px 0 8px; }
.dg-src { white-space: pre-wrap; font-size: 11.5px; text-align: left; }
.admindlg.dg-modal { width: min(1500px, 96vw); max-width: none; max-height: 92vh; overflow: auto; }
.dg-modal .dg-card { border: 0; box-shadow: none; padding: 0; } .dg-modal .dg-cols { grid-template-columns: 1fr 1fr; } .dg-modal .dg-chart svg { max-height: 70vh; }
.dg-mhead { display: flex; margin-bottom: 4px; }
/* AI tab: the AI box stays under the issue header while the discussion scrolls (not on short windows - it would leave no room) */
@media (min-height: 700px) {
  #detail .card.chat#chatCard { position: sticky; top: var(--dhead-h, 0px); z-index: 1; margin-top: 0; box-shadow: 0 -10px 0 var(--bg), 0 6px 12px -8px rgba(0,0,0,.25); }
}
/* deploy screen: pick the files; long component / file names wrap instead of pushing the screen sideways */
.ds-files { width: 100%; } .ds-files td, .ds-files th { overflow-wrap: anywhere; vertical-align: middle; }
.ds-files td:first-child, .ds-files th:first-child { width: 28px; } .ds-files input[type=checkbox] { width: auto; margin: 0; }
.ds-files tr:has(input[data-dspick]:not(:checked)) td:not(:first-child) { opacity: .45; text-decoration: line-through; }
.ds-pickhint { margin: 0 0 6px; }
.msg-todos { margin: 10px 0 2px; background: color-mix(in srgb, #f59e0b 8%, var(--panel)); }
.iv-nav { display: flex; align-items: center; gap: 8px; flex: none; } .iv-n { min-width: 56px; text-align: center; }
.iv-cap { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dev Tools › RestExplorer: catalogue | request + reply */
.rx { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
.rx-side { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 230px); }
.rx-side input[type=search] { width: 100%; box-sizing: border-box; }
.rx-ltabs { align-self: flex-start; }
.rx-list { overflow: auto; min-height: 0; margin: 0 -6px; }
.rx-grp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 8px 4px; cursor: default; }
.rx-live > summary.rx-grp { cursor: pointer; }
.rx-item { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; color: var(--fg); position: relative; }
.rx-item:hover { background: var(--head); }
.rx-in { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.rx-in .hint { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-del { position: absolute; right: 6px; top: 6px; color: var(--muted); padding: 0 4px; border-radius: 4px; visibility: hidden; }
.rx-item:hover .rx-del { visibility: visible; } .rx-del:hover { color: var(--bad); background: var(--bad-bg); }
.rx-mb { flex: none; width: 50px; font: 700 10.5px var(--mono); padding-top: 2px; }
.m-GET { color: var(--ok); } .m-POST { color: var(--warn); } .m-PATCH, .m-PUT { color: var(--accent); } .m-DELETE { color: var(--bad); } .m-HEAD { color: var(--muted); }
.rx-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rx-main > .card { margin: 0; }
.rx-kind { margin-bottom: 10px; }
.rx-line { display: flex; gap: 8px; align-items: stretch; }
.rx-line #rxU { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
.rx-m { font: 700 12.5px var(--mono); width: 96px; }
.rx-vars { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--info-bg); }
.rx-vars label { display: flex; gap: 6px; align-items: center; font: 12px var(--mono); }
.rx-vars input { width: 200px; font-family: var(--mono); font-size: 12.5px; }
.rx-tabs { margin: 12px 0 8px; }
.rx-n { color: var(--accent); font-weight: 600; }
.rx-kv { width: 100%; border-collapse: collapse; }
.rx-kv td { padding: 2px 4px 2px 0; } .rx-kv td.rx-on { width: 22px; } .rx-kv td:last-child { width: 30px; }
.rx-kv input:not([type=checkbox]) { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 12.5px; }
.rx-body { min-height: 180px; }
.rx-bbar { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.rx-auth { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.rx-auth label { display: flex; gap: 6px; align-items: center; } .rx-auth input { width: 260px; }
.rx-sname { display: flex; flex-direction: column; gap: 4px; } .rx-sname input { width: 100%; box-sizing: border-box; }
.rx-rbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 10px; }
.rx-st { font: 700 12.5px var(--mono); padding: 3px 9px; border-radius: 6px; background: var(--head); }
.rx-st.s2 { background: var(--ok-bg); color: var(--ok); } .rx-st.s3 { background: var(--info-bg); color: var(--accent); }
.rx-st.s4, .rx-st.s5 { background: var(--bad-bg); color: var(--bad); }
.rx-rbody pre { margin: 0; max-height: 60vh; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-json .j-k { color: var(--accent); } .rx-json .j-s { color: var(--ok); } .rx-json .j-num { color: var(--warn); } .rx-json .j-b, .rx-json .j-n { color: var(--bad); }
.rx-json .j-link { text-decoration: underline dotted; cursor: pointer; }
.rx-hdrs th { text-align: left; white-space: nowrap; font-family: var(--mono); font-size: 12px; } .rx-hdrs td { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .rx { grid-template-columns: 1fr; } .rx-side { position: static; max-height: 360px; } .rx-line { flex-wrap: wrap; } }

/* a request the AI picked up and then dropped (restart, API error): AI stopped · Resend */
.mstate.stalled { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.msg.st-stalled { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.build.stalled { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--fg); }
.build.stalled .wait-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.cl-line.stalled { background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); color: var(--warn); cursor: pointer; }
.card.ainext.stalled { align-items: center; }

/* a story's test results on its card: ring = passed (green) · failed (red) · not run (grey), passed / total inside */
.cl-line.tests { cursor: pointer; border: 1px solid var(--line); background: var(--panel); padding: 3px 8px 3px 4px; }
.cl-line.tests.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: var(--ok-bg); color: var(--ok); }
.cl-line.tests.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: var(--bad-bg); color: var(--bad); }
.tring { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--ok) 0 var(--p), var(--bad) var(--p) var(--f), var(--line) var(--f) 100%); }
.tring > span { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); display: grid; place-items: center;
  font: 700 9.5px/1 var(--mono); color: var(--fg); letter-spacing: -.3px; }

/* a story's promotion path on its card: one arc per org, the furthest reached inside; click = Where is the code? */
.cl-line.pathl { cursor: pointer; border: 1px solid var(--line); background: var(--panel); padding: 3px 8px 3px 4px; }
.cl-line.pathl.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.cl-line.pathl .cl-t { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; color: var(--muted); }
.cl-line.pathl .pr-on { color: var(--fg); font-weight: 600; }
/* Where is the code? */
.wc-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.wc-arrow { color: var(--muted); }
.wc-org { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.wc-org .hint { font-size: 12px; }
.wc-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--head); }
.wc-org.all { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); } .wc-org.all .wc-dot { background: var(--ok-bg); color: var(--ok); }
.wc-org.some .wc-dot { background: var(--warn-bg); color: var(--warn); }
.wc-org.error .wc-dot { background: var(--bad-bg); color: var(--bad); }
.wc-table td.wc-c { white-space: nowrap; font-size: 12.5px; }
.wc-c.fix { color: var(--ok); font-weight: 600; } .wc-c.later { color: var(--accent); } .wc-c.before, .wc-c.missing { color: var(--muted); }
.wc-c.other { color: var(--warn); } .wc-c.error { color: var(--bad); }
/* the card's double ring: outer = promotion path (one arc per org), inner = test results */
.pring2 { position: relative; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--arcs); display: grid; place-items: center; }
.pring2::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); }
.pring2::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--inner); }
.pring2 > span { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); display: grid; place-items: center;
  font: 700 8px/1 var(--mono); color: var(--fg); letter-spacing: -.4px; }
.cl-line.pathl.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.pl-sep { color: var(--muted); }
.pl-t { font-weight: 600; border-radius: 4px; padding: 0 3px; } .pl-t:hover { background: var(--head); }
.pl-t.ok { color: var(--ok); } .pl-t.bad { color: var(--bad); }
/* the card's promotion path: one circle per org = that org's tests; dashed = not there yet */
.cl-line.pathc { cursor: pointer; border: 1px solid var(--line); background: var(--panel); padding: 4px 8px 4px 5px; gap: 4px; }
.cl-line.pathc.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: var(--ok-bg); }
.cl-line.promready { border: 1px solid color-mix(in srgb, var(--ok) 55%, var(--line)); background: var(--ok-bg); color: var(--ok); padding: 3px 8px; }
.cl-line.promready b { color: var(--ok); }
.cl-line.pathc.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.pc-org { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto !important; border-radius: 6px; padding: 1px 3px 1px 1px; }
.pc-org[data-testrun]:hover { background: var(--head); }
.pc-name { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-org.on .pc-name { color: var(--fg); } .pc-org.here .pc-name { font-weight: 700; } .pc-org.bad .pc-name { color: var(--bad); }
.pc-arrow { color: var(--line); font-size: 11px; } .pc-arrow.on { color: var(--muted); }
.pc-ring { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.pc-ring > span { width: 18px; height: 18px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font: 700 7.5px/1 var(--mono); color: var(--fg); letter-spacing: -.4px; }
.pc-ring.off { border: 1.5px dashed var(--line); box-sizing: border-box; } .pc-ring.off > span { background: transparent; color: var(--muted); font-weight: 600; }
.pc-ring.done { background: var(--ok); } .pc-ring.done > span { color: var(--ok); font-size: 10px; }
/* Settings › Story cards */
.cs-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.cs-opt { display: flex; gap: 8px; align-items: flex-start; }
.cs-opt > span { display: flex; flex-direction: column; } .cs-opt .hint { font-size: 12px; }

/* a card's title row: title left, its actions right */
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.card-head h4 { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.card-head .card-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.info-i { color: var(--muted); cursor: help; font-weight: 400; }
.comp-card > summary { cursor: pointer; list-style: none; } .comp-card > summary h4 { display: inline; margin: 0; }
.comp-card > summary::before { content: "▸ "; color: var(--muted); } .comp-card[open] > summary::before { content: "▾ "; }
/* where the code is / tests by org: one circle per org, joined */
.oc-chain { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 0; padding: 4px 0 2px; }
.oc-org { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 84px; max-width: 120px; text-align: center; }
.oc-org b { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.oc-org.on b { color: var(--fg); } .oc-org .hint { font-size: 11.5px; line-height: 1.25; }
.oc-line { flex: 0 0 26px; height: 2px; margin-top: 20px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }
.oc-line.on { background: var(--ok); }
.oc-ring { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--ok) 0 var(--p), var(--bad) var(--p) var(--f), var(--line) var(--f) 100%); }
.oc-ring > span { width: 32px; height: 32px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font: 700 11px/1 var(--mono); color: var(--fg); }
.oc-ring.full > span { color: var(--ok); }
.oc-ring.off { background: none; border: 2px dashed var(--line); box-sizing: border-box; } .oc-ring.off > span { color: var(--muted); background: transparent; }
.oc-ring.err { background: var(--bad-bg); } .oc-ring.err > span { color: var(--bad); }
.oc-ring.dim { opacity: .55; }
.oc-ring.big { width: 64px; height: 64px; } .oc-ring.big > span { width: 50px; height: 50px; font-size: 14px; }
.oc-ring.bad > span { color: var(--bad); }
/* Test tab: overall ring + counts, then by org */
.tp-top { display: flex; align-items: center; gap: 16px; }
.tp-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.tp-n.ok b { color: var(--ok); } .tp-n.bad b { color: var(--bad); }
.tp-where { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.oc-ring.code { background: conic-gradient(var(--ok) 0 var(--p), var(--accent) var(--p) var(--f), var(--line) var(--f) 100%); }
.port-in { width: 110px; font-family: var(--mono); }

/* Settings › About */
.about { max-width: 980px; }
.about-hero { display: flex; gap: 18px; align-items: center; padding: 20px 22px; }
.about-hero h2 { margin: 0; font-size: 24px; font-weight: 500; display: block; } .about-hero h2 b { color: var(--accent); }
.about-hero .about-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.about-grid .card { margin: 0; } .about-grid h4 { margin: 0 0 6px; } .about-grid p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.about-foot { margin-top: 16px; }

/* editor: Run its tests - a split button (run / choose which test classes) */
.ed-run { display: inline-flex; border-radius: 9px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.12); border: 1px solid color-mix(in srgb, var(--accent) 70%, #000); }
.ed-run > button { border: 0; border-radius: 0; margin: 0; padding: 6px 12px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.ed-run > #edRunT { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); color: #fff; max-width: 320px; }
.ed-run > #edRunT:hover:not(:disabled) { filter: brightness(1.08); }
.ed-run-i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 9px; flex: none; }
.ed-run-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-run > .ed-run-more { background: var(--panel); color: var(--accent); border-left: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); font-weight: 600; }
.ed-run > .ed-run-more:hover:not(:disabled) { background: var(--info-bg); }
.ed-run.warn { border-color: color-mix(in srgb, var(--bad) 70%, #000); }
.ed-run.warn > #edRunT { background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 85%, #fff), var(--bad)); }
.ed-run > button:disabled { opacity: .7; cursor: default; }
.ed-plist { max-height: 42vh; overflow: auto; margin: 6px 0; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.ed-phead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 4px 2px; }
.ed-prow { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 3px 4px; margin: 0 !important; border-radius: 5px; font-size: 12.5px; color: var(--fg); cursor: pointer; }
.ed-prow:hover { background: var(--head); } .ed-prow .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ed-ptag { margin-left: auto; flex: none; font-size: 10.5px; padding: 0 6px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); }
.ed-pkeep { display: flex !important; flex-direction: row !important; gap: 6px; align-items: center; font-size: 12.5px; margin: 4px 0 !important; color: var(--fg); }
.ed-pfoot { display: flex; gap: 6px; align-items: center; }

/* review: switch between the comparison and either whole file */
.rv-fileview { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; position: sticky; top: 0; z-index: 3; background: var(--panel); padding: 4px 0; }
.rv-fileview .ts-seg button:disabled { opacity: .45; cursor: default; }
.rv-fulltitle { font-size: 12.5px; margin: 0 0 4px; }
.rv-full { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 12.5px; line-height: 1.45; overflow: auto; }
.rv-full > div { display: flex; } .rv-full > div:hover { background: var(--head); }
.rv-full .ln { flex: none; width: 46px; padding-right: 10px; text-align: right; color: var(--muted); user-select: none; border-right: 1px solid var(--line); }
.rv-full .lt { padding-left: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-hl { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 5px; margin: 0 0 0 auto !important; font-size: 12.5px; color: var(--fg); }
.rv-full .rv-gone { display: none; }
.rv-full.hl .m-add, .rv-full.hl .m-chg { background: var(--add-bg, #e6ffec); } .rv-full.hl .m-chg .lt { box-shadow: inset 3px 0 0 #d4a72c; }
.rv-full.hl .m-add .lt { box-shadow: inset 3px 0 0 var(--ok); }
.rv-full.hl .m-del { background: var(--del-bg, #ffebe9); } .rv-full.hl .m-del .lt { box-shadow: inset 3px 0 0 var(--bad); }
.rv-full.hl .rv-gone { display: flex; font-size: 11.5px; font-family: inherit; cursor: help; }
.rv-full.hl .rv-gone.out { color: var(--bad); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--bad) 8%, transparent) 6px 12px); }
.rv-full.hl .rv-gone.in { color: var(--ok); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ok) 8%, transparent) 6px 12px); }
.rv-full > div.flash { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the review's view switch: big, clear, the chosen view filled */
.rv-fileview { padding: 8px 10px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--head); box-shadow: 0 1px 3px rgba(0,0,0,.06); flex-wrap: wrap; }
.rv-fileview .ts-seg { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 9px; background: var(--panel); }
.rv-fileview .ts-seg button { padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.rv-fileview .ts-seg button + button { border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.rv-fileview .ts-seg button:hover:not(:disabled):not(.on) { background: var(--info-bg); color: var(--accent); }
.rv-fileview .ts-seg button.on { background: var(--accent); color: #fff; }
.rv-fileview .rv-hl { font-size: 13.5px; font-weight: 600; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.rv-fileview .rv-hl input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.rv-fileview > button.mini { padding: 6px 12px; font-size: 13px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); background: var(--panel); border-radius: 8px; }
.rv-fileview > button.mini:hover { background: var(--info-bg); }

/* Feedback: the bottom bar's button and its form */
.statusbar .toptools .tt.fbbtn { font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.fbdlg { width: min(560px, 94vw); }
.fb .fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.fb .fb-kind { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin: 0 !important; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--fg); }
.fb .fb-kind:has(input:checked) { border-color: var(--accent); background: var(--info-bg); color: var(--accent); font-weight: 600; }
.fb .fb-kind input { margin: 0; }
.fb textarea { width: 100%; box-sizing: border-box; }
/* Mac look: the "selected" colour is white there, so selected chips use dark text and a lifted card (not white on white) */
[data-skin="mac"] .ifilters .if.on, [data-skin="mac"] .prodsub .seg.on { color: var(--fg); border-color: var(--line); box-shadow: var(--mac-shadow); }
[data-skin="mac"] .ifilters .if.on .cnt { color: var(--muted); }

/* the AI server needs the person: what its hidden console shows */
.aiwait-screen { max-height: 220px; overflow: auto; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: 12px; white-space: pre-wrap; }

/* Turn on EagleDesk's AI */
.aisdlg { width: min(620px, 94vw); }
.ais-head { display: flex; gap: 14px; align-items: flex-start; }
.ais-head h3 { margin: 0 0 6px; } .ais-head p { margin: 0; color: var(--muted); }
.ais-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, #d97757, #7c3aed); box-shadow: 0 4px 14px rgba(124, 58, 237, .3); }
.ais-steps { list-style: none; padding: 0; margin: 18px 0 12px; display: grid; gap: 10px; }
.ais-step { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.ais-step.done { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.ais-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--info-bg); color: var(--accent); }
.ais-step.done .ais-n { background: var(--ok); color: #fff; }
.ais-b { min-width: 0; } .ais-b p { margin: 3px 0 8px; color: var(--muted); font-size: 13.5px; } .ais-step.done .ais-b p { margin-bottom: 0; }
.ais-foot { align-items: center; } .ais-off { display: inline-flex !important; flex-direction: row !important; gap: 6px; align-items: center; margin: 0 auto 0 0 !important; font-size: 13px; color: var(--muted); }
.sign-guide { margin: 0 12px 8px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-left: 4px solid var(--accent);
  border-radius: 10px; background: var(--info-bg); font-size: 13.5px; color: var(--fg); }
.sign-guide ol { margin: 6px 0 6px 18px; padding: 0; } .sign-guide li { margin: 2px 0; }
.sign-guide kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; background: var(--panel); }
.ais-found { font-size: 12.5px !important; color: var(--muted); margin: 4px 0 0 !important; overflow-wrap: anywhere; }
.ais-found .mono { color: var(--fg); } .ais-found button { margin-left: 6px; }

/* Sign in to Claude */
.sgn-steps { list-style: none; padding: 0; margin: 16px 0 12px; display: grid; gap: 8px; }
.sgn-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; color: var(--muted); }
.sgn-steps li > span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--head); }
.sgn-steps li.now { background: var(--info-bg); color: var(--fg); } .sgn-steps li.now > span { background: var(--panel); }
.sgn-steps li.done { color: var(--fg); } .sgn-steps li.done > span { background: var(--ok); color: #fff; }
.sgn-steps li .hint { margin-top: 4px; }
.sgn-methods { display: grid; gap: 6px; margin-top: 8px; } .sgn-methods button { text-align: left; }
/* Anonymous Apex: ✦ Write with AI */
.aic-pop { position: absolute; z-index: 1000; width: min(520px, calc(100vw - 16px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.2); padding: 14px; display: grid; gap: 10px; }
.aic-pop textarea { width: 100%; font: inherit; font-size: 14px; resize: vertical; }
.aic-pop .hint { margin: 0; font-size: 12px; } .aic-h { display: flex; align-items: baseline; gap: 8px; }
.aic-ex { display: flex; flex-wrap: wrap; gap: 6px; } .aic-ex button { font-size: 12px; }
.ax-aistat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; font-size: 13px; background: color-mix(in srgb, #7c3aed 9%, var(--panel));
  border-bottom: 1px solid var(--line); }
.ax-aistat.bad { background: var(--warn-bg); color: var(--warn); } .ax-aiacts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* Org Browser editor: ✦ Ask AI to change */
.ed-aistat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, #7c3aed 9%, var(--panel)); border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--line)); }
.ed-aistat.bad { background: var(--warn-bg); color: var(--warn); border-color: var(--line); }
.ed-aitext { display: grid; gap: 2px; min-width: 0; } .ed-aiacts { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ed-ver-ai .ed-vn, .ed-ver-ai-rejected .ed-vn { background: color-mix(in srgb, #7c3aed 18%, var(--panel)); }
/* ✦ AI buttons in the code editors - the same, prominent look everywhere */
.ai-cta { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; border: 0; font-weight: 600; font-size: 14px; padding: 8px 16px;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(91, 33, 182, .3); cursor: pointer; white-space: nowrap; }
.ai-cta:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 3px 12px rgba(91, 33, 182, .4); }
.ai-cta:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ed-tabrow { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); margin: 8px 0 0; }
.ed-tabrow .ed-tabs { flex: 1; border-bottom: 0; margin: 0; } .ed-tabrow .ai-cta { padding: 4px 14px; font-size: 13px; }
.ed-toprow { display: flex; align-items: stretch; gap: 10px; } .ed-toprow .ed-apex { flex: 1; min-width: 0; }
.ed-toprow .ai-cta { align-self: center; padding: 10px 18px; }
/* Where the code is: a circle opens that org's files */
.oc-org.click { cursor: pointer; border-radius: 10px; padding: 4px 2px; } .oc-org.click:hover { background: var(--head); }
.oc-org.open { background: var(--info-bg); outline: 1px solid var(--accent); }
.oc-tip { margin: 6px 0 0; font-size: 12px; }
.oc-detail { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.oc-dh { display: flex; align-items: baseline; gap: 8px; } .oc-dh .ghost { margin-left: auto; }
.oc-grp { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 10px 0 4px; }
.oc-grp.ok { color: var(--ok); } .oc-grp.bad { color: var(--warn); }
.oc-detail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.oc-f { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--head); }
.oc-fi { width: 18px; text-align: center; font-weight: 700; } .oc-f.fix .oc-fi { color: var(--ok); } .oc-f:not(.fix) .oc-fi { color: var(--warn); }
.oc-fn { display: grid; min-width: 0; } .oc-fn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } .oc-fn .hint { font-size: 11.5px; }
.oc-f .ghost { margin-left: auto; }
/* 💬 Feedback: tickets */
.fbdlg { width: min(620px, 94vw); }
.fb-head { display: flex; align-items: center; gap: 14px; } .fb-head h3 { margin: 0; }
.fb-tabs { display: flex; gap: 4px; } .fb-tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); font-size: 13.5px; position: relative; }
.fb-tabs button.on { background: var(--info-bg); color: var(--accent); font-weight: 600; }
.fb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-left: 6px; vertical-align: middle; }
.fbbtn.dot { position: relative; } .fbbtn.dot::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.fb-opts { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.fb-shots { display: flex; gap: 8px; flex-wrap: wrap; } .fb-shot { position: relative; }
.fb-shot img { width: 120px; height: 76px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; display: block; }
.fb-shot button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--fg); color: var(--panel); font-size: 11px; cursor: pointer; padding: 0; }
.fb-warn { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; margin: 6px 0; }
.fb-log { max-height: 160px; overflow: auto; font-size: 11.5px; background: var(--head); padding: 8px; border-radius: 6px; white-space: pre-wrap; }
.fbshotdlg { width: min(620px, 94vw); } .fb-preview { max-width: 100%; max-height: 300px; display: block; margin: 8px auto; border: 1px solid var(--line); border-radius: 6px; }
.fb-done { text-align: center; padding: 10px 0; } .fb-ok { font-size: 34px; color: var(--ok); } .fb-done .row-end { justify-content: center; }
.fb-list { display: grid; gap: 6px; margin: 8px 0; max-height: 380px; overflow: auto; }
.fb-row { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; font: inherit; color: inherit; position: relative; }
.fb-row:hover { background: var(--head); } .fb-row .hint { grid-column: 2 / 4; font-size: 12px; } .fb-row .fb-dot { position: absolute; top: 10px; right: 8px; }
.fb-num { font-weight: 700; color: var(--muted); } .fb-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-empty { padding: 24px 6px; text-align: center; }
.fb-th { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; } .fb-th .pill { margin-left: auto; }
.fb-thread { display: grid; gap: 8px; margin: 10px 0; max-height: 300px; overflow: auto; }
.fb-msg { padding: 8px 10px; border-radius: 8px; background: var(--head); } .fb-msg.team { background: var(--info-bg); border-left: 3px solid var(--accent); }
/* top bar: shrinks instead of being cut off; extra tabs go under More ▾ */
header.top .views { flex: 1 1 auto; min-width: 0; overflow: hidden; }
header.top .views .view.ovf { display: none !important; }
header.top .views > :not(.view):not(.nav-more) { flex: none; }
.nav-more { position: static; display: flex; align-self: stretch; flex: none; } .nav-more[hidden] { display: none; }
.nav-more-pop { position: fixed; z-index: 200; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.2); padding: 4px; display: grid; }
.nav-more-pop[hidden] { display: none; }
.nav-more-pop button { text-align: left; border: 0; background: none; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--fg); cursor: pointer; }
.nav-more-pop button:hover { background: var(--head); }
/* Cloudeation: the logo's "by Cloudeation" and the bottom-left signature link to cloudeation.net - quiet, never in the way */
a.brand-by { color: inherit; text-decoration: none; } a.brand-by:hover { opacity: 1; text-decoration: underline; }
.appfoot a.foot-by, .appfoot a.foot-by:visited { color: var(--muted); }
.appfoot .foot-by { margin-right: auto; align-self: center; padding: 0 16px; font-size: 11.5px; color: var(--muted); text-decoration: none; white-space: nowrap; opacity: .8; }
.appfoot a.foot-by:hover { color: var(--accent); opacity: 1; }
@media (max-width: 760px) { .appfoot .foot-by { display: none; } }

/* Minimize (setAiMin): the working card keeps its title + buttons, the ask box becomes one clickable line */
.aimin-btn .aimin-on, body.ai-min .aimin-btn .aimin-off { display: none; }
body.ai-min .aimin-btn .aimin-on { display: inline; }
.chat-minbar { display: none; }
body.ai-min .card.chat .chat-minbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: text;
  padding: 2px 4px; color: var(--muted); font-size: 13px; }
body.ai-min .card.chat .chat-full, body.ai-min .card.ainext .ainext-term, body.ai-min .card.ainext .ainext-t .hint { display: none; }
body.ai-min .card.ainext { padding-top: 8px; padding-bottom: 8px; }
body.ai-min .card.ainext > .sparkle { width: 18px; height: 18px; }
/* test step caption (window.edCaption) - shown only while a browser test runs */
#edCaption { position: fixed; left: 16px; bottom: 16px; max-width: min(420px, calc(100vw - 32px)); z-index: 9500; pointer-events: none;  /* above the sign-in screen and the tour */
  background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: .92; }
#edCaption.ok { border-left: 4px solid #2e9e5b; }
#edCaption.fail { border-left: 4px solid #d64545; }
/* AI tab, ask box at the bottom (Settings › Appearance): it stays at the foot of the pane while the discussion scrolls above it */
body.ask-bottom #detail .card.chat#chatCard { position: sticky; top: auto; bottom: 0; z-index: 1; margin: 10px 0 0; box-shadow: 0 10px 0 var(--bg), 0 -6px 12px -8px rgba(0,0,0,.25); }
body.ask-bottom #detail .thread-head { margin-top: 4px; }
.ap-row { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .ap-row > span { font-weight: 600; }
/* Overview: the root cause explained step by step (analysis.cause_explained) */
.ic-steps { margin-top: 8px; } .ic-steps > summary { cursor: pointer; color: var(--accent, #2563eb); font-weight: 600; font-size: 13px; }
.ic-steps .body { white-space: pre-wrap; margin-top: 6px; line-height: 1.5; }
/* Fix tab: where the bug is in the code and what the fix changes (analysis.code_explained) */
.cw-card > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.cw-card > summary::-webkit-details-marker { display: none; }
.cw-card > summary h4 { margin: 0; } .cw-card > summary h4::before { content: "▸ "; color: var(--muted); } .cw-card[open] > summary h4::before { content: "▾ "; }
.cw-card .cw-body { margin-top: 8px; max-height: 60vh; overflow: auto; font-size: 13px; line-height: 1.5; }
.cw-none p { margin: 4px 0 8px; }

.tests-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.tests-sum code { font-size: 12px; }
.tests-sum .tc-sum-acts { margin-left: auto; display: flex; gap: 6px; }
.deploy .tests-card { margin-top: 10px; }

.lr-backbar { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.lr-tlevels { display: grid; gap: 6px; margin-top: 10px; }
.lr-tlrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lr-tlrow > span:first-child { min-width: 190px; font-weight: 600; font-size: 13px; }
.lr-chip.sm { padding: 3px 10px; font-size: 12px; }

/* Ask AI (askshell.js lays it out by data-mode: docked - the page narrows -, expanded - 70% over the page -, full - a small
   window; a floating mode would add its own rule here; askai.js draws the interface inside it) */
.ask-panel { position: fixed; right: 0; top: 60px; bottom: 28px; width: 35vw; z-index: 40; display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: -6px 0 18px rgb(0 0 0 / .10);
  transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.ask-panel.open { transform: none; visibility: visible; transition: transform .22s ease; }
.ask-panel[data-mode="expanded"] { box-shadow: -10px 0 30px rgb(0 0 0 / .18); }
body.ask-docked > section, body.ask-docked > .panes, body.ask-docked > .subbar { margin-right: var(--askDock, 35vw); }  /* the pages, not the header, banners or status bar */
body > section, body > .panes, body > .subbar { transition: margin-right .22s ease; }
body.ask-resizing > * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .ask-panel, .ask-panel.open, body > * { transition: none !important; } }
/* the divider: drag it, or focus it and use the arrow keys */
.askp-grip { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 4; }
.askp-grip::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s; }
.askp-grip:hover::after, .askp-grip:focus-visible::after, body.ask-resizing .askp-grip::after { background: var(--accent); }
.askp-grip:focus-visible { outline: none; }
.ask-panel[data-mode="expanded"] .askp-grip, .ask-panel[data-mode="full"] .askp-grip { display: none; }
/* header: name and buttons, then org · context · AI status */
.askp-head { padding: 8px 10px 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel); display: grid; gap: 6px; }
.askp-row1 { display: flex; align-items: center; gap: 8px; }
.askp-brand { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; }
.askp-brand b { display: block; font-size: 14px; line-height: 1.2; }
.askp-brand small { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; }
.askp-logo .sparkle { width: 20px; height: 20px; color: var(--accent); animation: none; }
.askp-btns { display: flex; gap: 2px; }
.askp-ib, .askc-ib { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--fg); cursor: pointer; }
.askp-ib:hover, .askc-ib:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.askp-ib[aria-expanded="true"], .askp-ib[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.askp-ib:focus-visible, .askc-ib:focus-visible, .askc-send:focus-visible, .ask-sugg-c:focus-visible, .askc-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.askp-ib svg, .askc-ib svg, .askc-send svg, .askc-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.askp-row2 { display: flex; align-items: center; gap: 12px; font-size: 12px; min-width: 0; }
.askp-row2 .askp-org { display: flex; flex-direction: row; align-items: center; gap: 5px; margin: 0; color: var(--fg); font-size: 12px; }
.askp-row2 .askp-org select { font-size: 12px; padding: 3px 22px 3px 7px; width: auto; max-width: 170px; min-height: 0; height: 26px; }
.askp-ctx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.askp-st { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; white-space: nowrap; font-weight: 600; }
.askp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.askp-st[data-k="ready"] .askp-dot { background: #16a34a; }
.askp-st[data-k="offline"] .askp-dot, .askc-note.offline .askp-dot { background: #9ca3af; }
.askp-st[data-k="needs"] .askp-dot, .askc-note.needs .askp-dot { background: #d97706; }
.askp-st[data-k="error"] .askp-dot, .askc-note.error .askp-dot { background: #dc2626; }
.askp-st .spin, .askc-note .spin { width: 11px; height: 11px; }
/* body: one column; the history list and the details slide over it (the expanded panel keeps the list beside it) */
.ask-panel .askview { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.ask-panel .ask-wrap { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.ask-panel .ask-side { display: none; }
.ask-panel.lists .ask-side { display: flex; position: absolute; inset: 0 auto 0 0; width: min(320px, 88%); z-index: 3; box-shadow: 8px 0 20px rgb(0 0 0 / .12); }
.ask-panel[data-mode="expanded"]:not(.nolists) .ask-wrap { grid-template-columns: 280px minmax(0, 1fr); }
.ask-panel[data-mode="expanded"]:not(.nolists) .ask-side { display: flex; position: static; width: auto; box-shadow: none; }
.ask-panel .ask-info { display: none; }
.ask-panel.details .ask-info { display: grid; position: absolute; inset: 0 0 0 auto; width: min(320px, 88%); z-index: 3; box-shadow: -8px 0 20px rgb(0 0 0 / .12); }
.ask-panel .ask-main { padding: 10px 14px 12px; gap: 8px; }
/* welcome: compact, at the top */
.ask-panel .ask-hello { text-align: left; padding: 4px 2px 0; margin: 0; flex: 1; min-height: 0; overflow: auto; display: block; max-width: none; justify-items: stretch; }
.ask-hello-t { display: flex; gap: 10px; align-items: center; }
.ask-hello-t .sparkle { width: 26px; height: 26px; color: var(--accent); animation: none; }
.ask-panel .ask-hello h2 { margin: 0; font-size: 18px; }
.ask-sub { color: var(--muted); font-size: 12.5px; }
.ask-panel .ask-hello > p { margin: 10px 0 12px; font-size: 12.5px; line-height: 1.5; }
.ask-sugg-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.ask-sugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.ask-sugg-c { text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg);
  font: inherit; font-size: 13px; line-height: 1.35; cursor: pointer; }
.ask-sugg-c:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
/* composer: fixed at the bottom while the conversation scrolls */
.ask-composer { flex: none; display: grid; gap: 6px; }
.askc-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 0 4px; flex-wrap: wrap; }
.askc-note[hidden] { display: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.askc-box { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 8px 6px 12px; display: grid; gap: 4px;
  box-shadow: 0 1px 3px rgb(0 0 0 / .05); }
.askc-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.askc-box textarea { border: 0; background: transparent; resize: none; padding: 4px 0; min-height: 24px; max-height: 220px; font: inherit; font-size: 14px;
  outline: none; box-shadow: none; width: 100%; color: var(--fg); }
.askc-box .thumbs:empty { display: none; }
.askc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.askc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); max-width: 100%; }
.askc-x { width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: inherit; }
.askc-x svg { width: 12px; height: 12px; }
.askc-x:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.askc-bar { display: flex; align-items: center; gap: 2px; }
.askc-keys { margin-left: 6px; margin-right: auto; font-size: 11px; }
.askc-send { width: 32px; height: 32px; border-radius: 8px; border: 0; background: var(--accent); color: #fff; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.askc-send:disabled { opacity: .4; cursor: default; }
.askc-send .spin { width: 14px; height: 14px; border-color: rgb(255 255 255 / .4); border-top-color: #fff; }
.ask-panel[data-mode="full"] { border-left: 0; }
.ask-panel[data-mode="full"] .askc-keys { display: none; }
.views .asktab .sparkle, [data-askgeneral] .sparkle { width: 14px; height: 14px; vertical-align: -2px; fill: currentColor; animation: none; }
.askp-st .spin, .askc-note .spin { border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); }
.ask-panel .ask-tabs button { white-space: nowrap; font-size: 12px; padding: 6px 4px; }
/* Ask AI, phase 2: what a question is about */
.ask-about { margin: 2px 0 2px; font-size: 13px; }
.ask-sugg-c { display: grid; gap: 2px; }
.ask-sugg-c b { font-size: 13px; }
.ask-sugg-c .hint { font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.askc-chip.loaded { background: color-mix(in srgb, #16a34a 10%, var(--panel)); border-color: color-mix(in srgb, #16a34a 35%, transparent); }
.askc-add { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg); cursor: pointer; }
.askc-add:hover { border-color: var(--accent); color: var(--accent); }
.askc-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-askai .sparkle, .b-ask .sparkle { width: 13px; height: 13px; vertical-align: -2px; animation: none; color: var(--accent); }
.b-acts { white-space: nowrap; } .b-acts .b-ask { margin-right: 4px; padding: 3px 6px; }
/* Ask AI, phase 3: formatted answers (askmd.js), moving around a conversation, narrow panels */
.ask-body.md { white-space: normal; overflow-wrap: anywhere; }
.ask-body.md > :first-child { margin-top: 0; } .ask-body.md > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 8px; }
.md-h { font-weight: 700; margin: 12px 0 6px; line-height: 1.3; } .md-h1 { font-size: 17px; } .md-h2 { font-size: 15.5px; } .md-h3, .md-h4 { font-size: 14px; }
.md-list { margin: 0 0 8px; padding-left: 22px; } .md-list li { margin: 2px 0; } .md-list ul, .md-list ol { margin: 2px 0; padding-left: 18px; }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.md-ic { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 7%, transparent); overflow-wrap: anywhere; }
.md-table { margin: 4px 0 10px; max-width: 100%; } .md-table table { font-size: 12.5px; }
.md-code { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--fg) 3.5%, var(--panel)); }
.md-code-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; font-size: 11.5px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 5%, var(--panel)); }
.md-code-h > span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.md-code-h .md-copy { margin-left: auto; }
.md-code pre { margin: 0; padding: 10px 12px; overflow: auto; max-height: 480px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: pre; tab-size: 4; }
.md-code code { font-family: inherit; overflow-wrap: normal; }
.tk-k { color: #7c3aed; font-weight: 600; } .tk-s { color: #b45309; } .tk-c { color: #6b7280; font-style: italic; } .tk-n { color: #0e7490; } .tk-t { color: #1d4ed8; }
@media (prefers-color-scheme: dark) { .tk-k { color: #c4b5fd; } .tk-s { color: #fbbf24; } .tk-c { color: #9ca3af; } .tk-n { color: #67e8f9; } .tk-t { color: #93c5fd; } }
.ask-main { position: relative; }
.ask-jump { position: absolute; right: 22px; bottom: 150px; z-index: 2; border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
.ask-jump.new { background: var(--accent); color: #fff; border-color: var(--accent); }
.ask-jump[hidden] { display: none; }
.ask-msg.flash { outline: 2px solid var(--accent); outline-offset: 2px; }
/* narrow panels: fewer words, nothing clipped */
.ask-panel { container-type: inline-size; }
@container (max-width: 520px) {
  .askp-brand small, .askc-keys { display: none; }
  .askp-row2 { gap: 8px; } .askp-ctx .hint { display: none; }
  .ask-sugg { grid-template-columns: 1fr; }
  .ask-head .ask-title { min-width: 0; flex: 1 1 100%; }
}
@container (max-width: 420px) { .askp-ctx { display: none; } .ask-meta .ghost.mini { padding: 2px 6px; } }
/* Ask AI floating window (askshell.js, data-mode="floating"): over the page, moved by its title bar, resized from any edge */
.ask-panel[data-mode="floating"] { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgb(0 0 0 / .28);
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s; }
.ask-panel[data-mode="floating"].open { transform: none; opacity: 1; transition: transform .2s ease, opacity .2s ease; }
.ask-panel[data-mode="floating"] .askp-grip { display: none; }
.ask-panel[data-mode="floating"] .askp-row1 { cursor: grab; user-select: none; }
.ask-panel[data-mode="floating"] .askp-row1:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
body.ask-moving, body.ask-moving * { cursor: grabbing !important; user-select: none; }
.askp-rz { position: absolute; z-index: 5; display: none; }
.ask-panel[data-mode="floating"] .askp-rz { display: block; }
.askp-rz-n, .askp-rz-s { left: 10px; right: 10px; height: 6px; cursor: ns-resize; } .askp-rz-n { top: -3px; } .askp-rz-s { bottom: -3px; }
.askp-rz-e, .askp-rz-w { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; } .askp-rz-e { right: -3px; } .askp-rz-w { left: -3px; }
.askp-rz-ne, .askp-rz-nw, .askp-rz-se, .askp-rz-sw { width: 14px; height: 14px; }
.askp-rz-ne { top: -3px; right: -3px; cursor: nesw-resize; } .askp-rz-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
.askp-rz-nw { top: -3px; left: -3px; cursor: nwse-resize; } .askp-rz-se { bottom: -3px; right: -3px; cursor: nwse-resize; }
@media (prefers-reduced-motion: reduce) { .ask-panel[data-mode="floating"], .ask-panel[data-mode="floating"].open { transition: none !important; } }
.askc-send { margin-left: auto; }
.ask-panel[data-mode="floating"] .askp-head { border-radius: 12px 12px 0 0; }
.ask-panel[data-mode="floating"] .askview { border-radius: 0 0 12px 12px; }  /* the edges stay outside the clip, so they can be grabbed */
/* the floating AI button (askshell.js) */
.ask-fab { position: fixed; z-index: 39; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .25); touch-action: none; transition: transform .15s ease, box-shadow .15s ease; }
.ask-fab[hidden] { display: none; }
.ask-fab:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgb(0 0 0 / .3); }
.ask-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, #fff); outline-offset: 2px; }
.ask-fab .sparkle { width: 22px; height: 22px; color: #fff; animation: none; }
.ask-fab.dragging { cursor: grabbing; transform: scale(1.08); transition: none; }
.ask-fab.working::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: askfab-pulse 1.4s ease-out infinite; }
@keyframes askfab-pulse { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.ask-fab-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; display: none; }
.ask-fab.ready .ask-fab-dot { display: block; }
.ask-fab[data-k="offline"]:not(.working):not(.ready), .ask-fab[data-k="error"]:not(.working):not(.ready) { background: color-mix(in srgb, var(--accent) 70%, #6b7280); }
@media (prefers-reduced-motion: reduce) { .ask-fab.working::before { animation: none; opacity: .6; } .ask-fab { transition: none; } }
button.ask-fab { border-radius: 50% !important; border: 0 !important; padding: 0 !important; }  /* themes give buttons square corners */

/* myStories › Overview (overview.js): header line, section bar (sticky), summary blocks, status tiles, sections */
.ov { display: grid; gap: 10px; padding-top: 6px; }
.ov-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.ov-head .ov-focus { margin-left: auto; }
.ov-nav { position: sticky; top: 0; z-index: 6; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 6px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.ov-nav::-webkit-scrollbar { display: none; }
.ov-nav button { border: 0; background: transparent; padding: 6px 11px; border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ov-nav button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.ov-nav button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ov-nav button:focus-visible, .ov-tile:focus-visible, .ov-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ov-n { font-size: 11px; font-weight: 600; opacity: .75; }
.ov-body { display: grid; gap: 10px; min-width: 0; }
.ov-body > .card { margin: 0; }
.ov-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ov-block { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; background: var(--panel); display: grid; gap: 6px; align-content: start; min-width: 0; }
.ov-block.p { border-left-color: #d97706; } .ov-block.c { border-left-color: #dc2626; } .ov-block.f { border-left-color: #16a34a; }
.ov-bk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ov-bv { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ov-bv .md-p { margin: 0 0 4px; } .ov-bv .hint { display: block; font-size: 11.5px; margin-top: 2px; }
.ov-more { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--accent); }
h4 .ov-more { float: right; font-weight: 600; }
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ov-tile { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font: inherit; color: var(--fg); min-width: 0; }
.ov-tile:disabled { cursor: default; opacity: 1; } .ov-tile:not(:disabled):hover { border-color: var(--accent); }
.ov-tile b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-tile .hint { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tk { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ov-tile.good { border-left: 4px solid #16a34a; } .ov-tile.warn { border-left: 4px solid #d97706; } .ov-tile.bad { border-left: 4px solid #dc2626; }
.ov-next { font-size: 13px; padding: 0 2px; }
.ov-h { margin: 6px 0 0; font-size: 14px; }
.ov-ai > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.ov-ai > summary::-webkit-details-marker { display: none; }
.ov-ai > summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
.ov-ai[open] > summary::before { transform: rotate(90deg); }
.ov-ai > summary h4 { margin: 0; }
.ov-src { margin-left: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ov-ai > .body { margin-top: 8px; }
.ov-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 13.5px; }
.ov-row + .ov-row { border-top: 1px solid var(--line); }
.ov-rk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 2px; }
.ov-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-ref { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12.5px; background: var(--bg); max-width: 100%; overflow-wrap: anywhere; }
.ov-ref.changed { border-color: color-mix(in srgb, #16a34a 50%, var(--line)); }
.ov-kv { width: 100%; } .ov-kv td { vertical-align: top; padding: 4px 6px; } .ov-note td { font-size: 12.5px; color: var(--muted); padding-top: 0; }
.ov-st { margin: 8px 0 2px; }
.ov-st-proposed { border-color: #d97706; } .ov-st-approved { border-color: #2563eb; } .ov-st-deployed { border-color: #16a34a; } .ov-st-rejected { opacity: .7; }
.ov-step { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 6px 0; background: var(--bg); }
.ov-step > summary { cursor: pointer; font-size: 13.5px; }
.ov-step > .body { margin-top: 6px; }
.ov-latest { border: 0; padding: 0; }
.ov-empty { padding: 20px 4px; }
.ov .dg-card .dg-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ov .dg-chart { min-height: 120px; }
/* Focus: the Overview takes the page (the story list and the changes panel come back on Exit focus, F or a link to Fix) */
body.ov-focused .panes:has(.ov) { grid-template-columns: 0 0 minmax(0, 1fr) 0 0; }
body.ov-focused .panes:has(.ov) > .list, body.ov-focused .panes:has(.ov) > #split1, body.ov-focused .panes:has(.ov) > #split2, body.ov-focused .panes:has(.ov) > .changes { display: none; }
body.ov-focused .panes:has(.ov) > .detail { max-width: 1180px; width: 100%; justify-self: center; }
.ov-nav { top: var(--dheadH, 0px); }  /* under the issue header, which is sticky too */

/* Contact us: the address big enough to read and copy, then where to write the email */
.ctdlg .ct-addr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ctdlg .ct-addr b { font-size: 17px; user-select: all; }
.ctdlg .ct-open { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* right-click menu in the app window (ctxmenu.js) */
.ctxmenu { position: fixed; z-index: 10000; min-width: 170px; padding: 4px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 13px; }
.ctxmenu button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; cursor: default; }
.ctxmenu button:hover { background: var(--accent); color: #fff; }
.ctxmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }