/* Independent boxes share an edge, without an enclosing housing. */
.console { gap: var(--gap); padding: 0; border: 0; border-radius: 0; background: transparent; }
.console-title { position: relative; flex: none; }
.greeting { position: relative; min-height: 102px; padding: 22px 20px 18px; border-radius: 10px 10px 0 0; corner-shape: superellipse(var(--corner-k)); background: var(--hot); color: var(--lit-ink-1); }
.greeting h1 { margin: 0; font: 400 31px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: -.025em; }
.greeting p { margin: 12px 0 0; font: var(--type-micro); }
/* Custom project-drawn SVG controls; independent of the licensed Micrographics sprite. */
.workspace-tools { position: relative; display: flex; align-items: center; gap: 4px; pointer-events: auto; }
.workspace-tools > button { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; color: var(--ink-3); border-radius: 7px; }
#help-toggle { position: relative; }
#help-toggle[data-attention="true"]::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--hot); }
.workspace-tools > button svg { width: 22px; height: 22px; }
.workspace-tools > button:is(:hover, :focus-visible) { background: var(--surface-2); color: var(--hot); }
.workspace-tools > button:active { background: var(--screen); }
.workspace-tools > button[aria-disabled="true"] { color: var(--hot); cursor: progress; }
.refresh-status { position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: min(320px, 50vw); padding: 5px 8px; background: var(--stage); color: var(--ink-3); border-radius: 4px; font: var(--type-micro); text-align: right; pointer-events: none; }
.refresh-status:empty { display: none; }
.workspace-tools[data-refresh="failed"] .refresh-status { color: var(--hot); }
.workspace-tools[data-refresh="checking"] .refresh-symbol { animation: refresh-turn 1.1s linear infinite; }
@keyframes refresh-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .workspace-tools[data-refresh="checking"] .refresh-symbol { animation: none; } }
.console-title .mode-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 4px; }
.console-title .mode-tabs button { display: flex; flex-direction: row; align-items: center; justify-content: center; min-width: 0; min-height: 40px; gap: 6px; padding: 8px 4px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: var(--surface); color: var(--ink-3); font: var(--type-label); letter-spacing: .04em; }
.console-title .mode-tabs button:not([aria-selected="true"]):is(:hover, :focus-visible) { color: var(--ink-1); background: var(--surface-2); }
.console-title .mode-tabs button[aria-selected="true"] { background: var(--hot); border-color: var(--hot); color: var(--lit-ink-1); }
.console-title .tab-reading { min-width: 0; }
.console-title .tab-label { display: block; }
.console-title .mode-tabs .tab-symbol { display: block; }
.console-title .tab-symbol svg { width: 13px; height: 13px; }
.console-title .tab-key { display: none; }
.view-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.view-area { flex: 1; min-height: 0; height: auto; border-radius: 0; }
.panel { padding: 0; }
.panel:focus-visible { outline-offset: -3px; border-radius: 8px; }
.bucket, .signals-overview { gap: var(--gap); min-height: 100%; }
.bucket > .body, .signals-overview > .body, .body > .money-instrument { flex: 1; }
.body > .instrument, .money-spend, .review-note { flex-shrink: 0; }
.body-box, .detail { flex: 1; }
.feed-meta { display: none !important; }
.body, .money-instrument { gap: var(--gap); }
.body-box { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; corner-shape: superellipse(var(--corner-k)); background: var(--surface); }
.body-box:empty { display: none; }
.body-box > :first-child { margin-top: 0; }
.body-box > :first-child:not(input):not(button) { border-top: 0; }
.body-box .feed-footnote { margin-bottom: 0; }
.review-note { margin: 0; padding: 8px 20px; border: 1px solid var(--line); border-radius: 8px; corner-shape: superellipse(var(--corner-k)); background: var(--surface); }
.review-note summary { padding: 14px 0 0; line-height: 1.5; }
.detail { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; corner-shape: superellipse(var(--corner-k)); }
.body-box > .list, .detail > .list { margin-inline: -20px; }
.body-box > .list > li, .detail > .list > li { padding-inline: 20px; border-radius: 0; }
.list > li:has(a:is(:hover, :focus-visible)) { background: var(--surface-2); }
.scroll-rail { right: 3px; top: 10px; bottom: 10px; background: transparent; }
.scroll-rail i { background: var(--ink-4); opacity: .65; }
.player { border: 1px solid var(--line); border-radius: 10px; corner-shape: superellipse(var(--corner-k)); background: var(--surface-audio); padding: 16px 20px 14px; }
.level i { background: var(--hot); opacity: .18; }
.level i.on, .level i.on.peak { background: var(--hot); opacity: 1; }
.shortcut-help { top: 0; max-height: 100%; border-radius: 10px; }
.instrument { min-width: 0; padding: 16px; background: var(--screen); border-radius: 8px; corner-shape: superellipse(var(--corner-k)); }
.instrument-label { font: var(--type-label); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.instrument-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.instrument-heading > :first-child { color: var(--ink-1); }
.instrument-action { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 0; color: var(--ink-1); font: var(--type-micro); }
.instrument-action:hover { color: var(--hot); }
.instrument-empty p { margin: 24px 0 8px; color: var(--ink-2); }
.task-rail { display: grid; grid-template-columns: repeat(var(--positions), minmax(28px, 1fr)); position: relative; margin: 12px 0 16px; border-bottom: 1px solid var(--ink-4); }
.task-position { min-width: 0; padding: 0 3px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-3); font: var(--type-label); }
.task-pin { width: 5px; height: 13px; border: 1px solid var(--ink-3); transition: transform 100ms linear; }
.task-position[data-status="blocked"] .task-pin { border-color: var(--hot); background: var(--hot); }
.task-position[data-status="in_progress"] .task-pin { border-color: var(--good); background: var(--good); }
.task-position[data-status="done"] .task-pin { height: 2px; margin: 5px 0 6px; background: var(--ink-3); }
.task-position:is(:hover, :focus-visible) .task-pin { transform: translateY(-3px); }
.task-position[aria-pressed="true"] { color: var(--hot); }
.task-index-cursor { pointer-events: none; position: absolute; left: 0; bottom: -2px; width: calc(100% / var(--positions)); height: 3px; background: var(--hot); transform: translateX(calc(var(--selected, 0) * 100%)); transition: transform 140ms linear; }
.step-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 9px 8px; border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 4px; background: var(--surface-audio); color: var(--ink-3); font: var(--type-micro); }
.step-key .step-light { display: block; flex: none; width: 7px; height: 3px; margin: 0; border: 0; border-radius: 1px; background: var(--ink-4); transform: none; }
.step-key:is(:hover, :focus-visible) { color: var(--ink-1); background: var(--surface-2); }
.step-key:focus-visible { outline: 0; border-color: var(--ink-2); }
.step-key[aria-pressed="true"] { color: var(--ink-1); background: var(--surface-2); border-bottom-color: var(--hot); }
.step-key[aria-pressed="true"] .step-light { background: var(--hot); }
.step-key:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .step-key:active { transform: none; } }
.task-position.step-key .step-light { height: 3px; margin: 0; border: 0; background: var(--ink-4); transform: none; }
.task-position.step-key[aria-pressed="true"] .step-light { background: var(--hot); }
.task-aperture { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 66px; }
.index-counter { padding-top: 3px; font: 400 36px/1 var(--font-display); letter-spacing: -.04em; color: var(--display-ink); }
.task-reading { margin: 0; font: 500 18px/1.25 var(--font-sans); overflow-wrap: anywhere; }
.instrument-facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; }
[data-task-status="blocked"] .task-state { color: var(--hot); }
[data-task-status="in_progress"] .task-state { color: var(--good); }
.reading-action { min-width: 0; }
.instrument-transport { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--ink-4); margin-top: 12px; padding-top: 8px; }
.rocker { display: flex; align-items: center; gap: 8px; }
.rocker-key { min-width: 32px; min-height: 32px; display: grid; place-items: center; padding: 8px; border: 1px solid var(--ink-4); border-radius: 4px; }
.rocker-key svg { width: 12px; height: 12px; }
.rocker-key:not(:disabled):hover { color: var(--hot); border-color: var(--hot); }
.rocker-key:not(:disabled):active svg { transform: translateY(1px); }
.question-drawer, .index-drawer, .highlights-drawer { border-top: 1px solid var(--line); }
.question-drawer summary, .index-drawer summary, .highlights-drawer summary { cursor: pointer; padding: 12px 0; color: var(--ink-3); font: var(--type-label); letter-spacing: .08em; text-transform: uppercase; }
.review-highlight { padding: 12px 0; border-top: 1px solid var(--line); }
.review-highlight h2 { margin: 8px 0; font: 500 16px/1.3 var(--font-sans); }
.review-highlight p { margin: 0; color: var(--ink-2); font: var(--type-micro); }
.question-drawer summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.question-drawer summary::-webkit-details-marker { display: none; }
.question-drawer summary svg { width: 14px; height: 14px; margin-left: auto; }
.question-drawer[open] summary svg { transform: rotate(180deg); }
.drawer-count { color: var(--hot); }
.question-prompt { margin: 2px 0 14px; font: var(--type-body); color: var(--ink-1); }
.index-row { width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: baseline; text-align: left; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font: var(--type-micro); color: var(--ink-2); }
.index-row-number, .index-row-state { font: var(--type-label); color: var(--ink-3); }
.index-row:hover, .index-row[aria-pressed="true"], .index-row[aria-pressed="true"] .index-row-number { color: var(--hot); }
.message-sorter { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sorter-channel { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0; }
.sorter-channel .instrument-label { color: var(--ink-2); }
.slip-stack { display: block; position: relative; width: 100%; height: 68px; margin-top: 10px; border: 1px solid var(--ink-4); border-top: 0; border-radius: 0 0 4px 4px; }
.slip-stack i { position: absolute; top: 38px; left: 12%; width: 76%; height: 24px; background: var(--screen); border: 1px solid var(--ink-3); transform: translateY(calc(var(--slip) * -7px)); transition: transform 140ms linear, border-color 120ms; }
.slip-stack i::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 1px; background: var(--ink-4); }
.sorter-channel:is(:hover, :focus-visible) .slip-stack i:last-of-type { transform: translateY(calc(var(--slip) * -7px - 5px)) rotate(-4deg); }
.sorter-channel[aria-pressed="true"] .slip-stack i:last-of-type { border-color: var(--hot); }
.slip-overflow { position: absolute; bottom: 3px; right: 4px; font: var(--type-label); color: var(--hot); }
.channel-count { font: 400 34px/1 var(--font-display); color: var(--display-ink); margin-top: 10px; }
.sorter-channel[aria-pressed="true"] .channel-count, .sorter-channel[aria-pressed="true"] .instrument-label { color: var(--hot); }
.sorter-routing { height: 2px; background: var(--ink-4); margin: 16px 0 0; }
.sorter-routing i { display: block; width: 33.333%; height: 2px; background: var(--hot); transform: translateX(calc(var(--channel, 0) * 100%)); transition: transform 140ms linear; }
.comms-instrument { --channel: 0; }
.comms-queue { margin: 0 -20px; padding: 0; list-style: none; }
.comms-queue li { display: grid; grid-template-columns: 20px minmax(0, 1fr) 12px; gap: 10px; align-items: baseline; border-top: 1px solid var(--line); padding: 16px 20px; border-radius: 0; }
.comms-queue li:has(a:is(:hover, :focus-visible)) { background: var(--surface-2); }
.comms-queue .queue-title:is(:hover, :focus-visible) { color: var(--ink-1); }
.queue-position, .queue-source { font: var(--type-label); color: var(--ink-3); }
.queue-reading { display: flex; align-items: flex-start; gap: 8px; }
.queue-confidence { display: inline-flex; flex: none; width: 17px; height: 21px; margin-top: 1px; color: var(--ink-3); }
.queue-confidence svg { width: 17px; height: 21px; stroke-width: 2.5; stroke-linecap: square; }
.queue-confidence path { opacity: .25; }
.queue-confidence .level-1 { opacity: 1; }
.queue-confidence-medium .level-2, .queue-confidence-high .level-2, .queue-confidence-high .level-3 { opacity: 1; }
.queue-confidence-high { color: var(--good); }
.queue-confidence-low { color: var(--hot); }
.queue-source { margin-top: 7px; }
.queue-title { font: var(--type-body); overflow-wrap: anywhere; }
.queue-open { color: var(--ink-3); }
.comms-queue li:has(a:hover) .queue-open { color: var(--hot); }
.empty-queue { color: var(--ink-2); font: var(--type-body); }
.pattern-detents { display: grid; grid-template-columns: repeat(var(--positions), minmax(22px, 1fr)); gap: 3px; position: relative; border-bottom: 1px solid var(--ink-4); margin: 18px 0; }
.pattern-detent { padding: 0 2px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-3); font: var(--type-label); font-size: 9px; min-width: 0; }
.pattern-stem { position: relative; width: 100%; height: 38px; display: flex; align-items: flex-end; justify-content: center; }
.pattern-stem i { display: block; position: relative; height: 24px; width: 1px; background: var(--ink-4); transition: transform 100ms linear, background-color 100ms; }
.pattern-stem i::before { content: ''; position: absolute; top: -6px; left: -3px; width: 7px; height: 7px; border: 1px solid var(--ink-3); border-radius: 50%; background: var(--screen); }
.pattern-detent:is(:hover, :focus-visible) .pattern-stem i { transform: translateY(-4px); }
.pattern-detent[aria-pressed="true"] { color: var(--hot); }
.pattern-detent[aria-pressed="true"] .pattern-stem i { background: var(--hot); }
.pattern-detent[aria-pressed="true"] .pattern-stem i::before { border-color: var(--hot); background: var(--hot); }
.pattern-detents::after { content: ''; pointer-events: none; position: absolute; bottom: -2px; left: 0; width: calc(100% / var(--positions)); height: 3px; background: var(--hot); transform: translateX(calc(var(--selected, 0) * 100%)); transition: transform 140ms linear; }
.scanner-reading { display: flex; flex-direction: column; gap: 14px; }
.scanner-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.scanner-value > :first-child { margin-right: auto; color: var(--ink-1); }
.scanner-count { color: var(--display-ink); font: 400 34px/1 var(--font-display); }
.scanner-title { margin: 0 0 10px; font: 500 18px/1.25 var(--font-sans); overflow-wrap: anywhere; }
.pattern-instrument > .instrument-action { margin-top: 14px; }
@media (max-width: 760px) {
  .console { padding: 0; }

  .panel { padding: 0; }
  .bucket, .signals-overview { gap: var(--gap); }
  .player { padding: 12px 16px 10px; }
  .body-box { padding: 16px; }
  .review-note { padding: 8px 16px; }
  .comms-queue { margin-inline: -16px; }
  .comms-queue li { padding-inline: 16px; }
  .body-box > .list, .detail > .list { margin-inline: -16px; }
  .body-box > .list > li, .detail > .list > li { padding-inline: 16px; }
}
@media (max-width: 360px) {
  .panel { padding: 0; }
  .instrument { padding: 14px; }
  .task-aperture { grid-template-columns: 63px minmax(0, 1fr); gap: 10px; }
  .index-counter { font-size: 34px; }
  .task-reading { font-size: 17px; }
  .instrument-label { font-size: 9px; }
  .message-sorter { gap: 8px; }
  .channel-count { font-size: 29px; }
}
@media (max-height: 700px) {
}

@media (max-width: 360px) { .greeting { padding: 19px 16px 16px; min-height: 96px; } .greeting h1 { font-size: 26px; } .console-title .tab-symbol { display: none !important; } }

.queue-source { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
.source-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px; border-radius: 3px; font: var(--type-label); text-transform: none; letter-spacing: .02em; }
.source-badge svg { width: 12px; height: 12px; }
.channel-gmail { color: var(--hot); background: color-mix(in oklch, var(--hot) 9%, transparent); }
.channel-slack { color: var(--display-ink); background: color-mix(in oklch, var(--display-ink) 8%, transparent); }
.channel-other { color: var(--ink-3); background: var(--surface-2); }
.queue-contact { color: var(--ink-2); font: var(--type-micro); text-transform: none; letter-spacing: 0; }