:root {
  --ink: #111;
  --muted: #555;
  --bg: #f5f5f5;
  --panel: #ffffff;
  --yale: #00356b;
  --danger: #8b0000;
  --border: #999;
  --disabled: #aaa;
  font-family: "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
  cursor: default;
}

.pane { padding: 12px; }

/* Title on the left, DeepVelocity mark on the right. baseline alignment keeps
   the logo optically level with the title rather than the block. */
.pane-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pane-title { min-width: 0; }

.brand-logo {
  /* 536x100 lockup. Capped by height so it stays legible, and allowed to
     shrink on a narrow pane rather than crowding the title. */
  height: 15px;
  width: auto;
  max-width: 38%;
  margin-top: 4px;
  flex: 0 1 auto;
  opacity: 0.75;
}

h1 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--yale);
  font-family: "Times New Roman", Times, serif;
}

.sub {
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.tab {
  font-family: "Times New Roman", Times, serif;
  cursor: pointer;
  border: 1px solid var(--border);
  border-bottom: none;
  background: #e8e8e8;
  padding: 6px 8px;
  margin-right: 2px;
  border-radius: 0;
  flex: 1;
  font-size: 12px;
}

.tab.active {
  background: var(--panel);
  font-weight: bold;
}

.tab-panel.hidden { display: none; }

.actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

button {
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary {
  background: var(--yale);
  color: #fff;
  border-color: var(--yale);
  flex: 1;
}

.primary.stop {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.secondary { background: var(--panel); }

/* The diagnostics entry point is an anchor, not a button — match button chrome. */
a.secondary {
  display: inline-block;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.summary,
.progress,
.error,
.settings-help,
.settings-status {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px;
  margin-bottom: 10px;
}

.rules-master {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 8px 10px;
  margin-bottom: 10px;
}

.rules-master input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.rules-master .settings-status {
  flex: 1;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
}

.hidden { display: none; }

.run-progress {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px;
  margin-bottom: 10px;
}

.run-track {
  height: 8px;
  background: #e6e6e6;
  border: 1px solid var(--border);
  overflow: hidden;
}

.run-fill {
  height: 100%;
  width: 0%;
  background: var(--yale);
  transition: width 0.25s linear;
}

.run-label {
  margin-top: 6px;
  font-size: 12px;
  color: #555;
}

.counts {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

#findingList {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow: auto;
}

#findingList li {
  padding: 6px 4px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

#findingList li:hover { background: #eee; }
#findingList li.is-selected {
  background: #e8eef4;
  outline: 1px solid var(--yale);
  outline-offset: -1px;
}
#findingList .rule { font-weight: bold; color: var(--yale); }
#findingList .finding-main { flex: 1; min-width: 0; }
#findingList .finding-suggestion {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
#findingList .finding-suggestion strong { color: var(--ink); font-weight: bold; }

/* Accepted / dismissed / resolved rows stay in the list so the record of what
   was reviewed survives a round trip, but recede. */
#findingList li.is-done .finding-main { opacity: 0.55; }
#findingList li.status-missing .finding-main {
  opacity: 0.45;
  text-decoration-color: var(--muted);
}
#findingList li.status-missing { cursor: default; }

.status-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 10px;
  font-weight: normal;
  color: var(--muted);
  vertical-align: baseline;
}

#findingList li.status-accepted .status-pill {
  color: var(--yale);
  border-color: var(--yale);
}
#findingList li.status-missing .status-pill {
  color: var(--danger);
  border-color: var(--danger);
}

.finding-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
}

.finding-action {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

.error { color: var(--danger); }

/* Server-driven announcement. Sits above the error box and uses the same shell
   as the other notice blocks, so an operational message reads as part of the
   pane rather than as something that went wrong. */
.banner {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #2b579a);
  padding: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.banner-warn { border-left-color: #b26a00; }
.banner-error { border-left-color: var(--danger); }

/* Office task panes have no window.confirm, so destructive actions confirm
   inline here instead. */
.confirm-box {
  margin: 10px 0;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--danger);
}

.confirm-text {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
}

.confirm-actions {
  display: flex;
  gap: 8px;
}

.confirm-actions .primary {
  background: var(--danger);
  border-color: var(--danger);
}

footer {
  color: var(--muted);
  font-size: 11px;
}

.hint { margin-top: 4px; }

.sign-in-box {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px;
  margin-bottom: 10px;
}

.sign-in-box .settings-status {
  margin-bottom: 8px;
  border: none;
  padding: 0;
  background: transparent;
}

.sign-in-box .connection-actions {
  margin-top: 0;
}

.settings-help { margin-top: 0; }

.rules-tree {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  background: var(--panel);
  margin-bottom: 10px;
}

.rule-group {
  border-bottom: 1px solid var(--border);
}

.rule-group-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px;
  background: #ececec;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.rule-group-header input {
  margin-top: 2px;
}

.rule-group-body {
  padding: 4px 8px 8px 28px;
}

.rule-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
}

.rule-row.unavailable {
  color: var(--disabled);
}

.rule-row.unavailable label {
  color: var(--disabled);
}

.rule-row input:disabled {
  cursor: not-allowed;
}

.rule-row label {
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.rule-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
}

.unavailable .rule-meta {
  color: var(--disabled);
}

.guide-link {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--yale);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.guide-link:hover {
  background: var(--yale);
  color: #fff;
  border-color: var(--yale);
}

.guide-link:disabled,
.guide-link.is-missing {
  opacity: 0.35;
  cursor: default;
}

.guide-link svg {
  width: 14px;
  height: 14px;
  display: block;
}

.guide-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.guide-nav {
  padding: 4px 10px;
  min-width: 32px;
}

.guide-page-label {
  font-size: 12px;
  color: var(--muted);
}

.guide-page-input {
  width: 48px;
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 0;
}

.guide-page-total {
  font-size: 12px;
  color: var(--muted);
}

.guide-rule-hint {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--yale);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-frame-wrap {
  border: 1px solid var(--border);
  background: #ddd;
  height: calc(100vh - 140px);
  min-height: 320px;
  overflow: hidden;
}

.guide-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.connection-box {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px;
  margin-bottom: 10px;
}

.settings-heading {
  margin: 0 0 8px;
  font-weight: bold;
}

.field-label {
  display: block;
  margin: 8px 0 2px;
  font-size: 12px;
}

.field-input {
  display: block;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 6px 8px;
  background: #fff;
}

.connection-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.advanced {
  margin-top: 8px;
  font-size: 12px;
}

.advanced summary {
  cursor: pointer;
  margin-bottom: 6px;
}