/* CanWeSync — warm charcoal with a lime accent. Layout: header, project tabs, board columns. */
:root {
  --bg-default: #121211;
  --bg-inset: #0a0a09;
  --bg-muted: #1b1b1a;
  --bg-overlay: #1b1b1a;
  --btn-bg: #242423;
  --btn-hover-bg: #2b2b2a;
  --btn-active-bg: #323230;
  --border-default: #3b3b38;
  --border-muted: #3b3b38b3;
  --fg-default: #f5f5f2;
  --fg-muted: #9d9d96;
  --fg-accent: #c8f135;
  --accent-emphasis: #c8f135;
  --danger-fg: #f85149;
  --danger-emphasis: #da3633;
  --success-emphasis: #238636;
  --on-accent: #10130a;
  --counter-bg: #191918;
  --hover-bg: #656c7633;
  --selected-bg: #656c761a;
  --shadow-overlay: 0 0 0 1px #3b3b38, 0 0.375rem 0.75rem -3px #0a0a0966, 0 0.375rem 1.125rem 0 #0a0a0966;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
  /* Extra tokens (round 12: themes) */
  --fg-subtle: #6e7681;
  --red-fg: #ff7b72; --green-fg: #3fb950; --yellow-fg: #e3b341; --lime-fg: #dcf77a;
  --purple-fg: #d2a8ff; --pink-fg: #f0a8cf; --orange-fg: #ffa657;
  --accent-line: #c8f135; --accent-line-soft: #c8f13566;
  --hover-strong: #ffffff1f;
  --overlay-soft: #121211e6;
  --viewer-bg: #0a0a09eb;
  --tile-bg: #151514;
  --canvas-bg: #0e0e0d; --canvas-dot: #2a2f36; --canvas-dot-faint: #1b2027;
  --card-bg: #1c1c1b; --card-border: #45453f; --card-border-strong: #77776f;
  --chip-bg: #ffffff14;
}

/* Light theme — white and charcoal like sitesfusion.com, lime kept for buttons and highlights. */
:root[data-theme="light"] {
  --bg-default: #ffffff;
  --bg-inset: #f5f5f3;
  --bg-muted: #efefec;
  --bg-overlay: #ffffff;
  --btn-bg: #f6f6f4;
  --btn-hover-bg: #ecece8;
  --btn-active-bg: #e2e2dd;
  --border-default: #d8d8d2;
  --border-muted: #e7e7e2;
  --fg-default: #0d0d0d;
  --fg-muted: #5c5c55;
  --fg-subtle: #7a7a72;
  --fg-accent: #4a6600;
  --accent-emphasis: #c8f135;
  --accent-line: #0d0d0d; --accent-line-soft: #0d0d0d40;
  --on-accent: #0d0d0d;
  --danger-fg: #cf222e;
  --danger-emphasis: #cf222e;
  --success-emphasis: #1f883d;
  --counter-bg: #ecece8;
  --hover-bg: #0d0d0d0f;
  --selected-bg: #0d0d0d0a;
  --hover-strong: #0d0d0d12;
  --shadow-overlay: 0 0 0 1px #d8d8d2, 0 0.5rem 1.5rem -6px #0d0d0d2e;
  --red-fg: #c42b1c; --green-fg: #1a7f37; --yellow-fg: #8a5a00; --lime-fg: #4a6600;
  --purple-fg: #7c3aed; --pink-fg: #b0306e; --orange-fg: #b54708;
  --overlay-soft: #ffffffe6;
  --viewer-bg: #f5f5f3f2;
  --tile-bg: #1b1b1a;
  --canvas-bg: #f7f7f5; --canvas-dot: #cfcfc8; --canvas-dot-faint: #e3e3de;
  --card-bg: #ffffff; --card-border: #cfcfc8; --card-border-strong: #8f8f87;
  --chip-bg: #0d0d0d0d;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: calc(16px * var(--ui-zoom, 1)); }
/* Interface size (Account settings → Display): sizes are in rem, so they follow the root font size above. Icons follow
   through `zoom`; the project map keeps its own sizes (it has its own zoom). At 100% everything is exactly as before. */
svg.octicon { zoom: var(--ui-zoom, 1); }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-default);
  color: var(--fg-default);
  font-family: var(--font);
  font-size: 0.875rem;
}
/* The root of every rem: 16px at 100% (the html element alone; the text size of the page is the body's 14px). */
html { font-size: calc(16px * var(--ui-zoom, 1)); }
body {
  line-height: 1.5;
}

a { color: var(--fg-accent); text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  background: var(--btn-bg);
  color: var(--fg-default);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--btn-hover-bg); }
.btn:active { background: var(--btn-active-bg); }
.btn .octicon { color: var(--fg-muted); }
.btn-primary { background: var(--accent-emphasis); border-color: #00000033; color: var(--on-accent); }
.btn-primary:hover { background: #d6f55e; }
.btn-primary .octicon { color: var(--on-accent); }
.btn-primary:disabled { opacity: .55; }
.btn-danger { color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-emphasis); border-color: #f5f5f21a; color: #fff; }
.btn-invisible { background: transparent; border-color: transparent; }
.btn-invisible:hover { background: var(--hover-bg); }
.btn-sm { height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover-bg); color: var(--fg-default); }
.icon-btn.bordered { width: 2rem; height: 2rem; border-color: var(--border-default); }
.icon-btn.bordered:hover { background: var(--btn-bg); }

:focus-visible { outline: 0.125rem solid var(--accent-line); outline-offset: -2px; }

/* ——— Header ——— */
.project-header {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.header-top {
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border-default);
}

.header-left { display: flex; align-items: center; gap: 0.5rem; }

.header-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 1rem 0.5rem;
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ——— Tabs (one per project) ——— */
.view-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.125rem;
  padding: 0 1rem;
  margin-bottom: -1px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.view-tabs::-webkit-scrollbar { display: none; }

.view-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 1rem 0 1rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 0.375rem 0.375rem 0 0;
  background: transparent;
  color: var(--fg-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.view-tab:hover { color: var(--fg-default); }
.view-tab:hover:not(.selected) .tab-label { text-decoration: none; }
.view-tab .octicon { color: var(--fg-muted); }
.view-tab.selected {
  color: var(--fg-default);
  background: var(--bg-default);
  border-color: var(--border-default);
  padding-right: 0.875rem;
}
.view-tab.selected .octicon { color: var(--fg-default); }
.view-tab.drag-target-before::before,
.view-tab.drag-target-after::after {
  content: "";
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 0.125rem;
  background: var(--accent-emphasis);
  border-radius: 1px;
}
.view-tab.drag-target-before::before { left: -2px; }
.view-tab.drag-target-after::after { right: -2px; }
.view-tab.dragging { opacity: .5; }

.tab-label { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }

.tab-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: var(--btn-bg);
  color: var(--fg-muted);
}
.tab-caret:hover { background: var(--border-default); color: var(--fg-default); }

.tab-rename {
  width: 11.25rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border: 1px solid var(--accent-line);
  border-radius: 0.375rem;
  background: var(--bg-default);
  color: var(--fg-default);
  font-size: 0.875rem;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.new-tab-btn {
  align-self: center;
  margin-left: 0.25rem;
  margin-bottom: 1px;
}

/* ——— Filter bar ——— */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem 0;
  background: var(--bg-default);
  flex-shrink: 0;
}

.filter-input-wrap { position: relative; flex: 1; min-width: 0; }

.search-icon {
  position: absolute;
  left: 0.5625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-muted);
  pointer-events: none;
}

.filter-input {
  display: block;
  width: 100%;
  height: 2rem;
  padding: 0 2.125rem 0 2rem;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  background: var(--bg-default);
  color: var(--fg-default);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
}
.filter-input::placeholder { color: var(--fg-muted); opacity: 1; }
.filter-input:focus { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }

.filter-clear {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--fg-muted);
}
.filter-clear:hover { background: var(--hover-bg); color: var(--fg-default); }

.view-settings { flex-shrink: 0; }

/* ——— Board ——— */
.board {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 1.25rem 1rem 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg-default);
}

.column {
  display: flex;
  flex-direction: column;
  width: 21.875rem;
  flex: 0 0 21.875rem;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  background: var(--bg-inset);
}
.column.dragging { opacity: .5; }
.column.col-drop-before { box-shadow: -5px 0 0 -3px var(--accent-line); }
.column.col-drop-after { box-shadow: 0.3125rem 0 0 -3px var(--accent-line); }

.column-header {
  padding: 0.4375rem 0.5rem 0 1rem;
  flex-shrink: 0;
}

.column-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.875rem;
}

.status-dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.125rem solid var(--ring);
  background: var(--fill);
  flex-shrink: 0;
}
.status-dot.sm, .status-dot.menu-dot { width: 0.75rem; height: 0.75rem; }
.c-GRAY   { --ring: #656c76; --fill: #1b1b1a; }
.c-BLUE   { --ring: #3b82f6; --fill: #071222; }
.c-GREEN  { --ring: #238636; --fill: #081b12; }
.c-YELLOW { --ring: #9e6a03; --fill: #1d1609; }
.c-ORANGE { --ring: #bd561d; --fill: #170f0c; }
.c-RED    { --ring: #da3633; --fill: #1f0c0e; }
.c-PINK   { --ring: #bf4b8a; --fill: #1d0b16; }
.c-PURPLE { --ring: #8957e5; --fill: #1a162d; }

.column-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--fg-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.column-count {
  display: inline-block;
  padding: 0 0.375rem;
  border-radius: 2em;
  background: var(--counter-bg);
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.column-count.over { background: #f851491a; color: var(--danger-fg); }

.estimate-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.4375rem;
  border: 1px solid var(--border-default);
  border-radius: 2em;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.column-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding-left: 0.25rem;
}

.column-desc {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.column-cards {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
.column.drag-over { border-color: var(--accent-line); }

.drop-indicator {
  height: 0.125rem;
  margin: -5px 0;
  background: var(--accent-emphasis);
  border-radius: 1px;
  flex-shrink: 0;
}

.column-empty {
  padding: 0;
  color: var(--fg-muted);
}

/* ——— Card ——— */
.card {
  position: relative;
  flex-shrink: 0;
  padding: 0.75rem 0.75rem 1.0625rem;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  background: var(--bg-default);
  cursor: pointer;
  outline: none;
}
.card:hover { border-color: #656c76; }
.card:focus-visible { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.card.dragging { opacity: .4; }
.card.active { border-color: var(--accent-line); }

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 1rem;
  margin-bottom: 0.375rem;
  padding-right: 1.75rem;
}

.issue-icon { display: inline-flex; flex-shrink: 0; }
.issue-icon.open { color: var(--green-fg); }
.issue-icon.completed { color: var(--purple-fg); }
.issue-icon.not_planned { color: var(--fg-muted); }
.issue-icon.draft { color: var(--fg-muted); }

.repo-ref {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.repo-ref:hover { color: var(--fg-accent); text-decoration: underline; }

.card-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: var(--fg-default);
  overflow-wrap: anywhere;
}

.card-fields { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.token {
  display: inline-block;
  padding: 0 0.4375rem;
  border: 1px solid var(--border-default);
  border-radius: 2em;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  color: var(--fg-muted);
}

.card-menu-btn {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  opacity: 0;
}
.card:hover .card-menu-btn,
.card:focus-within .card-menu-btn,
.card-menu-btn[aria-expanded="true"] { opacity: 1; }

/* Inline “add item” composer */
.add-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  height: 2.25rem;
  border: 1px solid var(--accent-line);
  border-radius: 0.375rem;
  background: var(--bg-default);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.add-item .issue-icon { color: var(--fg-muted); }
.add-item input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--fg-default);
  outline: none;
}
.add-item input::placeholder { color: var(--fg-muted); }

/* Add column */
.add-column { flex-shrink: 0; padding-right: 1rem; }
.add-column-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-color: var(--border-default);
  background: var(--btn-bg);
  color: var(--fg-muted);
}
.add-column-btn:hover { background: var(--btn-hover-bg); }

.board::-webkit-scrollbar, .column-cards::-webkit-scrollbar { height: 0.625rem; width: 0.5rem; }
.board::-webkit-scrollbar-thumb, .column-cards::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 0.3125rem; }
.board::-webkit-scrollbar-track, .column-cards::-webkit-scrollbar-track { background: transparent; }

/* ——— Action menu ——— */
.menu {
  position: fixed;
  z-index: 3000;
  min-width: 12rem;
  max-width: 20rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem 0;
  border-radius: 0.75rem;
  background: var(--bg-overlay);
  box-shadow: var(--shadow-overlay);
  animation: pop .12s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.menu-header {
  padding: 0.375rem 1rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-muted);
}
.menu-divider { height: 1px; margin: 0.5rem 0; background: var(--border-default); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 1rem);
  margin: 0 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--fg-default);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hover-bg); outline: none; }
.menu-item .octicon, .menu-item .lead { color: var(--fg-muted); flex-shrink: 0; width: 16px; display: inline-flex; justify-content: center; }
.menu-item.danger, .menu-item.danger .octicon { color: var(--danger-fg); }
.menu-item.danger:hover { background: #f851491a; }
.menu-item .trail { margin-left: auto; color: var(--fg-muted); font-size: 0.75rem; }
.menu-item[disabled] { opacity: .5; cursor: default; }

/* ——— Dialog ——— */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #0a0a0999;
  animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  display: flex;
  flex-direction: column;
  width: 27.5rem;
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  border-radius: 0.75rem;
  background: var(--bg-overlay);
  box-shadow: var(--shadow-overlay);
  animation: pop .15s ease-out;
}
.dialog.wide { width: 60rem; }
.dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid var(--border-default);
}
.dialog-title { margin: 0; flex: 1; font-size: 0.875rem; font-weight: 600; }
.dialog-body { padding: 1rem; overflow-y: auto; }
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--border-default);
}
.dialog-body p { margin: 0 0 0.5rem; color: var(--fg-default); }

.form-group { margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }
.form-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; }
.form-hint { margin-top: 0.25rem; font-size: 0.75rem; color: var(--fg-muted); }
.form-control {
  display: block;
  width: 100%;
  min-height: 2rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  background: var(--bg-default);
  color: var(--fg-default);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
}
.form-control:focus { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
textarea.form-control { resize: vertical; min-height: 7.5rem; }
select.form-control { appearance: auto; }

.color-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.color-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: 2em;
  background: transparent;
  color: var(--fg-default);
  font-size: 0.75rem;
}
.color-option .status-dot { width: 0.75rem; height: 0.75rem; }
.color-option[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* ——— Side panel (item details) ——— */
.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2800;
  background: #0a0a0966;
  animation: fade .15s ease-out;
}
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2810;
  display: flex;
  flex-direction: column;
  width: min(45rem, 100vw);
  background: var(--bg-default);
  border-left: 1px solid var(--border-default);
  box-shadow: -8px 0 1.5rem #0a0a0999;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }

.panel-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-default);
  color: var(--fg-muted);
  font-size: 0.875rem;
}
.panel-top .spacer { flex: 1; }
.panel-body { display: flex; flex: 1; min-height: 0; overflow-y: auto; }
.panel-main { flex: 1; min-width: 0; padding: 1rem 1.5rem 1.5rem; }
.panel-side {
  width: 15rem;
  flex-shrink: 0;
  padding: 1rem;
  border-left: 1px solid var(--border-default);
}
.panel-title {
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.25rem 0.5rem;
  margin-left: -8px;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--fg-default);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  outline: none;
}
.panel-title:hover { border-color: var(--border-default); }
.panel-title:focus { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.panel-field { margin-bottom: 1rem; }
.panel-field .form-label { font-size: 0.75rem; color: var(--fg-muted); font-weight: 600; }
.panel-meta { font-size: 0.75rem; color: var(--fg-muted); margin-top: 1rem; }
.panel-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }
.panel-actions .btn { justify-content: flex-start; }

/* ——— Drawer (hamburger) ——— */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2810;
  display: flex;
  flex-direction: column;
  width: min(20rem, 100vw);
  padding: 1rem 0.5rem;
  background: var(--bg-overlay);
  border-right: 1px solid var(--border-default);
  border-radius: 0 0.75rem 0.75rem 0;
  box-shadow: 0.5rem 0 1.5rem #0a0a0999;
  animation: slideLeft .18s ease-out;
}
@keyframes slideLeft { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem 0.75rem; }
.drawer-head h2 { flex: 1; margin: 0; font-size: 0.875rem; font-weight: 600; }
.drawer-list { flex: 1; overflow-y: auto; }
.drawer-item .trail { font-variant-numeric: tabular-nums; }
.drawer-item.current { background: var(--selected-bg); }
.drawer-item.current::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0.25rem;
  height: 1.5rem;
  margin-left: -8px;
  border-radius: 0.375rem;
  background: var(--accent-emphasis);
}
.drawer-item { position: relative; }
.drawer-foot { border-top: 1px solid var(--border-default); padding-top: 0.5rem; }

/* Archived list */
.archived-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-default); }
.archived-row:last-child { border-bottom: 0; }
.archived-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-note { color: var(--fg-muted); margin: 0; }

/* Toast */
.toast {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 3100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem 0.625rem 1rem;
  border-radius: 0.375rem;
  background: var(--bg-overlay);
  box-shadow: var(--shadow-overlay);
  animation: pop .15s ease-out;
}

@media (max-width: 768px) {
  .column { width: 85vw; flex-basis: 85vw; }
  .panel-body { flex-direction: column; }
  .panel-side { width: auto; border-left: 0; border-top: 1px solid var(--border-default); }
  .estimate-badge { margin-left: 0; }
}

/* ════════════════ Portal additions ════════════════ */

