/* App chrome + components, GitHub-Primer styling (ported from Okren). Header with
   brand + breadcrumbs + tab nav (coral active underline), centered 1280px content,
   a projects landing grid, a collapsible file-system tree, a session browser, and
   bordered table cards. */

.app { min-height: 100vh; background: var(--color-bg); }

/* #region Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-border);
}
.app-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  height: 56px;
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-fg);
}
.app-logo { width: 28px; height: 28px; display: block; }
.app-name { letter-spacing: -0.01em; }

/* Breadcrumbs — every crumb is rendered identically (a link) so the box metrics
   never change; the last one just isn't clickable. */
.repo-breadcrumbs { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; }
.crumb-sep { color: var(--color-fg-muted); font-weight: 400; }
.crumb-link {
  padding: 2px 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-focus);
  font: inherit;
  cursor: pointer;
}
.crumb-link:hover { background: #818b981f; }
.crumb-link.current { cursor: default; color: var(--color-fg); }
.crumb-link.current:hover { background: transparent; }

.app-nav { display: flex; align-items: stretch; gap: 4px; height: 100%; margin-left: 4px; }
.app-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--color-fg);
  font-size: 14px;
  cursor: pointer;
}
.app-tab:hover { background: #818b981f; }
.app-tab.active { font-weight: 600; }
.app-tab.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -9px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 6px 6px 0 0;
}
.app-tab .count-badge { font-weight: 500; }

.app-header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* #endregion Header */

/* #region Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-fg);
}
.btn-default { background: #ffffff; border-color: var(--color-border); }
.btn-default:hover { background: var(--color-canvas); }
.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.btn-icon:hover { background: #818b981f; color: var(--color-fg); }
/* #endregion Buttons */

/* #region Layout / page */
.app-main { max-width: var(--app-max); margin: 0 auto; padding: var(--page-padding); }
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.page-title { margin: 0; font-size: 18px; font-weight: 600; }
.page-actions { display: flex; align-items: center; gap: 12px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.split.session { grid-template-columns: 400px minmax(0, 1fr); }
.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* Utilities — string-built views can't carry inline style="" under the strict CSP
   (style-src 'self'), so the few one-off layout tweaks live as classes here. */
.mt-12 { margin-top: 12px; }
.center { text-align: center; margin-top: 12px; }
/* #endregion Layout */

/* #region Search */
.search-input { position: relative; display: inline-flex; align-items: center; }
.search-input .ico { position: absolute; left: 9px; color: var(--color-fg-muted); pointer-events: none; }
.search-input input {
  height: 32px;
  min-width: 260px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: #ffffff;
  color: var(--color-fg);
  font-size: 14px;
}
.search-input.block { display: flex; }
.search-input.block input { width: 100%; }
.search-input input:focus { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.search-input input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* #endregion Search */

/* #region Projects landing */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.project-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-fg);
}
.project-card:hover { background: var(--color-canvas); }
.project-card.unreachable { opacity: 0.55; }
.project-card-top { display: flex; align-items: center; gap: 8px; }
.project-card-name { font-size: 15px; font-weight: 600; }
.project-card-top .count-badge { margin-left: auto; }
.project-card-path { color: var(--color-fg-muted); font-size: 11px; font-family: var(--font-mono); word-break: break-all; }
.project-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--color-fg-muted); font-size: 12px; }
/* #endregion Projects landing */

