/* The application shell — sidebar, main column — and buttons.

   Part of the split style sheet — see index.html for the link order. */
/* ---------- App layout: sidebar + main ---------- */
.app-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  width: 100vw;
  min-height: 100vh;
  /* clip (not hidden) still contains horizontal overflow but does NOT make this
     a scroll container, so descendant position:sticky (the sidebar and the
     §5.4 task queue) pins to the viewport instead of being disabled. */
  overflow-x: clip;
}

.sidebar {
  flex-shrink: 0;
  border-right: 1px solid var(--glass-border);
  border-radius: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  transition: var(--transition);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}

.brand-mark svg { display: block; width: 100%; height: 100%; }
/* The "." after ct picks up the active theme's accent (amber by default). */
.brand-mark .brand-dot { fill: var(--accent); }

.brand-mark:hover { transform: scale(1.05); }

.brand-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}

.sidebar-section {
  margin-bottom: 20px;
}

.sidebar-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.sidebar-section select { margin-bottom: 8px; }

.signed-in-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--ink-soft);
  transition: var(--transition);
}

.nav-item:hover {
  background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  border-color: var(--glass-border);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---------- Recent activity ----------
   Your own changes, in the sidebar rather than the main column: it's a narrow
   list and it was never worth full width. Hidden entirely until there's
   something in it — a permanently empty box teaches people to ignore that
   corner of the screen. */
.activity-panel {
  margin: 16px 0 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  overflow: hidden;
  flex-shrink: 0; /* see .attention-panel */
}

.activity-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.activity-item {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Fixed-width timestamp so the descriptions line up down the column. nowrap is
   load-bearing: under the terminal skin this is monospace, and a two-word
   value wrapped onto a second line and pushed the row out of alignment. */
.activity-when {
  flex: 0 0 34px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* The row can be long; clamp rather than letting it push the sidebar wider. */
.activity-what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-what b { font-weight: 600; color: var(--ink); }
.activity-to { color: var(--accent-strong); }

.sidebar-spacer { flex: 1; }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.btn-block { width: 100%; text-align: left; }

.main-content {
  display: grid;
  min-width: 0;
  min-height: 100vh;
  /* clip, not hidden — see .app-layout: keeps sticky working for the queue. */
  overflow-x: clip;
}

/* ---------- Buttons ---------- */
button {
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  padding: 10px 16px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-weight: 500;
  transition: var(--transition);
}

button:hover {
  border-color: var(--ink-muted);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

button:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--glass-border);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn-secondary { background: color-mix(in srgb, var(--surface-2) 80%, transparent); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-soft); }

.btn-small { padding: 6px 12px; font-size: 12.5px; }

/* ---------- Needs your attention ----------
   Unsent work that has gone wrong. Uses the warning colour rather than the
   accent: this is not a status update, it's something to go and fix. Hidden
   entirely when empty, so a clean day shows a clean sidebar. */
.attention-panel {
  margin: 16px 0 4px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-left-width: 3px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--gold-soft) 45%, transparent);
  overflow: hidden;
  /* The sidebar is a fixed-height flex column, so without this every panel in
     it shrinks to make room for the others — and each one clips rather than
     scrolls, because of the overflow above. That is why this box appeared with
     its last line cut in half and the status panel below it squashed to
     nothing. The sidebar already scrolls; let it. */
  flex-shrink: 0;
}

.attention-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* Dismiss. These are real problems and clearing the box doesn't fix them, so
   it comes back if a NEW one appears — see dismissAttention. */
.attention-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: -3px -3px -3px 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gold);
  opacity: 0.65;
  cursor: pointer;
  transition: var(--transition);
}
.attention-close:hover { opacity: 1; background: color-mix(in srgb, var(--gold) 18%, transparent); }
.attention-close .ic { width: 12px; height: 12px; }

.attention-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.attention-item { font-size: 11.5px; line-height: 1.45; }

.attention-title {
  display: block;
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attention-why { display: block; color: var(--ink-soft); font-size: 10.5px; }