/* Garrett Stimpson's blog typography and open, rule-separated page structure.
   Loaded last so every app surface shares the same visual vocabulary. */
html[data-theme="blog"] body {
  --app-font: var(--mono);
  font-family: var(--mono);
  line-height: 1.75;
}
html[data-theme="blog"] #chat { --chat-font: var(--mono); }
html[data-theme="blog"] :is(#setup-wizard, #confirm-dialog) { font-family: var(--mono); }
html[data-theme="blog"] :is(button, input, select, textarea) { font-family: inherit; }
html[data-theme="blog"] :focus-visible { outline-color: var(--green); }

/* The same wordmark as the research blog and invite page. */
html[data-theme="blog"] .brand { display: block; letter-spacing: 0; }
html[data-theme="blog"] .site-wordmark { color: var(--green); font: 700 16px/1.6 var(--mono); letter-spacing: .025em; white-space: nowrap; }
html[data-theme="blog"] .site-wordmark::after { content: ''; display: inline-block; width: 7px; height: .95em; margin-left: 5px; background: var(--green); vertical-align: -.1em; }
html[data-theme="blog"] .brand small { display: block; margin-top: 2px; font-size: 10px; letter-spacing: 0; }
html[data-theme="blog"] :is(.workspace-brand, .chat-sidebar-brand) { margin: 0 10px 28px; }
html[data-theme="blog"] :is(.workspace-brand, .chat-sidebar-brand) > a { display: block; letter-spacing: 0; }
html[data-theme="blog"] :is(.workspace-brand, .chat-sidebar-brand) > a > .site-wordmark { margin: 0; font: 700 13px/1.6 var(--mono); letter-spacing: 0; text-shadow: none; }
html[data-theme="blog"] :is(.workspace-brand, .chat-sidebar-brand) small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: 0; }