/* #region Cards / tables */
.card { border: 1px solid var(--color-border); border-radius: var(--r-sm); background: #ffffff; overflow: hidden; }
.card + .card { margin-top: 16px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
}
.card-head .count-badge { text-transform: none; letter-spacing: 0; }
.card-tools { display: inline-flex; gap: 2px; text-transform: none; }
.card-tool {
  padding: 2px 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.card-tool:hover { background: #818b981f; color: var(--color-fg); }

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border-muted);
  color: var(--color-fg);
}
.row:last-child { border-bottom: none; }
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: var(--color-canvas); }
.row.selected { background: #0969da14; }
.row .path { font-family: var(--font-mono); font-size: 13px; word-break: break-all; }
.row .path.dim { color: var(--color-fg-muted); }
.row .spacer { margin-left: auto; }
.row .open-btn { opacity: 0; }
.row.clickable:hover .open-btn { opacity: 1; }

.empty { padding: 28px 16px; text-align: center; color: var(--color-fg-muted); font-style: italic; }
/* #endregion Cards / tables */

/* #region File tree */
.tree { padding: 4px 0; }
.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  padding: 0 12px;
  background: transparent;
  border: none;
  color: var(--color-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Keep file rows the same height as folder rows — the open button must not
   stretch the line (the default .btn-icon is 28px). */
.tree-row .btn-icon { width: 22px; height: 22px; }
.tree-row:hover { background: var(--color-canvas); }
.tree-row.selected { background: #0969da14; }
.tree-twist { width: 16px; height: 16px; flex: none; color: var(--color-fg-muted); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.1s; }
.tree-twist.open { transform: rotate(90deg); }
.tree-ico { color: var(--color-fg-muted); flex: none; }
.tree-folder .tree-ico { color: #54aeff; }
.tree-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-file .tree-name { font-family: var(--font-mono); }
.tree-row .spacer { margin-left: auto; }
.tree-row .open-btn { opacity: 0; }
.tree-row:hover .open-btn { opacity: 1; }
/* #endregion File tree */

/* #region Checklist items */
.check-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-muted);
}
.check-item:last-child { border-bottom: none; }
.check-head { display: flex; align-items: center; gap: 10px; }
.check-head .path { font-family: var(--font-mono); font-size: 13px; word-break: break-all; }
.check-head .spacer { margin-left: auto; }
.check-head .state { flex: none; }

.check-reasons {
  list-style: none;
  margin: 0 0 0 7px;
  padding: 2px 0 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid var(--color-border);
}
.check-reason { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 4px; color: var(--color-fg-muted); }
.check-reason:hover { background: var(--color-canvas); }
.check-reason .tree-ico { color: var(--color-fg-muted); }
.check-reason .path { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-muted); word-break: break-all; }
.check-reason .spacer { margin-left: auto; }
.check-reason .when { flex: none; font-size: 11px; color: var(--color-fg-muted); white-space: nowrap; }
/* #endregion Checklist items */

/* #region Session browser */
.session-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.session-row > div { min-width: 0; }
.session-row .session-id { font-family: var(--font-mono); font-size: 13px; font-weight: 600; word-break: break-all; }
.session-row .session-time { color: var(--color-fg-muted); font-size: 12px; }
.session-badges { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; }
/* #endregion Session browser */

/* #region Badges, tags, dots, pills */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 20px;
  background: #818b9826;
  color: var(--color-fg);
  font-size: 12px;
  font-weight: 500;
}
.badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  line-height: 18px;
  padding: 0 7px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge.gated { color: var(--color-warn); border-color: #d4a72c66; background: #d4a72c1a; }
.badge.test { color: var(--color-focus); border-color: #0969da55; background: #0969da14; }
.badge.current { color: var(--color-accent); border-color: #fd8c7388; background: #fd8c731f; }
.badge.danger { color: var(--color-danger); border-color: #cf222e55; background: #cf222e12; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: #818b9826;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--color-border); }
.dot.green { background: var(--color-success); }
.dot.red { background: var(--color-danger); }
.dot.amber { background: var(--color-warn-dot); }
.dot.gray { background: var(--color-neutral); }
.dot.current { background: var(--color-accent); }
.dot.ring { box-shadow: 0 0 0 3px #fd8c7333; }

.state {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.state.open { color: var(--color-danger); border-color: var(--color-danger); }
.state.edited { color: var(--color-success); border-color: var(--color-success); }
.state.reviewed { color: var(--color-fg-muted); }

.reasons { color: var(--color-fg-muted); font-size: 12px; }
/* #endregion Badges */

/* #region Alert banner (stop-blockers) */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid #cf222e44;
  border-radius: var(--r-sm);
  background: #cf222e0f;
  color: var(--color-fg);
  font-size: 13px;
}
.alert .ico { color: var(--color-danger); margin-top: 1px; }
.alert b { font-weight: 600; }
.alert-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alert-list { list-style: disc; margin: 0; padding-left: 18px; }
.alert-list li { font-size: 12px; word-break: break-all; margin: 2px 0; }
/* #endregion Alert */

/* #region Sync toast + danger button + busy state */
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #ffffff; }
.btn-danger:hover { filter: brightness(0.95); }

/* <sync-toast> — bottom-center status pill, self-hides. [hidden] keeps it out. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: #1f2328;
  color: #ffffff;
  font-size: 13px;
  box-shadow: 0 8px 24px #1f232833;
  word-break: break-all;
}
.toast-error { background: var(--color-danger); }
/* #endregion Sync toast */

/* #region Confirm modal (<confirm-modal>) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #1f232899;
}
.modal { width: min(480px, 100%); max-height: 80vh; display: flex; flex-direction: column; }
.modal .card-head { text-transform: none; letter-spacing: 0; font-size: 14px; }
.modal-body { overflow: auto; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-border);
}
/* #endregion Confirm modal */