/* ——— Pages ——— */
.page { flex: 1; min-height: 0; background: var(--bg-default); }
.tasks-page { display: flex; flex-direction: column; }
.btn-block { width: 100%; }
a.btn { text-decoration: none; }
.btn.selected { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.Counter {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 2em;
  background: var(--counter-bg);
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  text-align: center;
}
code, .code-pill { font-family: var(--font-mono); font-size: 0.75rem; }
code { padding: 1px 0.3125rem; border-radius: 0.375rem; background: var(--hover-bg); }
.form-error { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid #f8514966; border-radius: 0.375rem; background: #f851491a; color: var(--red-fg); font-size: 0.8125rem; }
.empty-note { margin: 0; padding: 0.75rem; color: var(--fg-muted); font-size: 0.8125rem; }
.link-btn { padding: 0; border: 0; background: none; color: var(--fg-accent); font-size: 0.8125rem; }
.link-btn:hover { text-decoration: underline; }

/* ——— Header: main navigation + right side ——— */
.main-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; }
.nav-btn {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 0.375rem;
  color: var(--fg-default);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-btn:hover { background: var(--hover-bg); text-decoration: none; }
.nav-btn.selected { background: var(--btn-bg); box-shadow: inset 0 0 0 1px var(--border-default); }
.nav-btn.selected::after { content: none; }
.header-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; min-width: 0; }
.room-btn { max-width: 16.25rem; font-weight: 500; }
.room-btn .room-name { overflow: hidden; text-overflow: ellipsis; }
.room-btn .caret { margin: 0 -4px 0 -2px; }
.avatar-btn { position: relative; display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: none; }
.avatar-btn .avatar { width: 2rem; height: 2rem; font-size: 0.75rem; }
.notif-dot { position: absolute; top: -1px; right: -1px; width: 0.625rem; height: 0.625rem; border: 0.125rem solid var(--bg-inset); border-radius: 50%; background: var(--accent-emphasis); }

/* ——— Avatars ——— */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
  user-select: none;
}
.avatar.sm { width: 1.25rem; height: 1.25rem; font-size: 0.5625rem; }
.avatar.more { background: var(--btn-bg); color: var(--fg-muted); }
.av-0 { background: #3867d6; } .av-1 { background: #238636; } .av-2 { background: #8957e5; } .av-3 { background: #bd561d; }
.av-4 { background: #bf4b8a; } .av-5 { background: #9e6a03; } .av-6 { background: #0e7490; } .av-7 { background: #da3633; }

/* ——— Sign-in ——— */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 2rem 1rem;
  background: var(--bg-inset);
}
.ascii-logo {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--fg-accent);
  font-family: var(--font-mono);
  font-size: clamp(0.3125rem, 1.45vw, 0.875rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 0 0 0.875rem color-mix(in srgb, var(--accent-emphasis) 25%, transparent);
  user-select: none;
}
.auth-card {
  width: 100%;
  max-width: 23.75rem;
  padding: 1.5rem;
  border: 1px solid var(--border-default);
  border-radius: 0.75rem;
  background: var(--bg-overlay);
  box-shadow: 0 0.5rem 1.5rem #0a0a0999;
}
.auth-form h1 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; text-align: center; }
.auth-form .form-label { margin-top: 0.75rem; }
.auth-form .form-label:first-of-type { margin-top: 0; }
.auth-text { margin: 0 0 0.75rem; color: var(--fg-muted); font-size: 0.875rem; }
.auth-actions { margin-top: 1rem; }
.auth-foot { margin: 1rem 0 0; color: var(--fg-muted); font-size: 0.75rem; text-align: center; }
.code-input { font-family: var(--font-mono); font-size: 1.125rem; letter-spacing: 0.25rem; text-align: center; }
.remember-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  background: var(--bg-default);
  color: var(--fg-default);
  text-align: left;
}
.remember-btn:hover { border-color: #656c76; }
.remember-btn small { display: block; margin-top: 0.125rem; color: var(--fg-muted); font-size: 0.75rem; line-height: 1rem; }
.remember-box { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.125rem; border: 1px solid #656c76; border-radius: 0.25rem; background: var(--bg-default); }
.remember-btn[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.remember-btn[aria-pressed="true"] .remember-box {
  border-color: var(--accent-line);
  background: var(--accent-emphasis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310130a'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.pw-rules { margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--fg-muted); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--green-fg); }
.pw-rules li.ok::before { content: "✓ "; }

/* ——— HOME ——— */
.home {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(22.5rem, 2fr) minmax(16.25rem, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  overflow: hidden;
}
.home-col { display: flex; flex-direction: column; gap: 1rem; min-height: 0; min-width: 0; }
.box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  background: var(--bg-inset);
}
.box-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem 0.625rem 1rem; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.box-head h2 { margin: 0; font-size: 0.875rem; font-weight: 600; }
.box-sub { color: var(--fg-muted); font-size: 0.75rem; }
.box-head .btn, .box-head .box-link { margin-left: auto; }
.box-link { font-size: 0.75rem; }
.box-body { flex: 1; min-height: 0; overflow-y: auto; }
.home-left .box { flex: 1; }
.home-center .box { flex: 1; }
.map-box { flex: 0 0 auto; }
.home-map { height: 17.5rem; border-radius: 0 0 0.375rem 0.375rem; }
.urgent-box { flex: 1; border-color: #f8514966; background: linear-gradient(180deg, #f851490f, transparent 7.5rem), var(--bg-inset); }
.urgent-box .box-head { border-bottom-color: #f8514966; }
.urgent-box .box-head h2 { color: var(--red-fg); }
.urgent-box .box-head h2::before { content: "▲ "; font-size: 0.6875rem; }

.task-list { padding: 0.25rem; }
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  color: var(--fg-default);
  text-decoration: none;
}
.task-row:hover { background: var(--hover-bg); text-decoration: none; }
.task-icon { padding-top: 0.125rem; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.task-title { font-size: 0.875rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.task-meta { display: flex; align-items: center; gap: 0.25rem; color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; }
.task-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* Chat */
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; }
.chat-empty { margin: auto; text-align: center; max-width: 22.5rem; }
.msg { display: flex; gap: 0.625rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
.msg:hover { background: #656c760f; }
.msg:not(.grouped) { margin-top: 0.5rem; }
.msg-gutter { width: 1.75rem; flex-shrink: 0; }
.msg-main { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 0.5rem; }
.msg-name { font-weight: 600; font-size: 0.875rem; }
.msg.mine .msg-name { color: var(--fg-accent); }
.msg-time { color: var(--fg-muted); font-size: 0.75rem; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.25rem; }
/* The chat keeps its size and place. The message list fills the box; the composer floats at the bottom over it
   (Instagram-style: one rounded field with attach, text and Send) and grows upward as you type, up to five lines,
   then scrolls inside itself. home.js keeps the list's bottom padding equal to the composer's height, so the newest
   message stays right above it when you are at the end of the chat. */
.chat-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-stage > .chat-messages { padding-bottom: calc(var(--chat-dock-h, 4.25rem) + 0.25rem); }
.chat-stage > .chat-messages::before { content: ""; flex: 1 1 auto; } /* few messages sit at the bottom, by the composer */
.chat-stage > .chat-messages:has(> .chat-empty)::before { content: none; }
.chat-dock { position: absolute; left: 0; right: var(--chat-sbw, 0px); bottom: 0; z-index: 2; padding: 0.375rem 0.75rem 0.75rem; background: linear-gradient(to bottom, transparent, var(--bg-inset) 0.375rem); border-radius: 0 0 0.375rem 0.375rem; }
.chat-composer { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: 1.25rem; background: var(--bg-default); }
.chat-composer:focus-within { border-color: var(--accent-line); }
.chat-row { display: flex; align-items: flex-end; gap: 0.25rem; padding: 0.25rem; }
.chat-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 2rem;
  max-height: calc(1.25rem * 5 + 0.75rem); /* five lines, then it scrolls inside */
  padding: 0.375rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--fg-default);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  resize: none;
  outline: none;
  overflow-y: hidden;
}
.chat-composer textarea:disabled { cursor: not-allowed; }
.chat-composer:has(textarea:disabled) { background: var(--bg-muted); }
.chat-attach { flex: none; width: 2rem; height: 2rem; border-radius: 50%; color: var(--fg-muted); }
.chat-attach:hover:not(:disabled) { color: var(--fg-default); }
.chat-send { flex: none; height: 2rem; padding: 0 0.75rem; border: 0; border-radius: 1rem; background: transparent; color: var(--fg-accent); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.chat-send:hover:not(:disabled) { background: var(--hover-bg); }
.chat-send:disabled { color: var(--fg-muted); opacity: .55; cursor: default; }
.chat-send:focus-visible, .chat-attach:focus-visible { outline: 0.125rem solid var(--accent-line); outline-offset: 0; }
.history { display: grid; grid-template-columns: 13.75rem 1fr; gap: 1rem; height: min(60vh, 35rem); }
.history-days { overflow-y: auto; border-right: 1px solid var(--border-default); padding-right: 0.5rem; }
.history-days .menu-item { width: 100%; margin: 0; }
.history-days .menu-item.current { background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--accent-line-soft); }
.history-view { display: flex; flex-direction: column; min-height: 0; }
.history-title { font-weight: 600; padding: 0 0.5rem 0.5rem; border-bottom: 1px solid var(--border-default); }
.history-messages { padding-top: 0; }

/* ——— Map ——— */
.map-page { display: flex; flex-direction: column; }
.map-hint { padding: 0.5rem 1rem; color: var(--fg-muted); font-size: 0.8125rem; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.full-map { flex: 1; min-height: 0; }
.leaflet-container { background: var(--bg-muted); font-family: var(--font); }
.meet-pin { background: none; border: 0; }
.meet-pin-dot {
  position: relative;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  border: 0.1875rem solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #da3633;
  box-shadow: 0 0.125rem 0.375rem #0a0a0999;
  transform: rotate(-45deg);
}
.meet-pin-dot::after { content: ""; position: absolute; top: 0.4375rem; left: 0.4375rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #fff; }
.meet-pin:hover .meet-pin-dot { background: #f85149; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-overlay); color: var(--fg-default); box-shadow: var(--shadow-overlay); }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.5; }
.leaflet-container a.leaflet-popup-close-button { color: var(--fg-muted); }
.leaflet-container a.btn { color: var(--fg-default); }
.leaflet-container a.btn-primary { color: #fff; }
.leaflet-tooltip { background: var(--bg-overlay); color: var(--fg-default); border: 1px solid var(--border-default); box-shadow: none; }
.leaflet-tooltip-top::before { border-top-color: var(--border-default); }
.leaflet-control-zoom a { background: var(--bg-overlay) !important; color: var(--fg-default) !important; border-color: var(--border-default) !important; }
.leaflet-control-attribution { background: var(--overlay-soft) !important; color: var(--fg-muted) !important; }
.leaflet-control-attribution a { color: var(--fg-accent) !important; }
.meet-title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; padding-right: 0.75rem; overflow-wrap: anywhere; }
.meet-when { display: flex; align-items: center; gap: 0.375rem; color: var(--fg-default); }
.meet-when .octicon, .meet-when svg { color: var(--fg-muted); }
.meet-notes { margin-top: 0.375rem; color: var(--fg-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.meet-by { margin-top: 0.375rem; color: var(--fg-muted); font-size: 0.75rem; }
.meet-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
.meet-form { display: flex; flex-direction: column; }
.meet-form .form-label { margin: 0.5rem 0 0.25rem; font-size: 0.75rem; }
.meet-form .form-label:first-child { margin-top: 0; }
.meet-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.meet-form-actions { display: flex; justify-content: flex-end; gap: 0.375rem; margin-top: 0.625rem; }
.meet-form textarea.form-control { min-height: 3.75rem; }

/* ——— Board additions ——— */
.board-empty { margin: auto; max-width: 26.25rem; text-align: center; color: var(--fg-muted); }
.board-empty h2 { color: var(--fg-default); font-size: 1.25rem; margin: 0 0 0.5rem; }
.board-empty p { margin: 0 0 1rem; }
#archiveBtn .Counter { margin-left: -2px; }
.card.urgent { border-color: #f8514980; background-image: linear-gradient(#f851490d, #f851490d); }
.card.urgent:hover { border-color: #f85149; }
.card-fields { align-items: center; }
.card-avatars { display: inline-flex; margin-left: auto; }
.card-avatars .avatar { border: 0.125rem solid var(--bg-default); margin-left: -6px; }
.card-avatars .avatar:first-child { margin-left: 0; }
.token { display: inline-flex; align-items: center; gap: 0.25rem; }
.token-urgent { border-color: #f8514980; color: var(--red-fg); background: #f851491a; }
.panel-ref { display: inline-flex; align-items: center; gap: 0.375rem; }
.assignee-list { display: flex; flex-direction: column; gap: 0.125rem; max-height: 11.25rem; overflow-y: auto; }
.assignee-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.375rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.8125rem; }
.assignee-row:hover { background: var(--hover-bg); }
.assignee-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }
.toggle-row span { display: inline-flex; align-items: center; gap: 0.375rem; }
#pUrgent + span { color: var(--red-fg); }
input[type="checkbox"] { accent-color: var(--accent-line); width: 1rem; height: 1rem; margin: 0; }
.drawer-empty { padding: 0.5rem; }

/* ——— Dialog additions ——— */
.danger-dialog { border: 1px solid #f8514966; }
.danger-zone-head { display: flex; align-items: center; gap: 0.5rem; color: var(--red-fg); margin-bottom: 0.5rem; }
.danger-zone { padding: 0.75rem; border: 1px solid #f8514966; border-radius: 0.375rem; background: #f851490d; }
.danger-text { margin: 0 0 0.75rem; }
.danger-zone .form-label { font-weight: 400; }
.danger-zone code { user-select: all; color: var(--fg-default); }
.btn-danger[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-danger[disabled]:hover { background: var(--btn-bg); color: var(--danger-fg); border-color: var(--border-default); }
.secret-intro { margin: 0 0 0.75rem; }
.secret-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.secret-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-default); }
.secret-label { width: 8.125rem; flex-shrink: 0; color: var(--fg-muted); font-size: 0.75rem; }
.secret-value { flex: 1; min-width: 0; padding: 0; background: none; font-size: 0.8125rem; overflow-wrap: anywhere; user-select: all; }
.secret-note { margin-top: 0.75rem; }
.dialog-msg { margin: 0 0 0.75rem; }

/* ——— Settings pages ——— */
.settings-page { overflow-y: auto; }
.settings-wrap { max-width: 47.5rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.settings-wrap.narrow { max-width: 35rem; }
.settings-title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 600; overflow-wrap: anywhere; }
.settings-desc { margin: 0.25rem 0 0; color: var(--fg-muted); }
.settings-section { margin-top: 1.5rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-inset); }
.settings-section > header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-default); }
.settings-section > header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.settings-body { padding: 1rem; }
.settings-form + .settings-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.inline-field { display: flex; gap: 0.5rem; align-items: center; }
.inline-field .form-control { flex: 1; min-width: 0; }
.code-pill { display: inline-block; padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-default); user-select: all; }
.status-line { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.75rem; }
.status-line.on { color: var(--green-fg); }
.status-line.off { color: var(--fg-muted); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.invite-row, .member-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border-default); }
.invite-row:last-child, .member-row:last-child { border-bottom: 0; }
.invite-row .octicon { color: var(--fg-muted); }
.invite-main, .member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.invite-row.pending { color: var(--fg-muted); font-size: 0.8125rem; }
.sub-title { margin: 1.25rem 0 0.25rem; font-size: 0.8125rem; color: var(--fg-muted); font-weight: 600; }
.badge { display: inline-block; margin-left: 0.5rem; padding: 0 0.4375rem; border: 1px solid var(--border-default); border-radius: 2em; color: var(--fg-muted); font-size: 0.75rem; font-weight: 500; line-height: 1.125rem; }
.badge-admin { border-color: #8957e5; color: var(--purple-fg); }
.tfa-setup { display: flex; flex-direction: column; align-items: stretch; }
.tfa-steps { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.tfa-qr { align-self: center; width: 12.5rem; height: 12.5rem; margin-bottom: 0.75rem; border-radius: 0.375rem; image-rendering: pixelated; }
.tfa-manual { margin-bottom: 1rem; color: var(--fg-muted); font-size: 0.8125rem; }
.tfa-manual summary { cursor: pointer; margin-bottom: 0.5rem; }

@media (max-width: 1100px) {
  .home { grid-template-columns: 1fr 1fr; grid-template-rows: auto; overflow-y: auto; }
  .home-center { grid-column: 1 / -1; grid-row: 1; height: 30rem; }
  .home-left .box, .urgent-box { min-height: 16.25rem; }
}
@media (max-width: 768px) {
  .main-nav { margin-left: 0.25rem; }
  .nav-btn { padding: 0 0.5rem; }
  .room-btn .room-name { max-width: 5.625rem; }
  .home { grid-template-columns: 1fr; }
  .home-center { height: 26.25rem; }
  .home-left .box, .urgent-box { min-height: 13.75rem; }
  .history { grid-template-columns: 1fr; height: auto; }
  .history-days { border-right: 0; max-height: 10rem; }
  .secret-row { flex-wrap: wrap; }
}


/* ════════════════ Round 3 additions ════════════════ */

/* Keep Leaflet's own layers inside the map box so menus and dialogs always sit on top */
.home-map, .full-map { position: relative; z-index: 0; isolation: isolate; }

/* ——— Sign in / Sign up ——— */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; margin: -8px -8px 1.25rem; border-radius: 0.5rem; background: var(--bg-inset); border: 1px solid var(--border-default); }
.auth-tabs button { height: 2rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--fg-muted); font-weight: 600; }
.auth-tabs button[aria-selected="true"] { background: var(--btn-bg); color: var(--fg-default); box-shadow: inset 0 0 0 1px var(--border-default); }
.auth-form .form-hint { margin: 0.25rem 0 0; }

/* ——— Room picker (landing page) ——— */
.rooms-page { overflow-y: auto; }
.rooms-wrap { max-width: 61.25rem; margin: 0 auto; padding: 3rem 1rem 4rem; text-align: center; }
.rooms-title { margin: 0 0 0.5rem; font-size: 1.75rem; font-weight: 600; }
.rooms-sub { margin: 0 auto 2.25rem; max-width: 35rem; color: var(--fg-muted); }
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 2rem; }
.bubble { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: 10rem; padding: 0; border: 0; background: none; color: var(--fg-default); }
.bubble-img { display: block; width: 8.25rem; height: 8.25rem; padding: 0.25rem; border-radius: 50%; border: 0.125rem solid var(--border-default); background: var(--bg-inset); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.bubble:hover .bubble-img, .bubble:focus-visible .bubble-img { transform: translateY(-3px) scale(1.04); border-color: var(--accent-line); box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--accent-emphasis) 20%, transparent); }
.bubble.current .bubble-img { border-color: #3fb950; }
.bubble:focus-visible { outline: none; }
.bubble-name { margin-top: 0.375rem; font-size: 0.9375rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble-meta { color: var(--fg-muted); font-size: 0.75rem; }
.room-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; font-size: 2.5rem; font-weight: 700; color: #fff; user-select: none; }
.room-img-new { background: transparent; border: 0.125rem dashed var(--border-default); color: var(--fg-muted); }
.bubble-new:hover .room-img-new { color: var(--fg-default); border-color: var(--fg-muted); }
.rb-0 { background: linear-gradient(135deg, #3867d6, #1b2f6b); } .rb-1 { background: linear-gradient(135deg, #2ea043, #0f5323); }
.rb-2 { background: linear-gradient(135deg, #8957e5, #3b1f78); } .rb-3 { background: linear-gradient(135deg, #db6d28, #762d0a); }
.rb-4 { background: linear-gradient(135deg, #bf4b8a, #5c1d40); } .rb-5 { background: linear-gradient(135deg, #d29922, #6b4b05); }
.rb-6 { background: linear-gradient(135deg, #1b9aaa, #0b4f57); } .rb-7 { background: linear-gradient(135deg, #f85149, #7d1a16); }
.rooms-invites { max-width: 35rem; margin: 3rem auto 0; text-align: left; }
.room-pic-row { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.room-pic-preview { width: 4.5rem; height: 4.5rem; flex-shrink: 0; }
.room-pic-preview .room-img { font-size: 1.5rem; }
.room-pic-main { flex: 1; min-width: 0; }
.room-pic-main .form-hint { margin: 0.125rem 0 0.5rem; }

/* ——— Danger zones ——— */
.danger-section { border-color: #f8514966; }
.danger-section > header { border-bottom-color: #f8514966; }
.danger-section > header h2 { color: var(--red-fg); }
.danger-row { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.danger-row .form-hint { margin: 0.125rem 0 0; }
.danger-row .btn { flex-shrink: 0; }
.danger-pw-label { margin-top: 0.75rem; }
.back-link { display: inline-block; margin-bottom: 0.75rem; font-size: 0.8125rem; }

/* ——— Tasks: search all projects + Board / Project map switch ——— */
.view-switch { display: inline-flex; flex-shrink: 0; padding: 0.125rem; gap: 0.125rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-inset); }
.vs-btn { display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.625rem; border-radius: 0.25rem; color: var(--fg-muted); font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vs-btn:hover { color: var(--fg-default); text-decoration: none; }
.vs-btn.selected { background: var(--btn-bg); color: var(--fg-default); box-shadow: inset 0 0 0 1px var(--border-default); }
.search-all-wrap { position: relative; flex: 0 1 18.75rem; min-width: 10rem; }
.search-all-wrap .filter-input { padding-right: 0.75rem; }
.search-all-wrap input[type="search"]::-webkit-search-cancel-button { filter: invert(.6); }
.search-results { position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 2500; width: max(100%, 23.75rem); max-height: 60vh; overflow-y: auto; padding: 0.375rem; border-radius: 0.75rem; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); }
.search-hit { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; border-radius: 0.375rem; color: var(--fg-default); text-decoration: none; outline: none; }
.search-hit:hover, .search-hit:focus { background: var(--hover-bg); text-decoration: none; }
.search-hit .issue-icon { padding-top: 0.125rem; }
.hit-main { display: flex; flex-direction: column; min-width: 0; }
.hit-title { overflow-wrap: anywhere; }
.hit-meta { color: var(--fg-muted); font-size: 0.75rem; }

/* ——— Project map: element bar (illustrated tiles) ——— */
.canvas-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; background: var(--bg-default); border-bottom: 1px solid var(--border-default); flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; }
.cbar-group { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.cbar-right { margin-left: auto; gap: 0.375rem; }
.cbar-sep { width: 1px; height: 2.25rem; background: var(--border-default); margin: 0 0.375rem; }
.ctile { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; width: 4.125rem; padding: 0.25rem 0.125rem 0.1875rem; border: 1px solid transparent; border-radius: 0.5rem; background: transparent; color: var(--fg-muted); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.ctile svg { display: block; transition: transform .12s ease; filter: drop-shadow(0 1px 1px #0006); }
.ctile:hover { background: var(--hover-bg); color: var(--fg-default); border-color: var(--border-default); }
.ctile:hover svg { transform: translateY(-2px) scale(1.06); }
.ctile:active svg { transform: scale(.96); }
.canvas-selection { color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; }
.zoom-level { min-width: 2.5rem; text-align: center; color: var(--fg-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* ——— Project map: board ——— */
.canvas-wrap {
  position: relative; flex: 1; min-height: 0; overflow: hidden; outline: none; cursor: grab; touch-action: none;
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, var(--canvas-dot) 0.8px, transparent 1px);
}
.canvas-wrap.grid-faint { background-image: radial-gradient(circle, var(--canvas-dot-faint) 0.7px, transparent 0.9px); }
.canvas-wrap.panning { cursor: grabbing; }
.canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.canvas-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cedge { pointer-events: auto; cursor: pointer; }
.cedge-hit { fill: none; stroke: transparent; stroke-width: 16; }
.cedge { --ec: #9d9d96; }
.cedge.ec-BLUE { --ec: #58a6ff; } .cedge.ec-GREEN { --ec: #3fb950; } .cedge.ec-YELLOW { --ec: #d29922; } .cedge.ec-RED { --ec: #f85149; } .cedge.ec-PURPLE { --ec: #a371f7; }
:root[data-theme="light"] .cedge { --ec: #6e6e66; }
:root[data-theme="light"] .cedge.ec-BLUE { --ec: #0969da; } :root[data-theme="light"] .cedge.ec-GREEN { --ec: #1a7f37; } :root[data-theme="light"] .cedge.ec-YELLOW { --ec: #9a6700; } :root[data-theme="light"] .cedge.ec-RED { --ec: #cf222e; } :root[data-theme="light"] .cedge.ec-PURPLE { --ec: #8250df; }
.cedge-line { fill: none; stroke: var(--ec); stroke-width: 2; stroke-linecap: butt; stroke-linejoin: round; }
.cedge.l-dashed .cedge-line { stroke-dasharray: 8 6; }
.cedge.l-dotted .cedge-line { stroke-dasharray: 0.1 6; stroke-linecap: round; stroke-width: 2.5; }
.cedge-end { fill: var(--ec); }
.cedge-start { fill: var(--canvas-bg); stroke: var(--ec); stroke-width: 1.5; }
.cedge-label { fill: var(--fg-default); font: 600 12px var(--font); paint-order: stroke; stroke: var(--canvas-bg); stroke-width: 5px; stroke-linejoin: round; }
.cedge:hover .cedge-line, .cedge.selected .cedge-line { stroke-width: 3; }
.cedge.selected .cedge-line { stroke: var(--accent-line); }
.cedge.selected .cedge-end { fill: var(--accent-line); } .cedge.selected .cedge-start { stroke: var(--accent-line); }
.draw-tools.edge-tools { top: auto; bottom: 0.875rem; }
.et-opt { width: 2.125rem; color: var(--fg-default); }
.dt-tool { color: var(--fg-default); }
.dt-color.ec-GRAY { --c: #9d9d96; } .dt-color.ec-BLUE { --c: #58a6ff; } .dt-color.ec-GREEN { --c: #3fb950; } .dt-color.ec-YELLOW { --c: #d29922; } .dt-color.ec-RED { --c: #f85149; } .dt-color.ec-PURPLE { --c: #a371f7; }
.dt-measure { min-width: 5.5rem; color: var(--fg-default); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.dt-measure:empty { display: none; }
.cedge-temp { fill: none; stroke: var(--accent-line); stroke-width: 2; stroke-dasharray: 7 6; stroke-linejoin: miter; }

/* Paper colours */
.cnode[data-paper="yellow"] { --paper: #fff3a6; --paper-2: #ffe873; --ink: #3b3100; --accent: #d4a72c; }
.cnode[data-paper="orange"] { --paper: #ffe0c2; --paper-2: #ffc999; --ink: #4a2300; --accent: #e16f24; }
.cnode[data-paper="red"]    { --paper: #ffd8d6; --paper-2: #ffb8b3; --ink: #4c0b08; --accent: #e5534b; }
.cnode[data-paper="pink"]   { --paper: #ffd9ec; --paper-2: #ffbedd; --ink: #4d0c2c; --accent: #db61a2; }
.cnode[data-paper="purple"] { --paper: #ebe2ff; --paper-2: #d8c8ff; --ink: #2b1460; --accent: #8957e5; }
.cnode[data-paper="blue"]   { --paper: #dcebff; --paper-2: #bfdcff; --ink: #0a2a5c; --accent: #4f8cf7; }
.cnode[data-paper="teal"]   { --paper: #d2f4f2; --paper-2: #a9e9e4; --ink: #053d3a; --accent: #1b9aaa; }
.cnode[data-paper="green"]  { --paper: #dafbe1; --paper-2: #b8f0c4; --ink: #0b3d18; --accent: #2da44e; }
.cnode[data-paper="gray"]   { --paper: #eaeef2; --paper-2: #d0d7de; --ink: #24292f; --accent: #6e7781; }
.cnode[data-paper="white"]  { --paper: #ffffff; --paper-2: #f0f3f6; --ink: #1f2328; --accent: #6e7781; }

.cnode {
  --paper: #ffffff; --ink: #1f2328; --accent: #6e7781;
  position: absolute; width: 230px; border-radius: 10px; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px #0000004d, 0 8px 20px -6px #000000a6; cursor: move; user-select: none; outline: none;
  transition: box-shadow .12s ease, transform .12s ease; font-size: 13px; line-height: 1.4;
}
.cnode:hover { box-shadow: 0 1px 2px #0000004d, 0 12px 28px -6px #000000cc; }
.cnode:focus-visible, .cnode.selected { box-shadow: 0 0 0 2px var(--canvas-bg), 0 0 0 4px var(--accent-line), 0 12px 28px -6px #000000cc; }
.cnode.dragging { transform: rotate(-1.2deg) scale(1.02); z-index: 5; box-shadow: 0 22px 40px -10px #000000e6; }
.cnode.connect-target { box-shadow: 0 0 0 2px var(--canvas-bg), 0 0 0 4px #3fb950; }
.cnode .muted { color: #6e7781; font-weight: 500; }
.cn-title { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cn-title.with-icon { display: flex; gap: 6px; align-items: flex-start; }
.cn-title.with-icon > :first-child { flex-shrink: 0; margin-top: 2px; }
.cn-has-desc { display: inline-flex; margin-left: auto; color: currentColor; opacity: .55; }
.cn-kicker { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cn-card-body { padding: 12px 14px 14px; }
.cn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; }
.cn-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cnode .btn { height: 26px; font-size: 12px; background: #f6f8fa; color: #24292f; border-color: #d0d7de; }
.cnode .btn:hover { background: #eaeef2; }
.cnode .btn-primary { background: #1f883d; color: #fff; border-color: #1a7f37; }
.cnode .btn-primary:hover { background: #1a7f37; }

/* Idea = sticky note */
.cnode.k-idea {
  width: 200px; min-height: 170px; display: flex; flex-direction: column; padding: 18px 16px 10px; border-radius: 3px;
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper) 70%, var(--paper-2) 100%);
  box-shadow: 0 1px 1px #0000004d, 0 14px 18px -12px #000000e6, inset 0 -10px 18px -14px #0000004d;
}
.cn-sticky-text { flex: 1; font-size: 17px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.cn-sticky-foot { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; font-weight: 600; opacity: .6; }
.cn-sticky-foot > span:first-child { display: inline-flex; align-items: center; gap: 4px; }

/* Fact / Plan = index cards with a coloured band */
.cnode.k-fact, .cnode.k-plan { overflow: hidden; background: #ffffff; }
.cn-band { height: 8px; background: var(--accent); }
.cnode.k-fact .cn-card-body, .cnode.k-plan .cn-card-body { background: linear-gradient(180deg, var(--paper) 0, #ffffff 46px); }
.cnode.k-plan .cn-card-body { background-image: linear-gradient(180deg, var(--paper) 0, #ffffff 46px), repeating-linear-gradient(180deg, transparent 0 21px, #0000000d 21px 22px); }

/* Box = simple shape */
.cnode.k-box { padding: 16px 16px; border: 1.5px solid #00000026; border-radius: 12px; }
.cn-box-foot { display: flex; margin-top: 6px; }

/* Spidergram topic + branches (mind map) */
.cnode.k-hub {
  width: auto; min-width: 170px; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 30px 14px; border-radius: 999px; text-align: center; color: #fff;
  background: radial-gradient(ellipse at 30% 25%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent), 0 14px 30px -8px #000000cc;
}
.cn-hub-title { font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; text-shadow: 0 1px 2px #00000059; }
.cnode-branch { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; border: 0; border-radius: 2em; background: var(--hover-strong); color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .1s; }
.cnode.k-hub:hover .cnode-branch, .cnode.k-hub.selected .cnode-branch, .cnode.k-hub:focus-within .cnode-branch { opacity: 1; }
.cnode-branch:hover { background: var(--hover-bg); }
.cnode.k-branch {
  width: auto; min-width: 110px; max-width: 260px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  border-radius: 999px; border: 2px solid var(--accent); font-weight: 600;
}
.cnode.k-branch .cn-title { font-size: 14px; }

/* Task = live task card */
.cnode.k-task { width: 280px; padding: 12px 14px; background: #ffffff; overflow: hidden; }

.cn-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-bottom: 8px; padding: 2px 8px; border-radius: 2em; background: #ffe5f1; color: #99286e; font-size: 11px; font-weight: 700; }
.cn-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 5px; border-radius: 2em; background: #f6f8fa; border: 1px solid #d0d7de; color: #24292f; font-weight: 600; }
.cnode .token { color: #57606a; border-color: #d0d7de; }
.cnode .token-urgent { color: #cf222e; border-color: #ffaba8; background: #ffebe9; }
.token-done { color: #1a7f37; border-color: #aceebb; background: #dafbe1; }
.cn-people { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #eaeef2; }
.cn-person { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.cn-person .lbl { width: 56px; flex-shrink: 0; color: #6e7781; }
.cn-person .author, .cn-person .recv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-avatars { display: inline-flex; }
.cn-avatars .avatar { margin-left: -5px; border: 2px solid #fff; }
.cn-avatars .avatar:first-child { margin-left: 0; }
.cnode .issue-icon.draft { color: #6e7781; }

/* Meeting = card with a little map */
.cnode.k-map { width: 260px; overflow: hidden; background: #ffffff; }
.cn-mapart {
  position: relative; height: 74px;
  background:
    linear-gradient(115deg, transparent 46%, #ffffff 46% 50%, transparent 50%),
    linear-gradient(20deg, transparent 60%, #ffffffb3 60% 62.5%, transparent 62.5%),
    repeating-linear-gradient(0deg, #0000000a 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, #0000000a 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #d8f0de, #cde7f5);
}
.cn-pin { position: absolute; left: 50%; top: 18px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50% 50% 50% 0; background: #e5534b; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 3px 6px #00000059; }
.cn-when { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #57606a; font-size: 12px; }

/* Image = polaroid */
.cnode.k-image { width: 230px; padding: 10px 10px 0; background: #ffffff; border-radius: 3px; }
.cn-photo { background: #eaeef2; }
.cn-photo img { display: block; width: 100%; max-height: 240px; object-fit: cover; pointer-events: none; }
.cn-photo.empty { display: flex; align-items: center; justify-content: center; height: 140px; color: #8c959f; }
.cn-caption { padding: 10px 4px 12px; font-size: 14px; font-style: italic; color: #24292f; text-align: center; overflow-wrap: anywhere; }

/* File = card with a big type badge */
.cnode.k-file { width: 260px; display: flex; gap: 12px; padding: 12px; background: #ffffff; }
.cn-file-badge { position: relative; flex-shrink: 0; width: 44px; height: 54px; border-radius: 4px 12px 4px 4px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.cn-file-badge::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 0 12px 0 4px; background: #ffffff80; }
.cn-file-badge[data-tone="red"] { background: #cf222e; } .cn-file-badge[data-tone="blue"] { background: #0969da; }
.cn-file-badge[data-tone="green"] { background: #1a7f37; } .cn-file-badge[data-tone="orange"] { background: #bc4c00; }
.cn-file-badge[data-tone="gray"] { background: #57606a; }
.cn-file-main { min-width: 0; flex: 1; }
.cn-file-main .cn-title { font-size: 14px; }
.cn-meta { margin: 2px 0 8px; color: #6e7781; font-size: 12px; overflow-wrap: anywhere; }

/* Connector handle */
.cnode-handle {
  position: absolute; z-index: 4; width: 14px; height: 14px; border: 3px solid var(--canvas-bg); border-radius: 50%;
  background: var(--accent-emphasis); cursor: crosshair; opacity: 0; transition: opacity .1s, transform .1s;
}
.cnode:hover .cnode-handle, .cnode.selected .cnode-handle { opacity: 1; }
.cnode-handle:hover { transform: scale(1.3); }

.canvas-tip {
  position: absolute; z-index: 20; max-width: 21.25rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: var(--bg-overlay); box-shadow: var(--shadow-overlay);
  pointer-events: none; font-size: 0.8125rem;
}
.canvas-tip.pinned { border-color: var(--accent-line); }
.canvas-tip strong { display: block; margin-bottom: 0.125rem; overflow-wrap: anywhere; }
.tip-desc { color: var(--fg-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; color: var(--fg-muted); padding: 1.5rem; }
.canvas-empty h2 { margin: 0 0 0.5rem; color: var(--fg-default); font-size: 1.25rem; }
.canvas-empty p { max-width: 28.75rem; margin: 0; }
.paper-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.paper-swatch { width: 1.75rem; height: 1.75rem; padding: 0; border: 0.125rem solid transparent; border-radius: 0.375rem; background: var(--paper); box-shadow: inset 0 0 0 1px #0000002e; }
.paper-swatch[aria-checked="true"] { border-color: var(--accent-line); box-shadow: 0 0 0 0.125rem var(--bg-overlay), 0 0 0 0.25rem var(--accent-line); }
.paper-swatch[data-paper="yellow"] { --paper: #fff3a6; } .paper-swatch[data-paper="orange"] { --paper: #ffe0c2; } .paper-swatch[data-paper="red"] { --paper: #ffd8d6; }
.paper-swatch[data-paper="pink"] { --paper: #ffd9ec; } .paper-swatch[data-paper="purple"] { --paper: #ebe2ff; } .paper-swatch[data-paper="blue"] { --paper: #dcebff; }
.paper-swatch[data-paper="teal"] { --paper: #d2f4f2; } .paper-swatch[data-paper="green"] { --paper: #dafbe1; } .paper-swatch[data-paper="gray"] { --paper: #eaeef2; }
.paper-swatch[data-paper="white"] { --paper: #ffffff; }
.pick-list { max-height: 16.25rem; overflow-y: auto; margin-top: 0.5rem; border: 1px solid var(--border-default); border-radius: 0.375rem; padding: 0.25rem; background: var(--bg-default); }
.pick-list.tall { max-height: 20rem; margin: 0 0 1rem; }
.pick-item { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--fg-default); text-align: left; }
.pick-item:hover { background: var(--hover-bg); }
.pick-item[aria-selected="true"] { background: color-mix(in srgb, var(--accent-emphasis) 15%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.pick-item .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-item .trail { color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; }
.form-hint.inline { font-weight: 400; }

/* ——— Chat additions ——— */
.seg { display: inline-flex; padding: 0.125rem; gap: 0.125rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-default); margin-left: auto; }
.seg button { height: 1.375rem; padding: 0 0.5rem; border: 0; border-radius: 0.25rem; background: transparent; color: var(--fg-muted); font-size: 0.75rem; font-weight: 600; }
.seg button[aria-checked="true"] { background: var(--btn-bg); color: var(--fg-default); box-shadow: inset 0 0 0 1px var(--border-default); }
.box-head .seg + .btn { margin-left: 0; }
.day-sep { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0.5rem 0.25rem; color: var(--fg-muted); font-size: 0.75rem; font-weight: 600; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.msg { position: relative; }
.msg-actions { position: absolute; top: 0.125rem; right: 0.375rem; display: flex; align-items: center; gap: 0.25rem; }
.msg-more { width: 1.625rem; height: 1.625rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-overlay); opacity: 0; }
.msg:hover .msg-more, .msg-more:focus-visible, .msg-more[aria-expanded="true"] { opacity: 1; }
.msg-del { display: none; align-items: center; gap: 0.3125rem; height: 1.625rem; padding: 0 0.5rem; border: 1px solid color-mix(in srgb, var(--danger-fg) 55%, transparent); border-radius: 0.375rem; background: var(--bg-overlay); color: var(--danger-fg); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.msg-del:hover { background: color-mix(in srgb, var(--danger-fg) 14%, var(--bg-overlay)); }
.shift-held .msg-del { display: inline-flex; }
.shift-held .msg-more { display: none; }
.msg-image { display: inline-block; margin-top: 0.375rem; }
.msg-image img { display: block; max-width: min(22.5rem, 100%); max-height: 16.25rem; border-radius: 0.375rem; border: 1px solid var(--border-default); }
.msg-file, .att-chip { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; padding: 0.375rem 0.625rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-default); color: var(--fg-default); font-size: 0.8125rem; max-width: 100%; }
.msg-file:hover { border-color: #656c76; text-decoration: none; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.att-size { color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; }
.chat-attachment { padding: 0.5rem 0.5rem 0; }
.chat-attachment .att-chip { margin: 0; padding-right: 0.125rem; max-width: 100%; }

@media (max-width: 900px) {
  #boardBar { flex-wrap: wrap; }
  .search-all-wrap { flex-basis: 100%; order: 3; }
  .filter-input-wrap { order: 4; flex-basis: 100%; }
  .seg { margin-left: 0; }
  .box-head { flex-wrap: wrap; }
}


/* ════════════════ Round 4: navigation + people ════════════════ */
.header-top { gap: 0.75rem; }
.header-left { gap: 0.5rem; }
.room-switch {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; max-width: 15rem; padding: 0 0.5rem 0 0.25rem;
  border: 1px solid var(--border-default); border-radius: 2em; background: var(--btn-bg); color: var(--fg-default); font-weight: 600;
}
.room-switch:hover { background: var(--btn-hover-bg); }
.room-switch-img { display: inline-flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; color: var(--fg-muted); }
.room-switch-img .room-img { font-size: 0.6875rem; }
.room-switch .room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-switch .caret { color: var(--fg-muted); flex-shrink: 0; }
.main-nav { margin-left: 0.25rem; }
.nav-btn { gap: 0.375rem; color: var(--fg-muted); }
.nav-btn .octicon { color: currentColor; }
.nav-btn:hover { color: var(--fg-default); }
.nav-btn.selected { color: var(--fg-default); }
.header-search { flex: 0 1 20rem; margin-left: auto; }
.header-search .filter-input { background: var(--bg-default); }
.header-right { margin-left: 0; }
.header-title-row { display: none; }
.tabs-row { display: flex; align-items: flex-end; gap: 0.75rem; padding-right: 1rem; margin-bottom: -1px; }
.tabs-row .view-tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.tabs-right { display: flex; align-items: center; gap: 0.375rem; padding-bottom: 0.375rem; flex-shrink: 0; }
.tabs-right .view-switch { background: var(--bg-default); }
#projectSettingsBtn .octicon, #projectSettingsBtn svg { color: var(--fg-muted); }
.done-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #2386361f; color: var(--green-fg); flex-shrink: 0; }
.conflict-row { margin-bottom: 0.875rem; }
.conflict-label { font-weight: 600; margin-bottom: 0.375rem; }
.conflict-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.conflict-text { margin: 0.25rem 0 0; padding: 0.5rem 0.625rem; max-height: 13.75rem; overflow: auto; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-default); font-family: var(--font); font-size: 0.8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.conflict-text.mine { border-color: var(--accent-line-soft); }

/* Drawer */
.drawer-room { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.5rem; padding: 0.625rem; border: 1px solid var(--border-default); border-radius: 0.625rem; background: var(--bg-default); color: var(--fg-default); text-decoration: none; }
.drawer-room:hover { border-color: #656c76; text-decoration: none; }
.drawer-room-img { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.drawer-room-img .room-img { font-size: 0.9375rem; }
.drawer-room-main { display: flex; flex-direction: column; min-width: 0; }
.drawer-room-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-room-main small { color: var(--fg-muted); font-size: 0.75rem; }
a.menu-item { text-decoration: none; }
.drawer-foot { display: flex; flex-direction: column; }

/* Room settings */
.settings-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 0.25rem; margin: 0.75rem 0 0; padding: 0.5rem 0; background: var(--bg-default); border-bottom: 1px solid var(--border-default); overflow-x: auto; }
.settings-tab { height: 1.875rem; padding: 0 0.75rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; color: var(--fg-muted); font-weight: 600; white-space: nowrap; }
.settings-tab:hover { background: var(--hover-bg); color: var(--fg-default); }
.member-row { align-items: center; }
.member-row.pending .avatar { opacity: .5; }
.member-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.member-actions { flex-shrink: 0; }
.badge-pending { border-color: #9e6a03; color: var(--yellow-fg); }
.leave-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.danger-section .danger-row + .danger-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f8514933; }

@media (max-width: 900px) {
  .tabs-row { flex-wrap: wrap; padding: 0 1rem; }
  .tabs-right { padding-bottom: 0.375rem; }
  .conflict-cols { grid-template-columns: 1fr; }
}

/* ——— Round 5: admin 2FA notice, activity list, meetings, project map history ——— */
.flash-warn { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; margin: 0 0 1rem; border: 1px solid #9e6a03; border-radius: 0.375rem; background: #1d1609; color: var(--yellow-fg); }
.flash-warn > svg { flex: none; margin-top: 2px; }
.flash-warn > div { flex: 1; min-width: 0; }
.flash-warn strong { color: var(--fg-default); }
.flash-warn .form-hint { margin: 0.25rem 0 0; }
.activity-list { list-style: none; margin: 0 0 0.75rem; padding: 0; border: 1px solid var(--border-default); border-radius: 0.375rem; }
.activity-row { display: flex; gap: 0.75rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border-default); font-size: 0.8125rem; line-height: 1.45; }
.activity-row:first-child { border-top: 0; }
.activity-row time { flex: none; width: 10.625rem; white-space: nowrap; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.activity-text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .activity-row { flex-direction: column; gap: 0.125rem; } .activity-row time { width: auto; } }
.inline-field #invEmail { max-width: 15rem; }
.auth-link-btn { background: none; border: 0; padding: 0; color: var(--fg-accent, var(--fg-accent)); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.auth-link-btn:hover { text-decoration: underline; }
.forgot-line { margin: -6px 0 0.625rem; text-align: right; }
.meet-pin.past .meet-pin-dot { background: #6e7681; opacity: .85; }
.meet-pin.past:hover .meet-pin-dot { background: #9d9d96; }
.meet-past-toggle { background: var(--overlay-soft); color: var(--fg-default); border: 1px solid var(--border-default); border-radius: 0.375rem; padding: 0.25rem 0.625rem; font: 0.75rem/1.4 -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
.meet-past-toggle[aria-pressed="true"] { border-color: var(--accent-line); }
.meet-past-toggle[hidden] { display: none; }

/* ══════════ Round 6: due dates, checklists, comments, notifications, calendar, progress, templates, map extras ══════════ */
.toggle-row { font-weight: 500; }
.avatar.xs { width: 1rem; height: 1rem; font-size: 0.4375rem; }

/* Card tokens */
.token-due { gap: 0.25rem; }
.token-due.due-overdue { color: var(--red-fg); border-color: #f8514966; background: #f851491a; font-weight: 600; }
.token-due.due-today { color: var(--yellow-fg); border-color: #d2992266; background: #d299221a; font-weight: 600; }
.token-due.due-soon { color: var(--yellow-fg); border-color: #9e6a0366; }
.token-due.due-done { color: var(--fg-muted); text-decoration: line-through; }
.token-check.complete { color: var(--green-fg); border-color: #23863666; background: #2386361a; }
.token-plain { gap: 0.25rem; }
.card-fields { flex-wrap: wrap; row-gap: 0.25rem; }

/* Task panel: due date, checklist, comments */
.due-row { display: flex; gap: 0.25rem; align-items: center; }
.due-row .form-control { flex: 1; }
.due-hint.due-overdue { color: var(--red-fg); } .due-hint.due-today { color: var(--yellow-fg); } .due-hint.due-soon { color: var(--yellow-fg); }
.panel-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.ps-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; color: var(--fg-muted); }
.ps-head h3 { margin: 0; font-size: 0.875rem; color: var(--fg-default); }
.ps-count { margin-left: auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cl-bar { height: 0.375rem; border-radius: 0.1875rem; background: var(--bg-muted); overflow: hidden; margin-bottom: 0.5rem; }
.cl-bar span { display: block; height: 100%; border-radius: 0.1875rem; background: var(--accent-emphasis); transition: width .25s ease; }
.cl-bar.complete span { background: var(--success-emphasis); }
.cl-list { list-style: none; margin: 0 0 0.375rem; padding: 0; }
.cl-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0.25rem; border-radius: 0.375rem; }
.cl-row:hover { background: var(--hover-bg); }
.cl-row input[type=checkbox] { width: 1rem; height: 1rem; margin: 0; accent-color: #238636; flex: none; }
.cl-text { flex: 1; min-width: 0; padding: 0.25rem 0.375rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; }
.cl-text:focus { border-color: var(--accent-line); background: var(--bg-default); outline: none; }
.cl-row.done .cl-text { color: var(--fg-muted); text-decoration: line-through; }
.cl-del { opacity: 0; }
.cl-row:hover .cl-del, .cl-del:focus-visible { opacity: 1; }
.cl-add .form-control { height: 2rem; }
.cm-list { list-style: none; margin: 0 0 0.625rem; padding: 0; max-height: 22.5rem; overflow-y: auto; }
.cm-row { display: flex; gap: 0.625rem; padding: 0.5rem 0; }
.cm-row + .cm-row { border-top: 1px solid var(--border-muted); }
.cm-row > .avatar { margin-top: 0.125rem; flex: none; }
.cm-main { flex: 1; min-width: 0; }
.cm-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.cm-head strong { font-size: 0.8125rem; }
.cm-head time { font-size: 0.75rem; color: var(--fg-muted); }
.cm-tools { margin-left: auto; display: inline-flex; gap: 0.625rem; opacity: 0; }
.cm-row:hover .cm-tools, .cm-tools:focus-within { opacity: 1; }
.link-btn.danger { color: var(--danger-fg); }
.cm-body { margin-top: 0.125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-edit-actions { display: flex; justify-content: flex-end; gap: 0.375rem; margin-top: 0.375rem; }
.cm-empty { padding: 0.625rem 0; color: var(--fg-muted); font-size: 0.8125rem; }
.cm-input-wrap { position: relative; }
.cm-add textarea { resize: vertical; min-height: 3.5rem; }
.cm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; margin-top: 0.375rem; }
.mention { padding: 0 0.1875rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--accent-emphasis) 15%, transparent); color: var(--lime-fg); font-weight: 600; }
.msg.mentions-me { background: linear-gradient(90deg, #d2992226, transparent 70%); }
.mention-box { position: absolute; left: 0; bottom: calc(100% + 0.25rem); z-index: 60; min-width: 15rem; max-width: 20rem; padding: 0.25rem; border-radius: 0.5rem; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); }
.chat-composer { position: relative; }
.mention-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.375rem; background: none; text-align: left; }
.mention-row.active, .mention-row:hover { background: var(--hover-bg); }
.mention-name { font-weight: 600; }
.mention-user { margin-left: auto; color: var(--fg-muted); font-size: 0.75rem; }

/* Bell + notifications */
.bell-btn { position: relative; width: 2rem; height: 2rem; color: var(--fg-muted); }
.bell-btn:hover { color: var(--fg-default); }
.bell-count { position: absolute; top: -3px; right: -5px; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border: 0.125rem solid var(--bg-inset); border-radius: 0.5625rem; background: #da3633; color: #fff; font-size: 0.625rem; font-weight: 700; line-height: 0.875rem; text-align: center; }
.notif-panel { position: fixed; z-index: 120; width: min(25rem, calc(100vw - 1rem)); max-height: min(35rem, calc(100vh - 5rem)); display: flex; flex-direction: column; border-radius: 0.75rem; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); overflow: hidden; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-default); }
.np-head h2 { margin: 0; font-size: 0.9375rem; }
.np-list { list-style: none; margin: 0; padding: 0.25rem; overflow-y: auto; }
.np-item { display: flex; gap: 0.625rem; width: 100%; padding: 0.625rem 0.75rem; border: 0; border-radius: 0.5rem; background: none; text-align: left; color: var(--fg-muted); }
.np-item:hover { background: var(--hover-bg); }
.np-item.unread { color: var(--fg-default); }
.np-item.unread .np-text::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem; border-radius: 50%; background: var(--fg-accent); vertical-align: 1px; }
.np-icon { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--bg-muted); }
.np-icon.k-mention { color: var(--lime-fg); background: color-mix(in srgb, var(--accent-emphasis) 15%, transparent); }
.np-icon.k-assigned { color: var(--green-fg); background: #2386361f; }
.np-icon.k-due { color: var(--yellow-fg); background: #d2992226; }
.np-icon.k-comment { color: var(--purple-fg); background: #8957e526; }
.np-main { display: flex; flex-direction: column; min-width: 0; }
.np-text { font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.np-meta { margin-top: 0.125rem; font-size: 0.75rem; color: var(--fg-muted); }
.np-empty { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1.75rem 1.5rem; color: var(--fg-muted); text-align: center; font-size: 0.8125rem; }
.np-empty p { margin: 0; }

/* New project: templates */
.np-form .dialog-msg { margin-top: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.625rem; margin-bottom: 0.875rem; }
.tpl-card { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.75rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.625rem; background: var(--bg-default); text-align: left; transition: border-color .12s, box-shadow .12s, transform .12s; }
.tpl-card:hover { border-color: #9d9d96; transform: translateY(-1px); }
.tpl-card.selected { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), 0 0.375rem 1.125rem -8px var(--accent-line-soft); }
.tpl-art { display: flex; gap: 0.25rem; height: 2.875rem; margin-bottom: 0.25rem; padding: 0.375rem; border-radius: 0.375rem; background: var(--bg-inset); }
.tpl-col { flex: 1; display: flex; flex-direction: column; gap: 0.1875rem; padding-top: 0.25rem; border-top: 0.1875rem solid var(--ring); border-radius: 0.125rem; }
.tpl-col i { display: block; height: 0.4375rem; border-radius: 0.125rem; background: var(--hover-strong); }
.tpl-col i + i { width: 70%; }
.tpl-name { font-weight: 600; }
.tpl-desc { font-size: 0.75rem; color: var(--fg-muted); line-height: 1.4; }
.tpl-meta { margin-top: auto; padding-top: 0.25rem; font-size: 0.6875rem; color: var(--fg-muted); }
.tpl-del { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 0.375rem; color: var(--fg-muted); background: var(--bg-default); opacity: 0; }
.tpl-card:hover .tpl-del, .tpl-del:focus-visible { opacity: 1; }
.tpl-del:hover { color: var(--danger-fg); }

/* Progress view */
.progress-view { flex: 1; min-height: 0; overflow-y: auto; }
.tasks-page { display: flex; flex-direction: column; }
.pg { max-width: 68.75rem; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.pg-hero { display: flex; align-items: center; gap: 1.75rem; padding: 1.375rem 1.5rem; border: 1px solid var(--border-default); border-radius: 0.75rem; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-emphasis) 12%, transparent), transparent 60%), var(--bg-inset); }
.pg-ring { position: relative; width: 8.25rem; height: 8.25rem; flex: none; }
.pg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-ring circle { fill: none; stroke-width: 12; }
.pg-ring-bg { stroke: var(--hover-strong); }
.pg-ring-fg { stroke: var(--accent-line); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.pg-ring.complete .pg-ring-fg { stroke: #2ea043; }
.pg-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pg-ring-text strong { font-size: 1.875rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pg-ring-text span { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em; }
.pg-hero-main { min-width: 0; flex: 1; }
.pg-title { margin: 0; font-size: 1.375rem; }
.pg-sub { margin: 0.25rem 0 0.875rem; color: var(--fg-muted); }
.pg-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pg-stat { display: flex; flex-direction: column; min-width: 5.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-default); }
.pg-stat strong { font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pg-stat span { font-size: 0.75rem; color: var(--fg-muted); }
.pg-stat.ok strong { color: var(--green-fg); } .pg-stat.bad strong { color: var(--red-fg); } .pg-stat.warn strong { color: var(--yellow-fg); }
.pg-card { padding: 1rem 1.125rem; border: 1px solid var(--border-default); border-radius: 0.75rem; background: var(--bg-inset); }
.pg-card h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.875rem; }
.pg-card h3 .octicon { color: var(--fg-muted); }
.pg-h-danger .octicon { color: var(--red-fg) !important; }
.pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pg-stack { display: flex; gap: 0.1875rem; height: 1rem; margin-bottom: 0.75rem; }
.pg-seg { min-width: 0.375rem; border-radius: 0.25rem; background: var(--ring); }
.pg-seg.empty { flex: 1; background: var(--bg-muted); }
.pg-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.pg-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.pg-legend strong { font-variant-numeric: tabular-nums; }
.pg-swatch { width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; background: var(--ring); }
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-task { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.4375rem 0.5rem; border: 0; border-radius: 0.375rem; background: none; text-align: left; }
.pg-task:hover { background: var(--hover-bg); }
.pg-task .token { flex: none; min-width: 5.25rem; justify-content: center; }
.pg-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pg-task-col { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; }
.pg-task-people { display: inline-flex; }
.pg-task-people .avatar { margin-left: -5px; border: 0.125rem solid var(--bg-inset); }
.pg-empty { padding: 0.5rem; color: var(--fg-muted); font-size: 0.8125rem; list-style: none; }
.pg-person { display: grid; grid-template-columns: 1.25rem minmax(6.875rem, 12.5rem) 1fr auto; align-items: center; gap: 0.625rem; padding: 0.375rem 0; }
.pg-person + .pg-person { border-top: 1px solid var(--border-muted); }
.pg-pname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-pbar { height: 0.5rem; border-radius: 0.25rem; background: var(--bg-muted); overflow: hidden; }
.pg-pbar span { display: block; height: 100%; border-radius: 0.25rem; background: #2ea043; }
.pg-pnums { font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-person.late .pg-pnums { color: var(--red-fg); }
.pg-unassigned { margin: 0.625rem 0 0; }
@media (max-width: 760px) {
  .pg { padding: 1rem; }
  .pg-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .pg-grid { grid-template-columns: 1fr; }
  .pg-person { grid-template-columns: 1.25rem 1fr auto; }
  .pg-pbar { grid-column: 2 / -1; grid-row: 2; }
  .pg-task-col { display: none; }
}

/* Calendar */
.calendar-page { display: flex; flex-direction: column; overflow: hidden; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.625rem 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-default); }
.cal-nav { display: flex; align-items: center; gap: 0.375rem; }
.cal-nav .icon-btn { width: 2rem; height: 2rem; font-size: 1.125rem; line-height: 1; }
.cal-title { margin: 0 0 0 0.5rem; font-size: 1.25rem; text-transform: capitalize; }
.cal-tools { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; }
.cal-legend { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--fg-muted); }
.lg { display: inline-block; width: 0.625rem; height: 0.625rem; margin-left: 0.5rem; border-radius: 0.1875rem; }
.lg-task { background: var(--accent-emphasis); } .lg-meet { background: #2ea043; } .lg-late { background: #da3633; }
.cal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(6.75rem, 1fr); overflow-y: auto; }
.cal-wd { position: sticky; top: 0; z-index: 2; padding: 0.375rem 0.625rem; border-bottom: 1px solid var(--border-default); background: var(--bg-default); font-size: 0.75rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid { grid-template-rows: auto; }
.cal-day { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0.25rem 0.375rem 0.375rem; border-right: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); }
.cal-day:nth-child(7n + 7) { border-right: 0; }
.cal-day.other { background: var(--bg-inset); }
.cal-day.other .cal-num { color: #656c76; }
.cal-day.today { background: color-mix(in srgb, var(--accent-emphasis) 8%, transparent); }
.cal-day.today .cal-num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent-emphasis); color: var(--on-accent); }
.cal-day.drop { background: #2386361f; box-shadow: inset 0 0 0 0.125rem #238636; }
.cal-dhead { display: flex; align-items: center; gap: 0.375rem; height: 1.625rem; }
.cal-num { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-wdm { display: none; }
.cal-add { margin-left: auto; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; padding: 0; border: 0; border-radius: 0.3125rem; background: none; color: var(--fg-muted); opacity: 0; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: var(--hover-bg); color: var(--fg-default); }
.cal-events { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 0.3125rem; width: 100%; min-width: 0; padding: 0.125rem 0.375rem; border: 0; border-radius: 0.25rem; background: #ffffff0d; color: var(--fg-default); font-size: 0.75rem; line-height: 1.125rem; text-align: left; }
.cal-chip::before { content: ""; flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--ring, var(--accent-line)); }
.cal-chip:hover { background: var(--hover-strong); }
.cal-chip.task { cursor: grab; }
.cal-chip.dragging { opacity: .4; }
.cal-chip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-people { display: inline-flex; flex: none; }
.cal-chip-people .avatar { margin-left: -4px; }
.cal-chip.done .cal-chip-title { color: var(--fg-muted); text-decoration: line-through; }
.cal-chip.late { --ring: #da3633; background: #da36331f; }
.cal-chip.late .cal-chip-title { color: var(--red-fg); }
.cal-chip.urgent:not(.done)::before { content: '!'; flex: none; display: grid; place-items: center; width: 0.8125rem; height: 0.8125rem; border-radius: 50%; background: #da3633; color: #fff; font-size: 0.625rem; font-weight: 800; }
.cal-chip.meet { background: #2ea0431f; }
.cal-chip.meet::before { content: none; }
.cal-chip.meet .octicon { color: var(--green-fg); flex: none; }
.cal-chip-time { flex: none; color: var(--green-fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.cal-chip.extra { display: none; }
.cal-day.expanded .cal-chip.extra { display: flex; }
.cal-more { align-self: flex-start; padding: 0 0.375rem; border: 0; background: none; color: var(--fg-accent); font-size: 0.75rem; }
.cal-hint { margin: 0; padding: 0.625rem 1rem; border-top: 1px solid var(--border-default); color: var(--fg-muted); font-size: 0.8125rem; }
.cal-meet-when { margin: 0 0 0.5rem; font-weight: 600; }
.cal-meet-notes { margin: 0 0 0.875rem; color: var(--fg-muted); white-space: pre-wrap; }


/* Project map: frames, votes, timer, time-up flash */
.cnode.k-frame { width: auto; padding: 0; border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--paper) 14%, transparent); box-shadow: none; cursor: default; z-index: 0; }
.cnode.k-frame:hover { box-shadow: none; }
.cnode.k-frame.selected, .cnode.k-frame:focus-visible { box-shadow: 0 0 0 2px var(--accent-line); }
.cnode.k-frame.dragging { transform: none; }
.cn-frame-label { position: absolute; left: -2px; top: -30px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + 4px); height: 26px; padding: 0 12px; border-radius: 8px 8px 0 0; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: move; white-space: nowrap; overflow: hidden; }
.cn-frame-title { overflow: hidden; text-overflow: ellipsis; }
.cn-frame-label .cn-has-desc { color: #ffffffcc; }
.cn-frame-resize { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-right: 4px solid var(--accent); border-bottom: 4px solid var(--accent); border-bottom-right-radius: 14px; cursor: nwse-resize; }
.cnode:not(.k-frame) { z-index: 1; }
.cn-votes { position: absolute; top: -11px; right: -9px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border: 2px solid #121211; border-radius: 11px; background: var(--accent-emphasis); color: var(--on-accent); font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px #0006; }
.cn-votes.mine { background: #238636; }
.cn-vote-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.canvas-bar [data-act=vote].voted { border-color: #238636; color: var(--green-fg); }
.canvas-bar [data-act=vote].voted .octicon { color: var(--green-fg); }
.timer-btn .timer-text { font-variant-numeric: tabular-nums; min-width: 2.25rem; text-align: left; }
.timer-btn.running { border-color: var(--accent-line); color: var(--lime-fg); }
.timer-btn.running .octicon { color: var(--lime-fg); }
.timer-btn.ending { border-color: #da3633; color: var(--red-fg); box-shadow: 0 0 0 1px #da3633; }
.timer-btn.ending .octicon { color: var(--red-fg); }
.canvas-wrap.time-up { box-shadow: inset 0 0 0 0.1875rem #da3633; }
.canvas-bar { flex-wrap: wrap; row-gap: 0.375rem; }
.pg-grid > * { min-width: 0; }

@media (max-width: 480px) {
  .header-top { column-gap: 0.375rem; }
  .room-switch { max-width: 7.25rem; }
  .main-nav { gap: 0; margin-left: 0; }
  .nav-btn { padding: 0 0.4375rem; }
  .header-right { gap: 0.25rem; }
}
@media (max-width: 600px) {
  .tabs-row .view-tabs { flex: 1 1 100%; min-width: 0; }
  .tabs-right { width: 100%; justify-content: space-between; padding-top: 0.25rem; }
  .view-switch .vs-btn { padding: 0 0.625rem; }
}

/* ══════════ Round 7 ══════════ */
/* Project tabs: scroll arrows, always-visible "+" and "all projects" */
.tabs-strip { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; }
.tabs-strip .view-tabs { flex: 0 1 auto; min-width: 0; padding: 0 0.25rem 0 1rem; scroll-behavior: auto; }
.tabs-scroll { flex: none; align-self: center; display: grid; place-items: center; width: 1.625rem; height: 1.75rem; margin-bottom: 0.125rem; padding: 0; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--btn-bg); color: var(--fg-muted); }
.tabs-scroll:hover:not(:disabled) { color: var(--fg-default); background: var(--btn-hover-bg, #2b2b2a); }
.tabs-scroll:disabled { opacity: .35; cursor: default; }
.tabs-scroll.left { margin-left: 0.75rem; }
.tabs-scroll.right { margin-left: 0.25rem; }
.tabs-scroll[hidden], .tabs-all[hidden] { display: none; }
.tabs-all { align-self: center; margin-left: 0.25rem; margin-bottom: 1px; }
.tabs-strip .new-tab-btn { flex: none; }
.tabs-strip.fade-left .view-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.75rem); mask-image: linear-gradient(90deg, transparent 0, #000 1.75rem); }
.tabs-strip.fade-right .view-tabs { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 1.75rem); mask-image: linear-gradient(270deg, transparent 0, #000 1.75rem); }
.tabs-strip.fade-left.fade-right .view-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.75rem, #000 calc(100% - 1.75rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 1.75rem, #000 calc(100% - 1.75rem), transparent 100%); }
.tabs-row .tabs-strip .view-tabs { flex: 0 1 auto; }
@media (max-width: 600px) { .tabs-row .tabs-strip { flex: 1 1 100%; } .tabs-scroll.left { margin-left: 0; } }
.board-start { align-self: flex-start; max-width: 26.25rem; margin: 0.5rem 0.5rem 0 0; padding: 1.25rem 1.375rem; border: 1px dashed var(--border-default); border-radius: 0.5rem; background: var(--bg-inset); }
.board-start h2 { margin: 0 0 0.375rem; font-size: 1rem; }
.board-start p { margin: 0 0 0.875rem; color: var(--fg-muted); line-height: 1.5; }
.tpl-art.empty { border: 1px dashed var(--border-default); background: transparent; }
.tpl-col { border-top-color: #9d9d96; }
.tpl-howto { margin: 0.25rem 0 0; }

/* Project map: 4 connection dots, drag-in blocks, drawing mode */
.cnode-handle.h-right { right: -8px; top: 50%; margin-top: -7px; }
.cnode-handle.h-left { left: -8px; top: 50%; margin-top: -7px; }
.cnode-handle.h-top { top: -8px; left: 50%; margin-left: -7px; }
.cnode-handle.h-bottom { bottom: -8px; left: 50%; margin-left: -7px; }
.tile-ghost { position: fixed; z-index: 300; pointer-events: none; transform: translate(-50%, -60%) scale(1.05); opacity: .92; background: var(--bg-overlay); border: 1px solid var(--accent-line); box-shadow: var(--shadow-overlay); }
.canvas-wrap.drop-ready { box-shadow: inset 0 0 0 0.125rem var(--accent-line-soft); }
.draw-dim { position: absolute; inset: 0; z-index: 2; background: #0a0a09; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.canvas-wrap.drawing .draw-dim { opacity: .6; }
.canvas-ink-world { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; pointer-events: none; }
.canvas-ink { position: absolute; left: 0; top: 0; overflow: visible; }
.ink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.canvas-world { z-index: 1; }
.canvas-wrap.drawing { cursor: crosshair; }
.canvas-wrap.drawing.erasing { cursor: cell; }
.canvas-wrap.drawing.space-pan, .canvas-wrap.drawing.panning { cursor: grabbing; }
.canvas-wrap.drawing .canvas-tip, .canvas-wrap.drawing .cnode-handle { display: none; }
.canvas-wrap.drawing .canvas-world { pointer-events: none; }
.draw-tools { position: absolute; z-index: 6; top: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; max-width: calc(100% - 1.5rem); padding: 0.375rem 0.5rem 0.375rem 0.625rem; border: 1px solid var(--border-default); border-radius: 0.75rem; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); flex-wrap: wrap; }
.draw-tools[hidden] { display: none; }
.dt-group { display: flex; align-items: center; gap: 0.25rem; }
.dt-sep { width: 1px; height: 1.375rem; background: var(--border-default); }
.dt-color { width: 1.375rem; height: 1.375rem; padding: 0; border: 0.125rem solid transparent; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px #0006; }
.dt-color.on { border-color: #f5f5f2; box-shadow: 0 0 0 0.125rem var(--accent-line); }
.dt-size { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid transparent; border-radius: 0.375rem; background: none; }
.dt-size span { display: block; border-radius: 50%; }
.dt-size.on { border-color: var(--border-default); background: var(--hover-bg); }
.dt-btn { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.625rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--btn-bg); color: var(--fg-default); font-size: 0.75rem; }
.dt-btn[aria-pressed="true"] { border-color: var(--accent-line); color: var(--lime-fg); background: color-mix(in srgb, var(--accent-emphasis) 12%, transparent); }
.dt-hint { color: var(--fg-muted); font-size: 0.75rem; }
.ctile[data-act=draw].on { background: color-mix(in srgb, var(--accent-emphasis) 15%, transparent); border-color: var(--accent-line); color: var(--fg-default); }
@media (max-width: 760px) { .dt-hint { display: none; } }

/* Progress page — same boxes and calm colours as the settings pages */
.pg { max-width: 63.25rem; gap: 0; padding: 1.5rem 1.5rem 3rem; }
.pg-head { margin-bottom: 0.25rem; }
.pg-title { margin: 0 0 0.25rem; }
.pg-sub { margin: 0; color: var(--fg-muted); font-size: 0.875rem; }
.pg-box { margin-top: 1rem; }
.pg-box > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--bg-default); border-radius: 0.375rem 0.375rem 0 0; }
.pg-box > header h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.pg-box > header h2 .octicon { color: var(--fg-muted); }
.pg-box .pg-box-aside { color: var(--fg-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.pg-late > header .pg-box-aside:not(:empty) { padding: 0 0.5rem; border-radius: 0.625rem; background: #f8514926; color: var(--red-fg); font-weight: 600; }
.pg-late > header h2 .octicon { color: var(--red-fg); }
.pg-bar-row { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.pg-bar { flex: 1; height: 0.625rem; border-radius: 0.3125rem; background: var(--bg-muted, #242423); overflow: hidden; }
.pg-bar span { display: block; height: 100%; border-radius: 0.3125rem; background: var(--accent-emphasis); }
.pg-bar.complete span { background: #2ea043; }
.pg-pct { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border-default); border-radius: 0.375rem; overflow: hidden; }
.pg-stat { min-width: 0; padding: 0.75rem 0.875rem; border: 0; border-radius: 0; background: var(--bg-default); }
.pg-stat + .pg-stat { border-left: 1px solid var(--border-default); }
.pg-stat strong { display: block; font-size: 1.5rem; line-height: 1.2; font-weight: 600; }
.pg-stat span { font-size: 0.8125rem; color: var(--fg-muted); }
.pg-stat.ok strong { color: var(--green-fg); } .pg-stat.bad strong { color: var(--red-fg); } .pg-stat.warn strong { color: var(--yellow-fg); }
.pg-grid { gap: 1rem; }
.pg-grid > .pg-box { margin-top: 1rem; }
.pg-stack { height: 0.75rem; gap: 0.125rem; margin-bottom: 0.875rem; }
.pg-seg { border-radius: 0.1875rem; }
.pg-legend { gap: 0.5rem 1.25rem; font-size: 0.875rem; }
.pg-legend strong { color: var(--fg-default); }
.pg-box .settings-body:has(> .pg-list) { padding: 0.25rem 0.5rem; }
.pg-list li + li { border-top: 1px solid var(--border-muted, #242423); }
.pg-task { padding: 0.625rem 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; }
.pg-task .token { min-width: 5.375rem; }
.pg-task-title { font-weight: 500; color: var(--fg-default); }
.pg-empty { padding: 0.625rem 0.5rem; font-size: 0.875rem; }
.pg-person { padding: 0.625rem 0; font-size: 0.875rem; }
.pg-pnums { font-size: 0.8125rem; }
.pg-pbar { height: 0.5rem; }
@media (max-width: 760px) {
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-stat + .pg-stat { border-left: 0; }
  .pg-stat { border-top: 1px solid var(--border-default); }
  .pg-stat:nth-child(-n+2) { border-top: 0; }
  .pg-stat:nth-child(even) { border-left: 1px solid var(--border-default); }
  .pg-box .pg-box-aside { display: none; }
}

/* File viewer (images and text files shared in the room) */
.viewer { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--viewer-bg); }
.viewer-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--border-default); background: var(--bg-default); }
.viewer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.viewer-size { margin-right: auto; color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; }
.viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: auto; }
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.25rem; box-shadow: 0 0.5rem 2.5rem #000a; cursor: zoom-in; background: #fff; }
.viewer-img.zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.viewer-text { align-self: stretch; width: min(56.25rem, 100%); margin: 0 auto; padding: 1.25rem 1.5rem; overflow: auto; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-default); color: var(--fg-default); font: 0.8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-table-wrap { align-self: stretch; width: min(68.75rem, 100%); margin: 0 auto; overflow: auto; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-default); }
.viewer-table { border-collapse: collapse; font-size: 0.8125rem; }
.viewer-table th, .viewer-table td { padding: 0.375rem 0.625rem; border-bottom: 1px solid var(--border-default); border-right: 1px solid var(--border-muted, #242423); text-align: left; white-space: nowrap; }
.viewer-table th { position: sticky; top: 0; background: var(--bg-inset); font-weight: 600; }
.msg-file-wrap { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; }
.att-open { margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 0.625rem; background: color-mix(in srgb, var(--accent-emphasis) 15%, transparent); color: var(--lime-fg); font-size: 0.6875rem; font-weight: 600; }
.msg-image { cursor: zoom-in; }
.cn-file-btns { display: flex; gap: 6px; }
@media (max-width: 600px) { .viewer-body { padding: 0.5rem; } .viewer-text { padding: 0.75rem; } }

/* Guide / wiki */
.wiki-page { overflow: hidden; }
.wiki { display: flex; height: 100%; min-height: 0; }
.wiki-side { flex: none; width: 16.25rem; display: flex; flex-direction: column; gap: 0.625rem; padding: 1.25rem 0.75rem; border-right: 1px solid var(--border-default); background: var(--bg-inset); overflow-y: auto; }
.wiki-side-head { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; font-size: 0.9375rem; }
.wiki-search { height: 2rem; }
.wiki-toc { display: flex; flex-direction: column; gap: 1px; }
.wiki-group { margin: 0.75rem 0.5rem 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.wiki-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; color: var(--fg-default); text-decoration: none; font-size: 0.875rem; }
.wiki-link .octicon { color: var(--fg-muted); flex: none; }
.wiki-link:hover { background: var(--hover-bg); text-decoration: none; }
.wiki-link.current { background: var(--hover-bg); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-default); }
.wiki-main { flex: 1; min-width: 0; overflow-y: auto; }
.wiki-article { max-width: 47.5rem; padding: 1.75rem 2rem 4rem; font-size: 0.9375rem; line-height: 1.65; }
.wiki-crumb { margin: 0 0 0.25rem; color: var(--fg-muted); font-size: 0.8125rem; }
.wiki-article h2 { margin: 1.75rem 0 0.5rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--border-default); font-size: 1.125rem; }
.wiki-article p { margin: 0 0 0.75rem; }
.wiki-article ul, .wiki-article ol { margin: 0 0 0.875rem; padding-left: 1.375rem; }
.wiki-article li { margin: 0.25rem 0; }
.wiki-article kbd, .wiki-keys kbd { display: inline-block; padding: 1px 0.375rem; border: 1px solid var(--border-default); border-bottom-width: 0.125rem; border-radius: 0.3125rem; background: var(--bg-inset); font: 0.75rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wiki-tip { display: flex; gap: 0.625rem; margin: 1rem 0; padding: 0.75rem 0.875rem; border: 1px solid var(--accent-line-soft); border-radius: 0.375rem; background: color-mix(in srgb, var(--accent-emphasis) 8%, transparent); }
.wiki-tip .octicon { flex: none; margin-top: 4px; color: var(--lime-fg); }
.wiki-tip p { margin: 0; }
.wiki-keys { width: 100%; border-collapse: collapse; border: 1px solid var(--border-default); border-radius: 0.375rem; }
.wiki-keys td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-default); vertical-align: middle; }
.wiki-keys td:first-child { width: 42%; white-space: nowrap; }
.wiki-next { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.wiki-next a { display: flex; flex-direction: column; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: 0.375rem; color: var(--fg-default); text-decoration: none; min-width: 0; }
.wiki-next a:hover { border-color: #9d9d96; text-decoration: none; }
.wiki-next a span { color: var(--fg-muted); font-size: 0.75rem; }
.wiki-next .wiki-nxt { margin-left: auto; text-align: right; }
.help-btn { width: 2rem; height: 2rem; color: var(--fg-muted); }
@media (max-width: 760px) {
  .wiki { flex-direction: column; height: auto; }
  .wiki-page { overflow-y: auto; }
  .wiki-side { width: auto; border-right: 0; border-bottom: 1px solid var(--border-default); padding: 0.75rem 1rem; max-height: none; }
  .wiki-toc { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
  .wiki-group { display: none; }
  .wiki-link { padding: 0.25rem 0.625rem; border: 1px solid var(--border-default); font-size: 0.8125rem; }
  .wiki-link .octicon { display: none; }
  .wiki-main { overflow: visible; }
  .wiki-article { padding: 1.25rem 1rem 3rem; }
}
@media (max-width: 480px) { .help-btn { display: none; } }

/* ═══ Round 8 ═══ */
/* Board: wide boards scroll sideways */
.tasks-page { position: relative; }
.board { scrollbar-width: auto; scrollbar-color: #545d68 transparent; }
.board::-webkit-scrollbar { height: 0.75rem; }
.board::-webkit-scrollbar-thumb { background: #545d68; border-radius: 0.375rem; border: 0.125rem solid var(--bg-default); }
.board.panning, .board.panning * { cursor: grabbing !important; user-select: none; }
.board-scroll { position: absolute; top: 55%; z-index: 6; display: grid; place-items: center; width: 2.25rem; height: 3.5rem; padding: 0; border: 1px solid var(--border-default); background: #1b1b1ae6; color: var(--fg-default); box-shadow: 0 0.25rem 0.875rem #0008; cursor: pointer; }
.board-scroll.left { left: 0; border-left: 0; border-radius: 0 0.5rem 0.5rem 0; }
.board-scroll.right { right: 0; border-right: 0; border-radius: 0.5rem 0 0 0.5rem; }
.board-scroll:hover { background: var(--btn-hover-bg); }
.board-scroll[hidden] { display: none; }

/* Project map: select several */
.canvas-lasso { position: absolute; z-index: 5; border: 1px solid var(--accent-line); background: color-mix(in srgb, var(--accent-emphasis) 12%, transparent); border-radius: 0.125rem; pointer-events: none; }
.canvas-wrap.area-mode, .canvas-wrap.area-mode .cnode.k-frame { cursor: crosshair; }
.select-area-btn.on { background: color-mix(in srgb, var(--accent-emphasis) 15%, transparent); color: var(--lime-fg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.canvas-wrap.file-over { outline: 0.125rem dashed var(--accent-line); outline-offset: -8px; }
.canvas-wrap.file-over::after { content: 'Drop files to add them to the project map'; position: absolute; left: 50%; top: 1.125rem; transform: translateX(-50%); z-index: 6; padding: 0.375rem 0.875rem; border-radius: 1.25rem; background: var(--accent-emphasis); color: var(--on-accent); font-weight: 600; font-size: 0.8125rem; pointer-events: none; }

/* Shared bits */
.form-control.form-sm { height: 1.75rem; padding: 0.1875rem 0.5rem; font-size: 0.8125rem; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.form-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 0.75rem; }
.form-row2 > [hidden], .form-row3 > [hidden] { display: none; }
@media (max-width: 600px) { .form-row2, .form-row3 { grid-template-columns: 1fr; } }
.pay-chip { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 0.6875rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pay-chip + .pay-chip { margin-left: 0.25rem; }
.pay-chip.tone-gray { background: #6e768126; color: var(--fg-default); border-color: #6e768166; }
.pay-chip.tone-muted { background: transparent; color: var(--fg-muted); border-color: var(--border-default); }
.pay-chip.tone-yellow { background: #bb800926; color: var(--yellow-fg); border-color: #bb800966; }
.pay-chip.tone-orange { background: #db6d2826; color: var(--orange-fg); border-color: #db6d2866; }
.pay-chip.tone-green { background: #2ea04326; color: var(--green-fg); border-color: #2ea04366; }
.pay-chip.tone-red { background: #f8514926; color: var(--red-fg); border-color: #f8514966; }

/* Notes */
.notes-page { display: flex; min-height: 0; }
.notes { flex: 1; display: grid; grid-template-columns: 21.25rem minmax(0, 1fr); min-height: 0; }
.notes-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-default); background: var(--bg-inset); }
.notes-side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1rem 0.5rem; }
.notes-side-head h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.125rem; }
.notes-side-head h1 .octicon { color: var(--fg-muted); }
.notes-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 1rem 0.75rem; border-bottom: 1px solid var(--border-default); }
.notes-filters .notes-search { flex: 1 1 100%; }
.notes-filters .seg { margin-left: 0; }
.notes-filters .seg button { height: 1.5rem; }
.notes-filters .notes-project { flex: 1; min-width: 0; height: 1.875rem; padding: 0.1875rem 0.5rem; font-size: 0.8125rem; }
.notes-list { flex: 1; overflow-y: auto; margin: 0; padding: 0.375rem; list-style: none; }
.note-item { display: flex; flex-direction: column; gap: 0.1875rem; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; color: var(--fg-default); text-align: left; }
.note-item:hover { background: var(--hover-bg); }
.note-item.active { background: var(--selected-bg); border-color: var(--accent-line-soft); }
.note-item-title { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; min-width: 0; }
.note-item-title .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-flag { display: inline-flex; color: var(--fg-muted); flex: none; }
.note-item-snippet { color: var(--fg-muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item-meta { color: var(--fg-muted); font-size: 0.75rem; opacity: .85; }
.notes-empty { padding: 1rem 0.75rem; color: var(--fg-muted); font-size: 0.875rem; line-height: 1.5; }
.note-editor { display: flex; min-height: 0; min-width: 0; background: var(--bg-default); }
.note-none { margin: auto; text-align: center; color: var(--fg-muted); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.note-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; max-width: 56.25rem; margin: 0 auto; padding: 1rem 1.5rem 0.75rem; }
.note-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-default); }
.note-bar .note-vis { width: auto; max-width: 16.25rem; }
.note-bar .note-proj { width: auto; max-width: 12.5rem; }
.note-bar .note-pin[aria-pressed="true"] { color: var(--yellow-fg); border-color: #bb800966; }
.note-status { margin-left: auto; color: var(--fg-muted); font-size: 0.75rem; min-width: 3.75rem; text-align: right; }
.note-back { display: none; }
.note-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid #bb800966; border-radius: 0.375rem; background: #bb80091a; color: var(--yellow-fg); font-size: 0.8125rem; }
.note-conflict[hidden] { display: none; }
.note-conflict span { flex: 1; min-width: 12.5rem; }
.note-title { margin: 0.875rem 0 0.375rem; padding: 0.25rem 0; border: 0; background: transparent; color: var(--fg-default); font-size: 1.5rem; font-weight: 600; outline: none; }
.note-title::placeholder { color: #6e7681; }
.note-body { flex: 1; min-height: 15rem; padding: 0.5rem 0; border: 0; background: transparent; color: var(--fg-default); font: 0.9375rem/1.65 var(--font); resize: none; outline: none; }
.note-meta { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--border-default); color: var(--fg-muted); font-size: 0.75rem; }
@media (max-width: 760px) {
  .notes { grid-template-columns: 1fr; }
  .notes-page.editing .notes-side { display: none; }
  .notes-page:not(.editing) .note-editor { display: none; }
  .note-back { display: inline-grid; place-items: center; font-size: 1.375rem; }
  .note-wrap { padding: 0.75rem 0.875rem; }
  .note-bar .note-vis, .note-bar .note-proj { max-width: 46%; }
}

/* Payments + Vault (same boxes as the rest of the site) */
.pay, .vault { max-width: 68.75rem; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.vault { max-width: 62.5rem; }
.pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.pay-head .settings-title { display: flex; align-items: center; gap: 0.625rem; }
.pay-head .settings-title .octicon { width: 22px; height: 22px; color: var(--fg-muted); }
.pay-sub { margin: 0.125rem 0 0; color: var(--fg-muted); max-width: 40rem; }
.pay-head-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pay-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.25rem; border: 1px solid var(--border-default); border-radius: 0.375rem; overflow: hidden; }
.pay-stats .pg-stat strong { font-size: 1.25rem; overflow-wrap: anywhere; }
.vault-stat { text-align: left; cursor: pointer; color: inherit; font: inherit; }
.vault-stat:hover { background: var(--bg-muted); }
.vault-stat[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent-line); background: var(--bg-muted); }
.pay-box { margin-top: 1rem; }
.pay-box > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--bg-default); border-radius: 0.375rem 0.375rem 0 0; }
.pay-box > header h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.pay-box > header h2 .octicon { color: var(--fg-muted); }
.pay-aside { color: var(--fg-muted); font-size: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.pay-empty { margin: 0; color: var(--fg-muted); font-size: 0.875rem; line-height: 1.5; }
.pay-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-inset); color: var(--fg-muted); }
.pay-locked p { margin: 0; color: var(--fg-default); }
.pay-table { display: flex; flex-direction: column; margin: -8px -8px; }
.pay-tr { display: grid; grid-template-columns: minmax(8.75rem, 1.4fr) minmax(10.625rem, 1.3fr) minmax(6.875rem, 1fr) minmax(5rem, .8fr) minmax(6.875rem, .9fr) 4.375rem; align-items: center; gap: 0.75rem; padding: 0.625rem 0.5rem; font-size: 0.875rem; }
.pay-tr + .pay-tr { border-top: 1px solid var(--border-muted); }
.pay-th { font-size: 0.75rem; font-weight: 600; color: var(--fg-muted); padding-top: 0.25rem; padding-bottom: 0.375rem; }
.pay-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-amount { font-variant-numeric: tabular-nums; }
.pay-amount small { color: var(--fg-muted); }
.pay-due.late { color: var(--red-fg); font-weight: 600; }
.pay-act { text-align: right; }
@media (max-width: 860px) {
  .pay-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-stats .pg-stat + .pg-stat { border-left: 0; }
  .pay-stats .pg-stat { border-top: 1px solid var(--border-default); }
  .pay-stats .pg-stat:nth-child(-n+2) { border-top: 0; }
  .pay-stats .pg-stat:nth-child(even) { border-left: 1px solid var(--border-default); }
  .pay-th { display: none; }
  .pay-tr { grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; }
  .pay-tr > :nth-child(3), .pay-tr > :nth-child(4), .pay-tr > :nth-child(5) { font-size: 0.8125rem; color: var(--fg-muted); }
  .pay-tr > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .pay-act { grid-row: 1; grid-column: 2; }
  .pay, .vault { padding: 1rem 0.875rem 3rem; }
}
.sub-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; padding: 0.875rem 0; }
.sub-card + .sub-card, .pay-subs > .sub-card:first-child:not(:only-child) ~ .sub-card { border-top: 1px solid var(--border-muted); }
.pay-subs > .sub-card:first-child { padding-top: 0; }
.sub-card.cancelled { opacity: .65; }
.sub-card.flash { background: var(--bg-inset); box-shadow: 0 0 0 0.125rem var(--accent-line); border-radius: 0.375rem; }
.sub-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.sub-title strong { font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.sub-title a { color: var(--fg-default); }
.sub-title a:hover { color: var(--fg-accent); }
.sub-ext { color: var(--fg-muted); display: inline-flex; }
.sub-cost { color: var(--fg-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.sub-when { margin-top: 0.375rem; color: var(--fg-muted); font-size: 0.8125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.sub-side { display: flex; align-items: flex-start; gap: 0.5rem; }
.sub-owner { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--fg-muted); height: 1.75rem; }
.sub-owner .muted { color: var(--fg-muted); }
.sub-details { grid-column: 1 / -1; display: grid; grid-template-columns: 13.125rem minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0.25rem 0 0; padding: 0.625rem 0.75rem; border: 1px solid var(--border-muted); border-radius: 0.375rem; background: var(--bg-default); font-size: 0.8125rem; }
.sub-details dt { color: var(--fg-muted); }
.sub-details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sub-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sub-checked { margin-right: auto; color: var(--fg-muted); font-size: 0.75rem; }
.pay-cancelled-toggle { margin-top: 0.75rem; }
@media (max-width: 600px) { .sub-details { grid-template-columns: 1fr; gap: 0.125rem; } .sub-details dd + dt { margin-top: 0.375rem; } }
.pay-form textarea { resize: vertical; }

/* Vault */
.vault-card { margin-top: 1.25rem; }
.vault-card p { margin: 0 0 0.75rem; line-height: 1.55; }
.vault-h { margin: 0 0 0.5rem; font-size: 1rem; }
.vault-form { max-width: 27.5rem; }
.vault-unlock { display: flex; flex-direction: column; align-items: flex-start; }
.vault-unlock .form-group { width: 100%; }
.vp-meter { height: 0.25rem; margin-top: 0.375rem; border-radius: 0.125rem; background: var(--bg-muted); overflow: hidden; }
.vp-meter span { display: block; height: 100%; width: 0; background: #f85149; transition: width .15s ease; }
.vp-meter span[data-s="1"] { background: #db6d28; } .vp-meter span[data-s="2"] { background: #d29922; } .vp-meter span[data-s="3"], .vp-meter span[data-s="4"] { background: #2ea043; }
.vault-list { padding: 0 !important; }
.vault-list .pay-empty { padding: 1rem; }
.vault-row { display: grid; grid-template-columns: 2.25rem minmax(10rem, 1.3fr) minmax(10.625rem, 1fr) minmax(10.625rem, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; font-size: 0.875rem; }
.vault-row + .vault-row { border-top: 1px solid var(--border-muted); }
.vault-row.broken { display: block; color: var(--fg-muted); font-style: italic; }
.vault-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--btn-bg); border: 1px solid var(--border-default); font-weight: 700; color: var(--fg-muted); }
.vault-main { min-width: 0; }
.vault-name { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.vault-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-host { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-host a { color: var(--fg-muted); }
.vault-user { display: flex; align-items: center; gap: 0.125rem; color: var(--fg-muted); font-size: 0.8125rem; min-width: 0; }
.vault-u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-user .icon-btn, .vault-pass .icon-btn { width: 1.625rem; height: 1.625rem; }
.vault-pass { display: flex; align-items: center; gap: 0.125rem; min-width: 0; }
.vault-pw { flex: 1; min-width: 0; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; background: var(--bg-default); border: 1px solid var(--border-muted); font-family: var(--font-mono); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-2fa { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; min-width: 0; }
.vault-2fa-where { color: var(--fg-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vault-search { width: 13.75rem; }
@media (max-width: 860px) {
  .vault-row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .vault-pass, .vault-2fa { grid-column: 2 / -1; }
  .vault-acts { grid-row: 1; grid-column: 3; }
  .vault-search { width: 8.75rem; }
}
.pw-wrap { display: flex; align-items: center; gap: 0.25rem; }
.pw-wrap .form-control { flex: 1; font-family: var(--font-mono); }
.vault-meta { margin: 0; color: var(--fg-muted); font-size: 0.75rem; }
.dialog-footer .vault-del { margin-right: auto; }
.va-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.va-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0; }
.va-row + .va-row { border-top: 1px solid var(--border-muted); }
.va-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.va-sub { color: var(--fg-muted); font-size: 0.75rem; }
.va-acts { display: flex; gap: 0.375rem; }
/* A clear, same-for-every-kind selection outline (several elements can be selected at once). */
.cnode.selected { outline: 2px solid var(--accent-line); outline-offset: 4px; }
.cnode.k-frame.selected { outline-offset: 2px; }
/* More header entries (Notes, Payments, Vault): the search box gives way first, then labels become icons. */
@media (max-width: 760px) {
  .note-bar { gap: 0.375rem; }
  .notes { grid-template-columns: minmax(0, 1fr); }
  .note-bar .note-vis, .note-bar .note-proj { flex: 1 1 8.125rem; min-width: 0; max-width: none; }
  .note-bar .note-status { min-width: 0; }
}

/* Add many people at once */
.bulk-line { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--border-default); border-radius: 0.375rem; }
.bulk-line p { margin: 0.125rem 0 0; }
.bulk-form .bulk-text { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; resize: vertical; }
.bulk-form code { font-size: 0.75rem; }
.bulk-count { min-height: 1.125rem; margin-top: 0.375rem; }
.bulk-errors { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem 0.5rem 1.75rem; border: 1px solid #f8514966; border-radius: 0.375rem; background: #f851491a; color: var(--red-fg); font-size: 0.8125rem; }
.bulk-errors[hidden] { display: none; }
.bulk-sum { margin: 0 0 0.75rem; font-weight: 600; }
.bulk-table { max-height: 50vh; overflow: auto; border: 1px solid var(--border-default); border-radius: 0.375rem; }
.bulk-tr { display: grid; grid-template-columns: minmax(7.5rem, 1.2fr) minmax(8.75rem, 1.3fr) minmax(9.375rem, 1.2fr) 6.875rem; gap: 0.625rem; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.bulk-tr + .bulk-tr { border-top: 1px solid var(--border-muted); }
.bulk-th { position: sticky; top: 0; background: var(--bg-inset); color: var(--fg-muted); font-weight: 600; font-size: 0.75rem; }
.bulk-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-note { margin-top: 0.625rem; }
@media (max-width: 640px) { .bulk-tr { grid-template-columns: 1fr auto; } .bulk-tr .b-mail, .bulk-th { display: none; } .bulk-tr .b-res { grid-column: 1; font-size: 0.75rem; color: var(--fg-muted); } .bulk-tr .b-link { grid-row: 1 / span 2; grid-column: 2; } }

/* Not in a team room yet: the room pages in the header look inactive (clicking explains why). */
.main-nav.no-room .nav-btn { opacity: .5; }
.main-nav.no-room .nav-btn:hover { opacity: .75; }


/* ——— CanWeSync identity: people and team rooms are plain circles ——— */
.bubble.current .bubble-img { border-color: var(--accent-line); }
.btn { border-radius: 0.5rem; }
.brand-mark { display: inline-flex; align-items: center; gap: 0.4375rem; font-weight: 700; letter-spacing: .01em; color: var(--fg-default); }
.brand-mark svg { color: var(--fg-accent); }

/* ═══ CanWeSync round 10: plans · scheduling · meet · bots ═══ */
.check-row { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0.625rem 0; font-size: 0.8125rem; line-height: 1.45; cursor: pointer; }
.check-row input { margin-top: 0.125rem; flex: none; }
.check-row code, .bot-rules code, .bot-form code { padding: 1px 0.3125rem; border-radius: 0.25rem; background: var(--bg-muted); font-family: var(--font-mono); font-size: 0.75rem; }
.form-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 0.75rem; }
@media (max-width: 720px) { .form-row4 { grid-template-columns: 1fr 1fr; } }
.plans-lead { max-width: 45rem; margin: 0 0 1.25rem; color: var(--fg-muted); font-size: 0.9375rem; }
.plans-lead strong { color: var(--fg-default); }
.spinner { width: 1.75rem; height: 1.75rem; border: 0.1875rem solid var(--border-default); border-top-color: var(--accent-line); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* Header extras */
.nav-btn { position: relative; }
.nav-live { position: absolute; top: 0.3125rem; right: 0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3fb950; box-shadow: 0 0 0 0.125rem var(--bg-inset); }
.upgrade-btn, .call-pill { gap: 0.375rem; flex-shrink: 0; }
.upgrade-btn { border-color: var(--accent-line-soft); color: var(--fg-accent); }
.upgrade-btn .octicon { color: var(--fg-accent); }
.upgrade-btn:hover { background: color-mix(in srgb, var(--accent-emphasis) 12%, transparent); }
.call-pill { background: #238636; border-color: #2ea043; color: #fff; animation: pill 2.4s ease-in-out infinite; }
.call-pill .octicon { color: #fff; }
.call-pill:hover { background: #2ea043; }
@keyframes pill { 50% { box-shadow: 0 0 0 0.25rem #2ea04333; } }

/* Plans */
.plans-wrap, .sched-wrap, .meet-wrap { max-width: 65rem; }
.plan-banner { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0 0 1.25rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-muted); }
.plan-banner .octicon { margin-top: 3px; flex: none; color: var(--fg-muted); }
.plan-banner.ok { border-color: #2ea04366; } .plan-banner.ok .octicon { color: var(--green-fg); }
.plan-banner.warn { border-color: #d2992266; } .plan-banner.warn .octicon { color: var(--yellow-fg); }
.plan-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
@media (max-width: 1280px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .plan-cards { grid-template-columns: 1fr; } }
.plan-use-link { grid-column: 1 / -1; font-size: 0.75rem; }
.plan-card { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--border-default); border-radius: 0.75rem; background: var(--bg-inset); }
.plan-card.featured { border-color: var(--accent-line-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-emphasis) 25%, transparent), 0 0.75rem 2rem -18px var(--accent-line-soft); }
.plan-card.current { background: var(--bg-muted); }
.plan-card header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.plan-card h2 { margin: 0; font-size: 1.25rem; }
.plan-tag { padding: 0.125rem 0.5rem; border-radius: 0.625rem; background: var(--accent-emphasis); color: var(--on-accent); font-size: 0.6875rem; font-weight: 700; }
.plan-tagline { margin: 0.25rem 0 0.875rem; color: var(--fg-muted); font-size: 0.8125rem; }
.plan-price { margin: 0; } .plan-price strong { font-size: 1.875rem; letter-spacing: -0.02em; } .plan-price span { color: var(--fg-muted); font-size: 0.8125rem; }
.plan-year { margin: 0.125rem 0 0.875rem; color: var(--fg-muted); font-size: 0.75rem; }
.plan-card ul { flex: 1; margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; align-content: start; }
.plan-card li { display: flex; gap: 0.5rem; font-size: 0.8125rem; } .plan-card li .octicon { margin-top: 3px; flex: none; color: var(--fg-accent); }
.plan-act .btn { width: 100%; }
.plan-use { display: grid; grid-template-columns: 8.125rem 1fr 9.375rem; gap: 0.75rem; align-items: center; padding: 0.4375rem 0; font-size: 0.8125rem; }
.plan-bar { height: 0.5rem; border-radius: 0.25rem; background: var(--bg-muted); overflow: hidden; }
.plan-bar span { display: block; height: 100%; border-radius: 0.25rem; background: var(--accent-emphasis); }
.plan-bar.near span { background: #d29922; } .plan-bar.full span { background: #da3633; }
.plan-use-num { color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .plan-use { grid-template-columns: 1fr; gap: 0.25rem; } .plan-use-num { text-align: left; } }

/* Scheduling */
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sched-pages { display: grid; gap: 0.875rem; margin-bottom: 1.75rem; }
.sched-empty { display: grid; justify-items: center; gap: 0.5rem; padding: 2.25rem 1rem; border: 1px dashed var(--border-default); border-radius: 0.75rem; color: var(--fg-muted); text-align: center; }
.sched-card { padding: 1rem 1.125rem; border: 1px solid var(--border-default); border-radius: 0.75rem; background: var(--bg-inset); }
.sched-card.off { opacity: .7; }
.sched-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.sched-card h2 { margin: 0; font-size: 1.0625rem; }
.sched-badges .octicon { width: 12px; height: 12px; }
.sched-url { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.625rem 0 0.5rem; }
.sched-url code { padding: 0.3125rem 0.5625rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-default); font-family: var(--font-mono); font-size: 0.7812rem; overflow-wrap: anywhere; }
.sched-url-act { display: inline-flex; gap: 0.375rem; }
.sched-meta { margin: 0 0 0.5rem; color: var(--fg-muted); font-size: 0.8125rem; }
.sched-hosts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.8125rem; }
.sched-host { display: inline-flex; align-items: center; gap: 0.375rem; }
.sched-act, .bot-act { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sched-insight { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--border-muted); }
.sched-grid-wrap { overflow-x: auto; }
.sched-grid { width: 100%; min-width: 38.75rem; border-collapse: collapse; font-size: 0.7812rem; }
.sched-grid th, .sched-grid td { padding: 0.375rem 0.5rem; border: 1px solid var(--border-muted); text-align: center; }
.sched-grid thead th { color: var(--fg-muted); font-weight: 600; } .sched-grid thead small { font-weight: 400; }
.sched-grid tbody th { text-align: left; white-space: nowrap; }
.sched-grid td small { display: block; color: var(--fg-muted); font-size: 0.6875rem; }
.sched-grid td.closed { color: var(--fg-muted); background: #0000002e; }
.sched-grid td.shielded { background: #da36331f; color: var(--red-fg); } .sched-grid td.shielded .octicon { display: block; margin: 0 auto 1px; }
.sched-grid td.shielded small { color: var(--red-fg); }
.sched-grid td.pressed { background: #d299221a; }
.sched-grid td.full { background: #6e76811f; color: var(--fg-muted); }
.sched-grid td.load { color: var(--fg-muted); white-space: nowrap; }
.sched-booking { display: grid; grid-template-columns: 10.625rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--border-muted); }
.sched-booking:last-child { border-bottom: 0; }
.sched-booking.cancelled { opacity: .55; } .sched-booking.cancelled .sched-b-when strong { text-decoration: line-through; }
.sched-b-when, .sched-b-what { display: grid; min-width: 0; } .sched-b-when span, .sched-b-what span { color: var(--fg-muted); font-size: 0.7812rem; overflow-wrap: anywhere; }
.sched-b-act { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }
@media (max-width: 720px) { .sched-booking { grid-template-columns: 1fr; gap: 0.375rem; } .sched-b-act { justify-content: flex-start; } }
.slug-row { display: flex; align-items: center; } .slug-row span { padding: 0 0.5rem; height: 2rem; display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-right: 0; border-radius: 0.375rem 0 0 0.375rem; background: var(--bg-muted); color: var(--fg-muted); font-size: 0.7812rem; white-space: nowrap; max-width: 55%; overflow: hidden; }
.slug-row .form-control { border-radius: 0 0.375rem 0.375rem 0; min-width: 0; }
.sched-form fieldset, .bot-form fieldset { margin: 0.25rem 0 0.875rem; padding: 0; border: 0; min-width: 0; }
.hours-row { display: grid; grid-template-columns: 8.125rem 7.5rem 0.75rem 7.5rem; gap: 0.5rem; align-items: center; padding: 0.1875rem 0; font-size: 0.8125rem; }
.hours-row label { display: inline-flex; gap: 0.5rem; align-items: center; }
@media (max-width: 480px) { .hours-row { grid-template-columns: 1fr 6rem 0.625rem 6rem; } }
.hostpick { display: flex; flex-wrap: wrap; gap: 0.375rem 0.625rem; }
.host-opt { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: 1rem; font-size: 0.8125rem; cursor: pointer; }
.host-opt:has(input:checked) { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-emphasis) 8%, transparent); }
.host-opt:has(input:disabled) { opacity: .5; cursor: default; }
.lg-book { background: #a371f7; }
.cal-chip.booking { --ring: #a371f7; background: #a371f71f; }

/* Guest pages: booking and the guest's meeting room */
.guest-body { min-height: 100%; display: flex; flex-direction: column; background: var(--bg-inset); }
.guest-wrap { flex: 1; display: grid; place-items: center; padding: 2rem 1rem; }
.guest-loading { color: var(--fg-muted); }
.guest-card { width: 100%; max-width: 57.5rem; border: 1px solid var(--border-default); border-radius: 0.875rem; background: var(--bg-default); box-shadow: 0 1rem 3rem -20px #000; }
.guest-msg { max-width: 32.5rem; padding: 2rem 1.75rem; text-align: center; }
.guest-msg h1 { margin: 0 0 0.5rem; font-size: 1.375rem; } .guest-msg p { margin: 0 0 0.375rem; color: var(--fg-muted); }
.guest-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 0.875rem; padding: 1rem; color: var(--fg-muted); font-size: 0.7812rem; }
.book { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; } }
.book-info { padding: 1.75rem 1.5rem; border-right: 1px solid var(--border-default); }
@media (max-width: 760px) { .book-info { border-right: 0; border-bottom: 1px solid var(--border-default); } }
.book-room { margin: 0 0 0.25rem; color: var(--fg-muted); font-size: 0.8125rem; font-weight: 600; }
.book-info h1 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.book-facts { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; color: var(--fg-muted); font-size: 0.8438rem; text-align: left; }
.book-facts li { display: flex; gap: 0.5rem; } .book-facts .octicon { margin-top: 3px; flex: none; }
.book-desc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.book-pick { padding: 1.5rem; min-width: 0; }
.book-pick h2 { margin: 0 0 0.625rem; font-size: 0.875rem; color: var(--fg-muted); font-weight: 600; }
.book-days { display: flex; gap: 0.5rem; padding-bottom: 0.625rem; margin-bottom: 0.875rem; overflow-x: auto; }
.book-day { flex: none; display: grid; justify-items: center; width: 3.875rem; padding: 0.5rem 0; border: 1px solid var(--border-default); border-radius: 0.625rem; background: var(--bg-inset); color: var(--fg-default); }
.book-day span, .book-day small { color: var(--fg-muted); font-size: 0.7188rem; } .book-day strong { font-size: 1.1875rem; line-height: 1.2; }
.book-day:hover { border-color: var(--fg-muted); }
.book-day[aria-selected="true"] { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-emphasis) 8%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.book-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: 0.5rem; }
.book-time { position: relative; height: 2.5rem; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--btn-bg); color: var(--fg-default); font-weight: 600; font-variant-numeric: tabular-nums; }
.book-time:hover { border-color: var(--accent-line); background: var(--btn-hover-bg); }
.book-time.suggested { border-color: var(--accent-line-soft); }
.sug-dot { display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-left: 0.375rem; border-radius: 50%; background: var(--accent-emphasis); vertical-align: 1px; }
.book-legend { margin: 0.875rem 0 0; color: var(--fg-muted); font-size: 0.7812rem; } .book-legend .sug-dot { margin: 0 0.375rem 0 0; }
.book-chosen { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.875rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--bg-muted); font-weight: 600; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.booked-mark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin: 0 auto 0.875rem; border-radius: 50%; background: var(--accent-emphasis); color: var(--on-accent); }
.booked-mark.off { background: var(--btn-bg); color: var(--fg-muted); }
.booked-when { font-size: 1rem; font-weight: 600; color: var(--fg-default) !important; }
.booked .book-facts { justify-content: center; margin: 0.875rem auto; width: fit-content; }
.booked-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.125rem 0 0.625rem; }

/* Meet */
.meet-page { padding: 0; overflow: auto; }
.meet-card { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1.125rem 1.25rem; border: 1px solid var(--border-default); border-radius: 0.75rem; background: var(--bg-inset); }
.meet-card-ico { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--accent-emphasis) 12%, transparent); color: var(--fg-accent); }
.meet-card-txt { flex: 1; min-width: 0; } .meet-card-txt h2 { margin: 0; font-size: 1.0625rem; } .meet-card-txt p { margin: 0.125rem 0 0; color: var(--fg-muted); font-size: 0.8125rem; }
@media (max-width: 560px) { .meet-card { flex-wrap: wrap; } }
.guest-meet { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.guest-meet > .guest-card, .guest-meet > .guest-loading { margin: auto; }
.prejoin { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17.5rem, 1fr); gap: 1.75rem; align-items: center; max-width: 62.5rem; margin: auto; padding: 2rem 1.25rem; width: 100%; }
@media (max-width: 820px) { .prejoin { grid-template-columns: 1fr; } }
.prejoin-view { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--border-default); border-radius: 0.875rem; background: #000; overflow: hidden; }
.prejoin-view video, .tile video { width: 100%; height: 100%; object-fit: cover; }
.prejoin-view video { transform: scaleX(-1); }
.prejoin-problem { position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.625rem; margin: 0; padding: 0.5rem 0.625rem; border-radius: 0.5rem; background: #000000b3; font-size: 0.7812rem; }
.prejoin-side h1 { margin: 0 0 0.375rem; font-size: 1.375rem; overflow-wrap: anywhere; } .prejoin-sub { margin: 0 0 1rem; color: var(--fg-muted); }
.prejoin-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.prejoin-toggles .btn.off { color: var(--red-fg); border-color: #f8514966; }
.prejoin-act { display: flex; gap: 0.5rem; margin-bottom: 0.875rem; } .prejoin-act .btn-primary { min-width: 8.75rem; }
.prejoin-side .form-hint .octicon { vertical-align: -2px; }
.tile-ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--tile-bg); }
.tile-ph span { display: grid; place-items: center; width: 5.25rem; height: 5.25rem; border-radius: 50%; background: #3867d6; color: #fff; font-size: 1.875rem; font-weight: 700; }
.prejoin-view video:not([hidden]) + .tile-ph, .tile:not(.novideo) .tile-ph { display: none; }
.call { display: flex; height: 100%; min-height: 0; background: #070707; }
.meet-page .call { height: calc(100vh - 4.0625rem); }
.guest-meet .call { height: 100vh; }
.call-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.call-top { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; font-size: 0.8125rem; }
.call-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-clock { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.call-enc { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3125rem; color: var(--green-fg); font-size: 0.75rem; white-space: nowrap; }
.call-lobby { padding: 0 1rem; } .lobby-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--accent-line-soft); border-radius: 0.625rem; background: color-mix(in srgb, var(--accent-emphasis) 8%, transparent); }
.lobby-row > span { flex: 1; min-width: 8.75rem; } .lobby-row .octicon { color: var(--fg-accent); }
.call-notice { margin: 0 1rem 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid #d2992266; border-radius: 0.5rem; background: #d299221a; color: var(--yellow-fg); font-size: 0.8125rem; }
.call-wait { flex: 1; display: grid; place-content: center; justify-items: center; gap: 0.5rem; padding: 1.5rem; text-align: center; } .call-wait h2 { margin: 0.5rem 0 0; } .call-wait p { margin: 0; max-width: 23.75rem; color: var(--fg-muted); }
.call-grid { flex: 1; display: grid; gap: 0.5rem; padding: 0 0.75rem; min-height: 0; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); }
.call-grid[data-n="2"] { grid-template-columns: 1fr 1fr; }
.call-grid[data-n="3"], .call-grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
.call-grid[data-n="5"], .call-grid[data-n="6"], .call-grid[data-n="7"], .call-grid[data-n="8"], .call-grid[data-n="9"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .call-grid[data-n="2"] { grid-template-columns: 1fr; } .call-grid[data-n="5"], .call-grid[data-n="6"], .call-grid[data-n="7"], .call-grid[data-n="8"], .call-grid[data-n="9"] { grid-template-columns: 1fr 1fr; } }
.tile { position: relative; min-height: 0; border-radius: 0.75rem; background: var(--tile-bg); overflow: hidden; }
.tile.mirror video { transform: scaleX(-1); }
.tile.sharing video, .tile.me:not(.mirror) video { object-fit: contain; background: #000; }
.tile-name { position: absolute; left: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.375rem; max-width: calc(100% - 1rem); padding: 0.1875rem 0.5625rem; border-radius: 0.375rem; background: #000000a6; font-size: 0.7812rem; }
.tile-name .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-muted { display: inline-flex; color: var(--red-fg); }
.tile-conn { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem; background: #000000a6; color: var(--yellow-fg); font-size: 0.75rem; }
.call-bar { display: flex; justify-content: center; gap: 0.625rem; padding: 0.75rem; }
.call-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 3rem; height: 3rem; padding: 0 0.8125rem; border: 1px solid var(--border-default); border-radius: 1.5rem; background: var(--btn-bg); color: var(--fg-default); }
.call-btn:hover:not(:disabled) { background: var(--btn-hover-bg); } .call-btn:disabled { opacity: .45; cursor: default; }
.call-btn.off { background: #da36332e; border-color: #f8514966; color: var(--red-fg); }
.call-btn.on { background: var(--accent-emphasis); border-color: transparent; color: var(--on-accent); }
.call-btn.leave { background: #da3633; border-color: transparent; color: #fff; font-weight: 600; } .call-btn.leave:hover { background: #f85149 !important; }
.call-unread { position: absolute; top: -4px; right: -4px; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 0.5625rem; background: var(--accent-emphasis); color: var(--on-accent); font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; }
.call-side { display: none; flex-direction: column; width: 20rem; flex: none; border-left: 1px solid var(--border-default); background: var(--bg-default); min-height: 0; }
.call.side-open .call-side { display: flex; }
.call.waiting .call-side, .call.waiting .call-bar [data-a=screen], .call.waiting .call-bar [data-a=side] { display: none; }
@media (max-width: 900px) { .call.side-open .call-side { position: absolute; inset: 0 0 4.5rem auto; z-index: 5; width: min(22.5rem, 100%); box-shadow: -12px 0 2rem #000c; } .call { position: relative; } }
.call-tabs { margin: 0.625rem 0.75rem 0.375rem; align-self: stretch; } .call-tabs button { flex: 1; }
.call-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0.375rem 0.75rem 0.75rem; }
.call-pane[hidden] { display: none; }
.call-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0 0.5rem; }
.cc-msg { font-size: 0.8438rem; overflow-wrap: anywhere; } .cc-msg strong { display: block; color: var(--fg-muted); font-size: 0.75rem; }
.cc-msg.mine strong { color: var(--fg-accent); }
.cc-msg.system { padding: 0.375rem 0.5625rem; border-radius: 0.5rem; background: #2ea0431f; color: var(--green-fg); font-size: 0.8125rem; }
.call-chat-form { display: flex; gap: 0.375rem; } .call-chat-form .form-control { flex: 1; min-width: 0; }
.call-act-form { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; } .call-act-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.call-actions { flex: 1; overflow-y: auto; margin: 0 0 0.625rem; padding: 0; list-style: none; display: grid; gap: 0.375rem; align-content: start; font-size: 0.8125rem; }
.call-actions li { display: flex; gap: 0.5rem; } .call-actions .octicon { margin-top: 3px; flex: none; color: var(--green-fg); }
.call-people { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.call-people li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8438rem; } .call-people small { margin-left: auto; color: var(--fg-muted); }

/* Bots */
.bot-rules { margin-bottom: 0.875rem; } .bot-rules > p:first-child { display: flex; gap: 0.625rem; margin: 0 0 0.5rem; } .bot-rules > p:first-child .octicon { margin-top: 3px; flex: none; color: var(--fg-accent); }
.bot-rules ul { margin: 0 0 0.5rem; padding-left: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--fg-muted); } .bot-rules li strong { color: var(--fg-default); }
.bot-list { display: grid; gap: 0.625rem; margin-bottom: 0.875rem; }
.bot-card { padding: 0.75rem 0.875rem; border: 1px solid var(--border-default); border-radius: 0.625rem; background: var(--bg-default); }
.bot-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .bot-card h3 { margin: 0; font-size: 0.9375rem; } .bot-ico { display: inline-flex; color: var(--fg-accent); }
.bot-meta { margin: 0.375rem 0; color: var(--fg-muted); font-size: 0.7812rem; } .bot-scopes { margin: 0 0 0.375rem; display: flex; flex-wrap: wrap; gap: 0.25rem; } .bot-scopes .pay-chip + .pay-chip { margin-left: 0; }
.bot-hook { margin: 0 0 0.625rem; overflow-wrap: anywhere; }
.bot-log { margin-top: 0.625rem; max-height: 16.25rem; overflow-y: auto; border: 1px solid var(--border-muted); border-radius: 0.5rem; padding: 0.375rem 0.625rem; background: var(--bg-inset); }
.bot-log-row { display: grid; grid-template-columns: 9.375rem 1fr; gap: 0.625rem; padding: 0.25rem 0; font-size: 0.7812rem; border-bottom: 1px solid var(--border-muted); } .bot-log-row:last-child { border-bottom: 0; }
.bot-log-row time { color: var(--fg-muted); } .bot-log-row.rehearsal span { color: var(--yellow-fg); } .bot-log-row.failed span { color: var(--red-fg); }
.bot-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.bot-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 720px) { .bot-checks { grid-template-columns: 1fr; } }
.bot-checks .check-row { margin: 0.3125rem 0; }
.bot-tag { margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--accent-emphasis) 15%, transparent); color: var(--fg-accent); font-size: 0.6562rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cmd-hint { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.375rem); z-index: 60; display: grid; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); overflow: hidden; }
.cmd-opt { display: flex; align-items: baseline; gap: 0.625rem; padding: 0.4375rem 0.625rem; border: 0; background: none; color: var(--fg-default); text-align: left; }
.cmd-opt:hover { background: var(--hover-bg); } .cmd-opt strong { color: var(--fg-accent); font-family: var(--font-mono); font-size: 0.8125rem; } .cmd-opt span { flex: 1; color: var(--fg-muted); font-size: 0.8125rem; } .cmd-opt small { color: var(--fg-muted); }


/* ═══ Calm: nothing glows, pulses, tilts or bounces ═══ */
*, *::before, *::after { animation: none !important; }
.ascii-logo { text-shadow: none; }
.bubble-img { transition: border-color .12s ease; }
.bubble:hover .bubble-img, .bubble:focus-visible .bubble-img { transform: none; box-shadow: none; border-color: var(--accent-line); }
.plan-card.featured { box-shadow: none; border-color: var(--accent-line); }
.call-pill { box-shadow: none; }
.tpl-card:hover { transform: none; }
.sub-card.flash { background: color-mix(in srgb, var(--accent-emphasis) 10%, transparent); border-radius: 0.375rem; }
.timer-btn.ending { box-shadow: none; }
.canvas-wrap.time-up { box-shadow: inset 0 0 0 0.1875rem #da3633; }
.spinner { border-color: var(--border-default); border-top-color: var(--accent-line); }
.ctile svg { filter: none; transition: none; }
.ctile:hover svg, .ctile:active svg { transform: none; }
.cnode-handle:hover { transform: none; }
.paper-swatch[aria-checked="true"] { box-shadow: none; outline: 0.125rem solid var(--accent-line); outline-offset: 0.125rem; }

/* ═══ Flat project map: plain cards with one colour accent — no paper, gradients, shadows or tilt ═══ */
.cnode {
  --card: var(--card-bg); --ink: var(--fg-default);
  background: var(--card); color: var(--fg-default); border: 1.5px solid var(--card-border); border-radius: 10px; box-shadow: none; transition: none;
}
.cnode:hover { box-shadow: none; border-color: var(--card-border-strong); }
.cnode:focus-visible, .cnode.selected { box-shadow: none; outline: 2px solid var(--accent-line); outline-offset: 3px; }
.cnode.dragging { transform: none; box-shadow: none; opacity: .88; z-index: 5; }
.cnode.connect-target, .cnode.connect-from { box-shadow: none; outline: 2px dashed #3fb950; outline-offset: 3px; }
.cnode.connect-from { outline-color: var(--accent-line); }
.cnode .muted { color: var(--fg-muted); }
.cnode .btn { background: var(--btn-bg); color: var(--fg-default); border-color: var(--border-default); }
.cnode .btn:hover { background: var(--btn-hover-bg); }
.cnode .btn-primary { background: var(--accent-emphasis); color: var(--on-accent); border-color: transparent; }
.cnode .btn-primary:hover { background: #d6f55e; }
.cnode.k-idea {
  min-height: 110px; padding: 14px 14px 10px; border-radius: 10px; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--card)); box-shadow: none;
}
.cn-sticky-text { font-size: 15px; }
.cnode.k-fact, .cnode.k-plan { background: var(--card); }
.cn-band { height: 4px; }
.cnode.k-fact .cn-card-body, .cnode.k-plan .cn-card-body { background: none; }
.cnode.k-box { border: 1.5px solid var(--card-border-strong); border-radius: 10px; }
.cnode.k-hub {
  padding: 16px 26px 12px; color: var(--fg-default); border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 26%, var(--card)); box-shadow: none;
}
.cn-hub-title { text-shadow: none; }
.cnode-branch { background: var(--hover-strong); color: var(--fg-default); }
.cnode-branch:hover { background: var(--hover-bg); }
.cnode.k-branch { background: var(--card); }
.cnode.k-task { background: var(--card); }
.cn-chip { background: #db61a226; color: var(--pink-fg); }
.cn-status { background: var(--bg-muted); border-color: var(--border-default); color: var(--fg-default); }
.cnode .token { color: var(--fg-muted); border-color: var(--border-default); }
.cnode .token-urgent { color: var(--red-fg); border-color: #f8514966; background: #f851491a; }
.token-done { color: var(--green-fg); border-color: #2ea04366; background: #2ea0431a; }
.cn-people { border-top-color: var(--border-muted); }
.cn-person .lbl { color: var(--fg-muted); }
.cn-avatars .avatar { border-color: var(--card); }
.cnode .issue-icon.draft { color: var(--fg-muted); }
.cnode.k-map { background: var(--card); }
.cn-mapart { height: 4px; background: #2ea043; }
.cn-pin { display: none; }
.cn-when { color: var(--fg-muted); }
.cnode.k-image { padding: 0; background: var(--card); border-radius: 10px; overflow: hidden; }
.cn-photo { background: var(--bg-muted); }
.cn-photo.empty { color: var(--fg-muted); }
.cn-caption { padding: 8px 10px 10px; font-size: 13px; font-style: normal; color: var(--fg-default); }
.cnode.k-file { background: var(--card); }
.cn-file-badge { border-radius: 6px; }
.cn-file-badge::after { content: none; }
.cn-meta { color: var(--fg-muted); }
.cnode.k-frame { border-style: dashed; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cnode.k-frame.selected, .cnode.k-frame:focus-visible { box-shadow: none; }
.canvas-tip { box-shadow: none; border: 1px solid var(--border-default); }

/* Connecting made easy: bigger dots on every side, and a Connect button (click one element, then another). */
.cnode-handle { width: 18px; height: 18px; border-width: 3px; transition: none; }
.cnode-handle.h-right { right: -11px; margin-top: -9px; } .cnode-handle.h-left { left: -11px; margin-top: -9px; }
.cnode-handle.h-top { top: -11px; margin-left: -9px; } .cnode-handle.h-bottom { bottom: -11px; margin-left: -9px; }
.cnode-handle::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.canvas-wrap.connect-mode, .canvas-wrap.connect-mode .cnode { cursor: crosshair; }
.canvas-wrap.connect-mode .cnode-handle { opacity: 1; }
.cbar-btn { gap: 0.375rem; }
.cbar-btn.on, .cbar-btn[aria-pressed="true"] { background: var(--accent-emphasis); border-color: transparent; color: var(--on-accent); }
.cbar-btn.on .octicon, .cbar-btn[aria-pressed="true"] .octicon { color: var(--on-accent); }
.call-wait-ico { color: var(--fg-accent); }
.paper-swatch { box-shadow: none; }
.paper-swatch[data-paper="yellow"] { --paper: #d4a72c; } .paper-swatch[data-paper="orange"] { --paper: #e16f24; } .paper-swatch[data-paper="red"] { --paper: #e5534b; }
.paper-swatch[data-paper="pink"] { --paper: #db61a2; } .paper-swatch[data-paper="purple"] { --paper: #8957e5; } .paper-swatch[data-paper="blue"] { --paper: #4f8cf7; }
.paper-swatch[data-paper="teal"] { --paper: #1b9aaa; } .paper-swatch[data-paper="green"] { --paper: #2da44e; } .paper-swatch[data-paper="gray"] { --paper: #6e7781; } .paper-swatch[data-paper="white"] { --paper: #d0d7de; }
.cnode[data-paper="white"] { --accent: #d0d7de; }
.cnode.k-fact, .cnode.k-plan, .cnode.k-task, .cnode.k-map, .cnode.k-image { overflow: visible; }
.cn-band, .cn-mapart { border-radius: 8px 8px 0 0; }
.cnode.k-image .cn-photo, .cnode.k-image .cn-photo img { border-radius: 8px 8px 0 0; }
.canvas-wrap.multi .cnode.selected:not(:hover) .cnode-handle { opacity: 0; }

/* Team link (public page) and meeting links */
.team-page { max-width: 40rem; padding: 1.75rem 1.5rem; }
.team-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; }
.team-head h1 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.team-ava { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: 50%; background: #3867d6; color: #fff; font-size: 1.25rem; font-weight: 700; }
.team-list { display: grid; gap: 0.625rem; margin: 1rem 0 0.75rem; }
.team-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid var(--border-default); border-radius: 0.625rem; background: var(--bg-inset); color: var(--fg-default); }
.team-item:hover { border-color: var(--accent-line); text-decoration: none; }
.team-item-main { flex: 1; min-width: 0; display: grid; gap: 0.125rem; } .team-item-main strong { font-size: 1rem; } .team-item-main span, .team-item-main p { margin: 0; color: var(--fg-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.team-next { display: grid; justify-items: end; text-align: right; flex: none; } .team-next small { color: var(--fg-muted); font-size: 0.7188rem; } .team-next strong { font-size: 0.8438rem; }
.team-go { transform: rotate(-90deg); color: var(--fg-muted); flex: none; }
.team-foot .octicon { vertical-align: -3px; }
@media (max-width: 520px) { .team-item { flex-wrap: wrap; } .team-next { justify-items: start; text-align: left; } .team-go { display: none; } }
.book-back { display: inline-block; margin-bottom: 0.75rem; font-size: 0.8125rem; }
.team-link-card h2 { display: inline-flex; align-items: center; gap: 0.5rem; }
.sched-team { margin-bottom: 0.875rem; }
.settings-section > header .meet-newlink { margin-left: auto; }
.link-url { font-family: var(--font-mono); font-size: 0.7812rem; font-weight: 500; overflow-wrap: anywhere; }
.meet-wrap .settings-section > header { display: flex; align-items: center; gap: 0.75rem; }

/* Time tracking */
.timer-pill { display: inline-flex; align-items: stretch; height: 1.75rem; border: 1px solid var(--border-default); border-radius: 0.5rem; overflow: hidden; flex-shrink: 1; min-width: 0; }
.timer-pill button { border: 0; background: var(--btn-bg); color: var(--fg-default); font-size: 0.75rem; font-weight: 600; }
.timer-pill button:hover { background: var(--btn-hover-bg); }
.tp-open { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 0.5625rem; min-width: 0; }
.tp-open .octicon { color: var(--fg-accent); flex: none; }
.tp-clock { font-variant-numeric: tabular-nums; }
.tp-title { max-width: 8.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-weight: 500; }
.tp-stop { padding: 0 0.5625rem; border-left: 1px solid var(--border-default) !important; color: var(--red-fg) !important; }
@media (max-width: 1640px) { .tp-title { display: none; } }
.tt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.tt-live { font-variant-numeric: tabular-nums; font-weight: 600; }
.tt-add { margin-left: auto; }
.tt-people { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.375rem; } .tt-people .pay-chip + .pay-chip { margin-left: 0; }
.tt-entry { display: grid; grid-template-columns: minmax(5rem, 8.75rem) 1fr auto 1.75rem; gap: 0.5rem; align-items: center; padding: 0.1875rem 0; font-size: 0.7812rem; border-top: 1px solid var(--border-muted); }
.tt-entry .tt-when { color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-entry .tt-dur { font-variant-numeric: tabular-nums; }
.tt-total { margin: 0 0 0.75rem; } .tt-total strong { font-size: 1.25rem; }
.tt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 760px) { .tt-cols { grid-template-columns: 1fr; } }
.tt-col h3 { margin: 0 0 0.375rem; font-size: 0.8125rem; color: var(--fg-muted); }
.tt-bar-row { display: grid; grid-template-columns: minmax(5.625rem, 1fr) 1.2fr 5.625rem; gap: 0.625rem; align-items: center; padding: 0.25rem 0; font-size: 0.8125rem; }
.tt-bar-row.link { cursor: pointer; } .tt-bar-row.link:hover .tt-bar-label { color: var(--fg-accent); }
.tt-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-bar-num { text-align: right; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pay-tracked { display: block; color: var(--fg-muted); font-size: 0.7188rem; font-weight: 400; }

/* Appearance picker */
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 640px) { .theme-pick { grid-template-columns: 1fr; } }
.theme-opt { display: grid; gap: 0.125rem; padding: 0.625rem; border: 1px solid var(--border-default); border-radius: 0.625rem; cursor: pointer; }
.theme-opt:has(input:checked) { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt:has(input:focus-visible) { outline: 0.125rem solid var(--accent-line); outline-offset: 0.125rem; }
.theme-opt small { color: var(--fg-muted); font-size: 0.75rem; }
.theme-swatch { display: flex; gap: 0.25rem; height: 2.75rem; margin-bottom: 0.375rem; padding: 0.5rem; border-radius: 0.4375rem; border: 1px solid var(--border-default); }
.theme-swatch i { flex: 1; border-radius: 0.25rem; }
.theme-swatch.light { background: #ffffff; } .theme-swatch.light i:nth-child(1) { background: #0d0d0d; flex: .4; } .theme-swatch.light i:nth-child(2) { background: #efefec; } .theme-swatch.light i:nth-child(3) { background: #c8f135; flex: .5; }
.theme-swatch.dark { background: #121211; } .theme-swatch.dark i:nth-child(1) { background: #f5f5f2; flex: .4; } .theme-swatch.dark i:nth-child(2) { background: #242423; } .theme-swatch.dark i:nth-child(3) { background: #c8f135; flex: .5; }
.theme-swatch.system { background: linear-gradient(90deg, #ffffff 50%, #121211 50%); } .theme-swatch.system i:nth-child(1) { background: #0d0d0d; flex: .4; } .theme-swatch.system i:nth-child(2) { background: transparent; } .theme-swatch.system i:nth-child(3) { background: #c8f135; flex: .5; }


/* ═══ Calendar: the month big, the year small beside it ═══ */
.calendar-page { overflow: auto; }
.cal-wrap { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 1rem 1.5rem; }
.cal-wrap .cal-bar { padding: 1rem 0 0.75rem; border-bottom: 0; }
.cal-wrap .cal-title { min-width: 11.875rem; margin: 0 0.25rem; font-size: 1.25rem; text-align: center; }
.cal-today { margin-left: 0.5rem; }
.cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.25rem; align-items: start; }
.cal-main { min-width: 0; }
.cal-wrap .cal-grid { flex: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(5.75rem, auto); overflow: visible;
  border: 1px solid var(--border-default); border-radius: 0.625rem; background: var(--bg-default); }
.cal-wrap .cal-wd { position: static; padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--border-default); background: none; color: var(--fg-muted); font-size: 0.7188rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cal-wrap .cal-day { padding: 0.25rem 0.375rem 0.375rem; border-right: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); cursor: pointer; min-height: 5.75rem; }
.cal-wrap .cal-day:nth-child(7n) { border-right: 0; }
.cal-wrap .cal-day.blank { background: var(--bg-inset); cursor: default; }
.cal-wrap .cal-day.past:not(.today) .cal-num { color: var(--fg-muted); }
.cal-wrap .cal-day.today { background: color-mix(in srgb, var(--accent-emphasis) 12%, transparent); }
.cal-wrap .cal-day.picked { box-shadow: inset 0 0 0 0.125rem var(--accent-line); }
.cal-wrap .cal-day:focus-visible { outline: 0.125rem solid var(--accent-line); outline-offset: -2px; }
.cal-wrap .cal-day.today .cal-num { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--accent-emphasis); color: var(--on-accent); }
.cal-dots { display: none; gap: 0.1875rem; }
.dot { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; }
.dot.task { background: var(--fg-muted); } .dot.late { background: #da3633; } .dot.meet { background: #2ea043; } .dot.book { background: #8957e5; }
.cal-wrap .cal-more { padding: 0 0.25rem; color: var(--fg-muted); font-size: 0.7188rem; }
.cal-wrap .cal-chip { font-size: 0.75rem; }
.cal-agenda { margin-top: 0.75rem; }
.cal-agenda:empty { display: none; }
.cal-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.5rem; }
.cal-agenda-head strong { font-size: 0.9375rem; }
.cal-agenda-list { display: grid; gap: 0.3125rem; }
.cal-agenda-list .cal-chip { padding: 0.4375rem 0.625rem; font-size: 0.8438rem; border-radius: 0.375rem; }
.cal-wrap .cal-hint { border-top: 0; padding: 0.25rem 0; }
.cal-year { position: sticky; top: 0.75rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: 0.625rem; background: var(--bg-default); }
.cal-year-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.cal-year-head strong { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.cal-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem 0.5rem; }
.cal-mini { padding: 0.25rem; border: 1px solid transparent; border-radius: 0.5rem; }
.cal-mini.current { border-color: var(--accent-line); background: var(--bg-inset); }
.cal-mini-title { display: block; width: 100%; margin-bottom: 0.1875rem; padding: 0 0.125rem; border: 0; background: none; color: var(--fg-default); font-size: 0.75rem; font-weight: 600; text-align: left; text-transform: capitalize; }
.cal-mini.now .cal-mini-title { color: var(--fg-accent); }
.cal-mini-title:hover { text-decoration: underline; }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.cal-mini-day { position: relative; height: 1.0625rem; padding: 0; border: 0; border-radius: 0.25rem; background: none; color: var(--fg-muted); font-size: 0.625rem; font-variant-numeric: tabular-nums; line-height: 1.0625rem; }
.cal-mini-day:hover { background: var(--hover-bg); color: var(--fg-default); }
.cal-mini-day.has { color: var(--fg-default); font-weight: 700; background: var(--chip-bg); }
.cal-mini-day.late { color: var(--red-fg); }
.cal-mini-day.today { background: var(--accent-emphasis); color: var(--on-accent); font-weight: 700; }
.cal-mini-day.picked:not(.today) { box-shadow: inset 0 0 0 0.0938rem var(--accent-line); }
@media (max-width: 1020px) {
  .cal-body { grid-template-columns: 1fr; }
  .cal-year { position: static; }
  .cal-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cal-wrap { padding: 0 0.625rem 1.25rem; }
  .cal-wrap .cal-bar { gap: 0.5rem; }
  .cal-wrap .cal-title { min-width: 0; font-size: 1.0625rem; }
  .cal-wrap .cal-legend { display: none; }
  .cal-wrap .cal-grid { grid-auto-rows: 3rem; }
  .cal-wrap .cal-day { min-height: 3rem; padding: 0.1875rem; align-items: center; }
  .cal-wrap .cal-wd { padding: 0.25rem 0; text-align: center; font-size: 0.6562rem; }
  .cal-wrap .cal-dhead { flex-direction: column; height: auto; gap: 0.1875rem; }
  .cal-wrap .cal-events, .cal-wrap .cal-add { display: none; }
  .cal-dots { display: inline-flex; }
  .cal-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Payments sections */
.pay-tabs { display: flex; gap: 0.25rem; margin: 0 0 1.125rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; }
.pay-tab { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.5rem 0.75rem; border-bottom: 0.125rem solid transparent; margin-bottom: -1px; color: var(--fg-muted); font-weight: 600; white-space: nowrap; }
.pay-tab:hover { color: var(--fg-default); text-decoration: none; }
.pay-tab[aria-current="page"] { color: var(--fg-default); border-bottom-color: var(--accent-line); }
.pay-tab-count { min-width: 1.125rem; padding: 0 0.375rem; border-radius: 0.5625rem; background: var(--chip-bg); color: var(--fg-default); font-size: 0.6875rem; line-height: 1.125rem; text-align: center; }
a.pg-stat { color: inherit; } a.pg-stat:hover { text-decoration: none; background: var(--hover-bg); }
.pay-todo-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.125rem; border-bottom: 1px solid var(--border-muted); color: var(--fg-default); }
.pay-todo-row:last-child { border-bottom: 0; } .pay-todo-row:hover { text-decoration: none; background: var(--hover-bg); }
.pay-todo-row .pay-chip { flex: none; min-width: 4.375rem; text-align: center; }
.pay-todo-text { flex: 1; min-width: 0; display: grid; } .pay-todo-text small { color: var(--fg-muted); }
.pay-go { transform: rotate(-90deg); color: var(--fg-muted); flex: none; }
.pay-table.hours .pay-tr { grid-template-columns: minmax(8.75rem, 2fr) 1fr 1fr 1fr 1fr 5.625rem; }
.pay-num { font-variant-numeric: tabular-nums; }
.pay-rate { font-weight: 600; }
.pay-stats { grid-template-columns: repeat(auto-fit, minmax(10.625rem, 1fr)) !important; }

/* ——— Clients: pipeline, contacts, a deal, a contact ——— */
.crm { max-width: 105rem; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.crm .pay-tabs { margin-top: 1rem; }
.crm-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.875rem; }
.crm-total { color: var(--fg-muted); font-size: 0.8125rem; }
.crm-bar-tools { margin-left: auto; }
.crm-mine { margin: 0 0 0 auto; }
.crm-search { max-width: 21.25rem; }
.crm-empty { border: 1px dashed var(--border-default); border-radius: 0.5rem; padding: 2rem 1.5rem; text-align: center; }
.crm-empty p { max-width: 35rem; margin: 0.5rem auto 1rem; color: var(--fg-muted); }
.crm-lanes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.125rem, 1fr); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: start; }
.crm-closed { display: flex; flex-direction: column; gap: 0.75rem; }
.crm-closed .crm-lane { min-height: 6.875rem; }
.crm-lane { background: var(--bg-inset); border: 1px solid var(--border-muted); border-radius: 0.5rem; padding: 0.625rem; min-height: 10rem; display: flex; flex-direction: column; gap: 0.5rem; }
.crm-lane.closed { grid-column: auto; background: transparent; border-style: dashed; }
.crm-lane.drop-on { border-color: var(--accent-line); border-style: solid; }
.crm-lane-head { display: flex; align-items: baseline; gap: 0.5rem; padding: 0 0.125rem; }
.crm-lane-head h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.crm-lane-count { font-size: 0.75rem; color: var(--fg-muted); }
.crm-lane-sum { margin-left: auto; font-size: 0.75rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.crm-lane.won .crm-lane-head h3 { color: var(--green-fg); }
.crm-lane.lost .crm-lane-head h3 { color: var(--fg-muted); }
.crm-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.crm-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0.375rem; padding: 0.625rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem; }
.crm-card:hover, .crm-card:focus-visible { border-color: var(--card-border-strong); outline: none; }
.crm-card.dragging { opacity: .45; }
.crm-card-top { display: flex; align-items: baseline; gap: 0.5rem; }
.crm-card-title { font-size: 0.8438rem; line-height: 1.35; overflow-wrap: anywhere; }
.crm-card-value { margin-left: auto; font-size: 0.7812rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-card-who { font-size: 0.75rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-card-foot { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; font-size: 0.75rem; min-height: 1.25rem; }
.crm-card-next { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); flex: 1; min-width: 0; }
.crm-card-next.late { color: var(--red-fg); font-weight: 600; }
.crm-card-next.missing { color: var(--yellow-fg); }
.crm-quiet { display: inline-flex; align-items: center; gap: 0.1875rem; color: var(--fg-muted); font-size: 0.7188rem; white-space: nowrap; }
.crm-lane.closed .crm-card { background: transparent; }
.crm-add { display: flex; align-items: center; gap: 0.375rem; border: 0; background: none; color: var(--fg-muted); font: inherit; font-size: 0.7812rem; padding: 0.25rem 0.125rem; cursor: pointer; text-align: left; }
.crm-add:hover { color: var(--fg-default); }
.crm-drop-hint { margin: 0.25rem 0.125rem; font-size: 0.75rem; color: var(--fg-muted); }
.crm-table .pay-tr { grid-template-columns: minmax(10.625rem, 1.6fr) minmax(10.625rem, 1.4fr) minmax(7.5rem, 1fr) minmax(7.5rem, 1fr) 5.625rem 6.875rem; color: inherit; text-decoration: none; }
.crm-table a.pay-tr:hover { background: var(--bg-inset); text-decoration: none; }
.crm-name { display: flex; flex-direction: column; min-width: 0; }
.crm-name strong, .crm-name small, .crm-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-name small { color: var(--fg-muted); font-size: 0.75rem; }
.crm-table [role=cell] { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.crm-table .crm-name { align-items: flex-start; }
/* Picking a contact */
.crm-pick-wrap { position: relative; }
.crm-pick { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 0.25rem; background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: 0.375rem; box-shadow: 0 0.5rem 1.5rem #0000001f; max-height: 17.5rem; overflow-y: auto; padding: 0.25rem; }
.crm-pick-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: none; padding: 0.375rem 0.5rem; border-radius: 0.25rem; font: inherit; text-align: left; cursor: pointer; color: var(--fg-default); }
.crm-pick-row small { color: var(--fg-muted); font-size: 0.75rem; }
.crm-pick-row:hover { background: var(--bg-inset); }
.crm-pick-row.new { flex-direction: row; align-items: center; gap: 0.375rem; color: var(--fg-accent); font-weight: 600; }
/* A deal / a contact */
.crm-detail { display: flex; flex-direction: column; gap: 1rem; }
.crm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.625rem, 1fr)); gap: 0.625rem 1rem; }
.crm-fact { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.crm-fact span { font-size: 0.75rem; color: var(--fg-muted); }
.crm-fact strong { font-weight: 600; display: flex; align-items: center; gap: 0.375rem; overflow-wrap: anywhere; }
.crm-about { margin: -4px 0 0; white-space: pre-wrap; color: var(--fg-default); background: var(--bg-inset); border-radius: 0.375rem; padding: 0.625rem 0.75rem; }
.crm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crm-box { border: 1px solid var(--border-default); border-radius: 0.5rem; padding: 0.75rem 0.875rem; }
.crm-box h3 { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 600; }
.crm-box h3 .octicon { color: var(--fg-muted); }
.crm-next-task { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 0.5rem; }
.crm-next-title { font-weight: 600; }
.crm-next-task.done .crm-next-title { text-decoration: line-through; color: var(--fg-muted); }
.crm-next-meta { font-size: 0.7812rem; color: var(--fg-muted); }
.crm-next-form { display: grid; grid-template-columns: minmax(11.25rem, 2fr) 9.375rem minmax(7.5rem, 1fr) minmax(7.5rem, 1fr) auto; gap: 0.5rem; margin-top: 0.25rem; }
.crm-load-sum { margin: 0 0 0.5rem; }
.crm-load-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.crm-load-people li { display: grid; grid-template-columns: 1.25rem minmax(5.625rem, 10rem) minmax(3.75rem, 1fr) auto; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.crm-load-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-load-bar { height: 0.375rem; border-radius: 0.1875rem; background: var(--bg-muted); overflow: hidden; }
.crm-load-bar span { display: block; height: 100%; background: var(--fg-muted); border-radius: 0.1875rem; }
.crm-load-num { color: var(--fg-muted); font-size: 0.75rem; white-space: nowrap; }
.crm-note-form { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.5rem; align-items: start; margin-bottom: 0.75rem; }
.crm-note-form textarea { min-height: 2.375rem; height: 3.5rem; resize: vertical; }
.crm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm-tl { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.5rem; padding: 0.5rem 0; }
.crm-tl + .crm-tl { border-top: 1px solid var(--border-muted); }
.crm-tl-icon { width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-inset); color: var(--fg-muted); }
.crm-tl.k-booking .crm-tl-icon { color: var(--fg-accent); }
.crm-tl-head { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.7812rem; }
.crm-tl-when { color: var(--fg-muted); font-size: 0.75rem; }
.crm-tl-del { margin-left: auto; width: 1.5rem; height: 1.5rem; }
.crm-tl-body { margin: 0.125rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-tl.k-event .crm-tl-body { color: var(--fg-muted); }
.crm-tl-empty { color: var(--fg-muted); font-size: 0.8125rem; }
.crm-deal-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: center; width: 100%; border: 0; background: none; font: inherit; color: inherit; padding: 0.5rem 0.25rem; border-radius: 0.25rem; text-align: left; cursor: pointer; }
.crm-deal-row + .crm-deal-row { border-top: 1px solid var(--border-muted); }
.crm-deal-row:hover { background: var(--bg-inset); }
.crm-deal-stage { font-size: 0.75rem; color: var(--fg-muted); }
.crm-deal-stage.st-won { color: var(--green-fg); font-weight: 600; }
.crm-deal-value { font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.dialog-footer .crm-del { margin-right: auto; }
.crm-stage-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.crm-stage-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.25rem; align-items: center; }
/* Room settings → Tools */
.tools-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.tools-presets .form-label { margin: 0 0.25rem 0 0; }
.tools-presets .btn.selected { border-color: var(--accent-line); }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.tools-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.375rem; cursor: pointer; }
.tools-row input { grid-row: span 2; margin-top: 0.1875rem; }
.tools-name { font-weight: 600; }
.tools-desc { font-size: 0.75rem; color: var(--fg-muted); }
@media (max-width: 760px) {
  .crm { padding: 1rem 1rem 6rem; }
  .crm-lanes { grid-auto-columns: minmax(15rem, 82vw); scroll-snap-type: x mandatory; }
  .crm-lane, .crm-closed { scroll-snap-align: start; }
  .crm-table .pay-tr { grid-template-columns: 1fr auto; }
  .crm-table .pay-tr > :nth-child(n+3) { display: none; }
  .crm-table .pay-tr > :nth-child(2) { justify-content: flex-end; color: var(--fg-muted); font-size: 0.7812rem; }
  .crm-next-form, .crm-note-form { grid-template-columns: 1fr; }
  .crm-note-form .crm-drive { grid-column: auto; }
  .crm-mine { margin-left: 0; }
}
/* Small pages the server answers with (e.g. after connecting Google) */
.plain-page { background: var(--bg-inset); min-height: 100vh; display: grid; place-items: center; margin: 0; font-family: inherit; }
.plain-box { max-width: 28.75rem; margin: 1.5rem 1rem; padding: 1.75rem; background: var(--bg-default); border: 1px solid var(--border-default); border-radius: 0.625rem; }
.plain-box h1 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.plain-box p { color: var(--fg-muted); }

/* ——— Inbox ——— */
.inbox-page { overflow: hidden; }
.inbox { display: grid; grid-template-columns: minmax(18.75rem, 23.75rem) minmax(0, 1fr); height: 100%; min-height: 0; }
.inbox-loading { padding: 1.5rem; color: var(--fg-muted); }
.inbox-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-default); background: var(--bg-default); }
.inbox-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-bottom: 1px solid var(--border-default); }
.inbox-acc { flex: 1; min-width: 0; }
.inbox-problem { margin: 0.5rem 0.75rem 0; padding: 0.5rem 0.625rem; border: 1px solid color-mix(in srgb, var(--red-fg) 45%, transparent); border-radius: 0.375rem; font-size: 0.8125rem; }
.inbox-msgs { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.inbox-msg { display: flex; flex-direction: column; gap: 0.125rem; width: 100%; padding: 0.625rem 0.875rem; border: 0; border-bottom: 1px solid var(--border-muted); background: none; text-align: left; font: inherit; color: var(--fg-default); cursor: pointer; }
.inbox-msg:hover { background: var(--bg-inset); }
.inbox-msg.open { background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border-default); }
.im-top { display: flex; gap: 0.5rem; align-items: baseline; }
.im-from { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-msg.unread .im-from, .inbox-msg.unread .im-subj { font-weight: 700; }
.inbox-msg.unread .im-from::before { content: ''; display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--fg-accent); margin-right: 0.375rem; vertical-align: 1px; }
.im-date { font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; }
.im-subj { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-snip { font-size: 0.75rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.25rem; }
.im-snip.known { color: var(--fg-accent); }
.inbox-none { padding: 1.5rem 0.875rem; color: var(--fg-muted); }
.inbox-foot { display: flex; gap: 0.5rem; justify-content: center; padding: 0.5rem; border-top: 1px solid var(--border-muted); }
.inbox-foot:empty { display: none; }
.inbox-read { overflow-y: auto; min-height: 0; background: var(--bg-default); }
.inbox-empty-read { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--fg-muted); padding: 1.5rem; }
.inbox-empty-read .form-hint { max-width: 23.75rem; }
.inbox-view { max-width: 51.25rem; padding: 1.5rem 1.75rem 4rem; }
.inbox-back { display: none; margin-bottom: 0.75rem; }
.iv-subj { margin: 0 0 0.625rem; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.iv-meta { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.8125rem; color: var(--fg-muted); overflow-wrap: anywhere; }
.iv-from { color: var(--fg-default); font-weight: 600; }
.iv-contact { margin: 0.625rem 0 0; }
.iv-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border: 1px solid var(--border-default); border-radius: 62.4375rem; font-size: 0.7812rem; }
.iv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.875rem 0 1.125rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--border-muted); }
.iv-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 0.875rem; }
.iv-files { margin-top: 1.125rem; }
.iv-files h3 { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; margin: 0 0 0.375rem; }
.iv-file { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.8125rem; padding: 0.25rem 0; }
.iv-file small { color: var(--fg-muted); }
.iv-deal-pick { display: flex; flex-direction: column; gap: 0.375rem; align-items: stretch; }
.compose textarea { font-family: inherit; min-height: 12.5rem; }
.cm-save { margin-top: 0; }
/* Drive picker */
.drive-list { list-style: none; margin: 0.625rem 0; padding: 0; max-height: 22.5rem; overflow-y: auto; }
.drive-file { display: grid; grid-template-columns: 1rem 1fr; column-gap: 0.5rem; width: 100%; border: 0; background: none; padding: 0.5rem; border-radius: 0.375rem; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.drive-file:hover { background: var(--bg-inset); }
.drive-file small { grid-column: 2; color: var(--fg-muted); font-size: 0.75rem; }
.drive-file .octicon { margin-top: 2px; color: var(--fg-muted); }
.drive-msg p { margin: 0.25rem 0 0.5rem; }
.cm-drive, .crm-drive { margin-right: auto; }
.crm-note-form .crm-drive { grid-column: 2; justify-self: start; }
/* Account settings → Connections */
.conn-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.conn-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.375rem; }
.conn-icon { color: var(--fg-muted); }
.conn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conn-main small { color: var(--fg-muted); }
.conn-problem { margin: 0.25rem 0 0; color: var(--red-fg); font-size: 0.7812rem; }
.conn-add, .inbox-connect { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.conn-add { justify-content: flex-start; }
@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox .inbox-read { display: none; }
  .inbox.reading .inbox-list { display: none; }
  .inbox.reading .inbox-read { display: block; }
  .inbox-back { display: inline-flex; }
  .inbox-back .octicon { transform: rotate(-90deg); }
  .inbox-view { padding: 1rem 1rem 6rem; }
  .inbox-list { border-right: 0; }
}

.search-btn { display: none; }
/* The buttons on the right keep their size; the search box gives way first. */
@media (min-width: 761px) { .header-right { flex-shrink: 0; } }
/* ——— The wheel ——— */
.wheel-overlay { position: fixed; inset: 0; z-index: 900; background: #0000002e; touch-action: none; user-select: none; -webkit-user-select: none; }
:root[data-theme="dark"] .wheel-overlay { background: #00000066; }
.wheel { position: absolute; }
.wheel-ring { position: absolute; inset: 0; overflow: visible; }
.wheel-slice { fill: var(--bg-overlay); stroke: var(--border-default); stroke-width: 1; cursor: pointer; }
.wheel-slice.hot { fill: var(--btn-active-bg); stroke: var(--accent-line); stroke-width: 2; }
.wheel-hole { fill: var(--bg-inset); stroke: var(--border-default); }
.wheel-item { position: absolute; transform: translate(-50%, -50%); width: 5.375rem; display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; border: 0; background: none; color: var(--fg-default); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0.25rem; pointer-events: auto; }
.wheel-item:focus-visible { outline: 0.125rem solid var(--accent-line); border-radius: 0.375rem; }
.wheel-label { line-height: 1.2; text-align: center; }
.wheel-num { font-size: 0.6562rem; font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.wheel-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6.25rem; height: 6.25rem; border-radius: 50%; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; color: var(--fg-default); font: inherit; cursor: pointer; }
.wheel-center-label { font-weight: 700; font-size: 0.8125rem; max-width: 5.5rem; text-align: center; line-height: 1.2; }
.wheel-center-hint { font-size: 0.6875rem; color: var(--fg-muted); }
.wheel-tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.125rem; margin: 0; width: max-content; max-width: calc(100% - 2rem); padding: 0.3125rem 0.75rem; border-radius: 62.4375rem; background: var(--bg-overlay); border: 1px solid var(--border-default); text-align: center; font-size: 0.7812rem; color: var(--fg-default); pointer-events: none; }
@media (max-width: 760px) { .wheel-tip { bottom: auto; top: 4rem; } }

/* ——— Phones: one slim header row, a bar at the bottom, search on demand ——— */
.tabbar { display: none; }
@media (max-width: 760px) {
  .app { height: 100vh; height: 100dvh; }
  .header-top { flex-wrap: nowrap; height: 3.25rem; padding: 0 0.625rem; padding-top: 0; padding-bottom: 0; column-gap: 0.375rem; position: relative; }
  .main-nav { display: none; }
  .header-search { display: none; }
  .app.search-open .header-search { display: block; position: absolute; top: 3.25rem; left: 0; right: 0; z-index: 60; padding: 0.5rem 0.625rem; background: var(--bg-inset); border-bottom: 1px solid var(--border-default); max-width: none; }
  .search-btn { display: inline-flex; }
  .help-btn, .wheel-btn, .upgrade-btn { display: none !important; }
  .room-switch { max-width: none; min-width: 0; flex: 1 1 auto; }
  .header-left { flex: 1; min-width: 0; }
  .header-right { gap: 0.125rem; flex: none; }
  .timer-pill .tp-name { display: none; }
  .tabbar:not([hidden]) { display: flex; flex: none; align-items: stretch; justify-content: space-around; height: calc(3.625rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg-inset); border-top: 1px solid var(--border-default); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; color: var(--fg-muted); font-size: 0.6875rem; font-weight: 600; text-decoration: none; border: 0; background: none; font-family: inherit; padding: 0; min-width: 0; -webkit-tap-highlight-color: transparent; }
  .tab[hidden] { display: none; }
  .tab.selected { color: var(--fg-default); }
  .tab.selected .octicon { color: var(--fg-accent); }
  .tab:hover { text-decoration: none; }
  .tab-wheel { color: var(--fg-default); touch-action: none; }
  .tab-wheel .octicon { width: 30px; height: 30px; padding: 3px; border-radius: 50%; background: var(--accent-emphasis); color: var(--on-accent); }
  .wheel-item { width: 4.625rem; font-size: 0.7188rem; }
}

/* ——— Vault: private items, sharing, recovery code ——— */
.btn-link { border: 0; background: none; padding: 0; font: inherit; font-size: 0.8125rem; color: var(--fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 0.125rem; }
.vault-forgot { margin-left: 0.875rem; }
.vault-tabs { margin: 0.25rem 0 1rem; }
.vault-tabs .pay-tab { border: 0; background: none; font: inherit; cursor: pointer; }
.vault-hint { display: grid; grid-template-columns: 1rem 1fr auto; gap: 0.625rem; align-items: start; padding: 0.75rem 0.875rem; margin: 0 0 1rem; border: 1px solid var(--accent-line-soft); border-radius: 0.375rem; background: var(--bg-default); }
.vault-hint p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--fg-muted); }
.vault-hint p strong { color: var(--fg-default); }
.vault-hint > .octicon { margin-top: 2px; color: var(--fg-muted); }
.vd-fields { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.5rem; }
.vd-row { display: grid; grid-template-columns: minmax(7.5rem, 1fr) minmax(8.75rem, 1.6fr) auto auto auto; gap: 0.375rem; align-items: center; }
.vd-value { font-family: var(--font-mono); }
.vault-share { border-top: 1px solid var(--border-muted); padding-top: 0.875rem; margin-top: 0.25rem; }
.vault-share h3 { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.375rem; font-size: 0.8125rem; }
.vault-share .va-list { margin: 0 0 0.625rem; padding: 0; list-style: none; }
.vs-add { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.vs-add:empty { display: none; }
.rec-code { margin-top: 0.75rem; padding: 0.875rem; border: 1px dashed var(--border-default); border-radius: 0.5rem; text-align: center; }
.rec-code code { display: block; font-family: var(--font-mono); font-size: 1.125rem; letter-spacing: .04em; font-weight: 700; overflow-wrap: anywhere; user-select: all; }
.rec-acts { display: flex; gap: 0.5rem; justify-content: center; margin: 0.625rem 0; }
.rc-code { font-family: var(--font-mono); text-transform: uppercase; }
.tools-vault { border: 1px solid var(--border-default); border-radius: 0.375rem; padding: 0.625rem 0.75rem; margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tools-vault legend { padding: 0 0.375rem; margin: 0; }
.tools-vault .check-row { align-items: flex-start; margin: 0; }
.tools-vault .check-row span { font-size: 0.8125rem; line-height: 1.45; }
@media (max-width: 760px) {
  .vd-row { grid-template-columns: 1fr auto auto auto; }
  .vd-row .vd-label { grid-column: 1 / -1; }
}

/* ——— Ideas: the Idea builder. Flat blocks that stack and nest; nothing moves by itself. ——— */
:root { --blk-ask: #2563eb; --blk-if: #9a6700; --blk-do: #1a7f37; --blk-note: #6b6b64; --blk-sec: #7c3aed; }
.ib-ask { --blk: var(--blk-ask); } .ib-if { --blk: var(--blk-if); } .ib-do { --blk: var(--blk-do); } .ib-note { --blk: var(--blk-note); } .ib-sec, .ib-section { --blk: var(--blk-sec); }
.ideas-page { overflow-y: auto; }
.ideas-list { max-width: 62.5rem; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.ideas-ai { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem 1rem; flex-wrap: wrap; margin: 1rem 0 1.125rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-inset); color: var(--fg-muted); font-size: 0.8125rem; }
.ideas-ai-text { display: flex; align-items: flex-start; gap: 0.5rem; flex: 1; min-width: 15rem; line-height: 1.45; }
.ideas-ai-text .octicon { flex: none; margin-top: 2px; }
.ideas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); gap: 0.75rem; }
.ideas-grid.empty { display: block; }
.idea-card { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.875rem; border: 1px solid var(--card-border); border-radius: 0.5rem; background: var(--card-bg); color: inherit; }
.idea-card:hover { border-color: var(--card-border-strong); text-decoration: none; }
.idea-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.idea-title { font-size: 0.9375rem; overflow-wrap: anywhere; }
.idea-pitch { color: var(--fg-muted); font-size: 0.8125rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idea-meta { color: var(--fg-muted); font-size: 0.75rem; line-height: 1.5; }
.idea-ring { position: relative; flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.idea-ring svg { position: absolute; inset: 0; }
.idea-ring circle { fill: none; stroke-width: 4; }
.idea-ring .ring-bg { stroke: var(--border-default); }
.idea-ring .ring-fg { stroke: var(--fg-accent); stroke-linecap: butt; }
.ring-num { position: relative; font-size: 0.6562rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ideas-limit { margin-top: 0.875rem; }
.ideas-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; padding: 1.5rem; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-inset); }
.ideas-empty h2 { margin: 0 0 0.625rem; font-size: 1.25rem; line-height: 1.3; }
.ideas-empty p { margin: 0 0 0.75rem; color: var(--fg-muted); line-height: 1.55; }
.ideas-empty p strong { color: var(--fg-default); }
.ideas-sample { display: flex; flex-direction: column; gap: 0.5625rem; pointer-events: none; }
.ideas-sample .ib-row { padding-left: 0.625rem; }
.ideas-sample .ib-body strong { display: block; font-size: 0.8438rem; padding: 0.125rem 0; }
.ideas-sample .ib-body p { margin: 0.25rem 0 0.125rem; padding: 0.375rem 0.5rem; border: 1px solid var(--border-default); border-radius: 0.25rem; background: var(--bg-inset); color: var(--fg-default); font-size: 0.8125rem; }
.idea-new .form-label { margin-top: 0.875rem; }
.idea-new .form-label:first-child { margin-top: 0; }
.idea-kinds, .idea-starts { border: 0; padding: 0; margin: 0.875rem 0 0; min-width: 0; }
.idea-kinds legend, .idea-starts legend { padding: 0; }
.idea-kind-list { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.idea-kind { position: relative; cursor: pointer; }
.idea-kind input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.idea-kind span { display: block; padding: 0.3125rem 0.6875rem; border: 1px solid var(--border-default); border-radius: 2em; background: var(--btn-bg); font-size: 0.8125rem; }
.idea-kind input:checked + span { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 600; }
.idea-kind input:focus-visible + span { outline: 0.125rem solid var(--accent-line); outline-offset: 0.125rem; }
.idea-starts label { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 0.375rem; font-size: 0.8125rem; line-height: 1.45; cursor: pointer; }
.idea-starts label input { margin-top: 0.1875rem; flex: none; }

.ib { --ib-top: 6.875rem; max-width: 73.75rem; margin: 0 auto; padding: 0 1.5rem 5rem; }
.ib-top { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.875rem; padding: 0.875rem 0 0.75rem; background: var(--bg-default); border-bottom: 1px solid var(--border-muted); }
.ib-back { flex: none; }
.ib-titles { flex: 1 1 17.5rem; min-width: 0; display: flex; flex-direction: column; }
.ib-title, .ib-pitch, .ib-sec-title { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 0.25rem; background: none; color: var(--fg-default); font: inherit; padding: 0.125rem 0.375rem; text-overflow: ellipsis; }
.ib-title { font-size: 1.25rem; font-weight: 700; }
.ib-pitch { font-size: 0.8125rem; color: var(--fg-muted); }
.ib-title:hover, .ib-pitch:hover, .ib-sec-title:hover, .ib-text:hover { border-color: var(--border-default); }
.ib-title:focus, .ib-pitch:focus, .ib-sec-title:focus, .ib-text:focus { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); outline: none; background: var(--bg-default); color: var(--fg-default); }
.ib-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.ib-progress { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.25rem; color: var(--fg-muted); font-size: 0.75rem; }
.ib-progress .idea-ring, .ib-progress .idea-ring svg { width: 36px; height: 36px; }
.ib-progress .ring-num { font-size: 0.5938rem; color: var(--fg-default); }
.ib-main { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.375rem; align-items: start; padding-top: 1.125rem; }
.ib-palette { position: sticky; top: calc(var(--ib-top) + 1.125rem); display: flex; flex-direction: column; gap: 0.5rem; }
.ib-pal-title { margin: 0 0 0.125rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
.ib-chip { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0.5rem; border: 1px solid var(--card-border); border-left: 0.375rem solid var(--blk); border-radius: 0.375rem; background: var(--card-bg); color: inherit; font: inherit; text-align: left; cursor: grab; }
.ib-chip:hover { border-color: var(--card-border-strong); border-left-color: var(--blk); }
.ib-chip-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ib-chip-text strong { font-size: 0.8125rem; }
.ib-chip-text small { font-size: 0.7188rem; line-height: 1.35; color: var(--fg-muted); }
.ib-tag { flex: none; min-width: 2.5rem; margin-top: 0.125rem; padding: 0.125rem 0.4375rem; border-radius: 0.25rem; background: var(--blk); color: #fff; font-size: 0.6562rem; font-weight: 700; line-height: 1rem; letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.ib-empty { margin: 0 0 0.875rem; padding: 0.875rem; border: 1px dashed var(--border-default); border-radius: 0.5rem; color: var(--fg-muted); line-height: 1.5; }
.ib-slot { display: flex; flex-direction: column; gap: 0.5625rem; min-width: 0; }
.ib-root { gap: 1rem; }
.ib-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem; border: 1px dashed var(--border-default); border-radius: 0.375rem; background: none; color: var(--fg-muted); font: inherit; font-size: 0.75rem; cursor: pointer; }
.ib-add:hover { border-style: solid; color: var(--fg-default); background: var(--hover-bg); }
.ib-add .octicon { width: 12px; height: 12px; }
.ib-line { height: 0.25rem; margin: -2px 0; border-radius: 0.125rem; background: var(--accent-line); pointer-events: none; }
.ib-section { border: 1px solid var(--border-default); border-top: 0.25rem solid var(--blk); border-radius: 0.5rem; background: var(--bg-inset); }
.ib-sec-head { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.5rem 0.5rem 0.375rem; }
.ib-sec-title { flex: 1; font-size: 0.9375rem; font-weight: 700; }
.ib-sec-count { flex: none; padding: 1px 0.5rem; border: 1px solid var(--border-default); border-radius: 2em; color: var(--fg-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ib-sec-count:empty { display: none; }
.ib-section.all-done .ib-sec-count { border-color: var(--blk-do); color: var(--green-fg); }
.ib-sec-body { padding: 0.25rem 0.625rem 0.75rem 0.75rem; }
.ib-section.folded .ib-sec-body { display: none; }
.ib-section.folded .ib-fold svg { transform: rotate(-90deg); }
.ib-block { position: relative; border: 1px solid var(--card-border); border-left: 0.375rem solid var(--blk); border-radius: 0.375rem; background: var(--card-bg); }
/* The little tab that makes a block look as if it clicks into the one above. */
.ib-block::before { content: ""; position: absolute; left: 0.75rem; top: -5px; width: 1.25rem; height: 0.3125rem; border-radius: 0.1875rem 0.1875rem 0 0; background: var(--blk); }
.ib-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.125rem; }
.ib-grip { flex: none; display: inline-grid; place-items: center; width: 1.125rem; height: 1.5rem; padding: 0; border: 0; border-radius: 0.25rem; background: none; color: var(--fg-subtle); cursor: grab; }
.ib-grip:hover { color: var(--fg-default); background: var(--hover-bg); }
.ib-body { flex: 1; min-width: 0; }
.ib-actions { flex: none; display: flex; align-items: center; gap: 0.25rem; }
.ib-actions .icon-btn, .ib-sec-head .icon-btn { width: 1.625rem; height: 1.625rem; }
.ib-text { display: block; width: 100%; min-height: 1.625rem; border: 1px solid transparent; border-radius: 0.25rem; background: none; color: var(--fg-default); font: inherit; font-weight: 600; line-height: 1.45; padding: 0.125rem 0.375rem; resize: none; overflow: hidden; }
.ib-note .ib-text { font-weight: 400; color: var(--fg-muted); }
.ib-answer { display: block; width: 100%; min-height: 3.25rem; margin-top: 0.375rem; padding: 0.4375rem 0.5625rem; border: 1px solid var(--border-default); border-radius: 0.25rem; background: var(--bg-inset); color: var(--fg-default); font: inherit; line-height: 1.5; resize: none; overflow: hidden; }
.ib-answer:focus { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); outline: none; }
.ib-state { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 0.0938rem solid var(--border-default); border-radius: 50%; color: #fff; }
.ib-state svg { width: 12px; height: 12px; }
.is-answered > .ib-row .ib-state { border-color: var(--blk-do); background: var(--blk-do); }
.is-skipped > .ib-row .ib-state { border-color: transparent; color: var(--fg-muted); }
.is-skipped > .ib-row .ib-state svg { width: 16px; height: 16px; }
.ib-block.is-skipped { opacity: .55; }
.ib-block.is-skipped .ib-answer { display: none; }
.ib-block.is-skipped .ib-text { text-decoration: line-through; }
.ib-flag { margin-top: 0.375rem; padding: 1px 0.5rem; border: 1px solid var(--border-default); border-radius: 2em; background: none; color: var(--fg-muted); font: inherit; font-size: 0.7188rem; cursor: pointer; }
.ib-flag:hover { color: var(--fg-default); border-color: var(--card-border-strong); }
.ib-if > .ib-row { background: color-mix(in srgb, var(--blk) 12%, transparent); border-radius: 0 0.3125rem 0 0; }
.ib-yn { flex: none; display: inline-flex; border: 1px solid var(--border-default); border-radius: 0.375rem; overflow: hidden; }
.ib-yn button { min-width: 2.5rem; padding: 0.1875rem 0.625rem; border: 0; background: var(--btn-bg); color: var(--fg-muted); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.ib-yn button + button { border-left: 1px solid var(--border-default); }
.ib-yn button:hover { color: var(--fg-default); }
.ib-yn button[aria-pressed="true"] { background: var(--blk); color: #fff; }
.ib-arm { padding: 0.5rem 0.625rem 0.625rem 1rem; }
.ib-arm.off { opacity: .45; }
.ib-arm-label { display: block; margin: 0 0 0.375rem; color: var(--fg-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ib-arm-label:empty { display: none; }
.ib-else-bar { display: flex; align-items: center; padding: 0.3125rem 0.5rem 0.3125rem 0.75rem; background: color-mix(in srgb, var(--blk) 12%, transparent); }
.ib-else-bar .ib-tag { margin-top: 0; }
.ib-foot { height: 0.5625rem; border-radius: 0 0 0.3125rem 0; background: color-mix(in srgb, var(--blk) 12%, transparent); }
.ib-undecided { margin: 0; padding: 0.375rem 0.75rem 0 1rem; color: var(--fg-muted); font-size: 0.75rem; }
.ib-check { flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; padding: 0; border: 0.0938rem solid var(--card-border-strong); border-radius: 0.25rem; background: var(--bg-default); color: #fff; cursor: pointer; }
.ib-check svg { width: 12px; height: 12px; }
.ib-check[aria-checked="true"] { border-color: var(--blk-do); background: var(--blk-do); }
.ib-check:disabled { cursor: default; }
.ib-do.is-done .ib-text { color: var(--fg-muted); text-decoration: line-through; }
.ib-task { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 15rem; padding: 0.125rem 0.5625rem; border: 1px solid var(--border-default); border-radius: 2em; color: var(--fg-default); font-size: 0.75rem; white-space: nowrap; }
.ib-task span { overflow: hidden; text-overflow: ellipsis; }
.ib-task .octicon { flex: none; width: 12px; height: 12px; color: var(--fg-muted); }
.ib-block.dragging, .ib-section.dragging { opacity: .35; }
.ib-draft { margin-top: 0.5rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--card-border-strong); border-radius: 0.375rem; background: var(--bg-default); }
.ib-if > .ib-draft { margin: 0.5rem 0.625rem 0 1rem; }
.ib-draft-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--fg-muted); }
.ib-draft-head strong { color: var(--fg-default); }
.ib-draft-text { margin: 0.375rem 0 0.625rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.ib-draft-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ib-prompt { min-height: 0; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; resize: vertical; }
.ib-ai-here { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 0.75rem; }
.ib-ai-here[hidden] { display: none; }
.ib-ai-out { margin-top: 0.875rem; }
.ib-ai-label { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--fg-muted); }
.ib-ai-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ib-brief-keep { margin-top: 0.625rem; }
.ib-ai > .form-hint:first-child, .ib-brief > .form-hint:first-child, .ib-more > .form-hint:first-child { margin: 0 0 0.625rem; }
.ib-aiset p { margin: 0 0 0.75rem; line-height: 1.5; }
.ib-aiset-now { padding: 0.5rem 0.625rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-inset); font-size: 0.8125rem; }
.ib-aiset-now[hidden] { display: none; }
.ib-aiset .form-label { margin-top: 0.75rem; }
.ib-aiset-prov { display: flex; flex-wrap: wrap; gap: 0.25rem 1.125rem; }
.ib-aiset-notes { margin: 0.875rem 0 0; padding-left: 1.125rem; line-height: 1.5; }
.ib-aiset-notes li + li { margin-top: 0.25rem; }
.ib-set { margin: 0 0 0.875rem; border: 1px solid var(--border-default); border-radius: 0.5rem; }
.ib-set-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--border-muted); background: var(--bg-inset); border-radius: 0.5rem 0.5rem 0 0; }
.ib-set ul, .ib-ai-qs { margin: 0; padding: 0; list-style: none; }
.ib-sugg { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.625rem; }
.ib-sugg + .ib-sugg { border-top: 1px solid var(--border-muted); }
.ib-sugg-text { flex: 1; min-width: 0; line-height: 1.45; }
.ib-more-h { margin: 1.125rem 0 0.375rem; font-size: 0.875rem; }
.ib-more-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ib-more-ai .form-hint { flex-basis: 100%; margin: 0 0 0.25rem; }
.ib-ai-qs { flex-basis: 100%; }
.ib-ai-qs:not(:empty) { margin-top: 0.375rem; border: 1px solid var(--border-default); border-radius: 0.5rem; }
@media (max-width: 860px) {
  .ib { padding: 0 0.75rem 6rem; }
  .ib-main { grid-template-columns: minmax(0, 1fr); }
  .ib-palette { display: none; }
  .ib-top { position: static; }
  .ib-progress-text { display: none; }
  .ib-row { flex-wrap: wrap; padding-right: 0.375rem; }
  .ib-body { order: 3; flex-basis: 100%; padding-left: 0.25rem; }
  .ib-actions { margin-left: auto; }
  .ib-sec-body { padding: 0.25rem 0.5rem 0.625rem; }
  .ib-arm { padding-left: 0.625rem; padding-right: 0.375rem; }
  .ideas-list { padding: 1rem 0.875rem 6rem; }
  .ideas-empty { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
}

/* Vault without 2FA (a room admin's OK) */
.vault-2fa-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0 0; }
.vault-waiver-hint { margin: 0.75rem 0 0; }
.vault-asked { display: inline-flex; align-items: center; gap: 0.375rem; }
.vault-waivers > .form-hint { margin: 0 0 0.375rem; line-height: 1.5; }
.vault-waivers .form-hint strong { color: var(--fg-default); }
[data-act="waivers"] .Counter { margin-left: 0.25rem; }
.ib-aiset-opts { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 0.25rem; }
.ib-aiset-opt { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.375rem; cursor: pointer; }
.ib-aiset-opt:has(input:checked) { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.ib-aiset-opt.disabled { opacity: .55; cursor: default; }
.ib-aiset-opt input { margin-top: 0.1875rem; flex: none; }
.ib-aiset-opt strong { display: block; font-size: 0.875rem; }
.ib-aiset-opt small { display: block; color: var(--fg-muted); font-size: 0.7812rem; line-height: 1.45; margin-top: 0.125rem; }
.ib-aiset-own[hidden] { display: none; }

/* ——— Personal settings (Account settings → Display) ——— */
/* More contrast: darker secondary text, stronger lines — in both themes. */
:root[data-contrast="more"][data-theme="light"] { --fg-muted: #3a3a35; --fg-subtle: #4d4d47; --border-default: #9a9a92; --border-muted: #b9b9b1; --card-border: #9a9a92; --card-border-strong: #6f6f68; }
:root[data-contrast="more"][data-theme="dark"] { --fg-muted: #d0d0ca; --fg-subtle: #b5b5ae; --border-default: #6d6d67; --border-muted: #55554f; --card-border: #6d6d67; --card-border-strong: #8d8d86; }
:root[data-contrast="more"] :focus-visible { outline-width: 0.1875rem !important; }
/* Less motion: nothing slides or fades. */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
/* Underlined links. */
:root[data-links="underline"] a:not(.btn):not(.nav-btn):not(.idea-card):not(.ib-task) { text-decoration: underline; text-underline-offset: 0.125rem; }
.settings-choice { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.settings-choice label { position: relative; cursor: pointer; }
.settings-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.settings-choice span { display: block; min-width: 3.375rem; padding: 0.3125rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--btn-bg); font-size: 0.8125rem; text-align: center; }
.settings-choice input:checked + span { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 600; }
.settings-choice input:focus-visible + span { outline: 0.125rem solid var(--accent-line); outline-offset: 0.125rem; }
.pref-row { display: grid; grid-template-columns: minmax(9.375rem, 13.75rem) 1fr; gap: 0.5rem 1.125rem; align-items: start; padding: 0.75rem 0; border-top: 1px solid var(--border-muted); }
.pref-row:first-child { border-top: 0; padding-top: 0.125rem; }
.pref-row > .form-label { margin: 0.375rem 0 0; }
.pref-row .form-hint { margin: 0.375rem 0 0; }
.pref-sample { margin-top: 0.5rem; color: var(--fg-muted); font-size: 0.7812rem; }
@media (max-width: 640px) { .pref-row { grid-template-columns: minmax(0, 1fr); } }
/* Room settings: School, Rules, Billing */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }
.rq-times { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; max-width: 20rem; }
.rq-times input { max-width: 8rem; }
.billing-plan { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.billing-plan-name { margin: 0.25rem 0 0; font-size: 1.125rem; font-weight: 700; }
.billing-plan-sub { margin: 0.25rem 0 0; }
.billing-usage { margin: 0.75rem 0 0; }
.billing-h { margin: 1.25rem 0 0.5rem; font-size: 0.875rem; }
.billing-form { margin-top: 0.5rem; padding-top: 0.25rem; border-top: 1px solid var(--border-muted); }
.billing-list { margin: 0; padding: 0; list-style: none; }
.billing-list li { display: flex; gap: 0.75rem; padding: 0.375rem 0; border-top: 1px solid var(--border-muted); font-size: 0.8125rem; }
.billing-list li:first-child { border-top: 0; }
.bl-when { flex: none; width: 10rem; color: var(--fg-muted); }

/* ——— Header: measured, not guessed ———
   The header used to change at fixed window widths, so some monitors showed bare icons with room to spare.
   main.js fitHeader() now tries these layouts from roomiest to tightest and keeps the first one that fits:
   0 names + search · 1 tighter · 2 names, search behind a button · 3 icons + search · 4 icons, search button · 5 the least. */
@media (min-width: 761px) {
  .header-top { position: relative; flex-wrap: nowrap; }
  .main-nav { flex-shrink: 0; }
  .main-nav .nav-btn { flex-shrink: 0; white-space: nowrap; }
  .room-switch { flex-shrink: 0; max-width: 14rem; }
  .header-search { min-width: 9rem; }
  :root[data-hdr="1"] .header-top, :root[data-hdr="2"] .header-top { column-gap: 0.375rem; padding-left: 0.625rem; padding-right: 0.625rem; }
  :root[data-hdr="1"] .main-nav, :root[data-hdr="2"] .main-nav { gap: 0; margin-left: 0; }
  :root[data-hdr="1"] .main-nav .nav-btn, :root[data-hdr="2"] .main-nav .nav-btn { padding: 0 0.4375rem; gap: 0.3125rem; }
  :root[data-hdr="1"] .header-search { flex-basis: 11rem; min-width: 8rem; }
  :root[data-hdr="1"] .upgrade-btn span, :root[data-hdr="2"] .upgrade-btn span, :root[data-hdr="1"] .call-pill span, :root[data-hdr="2"] .call-pill span { display: none; }
  :root[data-hdr="1"] .room-switch, :root[data-hdr="2"] .room-switch { max-width: 11rem; }
  :root[data-hdr="3"] .main-nav .nav-btn:not(.selected) span, :root[data-hdr="4"] .main-nav .nav-btn:not(.selected) span, :root[data-hdr="5"] .main-nav .nav-btn span { display: none; }
  :root[data-hdr="3"] .main-nav, :root[data-hdr="4"] .main-nav, :root[data-hdr="5"] .main-nav { gap: 0.125rem; margin-left: 0.125rem; }
  :root[data-hdr="3"] .main-nav .nav-btn, :root[data-hdr="4"] .main-nav .nav-btn { padding: 0 0.5625rem; }
  :root[data-hdr="5"] .main-nav { gap: 0; }
  :root[data-hdr="5"] .main-nav .nav-btn { padding: 0 0.375rem; }
  :root[data-hdr="3"] .header-search { flex-basis: 15rem; }
  :root[data-hdr="2"] .header-search, :root[data-hdr="4"] .header-search, :root[data-hdr="5"] .header-search { display: none; }
  :root[data-hdr="2"] .header-right, :root[data-hdr="4"] .header-right, :root[data-hdr="5"] .header-right { margin-left: auto; }
  :root[data-hdr="2"] .app.search-open .header-search, :root[data-hdr="4"] .app.search-open .header-search, :root[data-hdr="5"] .app.search-open .header-search { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding: 0.5rem 1rem; background: var(--bg-inset); border-bottom: 1px solid var(--border-default); max-width: none; min-width: 0; flex-basis: auto; }
  :root[data-hdr="2"] .search-btn, :root[data-hdr="4"] .search-btn, :root[data-hdr="5"] .search-btn { display: inline-flex; }
  :root[data-hdr="4"] .upgrade-btn span, :root[data-hdr="5"] .upgrade-btn span, :root[data-hdr="4"] .call-pill span, :root[data-hdr="5"] .call-pill span { display: none; }
  :root[data-hdr="5"] .room-switch .room-name, :root[data-hdr="5"] .upgrade-btn { display: none; }
  :root[data-hdr="5"] .header-right { gap: 0.25rem; }
}

/* ——— Moods: ready-made colour sets (Account settings → Appearance). Each one changes the accent and gives the
   greys a slight tint; nothing else moves. Lime is the one CanWeSync was designed in. ——— */
:root[data-mood="sea"] { --fg-accent: #6cc7f5; --accent-emphasis: #6cc7f5; --on-accent: #06141c; --lime-fg: #a5ddfa; --accent-line: #6cc7f5; --accent-line-soft: #6cc7f566;
  --bg-default: #101316; --bg-inset: #090b0d; --bg-muted: #181c20; --bg-overlay: #181c20; --btn-bg: #20252a; --btn-hover-bg: #272d33; --btn-active-bg: #2e353c; --border-default: #353c43; --border-muted: #353c43b3; --counter-bg: #161a1d; --card-bg: #191d21; --card-border: #3d454d; --canvas-bg: #0c0f11; --tile-bg: #121518; --shadow-overlay: 0 0 0 1px #353c43, 0 0.375rem 0.75rem -3px #090b0d66, 0 0.375rem 1.125rem 0 #090b0d66; }
:root[data-mood="amber"] { --fg-accent: #ffb85c; --accent-emphasis: #ffb85c; --on-accent: #1c1003; --lime-fg: #ffd499; --accent-line: #ffb85c; --accent-line-soft: #ffb85c66;
  --bg-default: #141210; --bg-inset: #0c0a08; --bg-muted: #1d1a17; --bg-overlay: #1d1a17; --btn-bg: #272320; --btn-hover-bg: #2e2a26; --btn-active-bg: #36312c; --border-default: #403a33; --border-muted: #403a33b3; --counter-bg: #1a1815; --card-bg: #1e1b18; --card-border: #49423a; --canvas-bg: #100e0c; --tile-bg: #171512; --shadow-overlay: 0 0 0 1px #403a33, 0 0.375rem 0.75rem -3px #0c0a0866, 0 0.375rem 1.125rem 0 #0c0a0866; }
:root[data-mood="mint"] { --fg-accent: #72e0b4; --accent-emphasis: #72e0b4; --on-accent: #04150e; --lime-fg: #a8efd2; --accent-line: #72e0b4; --accent-line-soft: #72e0b466;
  --bg-default: #101412; --bg-inset: #090c0a; --bg-muted: #181d1a; --bg-overlay: #181d1a; --btn-bg: #202622; --btn-hover-bg: #272e2a; --btn-active-bg: #2e3631; --border-default: #353e39; --border-muted: #353e39b3; --counter-bg: #161b18; --card-bg: #191e1b; --card-border: #3e4842; --canvas-bg: #0c100e; --tile-bg: #121614; --shadow-overlay: 0 0 0 1px #353e39, 0 0.375rem 0.75rem -3px #090c0a66, 0 0.375rem 1.125rem 0 #090c0a66; }
:root[data-mood="dusk"] { --fg-accent: #b9a8ff; --accent-emphasis: #b9a8ff; --on-accent: #100a22; --lime-fg: #d6ccff; --accent-line: #b9a8ff; --accent-line-soft: #b9a8ff66;
  --bg-default: #131218; --bg-inset: #0b0a0f; --bg-muted: #1c1b23; --bg-overlay: #1c1b23; --btn-bg: #25242e; --btn-hover-bg: #2c2b36; --btn-active-bg: #34333f; --border-default: #3c3a48; --border-muted: #3c3a48b3; --counter-bg: #19181f; --card-bg: #1d1c24; --card-border: #454353; --canvas-bg: #0f0e13; --tile-bg: #15141a; --shadow-overlay: 0 0 0 1px #3c3a48, 0 0.375rem 0.75rem -3px #0b0a0f66, 0 0.375rem 1.125rem 0 #0b0a0f66; }
:root[data-mood="rose"] { --fg-accent: #ff9fb2; --accent-emphasis: #ff9fb2; --on-accent: #21080e; --lime-fg: #ffc6d1; --accent-line: #ff9fb2; --accent-line-soft: #ff9fb266;
  --bg-default: #151112; --bg-inset: #0d090a; --bg-muted: #1e191a; --bg-overlay: #1e191a; --btn-bg: #282223; --btn-hover-bg: #2f292a; --btn-active-bg: #373031; --border-default: #413839; --border-muted: #413839b3; --counter-bg: #1b1617; --card-bg: #1f1a1b; --card-border: #4a4041; --canvas-bg: #110d0e; --tile-bg: #181314; --shadow-overlay: 0 0 0 1px #413839, 0 0.375rem 0.75rem -3px #0d090a66, 0 0.375rem 1.125rem 0 #0d090a66; }
:root[data-mood="graphite"] { --fg-accent: #e9e9e4; --accent-emphasis: #e9e9e4; --on-accent: #121211; --lime-fg: #f5f5f2; --accent-line: #e9e9e4; --accent-line-soft: #e9e9e466; }
:root[data-mood="sea"][data-theme="light"] { --fg-accent: #0b5f8f; --accent-emphasis: #7fd0f7; --on-accent: #06141c; --lime-fg: #0b5f8f; --accent-line: #0b5f8f; --accent-line-soft: #0b5f8f40;
  --bg-default: #ffffff; --bg-inset: #f3f6f8; --bg-muted: #eaeff2; --bg-overlay: #ffffff; --btn-bg: #f4f7f9; --btn-hover-bg: #e8edf1; --btn-active-bg: #dde4e9; --border-default: #d0d8de; --border-muted: #e2e8ec; --counter-bg: #e8edf1; --card-bg: #ffffff; --card-border: #c6d0d7; --canvas-bg: #f5f8fa; --tile-bg: #1b1b1a; --shadow-overlay: 0 0 0 1px #d0d8de, 0 0.5rem 1.5rem -6px #0d0d0d2e; }
:root[data-mood="amber"][data-theme="light"] { --fg-accent: #8f4e00; --accent-emphasis: #ffc56e; --on-accent: #1c1003; --lime-fg: #8f4e00; --accent-line: #8f4e00; --accent-line-soft: #8f4e0040;
  --bg-default: #ffffff; --bg-inset: #f8f5f1; --bg-muted: #f1ede7; --bg-overlay: #ffffff; --btn-bg: #f9f6f2; --btn-hover-bg: #efeae3; --btn-active-bg: #e6e0d7; --border-default: #ddd6cb; --border-muted: #ebe6dd; --counter-bg: #efeae3; --card-bg: #ffffff; --card-border: #d4ccbf; --canvas-bg: #faf8f4; --tile-bg: #1b1b1a; --shadow-overlay: 0 0 0 1px #ddd6cb, 0 0.5rem 1.5rem -6px #0d0d0d2e; }
:root[data-mood="mint"][data-theme="light"] { --fg-accent: #0a6c4b; --accent-emphasis: #86e6c0; --on-accent: #04150e; --lime-fg: #0a6c4b; --accent-line: #0a6c4b; --accent-line-soft: #0a6c4b40;
  --bg-default: #ffffff; --bg-inset: #f3f7f5; --bg-muted: #eaf0ed; --bg-overlay: #ffffff; --btn-bg: #f4f8f6; --btn-hover-bg: #e8eeeb; --btn-active-bg: #dde5e1; --border-default: #d0dad5; --border-muted: #e2e9e5; --counter-bg: #e8eeeb; --card-bg: #ffffff; --card-border: #c6d2cc; --canvas-bg: #f5f9f7; --tile-bg: #1b1b1a; --shadow-overlay: 0 0 0 1px #d0dad5, 0 0.5rem 1.5rem -6px #0d0d0d2e; }
:root[data-mood="dusk"][data-theme="light"] { --fg-accent: #5a3fc0; --accent-emphasis: #c6b8ff; --on-accent: #100a22; --lime-fg: #5a3fc0; --accent-line: #5a3fc0; --accent-line-soft: #5a3fc040;
  --bg-default: #ffffff; --bg-inset: #f5f4f9; --bg-muted: #edecf3; --bg-overlay: #ffffff; --btn-bg: #f6f5fa; --btn-hover-bg: #ebe9f2; --btn-active-bg: #e0deea; --border-default: #d5d3e0; --border-muted: #e5e3ee; --counter-bg: #ebe9f2; --card-bg: #ffffff; --card-border: #cbc8d9; --canvas-bg: #f7f6fb; --tile-bg: #1b1b1a; --shadow-overlay: 0 0 0 1px #d5d3e0, 0 0.5rem 1.5rem -6px #0d0d0d2e; }
:root[data-mood="rose"][data-theme="light"] { --fg-accent: #a8324b; --accent-emphasis: #ffb3c1; --on-accent: #21080e; --lime-fg: #a8324b; --accent-line: #a8324b; --accent-line-soft: #a8324b40;
  --bg-default: #ffffff; --bg-inset: #f9f4f5; --bg-muted: #f2ebec; --bg-overlay: #ffffff; --btn-bg: #faf5f6; --btn-hover-bg: #f0e8e9; --btn-active-bg: #e7dddf; --border-default: #dfd3d5; --border-muted: #ece3e4; --counter-bg: #f0e8e9; --card-bg: #ffffff; --card-border: #d6c8ca; --canvas-bg: #fbf7f8; --tile-bg: #1b1b1a; --shadow-overlay: 0 0 0 1px #dfd3d5, 0 0.5rem 1.5rem -6px #0d0d0d2e; }
:root[data-mood="graphite"][data-theme="light"] { --fg-accent: #0d0d0d; --accent-emphasis: #1b1b1a; --on-accent: #ffffff; --lime-fg: #0d0d0d; --accent-line: #0d0d0d; --accent-line-soft: #0d0d0d40; }
.mood-pick { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-muted); }
.mood-pick > .form-label { flex-basis: 100%; margin: 0; }
.mood-opt { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; cursor: pointer; font-size: 0.8125rem; }
.mood-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mood-swatch { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border-default); background: var(--m-bg); }
.mood-swatch::after { content: ""; position: absolute; inset: 0.6875rem; border-radius: 50%; background: var(--m-accent); }
.mood-opt input:checked + .mood-swatch { box-shadow: 0 0 0 0.125rem var(--bg-inset), 0 0 0 0.25rem var(--accent-line); }
.mood-opt input:focus-visible + .mood-swatch { outline: 0.125rem solid var(--accent-line); outline-offset: 0.25rem; }
.mood-opt input:checked ~ span:last-child { font-weight: 600; }
.mood-swatch.lime { --m-bg: #121211; --m-accent: #c8f135; } .mood-swatch.sea { --m-bg: #101316; --m-accent: #6cc7f5; } .mood-swatch.amber { --m-bg: #141210; --m-accent: #ffb85c; }
.mood-swatch.mint { --m-bg: #101412; --m-accent: #72e0b4; } .mood-swatch.dusk { --m-bg: #131218; --m-accent: #b9a8ff; } .mood-swatch.rose { --m-bg: #151112; --m-accent: #ff9fb2; } .mood-swatch.graphite { --m-bg: #121211; --m-accent: #e9e9e4; }
:root[data-theme="light"] .mood-swatch { --m-bg: #ffffff; }
:root[data-theme="light"] .mood-swatch.graphite { --m-accent: #1b1b1a; }

/* ——— Files: folders, tiles and the storage ring ——— */
.files-page { overflow: hidden; display: flex; flex-direction: column; }
.fs { flex: 1; min-height: 0; display: flex; }
.fs-side { flex: none; width: 17rem; padding: 1.25rem 1rem; border-right: 1px solid var(--border-default); background: var(--bg-inset); overflow-y: auto; }
.fs-gauge { text-align: center; }
.fs-ring { width: 9.5rem; height: 9.5rem; }
.fs-ring-num { fill: var(--fg-default); font-size: 1.5rem; font-weight: 700; font-family: var(--font); }
.fs-ring-sub { fill: var(--fg-muted); font-size: 0.6875rem; font-family: var(--font); }
.fs-used { margin: 0.5rem 0 0.125rem; font-size: 0.875rem; }
.fs-gauge .form-hint { margin: 0; }
.fs-places { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 1.125rem; }
.fs-place { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4375rem 0.5rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--fg-default); font-size: 0.8438rem; text-align: left; }
button.fs-place { cursor: pointer; }
button.fs-place:hover { background: var(--hover-bg); }
.fs-place.current { background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--border-default); font-weight: 600; }
.fs-place.static { color: var(--fg-muted); }
.fs-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.fs-place.fs-big { margin-top: 0.5rem; padding-top: 0.625rem; border-top: 1px solid var(--border-muted); border-radius: 0 0 0.375rem 0.375rem; }
.fs-place.fs-big .fs-dot { border: 1.5px solid var(--fg-muted); }
.fs-place-name { flex: 1; min-width: 0; }
.fs-place-size { color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: 0.7812rem; }
.fs-free { margin-top: 1rem; }
.fs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1.25rem 1.5rem 2rem; overflow-y: auto; }
.fs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fs-head h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0 auto 0 0; font-size: 1.25rem; }
.fs-search { width: 15rem; height: 2rem; }
.fs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0.875rem 0 0.75rem; color: var(--fg-muted); font-size: 0.875rem; }
.fs-crumbs a { color: var(--fg-muted); }
.fs-crumbs a.here { color: var(--fg-default); font-weight: 600; }
.fs-sep { opacity: .6; }
.fs-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 0.875rem; padding: 0.625rem 0.875rem; border: 1px solid #9e6a03; border-radius: 0.375rem; background: #bb80091a; font-size: 0.875rem; }
.fs-alert.full { border-color: var(--danger-emphasis); background: #da36331a; }
.fs-alert span { flex: 1; min-width: 12rem; }
.fs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.75rem; align-content: start; }
.fs-file, .fs-folder { position: relative; display: flex; min-width: 0; border: 1px solid var(--card-border); border-radius: 0.5rem; background: var(--card-bg); cursor: pointer; outline: none; }
.fs-file { flex-direction: column; }
.fs-folder { align-items: center; gap: 0.625rem; padding: 0.75rem 2.25rem 0.75rem 0.75rem; }
.fs-folder > .octicon, .fs-folder > svg { flex: none; color: var(--fg-accent); }
.fs-file:hover, .fs-folder:hover { border-color: var(--card-border-strong); }
.fs-file:focus-visible, .fs-folder:focus-visible { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.fs-thumb { display: grid; place-items: center; align-content: center; gap: 0.25rem; height: 7.25rem; border-radius: 0.4375rem 0.4375rem 0 0; background: var(--bg-inset); color: var(--fg-muted); overflow: hidden; }
.fs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fs-ext { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; }
.fs-thumb.t-documents { color: #58a6ff; } .fs-thumb.t-video { color: #d2a8ff; } .fs-thumb.t-audio { color: #3fb950; }
:root[data-theme="light"] .fs-thumb.t-documents { color: #0b5f8f; } :root[data-theme="light"] .fs-thumb.t-video { color: #7c3aed; } :root[data-theme="light"] .fs-thumb.t-audio { color: #1a7f37; }
.fs-meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.fs-file .fs-meta { padding: 0.5rem 2rem 0.625rem 0.625rem; }
.fs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8438rem; }
.fs-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: 0.7188rem; }
.fs-more { position: absolute; right: 0.25rem; bottom: 0.3125rem; }
.fs-folder .fs-more { top: 50%; bottom: auto; transform: translateY(-50%); }
.fs-list.rows { grid-template-columns: 1fr; gap: 0.25rem; }
.fs-list.rows .fs-file { flex-direction: row; align-items: center; gap: 0.625rem; padding: 0.375rem 2.25rem 0.375rem 0.375rem; }
.fs-list.rows .fs-thumb { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.3125rem; }
.fs-list.rows .fs-thumb .fs-ext { display: none; }
.fs-list.rows .fs-file .fs-meta { flex: 1; flex-direction: row; align-items: baseline; gap: 0.75rem; padding: 0; }
.fs-list.rows .fs-name { flex: 1; }
.fs-list.rows .fs-more { top: 50%; bottom: auto; transform: translateY(-50%); }
.fs-empty { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; color: var(--fg-muted); }
.fs-empty h2 { margin: 0.5rem 0 0.25rem; color: var(--fg-default); font-size: 1.0625rem; }
.files-page.fs-drop .fs-main { outline: 0.125rem dashed var(--accent-line); outline-offset: -0.5rem; }
.fs-uploads { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background: var(--bg-inset); }
.fs-up { display: grid; grid-template-columns: minmax(0, 1fr) 8rem auto auto; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.fs-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-up-bar { height: 0.375rem; border-radius: 0.1875rem; background: var(--border-default); overflow: hidden; }
.fs-up-bar i { display: block; height: 100%; background: var(--accent-emphasis); }
.fs-up-state { color: var(--fg-muted); font-size: 0.75rem; }
.fs-up.failed .fs-up-bar { visibility: hidden; }
.fs-up.failed .fs-up-state { color: var(--red-fg); }
.fs-move { display: flex; flex-direction: column; gap: 0.125rem; max-height: 20rem; overflow-y: auto; }
.fs-move-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.625rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--fg-default); font-size: 0.875rem; text-align: left; cursor: pointer; }
.fs-move-row:hover:not(:disabled) { background: var(--hover-bg); }
.fs-move-row[aria-selected="true"] { background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--accent-line-soft); font-weight: 600; }
.fs-move-row:disabled { opacity: .4; cursor: default; }
.viewer-frame { align-self: stretch; width: min(68.75rem, 100%); margin: 0 auto; border: 1px solid var(--border-default); border-radius: 0.5rem; background: #fff; }
.viewer-media { max-width: 100%; max-height: 100%; border-radius: 0.375rem; background: #000; }
.viewer-audio { width: min(32rem, 100%); }
@media (max-width: 760px) {
  .files-page { overflow-y: auto; }
  .fs { flex-direction: column; }
  .fs-side { width: auto; border-right: 0; border-bottom: 1px solid var(--border-default); overflow: visible; }
  .fs-gauge { display: flex; align-items: center; gap: 1rem; text-align: left; }
  .fs-ring { width: 5.5rem; height: 5.5rem; flex: none; }
  .fs-places { flex-direction: row; flex-wrap: wrap; }
  .fs-place { width: auto; }
  .fs-place.fs-big { margin-top: 0; padding-top: 0.4375rem; border-top: 0; border-radius: 0.375rem; }
  .fs-main { overflow: visible; padding: 1rem; }
  .fs-search { flex: 1 1 100%; order: 5; width: auto; }
  .fs-list { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .fs-up { grid-template-columns: minmax(0, 1fr) auto auto; } .fs-up-bar { display: none; }
}

/* ——— Operator console ——— */
.op-wrap { max-width: 68rem; }
.op-wrap .settings-title { display: flex; align-items: center; gap: 0.5rem; }
.op-tabs { display: flex; gap: 0.25rem; margin: 1rem 0 1.25rem; border-bottom: 1px solid var(--border-default); }
.op-tabs a { padding: 0.5rem 0.875rem; border: 1px solid transparent; border-bottom: 0; border-radius: 0.375rem 0.375rem 0 0; color: var(--fg-muted); font-size: 0.875rem; text-decoration: none; margin-bottom: -1px; }
.op-tabs a:hover { color: var(--fg-default); text-decoration: none; }
.op-tabs a[aria-selected="true"] { border-color: var(--border-default); background: var(--bg-default); color: var(--fg-default); font-weight: 600; }
.op-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.op-stat { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem 1rem; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-inset); color: var(--fg-default); text-decoration: none; }
.op-stat[href]:hover { border-color: var(--card-border-strong); text-decoration: none; }
.op-stat strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.op-stat span { color: var(--fg-muted); font-size: 0.7812rem; }
.op-alarm { margin-bottom: 1rem; }
.op-todo-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 0; color: var(--fg-default); }
.op-todo-row strong { min-width: 1.75rem; font-variant-numeric: tabular-nums; }
.op-health-row { display: grid; grid-template-columns: 0.625rem 11rem 1fr; align-items: baseline; gap: 0.625rem; padding: 0.375rem 0; font-size: 0.875rem; }
.op-health-row i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fg-subtle); transform: translateY(-1px); }
.op-health-row.ok i { background: var(--green-fg); } .op-health-row.bad i { background: var(--red-fg); }
.op-health-row span { color: var(--fg-muted); }
.op-health-row.bad span { color: var(--red-fg); }
.op-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; }
.op-bar input { flex: 1; min-width: 14rem; height: 2rem; }
.op-bar select { width: auto; }
.op-bar .btn[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.op-scroll { overflow-x: auto; border: 1px solid var(--border-default); border-radius: 0.5rem; }
.op-table { width: 100%; border-collapse: collapse; font-size: 0.8438rem; }
.op-table th { padding: 0.5rem 0.75rem; background: var(--bg-inset); color: var(--fg-muted); font-size: 0.75rem; font-weight: 600; text-align: left; white-space: nowrap; }
.op-table td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--border-muted); vertical-align: middle; white-space: nowrap; }
.op-table td:first-child { white-space: normal; min-width: 11rem; }
.op-table td small { display: block; color: var(--fg-muted); font-size: 0.75rem; }
.op-table tbody tr[tabindex] { cursor: pointer; }
.op-table tbody tr[tabindex]:hover, .op-table tbody tr[tabindex]:focus-visible { background: var(--hover-bg); outline: none; }
.op-tag { display: inline-block; padding: 0 0.4375rem; border: 1px solid var(--border-default); border-radius: 62.5rem; font-size: 0.7188rem; line-height: 1.25rem; white-space: nowrap; }
.op-tag.quiet { color: var(--fg-muted); } .op-tag.warn { border-color: #9e6a03; color: var(--yellow-fg); } .op-tag.bad { border-color: var(--danger-emphasis); color: var(--red-fg); }
.op-dim { color: var(--fg-muted); }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.op-pager { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; color: var(--fg-muted); font-size: 0.8125rem; }
.op-pager span { margin-right: auto; }
.op-who h2 { margin: 0.5rem 0 0.25rem; font-size: 1.375rem; }
.op-who-sub { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.op-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem 1.25rem; margin: 1rem 0 0; }
.op-facts div { display: flex; flex-direction: column; gap: 0.125rem; }
.op-facts span { color: var(--fg-muted); font-size: 0.75rem; }
.op-facts strong { font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.op-action { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--border-muted); }
.op-action:first-child { border-top: 0; padding-top: 0; }
.op-action > div { flex: 1; min-width: 0; }
.op-action .form-hint { margin: 0.125rem 0 0; }
.op-action .btn { flex: none; }
.op-row { display: flex; gap: 0.75rem; padding: 0.3125rem 0; font-size: 0.8438rem; }
.op-row span { color: var(--fg-muted); }
.op-row .op-when { flex: none; width: 9.5rem; }
.op-plan .form-label { margin-top: 0.75rem; }
.su-hp { position: absolute; left: -625rem; width: 1px; height: 1px; overflow: hidden; }
.form-optional { color: var(--fg-muted); font-weight: 400; }
@media (max-width: 640px) { .op-action { flex-direction: column; align-items: flex-start; } .op-health-row { grid-template-columns: 0.625rem 1fr; } .op-health-row span { grid-column: 2; } }