/* Navigation reads as a site index, with a single active rule. */
html[data-theme="blog"] :is(.workspace-sidebar, .chat-sidebar) { background: var(--bg); }
html[data-theme="blog"] :is(.workspace-sidebar nav a, .chat-sidebar-bottom nav a) { border: 0; border-left: 2px solid transparent; border-radius: 0; padding: 9px 10px; background: none; }
html[data-theme="blog"] :is(.workspace-sidebar nav a, .chat-sidebar-bottom nav a) > span[aria-hidden="true"] { display: none; }
html[data-theme="blog"] .workspace-sidebar nav a[aria-current] { border-color: var(--green); background: var(--bg-code); color: var(--green); }
html[data-theme="blog"] .workspace-nav-label { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
html[data-theme="blog"] .workspace-chat-link { border: 0; border-left: 2px solid var(--green-dim); border-radius: 0; background: none; color: var(--green); }
html[data-theme="blog"] .workspace-bar { backdrop-filter: none; }
html[data-theme="blog"] .workspace-bar > span { color: var(--green); font-size: 12px; }
html[data-theme="blog"] .workspace-bar a { border: 0; border-radius: 0; padding: 10px 0; background: none; color: var(--green); }
html[data-theme="blog"] :is(.workspace-icon-button, .chat-icon-button, .chat-details-button, .chat-more-nav > summary, .chat-context-group, .chat-context-group > summary, .chat-context-button) { border-radius: 0; box-shadow: none; }
html[data-theme="blog"] :is(.workspace-account > a > span:first-child, .chat-account-avatar) { display: none; }
html[data-theme="blog"] :is(.chat-sidebar-bottom nav a, .chat-more-nav > summary):hover { background: var(--bg-code); color: var(--green); }

/* Shared controls: compact, square and outlined; text fields use a prompt rule. */
html[data-theme="blog"] :is(#main, #setup-wizard, #confirm-dialog) .button,
html[data-theme="blog"] #chat :is(.button, .chat-detail-action, .chat-workspace-button, .chat-action-form button) {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--green-dim);
  border-radius: 0;
  background: transparent;
  color: var(--green);
  box-shadow: none;
  font: 600 12px/1.6 var(--mono);
}
html[data-theme="blog"] :is(#main, #setup-wizard, #confirm-dialog) .button:hover,
html[data-theme="blog"] #chat :is(.button, .chat-detail-action, .chat-workspace-button, .chat-action-form button):hover { border-color: var(--green); background: var(--bg-code); }
html[data-theme="blog"] :is(#main, #chat, #setup-wizard) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid var(--green-dim);
  border-bottom: 1px solid var(--green-dark);
  border-radius: 0;
  background-color: var(--bg-code);
  color: var(--text);
  font: 13px/1.6 var(--mono);
  caret-color: var(--green);
  box-shadow: none;
}
html[data-theme="blog"] :is(#main, #chat, #setup-wizard) :is(input, select, textarea):focus-visible { outline: 1px solid var(--green); outline-offset: 3px; }
html[data-theme="blog"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="blog"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--green); }
html[data-theme="blog"] :is(#main, #chat, #setup-wizard) label { line-height: 1.75; }
html[data-theme="blog"] :is(#main, #chat, #setup-wizard) pre { border: 0; border-left: 2px solid var(--green-dark); border-radius: 0; background: var(--bg-code); box-shadow: none; }
html[data-theme="blog"] :is(#main, #chat, #setup-wizard) fieldset { border-radius: 0; }
html[data-theme="blog"] :is(.tag, .connection-node, .key-reveal) { border-radius: 0; box-shadow: none; }
html[data-theme="blog"] #main .tag { padding: 2px 0; border: 0; border-radius: 0; background: none; letter-spacing: .04em; }

/* Content is an open page, rather than a stack of separate cards. */
html[data-theme="blog"] :is(#main, #setup-wizard) h1 { color: var(--green); font-family: var(--mono); font-weight: 700; letter-spacing: -.045em; }
html[data-theme="blog"] :is(#main, #setup-wizard) h2 { color: var(--green); font-family: var(--mono); font-weight: 700; letter-spacing: -.025em; }
html[data-theme="blog"] :is(#main, #setup-wizard) h3 { font-family: var(--mono); font-weight: 700; }
html[data-theme="blog"] #main .eyebrow { color: var(--muted); font: 11px/1.7 var(--mono); letter-spacing: .035em; }
html[data-theme="blog"] #main .panel {
  margin-top: 36px;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
html[data-theme="blog"] #main .panel-heading { margin-bottom: 20px; }
html[data-theme="blog"] #main :is(.plan, .benefit-card, .assessment-grid article, .website-modes article, .security-overview-grid article, .help-post) {
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html[data-theme="blog"] #main :is(.plan-grid, .benefit-grid, .website-modes, .security-overview-grid) { gap: 28px; }
html[data-theme="blog"] #main .plan .button { width: auto; }
html[data-theme="blog"] #main .plan.featured { border-top-color: var(--green-dim); }
html[data-theme="blog"] #main .empty { padding: 16px; border: 0; border-left: 2px solid var(--green-dark); border-radius: 0; background: none; text-align: left; }
html[data-theme="blog"] #main :is(.setup-readiness, .identity-source, .identity-finding, .website-case, .website-receipt, .website-handle, .account-context-note, .connections-access, .admin-warning, .ai-hosting-note, .trial-limits-panel, .runtime-raw-field) { border-radius: 0; box-shadow: none; }
html[data-theme="blog"] #main :is(.setup-readiness, .identity-source, .identity-finding, .website-case, .website-receipt, .website-handle, .account-context-note, .connections-access) { border: 0; border-left: 2px solid var(--green-dark); background: none; }
html[data-theme="blog"] #main .security-overview-grid p { min-height: 0; }
html[data-theme="blog"] #main .security-overview-head { flex-wrap: wrap; }

/* Summary values form one ledger, with quiet column separators. */
html[data-theme="blog"] #main .metrics { gap: 0; margin-bottom: 32px; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
html[data-theme="blog"] #main .metrics article { padding: 20px 24px; border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-theme="blog"] #main .metrics article:first-child { padding-left: 0; }
html[data-theme="blog"] #main .metrics article + article { border-left: 1px solid var(--border); }
html[data-theme="blog"] #main .metrics article span { color: var(--muted); letter-spacing: .025em; font-size: 10px; }
html[data-theme="blog"] #main .metrics article strong { font-family: var(--mono); font-weight: 700; font-size: 27px; }

/* Tabs and goal selectors are labels on a rule, with no segmented boxes. */
html[data-theme="blog"] #main :is(.admin-tabs, .connections-tabs, .goal-picker) { gap: 22px; padding: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
html[data-theme="blog"] #main :is(.admin-tabs, .connections-tabs, .goal-picker) .button { padding: 12px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); box-shadow: none; }
html[data-theme="blog"] #main :is(.admin-tabs, .connections-tabs) [aria-selected="true"],
html[data-theme="blog"] #main .goal-picker [aria-pressed="true"] { border-bottom-color: var(--green); background: none; color: var(--green); box-shadow: none; }

/* The overview and activity view share a plain terminal transcript. */
html[data-theme="blog"] #dashboard .daemon-panel .panel-heading { padding: 0 0 20px; background: none; }
html[data-theme="blog"] #dashboard :is(.daemon-toolbar, .daemon-controls, .daemon-inference) { padding-left: 0; padding-right: 0; background: none; }
html[data-theme="blog"] #dashboard .daemon-events { background: none; }
html[data-theme="blog"] #dashboard .daemon-inspect dl { border: 0; border-left: 2px solid var(--green-dark); border-radius: 0; background: none; }
html[data-theme="blog"] #logs .log-console { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
html[data-theme="blog"] #logs .log-controls { background: none; padding-left: 0; padding-right: 0; }
html[data-theme="blog"] #logs :is(.log-live-toggle, .log-refresh, .log-event-data) { border-radius: 0; box-shadow: none; }
html[data-theme="blog"] #logs :is(.log-live-toggle, .log-refresh) { background: none; }
html[data-theme="blog"] #logs .log-feed-bar { padding-left: 0; padding-right: 0; }

/* Documentation, guides, and the public introduction use the blog's columns. */
html[data-theme="blog"] #docs .docs-sidebar { padding: 0 20px 0 0; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: none; }
html[data-theme="blog"] #docs .docs-tool-link { border-radius: 0; }
html[data-theme="blog"] #docs .docs-related .docs-tool-link { border-radius: 0; background: none; }
html[data-theme="blog"] #help .help-preview { border-radius: 0; }
html[data-theme="blog"] #landing :is(.terminal, .operator-artwork, .operator-loop, .operator-toolkit-note, .lab-demo) { border-radius: 0; background-image: none; box-shadow: none; }
html[data-theme="blog"] #landing .terminal { transform: none; }
html[data-theme="blog"] #landing .operator-loop { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: none; }
html[data-theme="blog"] #landing .operator-toolkit-note { border: 0; border-left: 2px solid var(--green-dark); background: none; }
html[data-theme="blog"] :is(.demo-player video, .lab-demo-player video) { border-radius: 0; }
html[data-theme="blog"] #notice { border-radius: 0; box-shadow: none; font-family: var(--mono); }

/* Chats are dated entries; prompts and evidence are rows, rather than bubbles. */
html[data-theme="blog"] #chat .chat-heading h1 { color: var(--green); }
html[data-theme="blog"] #chat .chat-message p,
html[data-theme="blog"] #chat .chat-message-body :is(ul, ol) li { font-size: 14px; line-height: 1.85; }
html[data-theme="blog"] #chat .chat-message-avatar { border: 0; border-left: 2px solid var(--green-dim); border-radius: 0; background: none; box-shadow: none; animation: none; }
html[data-theme="blog"] #chat .chat-owner { justify-content: flex-start; padding-left: 44px; }
html[data-theme="blog"] #chat .chat-owner .chat-message-body { flex: 1; max-width: 100%; padding: 10px 0 10px 16px; border: 0; border-left: 2px solid var(--green-dark); border-radius: 0; background: none; }
html[data-theme="blog"] #chat .chat-message-body > h3 { color: var(--green); }
html[data-theme="blog"] #chat .chat-message-body :is(p, li) code { border: 0; border-radius: 0; }
html[data-theme="blog"] #chat .chat-welcome { align-items: flex-start; padding: 32px 0; background: none; mask-image: none; text-align: left; }
html[data-theme="blog"] #chat .chat-welcome-mark { width: auto; height: auto; margin-bottom: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 28px; }
html[data-theme="blog"] #chat .chat-welcome h2 { color: var(--green); font-weight: 700; }
html[data-theme="blog"] #chat .chat-welcome p { max-width: 52ch; }
html[data-theme="blog"] #chat .chat-compose-area { background: var(--bg); }
html[data-theme="blog"] #chat .chat-starters { gap: 0 24px; }
html[data-theme="blog"] #chat .chat-starters button { min-height: 54px; padding: 12px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
html[data-theme="blog"] #chat .chat-starters button:hover { color: var(--green); border-color: var(--green-dim); }
html[data-theme="blog"] #chat .chat-followup { padding: 8px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
html[data-theme="blog"] #chat .chat-followups { gap: 4px 20px; }
html[data-theme="blog"] #chat-form { border: 0; border-left: 2px solid var(--green-dim); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: var(--bg-code); box-shadow: none; }
html[data-theme="blog"] #chat-form:focus-within { border-color: var(--green); box-shadow: none; }
html[data-theme="blog"] #chat-form #chat-input { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; font: 14px/1.75 var(--mono); outline: none; }
html[data-theme="blog"] #chat .chat-send-button { border-radius: 0; border-color: var(--green-dim); background: transparent; color: var(--green); }
html[data-theme="blog"] #chat :is(.chat-tools, .chat-plan, .chat-action, .chat-plan-note, .chat-directive, .chat-evidence-item, .chat-note-item, .chat-tool-item, .chat-jump-latest) { border-radius: 0; box-shadow: none; }
html[data-theme="blog"] #chat :is(.chat-evidence-item, .chat-note-item, .chat-tool-item) { padding: 14px 0; border: 0; border-top: 1px solid var(--border); background: none; }
html[data-theme="blog"] #chat .chat-tools { border: 0; border-left: 2px solid var(--green-dark); background: none; }
html[data-theme="blog"] #chat .chat-topbar-actions :is(.chat-icon-button, .chat-details-button) { background: none; border-color: var(--border); }

/* Dialogs retain their focus and scrolling behavior with the same square frame. */
html[data-theme="blog"] :is(#setup-wizard, #confirm-dialog, #chat-new-dialog, #chat-details) { border-radius: 0; background: var(--bg); box-shadow: none; }
html[data-theme="blog"] :is(#setup-wizard, #confirm-dialog, #chat-new-dialog, #chat-details)::backdrop { background: #000c; backdrop-filter: none; }
html[data-theme="blog"] :is(.workspace-backdrop, .chat-backdrop) { backdrop-filter: none; }
html[data-theme="blog"] #chat :is(.chat-details-top, .chat-create-heading, .chat-create-actions) { background: var(--bg); }
html[data-theme="blog"] #chat :is(.chat-details h2, .chat-create-heading h2) { color: var(--green); }
html[data-theme="blog"] :is(#setup-wizard, #chat-new-dialog) :is(.wizard-goals button, .chat-tool-mode, .chat-tool-category) { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
html[data-theme="blog"] #setup-wizard .wizard-goals button[aria-pressed="true"],
html[data-theme="blog"] #chat-new-dialog .chat-tool-mode:has(input:checked) { border-left: 2px solid var(--green); background: var(--bg-code); }
html[data-theme="blog"] #setup-wizard :is(.plan, .setup-readiness, #wizard-message) { border-radius: 0; box-shadow: none; background: none; }
html[data-theme="blog"] #setup-wizard .plan { padding: 20px 0; border: 0; border-top: 1px solid var(--border); }
html[data-theme="blog"] #wizard-close { border-radius: 0; background: none; }
html[data-theme="blog"] #setup-wizard .wizard-progress li::before { border-radius: 0; }
html[data-theme="blog"] .workspace-skeleton { border: 0; border-radius: 0; background: none; }
html[data-theme="blog"] .workspace-skeleton span { border-radius: 0; }

@media (max-width: 900px) {
  html[data-theme="blog"] #docs .docs-sidebar { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
}
@media (max-width: 700px) {
  html[data-theme="blog"] #main .metrics { grid-template-columns: 1fr; }
  html[data-theme="blog"] #main .metrics article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 20px; padding: 16px 0; }
  html[data-theme="blog"] #main .metrics article + article { border-left: 0; border-top: 1px solid var(--border); }
  html[data-theme="blog"] #main .metrics article strong { margin: 0; font-size: 24px; }
  html[data-theme="blog"] #main .metrics article small { grid-column: 1 / -1; }
  html[data-theme="blog"] #main .panel { margin-top: 28px; padding-top: 24px; }
  html[data-theme="blog"] #main :is(.plan-grid, .benefit-grid, .website-modes, .security-overview-grid) { gap: 12px; }
  html[data-theme="blog"] #main :is(.admin-tabs, .connections-tabs, .goal-picker) { gap: 16px; }
  html[data-theme="blog"] #main .admin-tabs { flex-wrap: wrap; }
  html[data-theme="blog"] #main .admin-tabs .button { flex: 1 1 auto; }
}
@media (max-width: 500px) {
  html[data-theme="blog"] :is(#main, #chat, #setup-wizard) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
  html[data-theme="blog"] #chat-form #chat-input { font-size: 16px; }
  html[data-theme="blog"] #chat .chat-owner { padding-left: 35px; }
  html[data-theme="blog"] #chat .chat-owner .chat-message-body { padding-left: 12px; }
  html[data-theme="blog"] #chat .chat-starters { column-gap: 14px; }
  html[data-theme="blog"] #chat .chat-starter-text small { display: none; }
  html[data-theme="blog"] .site-wordmark { font-size: 14px; }
}