/* Cairn — vanilla CSS, light theme with dark-mode support */

:root {
  --bg: #f7f6f3;
  --panel: #ffffff;
  --ink: #1f2328;
  --muted: #6b7280;
  --line: #e5e2dc;
  --accent: #3a6ea5;
  --accent-ink: #ffffff;
  --danger: #b3382e;
  --ok: #2e8b57;
  --code-bg: #f0efeb;
  font-size: 16px;
}
/* theme is resolved by JS (light/dark/auto setting) into data-theme */
:root[data-theme="dark"] {
  --bg: #16181d;
  --panel: #1e2127;
  --ink: #e6e4df;
  --muted: #9aa0a6;
  --line: #2c3038;
  --accent: #6da3d8;
  --accent-ink: #10141a;
  --code-bg: #262a31;
  --ok: #4caf7d;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
/* depth of the iOS/iPadOS home indicator, 0 everywhere else */
:root { --safe-b: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; width: 100%; }
/* iOS/Safari needs overflow-x clipping on <html> too, not just <body>, or a few
   px of horizontal overflow makes the whole page scroll and shifts fixed
   elements (e.g. the mobile hamburger) off-screen. */
html { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100%;
}
/* grid/flex children must be allowed to shrink below their content width,
   or wide content (tables, long text) pushes the whole layout off-screen */
.app-shell > * { min-width: 0; }

.view { height: 100vh; height: 100dvh; width: 100%; max-width: 100%; overflow-x: hidden; }
/* Pin the app shell to the viewport so a transient overflow during load can't
   pan/widen the layout viewport on iOS (which left everything shifted ~20px).
   Height must be stated HERE: this element is both .view and .app-shell, so an
   id rule shadows .view's dvh. It previously said `height: 100%`, and for a
   fixed element under viewport-fit=cover iOS resolves that against the
   safe-area-excluded height while the box is pinned to the full viewport —
   which left a dead strip the depth of the home indicator along the bottom of
   the iPad. dvh is the honest measure; the safe inset is then paid back as
   padding by the elements that actually sit on the bottom edge (below), so
   panel backgrounds still bleed to the edge of the screen. */
#view-main {
  position: fixed; inset: 0; width: 100%; overflow: hidden;
  height: 100vh;   /* fallback for anything without dvh */
  height: 100dvh;
}
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--danger); font-size: 0.9rem; }

button {
  font: inherit; cursor: pointer; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
  border-radius: 6px; padding: 0.4rem 0.9rem;
}
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.danger { color: var(--danger); }
button.linklike { border: none; background: none; color: var(--muted); padding: 0.2rem 0.4rem; }
button.linklike:hover { color: var(--ink); }

input, textarea {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.7rem;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- auth ---- */
#view-auth, #view-unlock { display: flex; align-items: center; justify-content: center; }
.auth-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 2rem; width: min(24rem, 92vw); box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.logo { margin: 0 0 1rem; font-size: 1.6rem; display: flex; align-items: center; gap: 0.45rem; }
.logo.small { font-size: 1.05rem; font-weight: 600; margin: 0; }
.logo-icon { flex: none; color: var(--accent); }
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.tab { flex: 1; border-radius: 6px; }
.tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.auth-card form { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-card label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
/* readonly email on the unlock screen — shown so password managers can autofill
   the passphrase (they associate a password with a username field) */
.auth-card input[readonly] { color: var(--muted); background: var(--code-bg); }
.auth-invite {
  margin: 0 0 0.9rem; padding: 0.55rem 0.7rem; font-size: 0.88rem;
  border: 1px solid var(--accent); border-radius: 8px; color: var(--accent);
}
/* why sign-in cannot work here — shown instead of letting importKey throw */
.auth-warn {
  margin: 0 0 1rem; padding: 0.7rem 0.85rem; font-size: 0.9rem;
  border: 1px solid var(--danger); border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.auth-warn strong { display: block; margin-bottom: 0.35rem; color: var(--danger); }
.auth-warn p { margin: 0 0 0.5rem; }
.auth-warn .small { color: var(--muted); font-size: 0.8rem; margin: 0; }
.auth-warn-link {
  display: inline-block; margin-bottom: 0.5rem; font-weight: 600;
  color: var(--accent); word-break: break-all;
}

/* ---- shell ---- */
.app-shell {
  display: grid; grid-template-columns: 17rem 1fr;
  grid-auto-rows: minmax(0, 1fr); /* the single row fills the pane height */
  width: 100%; max-width: 100%; overflow-x: hidden;
}
/* more room for the note/task lists on large displays */
@media (min-width: 1400px) { .app-shell { grid-template-columns: 20rem 1fr; } }
@media (min-width: 1750px) { .app-shell { grid-template-columns: 23rem 1fr; } }
.sidebar {
  border-right: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; min-height: 0;
  position: relative;
  overflow-x: hidden; max-width: 100%;
}
.sidebar-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem 1rem; border-bottom: 1px solid var(--line);
}

/* settings popover (anchored above the sidebar footer) */
.settings-pop {
  position: absolute; bottom: 2.8rem; left: 0.8rem; width: 15rem; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 0.8rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem;
  max-height: calc(100vh - 4rem); overflow-y: auto;
}
.settings-pop fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.settings-pop legend { padding: 0 0 0.3rem; }
.settings-pop label { display: flex; align-items: center; gap: 0.4rem; }
.settings-pop p { margin: 0; }
.pop-section-head { display: flex; justify-content: space-between; align-items: center; }
.pop-section-head button { font-size: 0.78rem; padding: 0.2rem 0.6rem; }

/* teams */
.teams-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 16rem; overflow-y: auto; }
.team-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.team-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.team-members { display: flex; flex-direction: column; gap: 0.15rem; }
.team-member-row { display: flex; justify-content: space-between; align-items: center; }
.team-invite { display: flex; gap: 0.35rem; }
.team-invite input { flex: 1; min-width: 0; font-size: 0.82rem; }
.team-invite button { font-size: 0.78rem; }
.team-card > button.small { align-self: flex-start; font-size: 0.78rem; }

/* team sections in the notes tree */
.tree-team-head {
  margin: 0.6rem 0 0.1rem; padding: 0.15rem 0.5rem;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  border-top: 1px solid var(--line);
}
/* "All spaces": one collapsible heading per space above its own subtree, so a
   row's origin is clear without stealing width from the name itself */
.space-head {
  display: flex; align-items: center; gap: 0.35rem; width: 100%;
  background: none; border: none; border-top: 1px solid var(--line);
  color: var(--muted); text-align: left; cursor: pointer;
}
.space-head:first-child { border-top: none; margin-top: 0.1rem; }
.space-head:hover { color: inherit; }
.space-head .chev { flex: none; width: 0.8rem; font-size: 0.7rem; }
.space-head-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-head .count {
  flex: none; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 0.75;
}
.tree-team-empty { padding: 0 0.6rem 0.3rem; margin: 0; }
.sidebar-tools { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 1rem; min-height: 0; }
/* Calendar view: the note list is empty, so let the calendar tools claim the
   sidebar's full remaining height and scroll their task list inside it. */
.sidebar-tools.cal-fill { flex: 1; min-height: 0; }
.sidebar-tools.cal-fill .cal-tools { flex: 1; min-height: 0; }
.sidebar-tools.cal-fill #cal-task-list { flex: 1; min-height: 0; overflow-y: auto; }
.ctx-switch {
  font: inherit; font-weight: 600; color: var(--ink);
  background: var(--code-bg); border: 1px solid var(--accent); border-radius: 6px;
  padding: 0.4rem 0.5rem;
}

/* generic centered modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3); padding: 1.2rem 1.3rem;
  width: min(22rem, 92vw); display: flex; flex-direction: column; gap: 0.9rem;
}
.modal select {
  font: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.6rem;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; align-items: center; }
.history-modal { width: min(40rem, 92vw); }
.history-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.history-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 60vh; overflow-y: auto; }
.hist-row { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; align-items: center; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; }
.hist-meta { display: flex; align-items: baseline; gap: 0.5rem; }
.hist-when { font-size: 0.85rem; font-weight: 600; }
.hist-preview { grid-column: 1 / 2; color: var(--muted); font-size: 0.82rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-act { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
.cm-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cm-opt {
  font: inherit; font-size: 0.88rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
}
.cm-opt:hover { border-color: var(--accent); color: var(--accent); }

/* cap content width for readability on wide/ultrawide screens */
#editor { max-width: 52rem; margin-left: auto; margin-right: auto; width: 100%; }
#plan-view, #dir-view { max-width: 66rem; margin-left: auto; margin-right: auto; width: 100%; }
.modal input, .modal .tm-field-detail { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.55rem; }

/* type builder */
.type-modal { width: min(30rem, 94vw); max-height: 88vh; overflow-y: auto; }
.tm-lbl { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
.tm-lbl input { display: block; width: 100%; box-sizing: border-box; margin-top: 0.2rem; }
.dir-empty-types { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; }
.dir-empty-types p { margin: 0 0 0.2rem; }
.dir-empty-types button { align-self: flex-start; font-size: 0.8rem; }
.tm-icons {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  max-height: 11rem; overflow-y: auto; padding: 0.15rem;
  border: 1px solid var(--line); border-radius: 6px;
}
.tm-icon {
  width: 2rem; height: 2rem; flex: 0 0 auto; padding: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink);
  cursor: pointer;
}
.tm-icon svg { width: 18px; height: 18px; flex: none; display: block; }
.tm-icon:hover { border-color: var(--accent); color: var(--accent); }
.tm-icon.on { border-color: var(--accent); color: var(--accent); background: var(--code-bg); }
.tm-fields { display: flex; flex-direction: column; gap: 0.4rem; }
.tm-field { display: grid; grid-template-columns: 1fr auto auto; gap: 0.3rem; align-items: center; }
.tm-field .tm-field-detail { grid-column: 1 / -1; }
.tm-spacer { flex: 1; }
.tree-row.dir-type.custom .icon svg { color: var(--accent); }
#dir-new-type { align-self: flex-start; }
.search-row { display: flex; gap: 0.4rem; }
.search-row input { flex: 1; min-width: 0; }
#btn-tags-view {
  flex: none; width: 2.2rem; font-weight: 700; color: var(--muted);
  padding: 0.3rem 0;
}
#btn-tags-view.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-row { display: flex; gap: 0.4rem; }
.btn-row button { flex: 1; font-size: 0.78rem; padding: 0.35rem 0.3rem; white-space: nowrap; }

/* notebook / folder tree */
.tree-row {
  display: flex; align-items: center; gap: 0.35rem; width: 100%;
  border: none; background: none; text-align: left;
  padding: 0.32rem 0.5rem; border-radius: 6px; margin-bottom: 1px;
  color: var(--ink); font-size: 0.9rem;
}
.tree-row:hover { background: var(--bg); }
.tree-row.selected { background: var(--code-bg); }
.tree-row .chev { width: 0.9rem; flex: none; color: var(--muted); font-size: 0.7rem; }
.tree-row .icon { flex: none; opacity: 0.75; }
.tree-row .name {
  flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-row.folder .name { font-weight: 500; }
.tree-row .row-actions { display: none; gap: 0.1rem; flex: none; }
.tree-row:hover .row-actions { display: flex; }
/* touch devices never fire :hover, so the rename/delete actions would be
   unreachable — show them permanently there */
@media (hover: none) {
  .tree-row .row-actions { display: flex; }
}
.row-actions button {
  border: none; background: none; padding: 0 0.25rem; font-size: 0.75rem;
  color: var(--muted); cursor: pointer;
}
.row-actions button:hover { color: var(--ink); }
.tree-row.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; }
.tree-row.tag .icon { color: var(--accent); font-weight: 700; }
.tag-count { flex: none; padding: 0 0.4rem; border-radius: 999px; background: var(--code-bg); }
.note-list { flex: 1; overflow-y: auto; padding: 0 0.5rem 0.5rem; }
.note-item {
  display: flex; align-items: baseline; gap: 0.5rem; width: 100%; text-align: left;
  border: none; background: none; padding: 0.28rem 0.6rem; border-radius: 6px;
}
.note-item:hover { background: var(--bg); }
.note-item.active { background: var(--accent); color: var(--accent-ink); }
.note-item .title { flex: 1; min-width: 0; font-weight: 500; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* date only surfaces on hover, right-aligned, so rows stay to one tight line */
.note-item .meta { flex: none; display: none; font-size: 0.72rem; opacity: 0.6; }
.note-item:hover .meta { display: block; }
.sidebar-foot {
  padding: 0.5rem 1rem calc(0.5rem + var(--safe-b)); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.6rem;
}
.sidebar-foot #btn-settings { padding: 0 0.2rem 0 0; font-size: 1rem; }

/* graph view (right panel) */
.icon-btn.active { color: var(--accent); }
.graph-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 22rem; max-width: 90vw; z-index: 42;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -6px 0 24px rgba(0,0,0,0.14);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
}
.graph-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--line);
}
.graph-canvas { flex: 1; min-height: 0; overflow: hidden; }
.graph-svg { width: 100%; height: 100%; display: block; }
.graph-edge { stroke: var(--line); stroke-width: 1.2; }
.graph-node { cursor: pointer; }
.graph-node:hover circle { stroke: var(--accent); stroke-width: 2; }
.graph-label { fill: var(--ink); font-size: 9px; pointer-events: none; }
.graph-empty { padding: 1.2rem; }

/* task-due badge on the Tasks toggle */
.view-toggle .vt { position: relative; }
.vt.has-due::after {
  content: ""; position: absolute; top: 4px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 2px var(--panel);
}

/* in-app reminder snackbar */
.reminder-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index: 55;
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--danger); border-radius: 999px;
  padding: 0.5rem 0.7rem 0.5rem 1rem; box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  font-size: 0.88rem; max-width: 92vw;
}
.reminder-bar #reminder-view { color: var(--accent); font-weight: 600; padding: 0.1rem 0.3rem; }
.reminder-bar .icon-btn { color: var(--muted); padding: 0.1rem; }

/* view toggle (icon buttons) */
.view-toggle { display: flex; gap: 0.3rem; }
.view-toggle .vt {
  flex: 1; padding: 0.4rem 0; display: inline-flex;
  align-items: center; justify-content: center; color: var(--muted);
}
.view-toggle .vt svg { display: block; }
.view-toggle .vt:hover { color: var(--ink); }
.view-toggle .vt.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* task filters */
.task-filters { display: flex; align-items: center; gap: 0.5rem; }
.task-filters select {
  flex: 1; font: inherit; font-size: 0.82rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem;
}

/* task rows */
.task-row {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border-radius: 6px; margin-bottom: 1px;
}
.task-row:hover { background: var(--bg); }
.task-row.done .task-text { text-decoration: line-through; color: var(--muted); }
.task-row input[type="checkbox"] { margin-top: 0.25rem; flex: none; }
.task-body {
  border: none; background: none; text-align: left; padding: 0; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.task-text { font-size: 0.88rem; line-height: 1.35; }
.task-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.task-src { font-size: 0.72rem; }
.task-src::before { opacity: 0.7; margin-right: 0.25rem; }
.task-src.src-note::before { content: '\270e'; }   /* pencil: note task */
.task-src.src-plan::before { content: '\25c6'; }   /* diamond: plan task */
.task-empty { padding: 0.8rem; }

/* ---- plan layer ---- */
.btn-row.wrap { flex-wrap: wrap; }
.btn-row.wrap button { flex: 1 1 45%; }

.plan-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#plan-view { display: flex; flex-direction: column; height: 100%; padding: 1rem 1.4rem calc(1rem + var(--safe-b)); gap: 0.7rem; min-height: 0; }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.plan-head h2 { margin: 0.1rem 0 0; font-size: 1.3rem; }
.mode-badge {
  flex: none; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent);
}
.plan-children { display: flex; flex-direction: column; gap: 2px; }
.plan-child {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  padding: 0.5rem 0.8rem; text-align: left;
}
.plan-child:hover { border-color: var(--accent); }
.plan-child .name { flex: 1; font-weight: 550; }
.plan-child .icon svg { display: block; color: var(--muted); }

.task-add { display: flex; gap: 0.5rem; }
.task-add input { flex: 1; }

.plan-tasks { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-task {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.4rem 0.5rem; border-radius: 6px;
}
.plan-task:hover { background: var(--panel); }
.plan-task.selected { background: var(--code-bg); }
.plan-task input[type="checkbox"] { margin-top: 0.28rem; flex: none; }
.plan-task .pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; border: none; background: none; text-align: left; padding: 0; }
.plan-task .pt-title { font-size: 0.92rem; line-height: 1.35; }
.plan-task.done .pt-title { text-decoration: line-through; color: var(--muted); }
.plan-task .status-doing {
  display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--accent); margin-right: 0.35rem; vertical-align: baseline;
}
.plan-task .row-actions { margin-top: 0.2rem; }
.plan-task:hover .row-actions { display: flex; }

/* task detail as a centered modal so fields + native pickers have room */
.ptd-backdrop { position: fixed; inset: 0; z-index: 64; background: rgba(0,0,0,0.4); }
.pt-detail {
  position: fixed; z-index: 65; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(32rem, 94vw); max-height: 86vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  padding: 1rem 1.2rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.pt-detail header { display: flex; justify-content: space-between; align-items: center; }
.pt-detail label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); min-width: 0; }
/* full-width, shrinkable fields — long <option> text must not force the grid wide */
.pt-detail input, .pt-detail select, .pt-detail textarea {
  font-size: 0.9rem; color: var(--ink); width: 100%; min-width: 0; box-sizing: border-box;
}
.pt-detail select {
  font: inherit; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.4rem 0.5rem;
}
/* auto-fit so columns flow onto the next row instead of overflowing */
.ptd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.55rem; }
.ptd-foot { display: flex; justify-content: flex-end; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
/* "In: Vision / Product" click-through under the task's Location */
.ptd-where { margin: -0.3rem 0 0.1rem; }
.ptd-where-link { padding: 0; color: var(--accent); text-align: left; }
.ptd-where-link:hover { text-decoration: underline; }

/* ---- sprints ---- */
.tree-row.plan-sprint.current .name { color: var(--accent); }
.sprint-head {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
}
.sprint-head label { display: flex; flex-direction: column; gap: 0.2rem; }
.sp-capacity { flex: 1; min-width: 14rem; color: var(--muted); }
.sp-capacity.overloaded { color: var(--danger); font-weight: 600; }
.plan-stats { margin-top: -0.3rem; }
.plan-refs { margin-top: -0.2rem; }

/* sprint availability */
.sp-avail {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.sp-avail-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.sp-avail-row { display: flex; align-items: center; gap: 0.6rem; }
.sp-avail-name { flex: 1; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-avail-row input[type="number"] { width: 5rem; }
.sp-avail-add input[type="number"] { flex: none; width: 6rem; }
.sp-avail-add input:first-child { flex: 1; }

/* sprint candidates: open tasks due in the window, not yet committed */
.sprint-candidates {
  border: 1px dashed var(--line); border-radius: 8px; padding: 0.5rem 0.8rem;
  max-height: 9rem; overflow-y: auto;
}
.sprint-candidates h3 {
  margin: 0 0 0.3rem; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  display: flex; gap: 0.5rem; align-items: baseline;
}
.sprint-candidates h3 .muted { text-transform: none; letter-spacing: 0; }
.sc-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0; }
.sc-info {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.6rem;
  border: none; background: none; text-align: left; padding: 0.15rem 0;
}
.sc-title { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-overdue { color: var(--danger); font-weight: 600; }
.sc-commit {
  flex: none; font-size: 0.78rem; padding: 0.15rem 0.6rem;
  border: 1px solid var(--accent); color: var(--accent); background: none; border-radius: 999px;
}
.sc-commit:hover { background: var(--accent); color: var(--accent-ink); }

.sprint-board {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem;
}
.board-col {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem;
}
.board-col h3 {
  margin: 0 0 0.5rem; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  display: flex; justify-content: space-between; align-items: baseline;
}
.board-col.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; }
.col-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.board-card {
  display: flex; flex-direction: column; gap: 0.2rem; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.5rem 0.7rem; cursor: grab;
}
.board-card:hover { border-color: var(--accent); }
.board-card.selected { outline: 2px solid var(--accent); outline-offset: -1px; }
.bc-title { font-size: 0.88rem; line-height: 1.35; }
.bc-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: 0.58rem; font-weight: 700; color: #fff;
  margin-right: 0.35rem; vertical-align: text-bottom; flex: none;
}
.mine-toggle { display: flex; align-items: center; gap: 0.4rem; }
.board-col[data-status="done"] .bc-title { text-decoration: line-through; color: var(--muted); }
@media (max-width: 900px) { .sprint-board { grid-template-columns: 1fr; } }

/* ---- calendar ---- */
.cal-tools { display: flex; flex-direction: column; gap: 0.5rem; }
.cal-tools .btn-row button { font-size: 0.8rem; }
.cal-feeds { display: flex; flex-direction: column; gap: 0.2rem; }
.cal-feed-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.cal-feed-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
.cal-feed-show { flex: none; width: auto; margin: 0; }
/* hidden means "not shown in the week view", not "removed" — dim it, keep it */
.cal-feed-row.hidden-feed .ct-title { opacity: 0.5; text-decoration: line-through; }
.cal-feed-row.hidden-feed .cal-feed-dot { opacity: 0.3; }
.cal-add-feed { display: flex; flex-direction: column; gap: 0.35rem; }
.cal-add-feed input { font-size: 0.82rem; }
.cal-boxes-label { display: flex; flex-direction: column; gap: 0.25rem; }
.cal-list-head { margin-top: 0.3rem; }
.cal-task-list { max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cal-task-row {
  display: flex; flex-direction: column; gap: 0.05rem;
  padding: 0.3rem 0.5rem; border-radius: 6px; cursor: grab; font-size: 0.85rem;
}
.cal-task-row:hover { background: var(--bg); }
.cal-task-row.fully-scheduled { opacity: 0.55; cursor: default; }
.ct-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0.8rem 1rem var(--safe-b); }
.cal-status { padding: 0.2rem 0 0.4rem; }
.cal-conflicts {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  border: 1px solid var(--danger); border-radius: 8px; background: var(--panel);
  padding: 0.45rem 0.8rem; margin-bottom: 0.4rem; font-size: 0.88rem; color: var(--danger);
}
.cal-conflicts button { flex: none; }
#cal-refactor-side { font-size: 0.8rem; }
.cal-days { display: grid; grid-template-columns: 3.2rem repeat(7, 1fr); gap: 2px; }
.cal-day-label { text-align: center; font-size: 0.82rem; font-weight: 600; padding: 0.25rem 0; }
.cal-day-label.today { color: var(--accent); }
.cal-gutter-label { font-weight: 400; }
.cal-allday { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-left: 3.2rem; }
.cal-allday-cell { display: flex; flex-wrap: wrap; gap: 2px; min-height: 0; padding: 1px; }
.cal-allday-chip {
  font-size: 0.68rem; border: 1px solid; border-radius: 999px; padding: 0 0.4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  background: var(--panel);
}
.cal-scroll { flex: 1; overflow-y: auto; min-height: 0; }
/* --cal-hour-h is set per render so the hour lines track the fitted scale */
.cal-body { display: flex; --cal-hour-h: 48px; }
.cal-hours { position: relative; width: 3.2rem; flex: none; }
.cal-hour { position: absolute; right: 0.4rem; transform: translateY(-50%); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; flex: 1; }
.cal-col {
  position: relative; border-radius: 6px;
  background: repeating-linear-gradient(to bottom,
    var(--panel) 0, var(--panel) calc(var(--cal-hour-h) - 1px),
    var(--line) calc(var(--cal-hour-h) - 1px), var(--line) var(--cal-hour-h));
}
.cal-col.today { outline: 1px solid var(--accent); outline-offset: -1px; }
.cal-evt, .cal-box, .cal-block {
  position: absolute; left: 2px; right: 2px; box-sizing: border-box;
  border-radius: 5px; font-size: 0.72rem; overflow: hidden; padding: 1px 4px;
}
.cal-evt {
  background: var(--code-bg); border-left: 3px solid var(--accent);
  color: var(--ink); line-height: 1.25;
}
.cal-evt.free { opacity: 0.55; border-left-style: dashed; }
.cal-evt { cursor: pointer; }
.cal-evt.has-minutes { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-evt.has-minutes::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.cal-box {
  border: 1.5px dashed var(--accent); background: transparent;
  display: flex; flex-direction: column; gap: 2px; padding: 2px 3px;
}
.cal-box.drop-hover { background: var(--code-bg); }
.cal-box-label { color: var(--accent); font-weight: 600; font-size: 0.68rem; }
.cal-box-label.overfull { color: var(--danger); }
.cal-task {
  background: var(--accent); color: var(--accent-ink); border-radius: 4px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2px;
  padding: 1px 4px; font-size: 0.7rem; overflow: hidden;
}
.cal-task.done { opacity: 0.55; text-decoration: line-through; }
.cal-task button { border: none; background: none; color: var(--accent-ink); padding: 0; cursor: pointer; flex: none; }
.cal-block {
  background: var(--muted); color: var(--bg); opacity: 0.85;
  border-radius: 5px; cursor: pointer; font-weight: 600;
}

/* ---- directory (entities) ---- */
.dir-actions .task-add select {
  flex: 1; font: inherit; font-size: 0.85rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem;
}
.tree-row.dir-type .icon svg { color: var(--accent); }
.dir-pane { display: flex; flex-direction: column; min-height: 0; }
#dir-view { display: flex; flex-direction: column; height: 100%; padding: 1rem 1.4rem calc(1rem + var(--safe-b)); gap: 0.7rem; min-height: 0; }
.ent-name {
  flex: 1; font-size: 1.3rem; font-weight: 650; border: none; background: none; padding: 0.1rem 0;
  color: var(--ink);
}
.ent-name:focus { outline: none; border-bottom: 2px solid var(--accent); }
.ent-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem 0.9rem;
}
.ent-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); min-width: 0; }
.ent-field input, .ent-field select, .rel-add {
  font: inherit; font-size: 0.9rem; color: var(--ink); width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.55rem;
}
.ent-field-rel { gap: 0.35rem; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.2rem 0.1rem 0.5rem;
  background: var(--panel); font-size: 0.85rem;
}
.rel-chip-ic svg { display: block; width: 12px; height: 12px; color: var(--accent); }
.rel-chip-open { border: none; background: none; color: var(--ink); padding: 0; cursor: pointer; }
.rel-chip-open:hover { color: var(--accent); }
.rel-chip-x { border: none; background: none; color: var(--muted); padding: 0 0.15rem; cursor: pointer; display: inline-flex; }
.rel-chip-x:hover { color: var(--danger); }
.rel-add {
  font: inherit; font-size: 0.85rem; color: var(--muted);
  background: var(--panel); border: 1px dashed var(--line); border-radius: 6px; padding: 0.3rem 0.4rem;
}
.vocab-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.vocab-chip {
  font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer;
}
.vocab-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ent-rev { display: flex; flex-direction: column; gap: 0.35rem; }
.rev-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }

.ent-body-head { display: flex; justify-content: space-between; align-items: center; margin-top: 0.3rem; }
.ent-stack { flex: 1; min-height: 6rem; }
.ent-stack #ent-body {
  position: static; width: 100%; height: 100%; color: var(--ink); caret-color: var(--ink);
  background: var(--panel); resize: none;
}
#ent-preview { flex: 1; min-height: 6rem; }
.backlink-chip.entity { border-style: solid; border-color: var(--accent); }
.backlink-chip.entity::before { content: "◆ "; color: var(--accent); font-size: 0.7em; }

/* ---- MI (management information) ---- */
.plan-target { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.mi-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* charts and tables get the full pane width; prose stays at a readable measure */
.mi-content { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem calc(1.2rem + var(--safe-b)); max-width: none; }
.mi-content h2 { margin: 0 0 0.3rem; font-size: 1.3rem; }
.mi-content h3 { margin: 1.2rem 0 0.4rem; font-size: 0.95rem; }
.mi-content > p, .mi-content .viz-legend { max-width: 62rem; }
.mi-content svg.burndown {
  width: 100%; height: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem; box-sizing: border-box;
}
/* roadmap gantt: fixed label column + horizontally scrollable timeline, so you
   can scroll back into the past without bars sliding under the row labels */
.gantt-wrap {
  display: flex; align-items: flex-start; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem; box-sizing: border-box;
}
.gantt-labels { flex: none; display: block; position: sticky; left: 0; z-index: 2; background: var(--panel); }
.gantt-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.gantt-chart { display: block; }

/* fullscreen popouts */
.mi-viz { position: relative; }
.viz-expand {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 5;
  padding: 0.3rem; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  opacity: 0.55;
}
.mi-viz:hover .viz-expand { opacity: 1; }
.viz-expand:hover { color: var(--accent); border-color: var(--accent); }
.mi-viz:fullscreen, .mi-viz:-webkit-full-screen {
  background: var(--bg); overflow: auto; padding: 2.6rem 1.5rem 2rem;
}
.mi-viz:fullscreen > :not(.viz-expand),
.mi-viz:-webkit-full-screen > :not(.viz-expand) { max-width: 64rem; margin: 0 auto; }
.mi-viz:fullscreen svg, .mi-viz:-webkit-full-screen svg { width: 100%; height: auto; }
/* the split gantt keeps its natural sizing in popouts (it scrolls instead) */
.mi-viz:fullscreen .gantt-wrap, .mi-viz:-webkit-full-screen .gantt-wrap,
.mi-viz.expanded .gantt-wrap { max-width: none; }
.mi-viz:fullscreen .gantt-labels, .mi-viz:-webkit-full-screen .gantt-labels,
.mi-viz.expanded .gantt-labels,
.mi-viz:fullscreen .gantt-chart, .mi-viz:-webkit-full-screen .gantt-chart,
.mi-viz.expanded .gantt-chart { width: auto; height: auto; }
/* CSS-overlay fallback (iOS Safari, which blocks the Fullscreen API) */
.mi-viz.expanded {
  position: fixed; inset: 0; z-index: 60; margin: 0;
  background: var(--bg); overflow: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 2.6rem) 1rem 2rem;
}
.mi-viz.expanded > :not(.viz-expand) { max-width: 64rem; margin: 0 auto; }
.mi-viz.expanded svg { width: 100%; height: auto; }
.mi-viz.expanded .viz-expand {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 0.6rem); right: 0.6rem; opacity: 1;
}

/* roadmap legend */
.viz-legend { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.3rem 0 0.4rem; }
.lg-swatch {
  display: inline-block; width: 0.9rem; height: 0.6rem; border-radius: 3px;
  margin-right: 0.25rem; vertical-align: baseline;
}
.mi-stats { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.6rem 0; }
.mi-stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.5rem 1rem; display: flex; flex-direction: column; min-width: 6.5rem;
}
.mi-stat strong { font-size: 1.3rem; }
.mi-stat span { font-size: 0.75rem; color: var(--muted); }
.mi-stat.bad strong { color: var(--danger); }
.mi-table { border-collapse: collapse; font-size: 0.9rem; }
.mi-table td { border: 1px solid var(--line); padding: 0.3rem 0.8rem; }
.mi-list { margin: 0.3rem 0; padding-left: 1.2rem; font-size: 0.9rem; }

.mat-rows { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.8rem; }
.mat-row { display: flex; flex-direction: column; gap: 0.25rem; }
.mat-label { display: flex; gap: 0.6rem; align-items: baseline; }
.mat-bar {
  position: relative; height: 1.3rem; background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.mat-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s; }
.mat-pct {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  font-size: 0.72rem; font-weight: 700; color: var(--ink);
}

/* avatars */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; color: #fff; font-weight: 700; vertical-align: middle;
  background-size: cover; background-position: center; overflow: hidden;
}
.bc-title .avatar { margin-right: 0.35rem; }

/* timeline board */
.tb-group { margin: 1rem 0; }
.tb-group h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.tb-overdue h3 { color: var(--danger); }
/* fixed layout + shared column widths so every horizon table lines up */
.tb-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: fixed; }
.tb-table th:nth-child(2), .tb-table td:nth-child(2) { width: 24%; }
.tb-table th:nth-child(3), .tb-table td:nth-child(3) { width: 3.5rem; }
.tb-table th:nth-child(4), .tb-table td:nth-child(4) { width: 8rem; }
.tb-table th:nth-child(5), .tb-table td:nth-child(5) { width: 6.5rem; }
.tb-table td { word-break: break-word; }
.tb-row { cursor: pointer; }
.tb-proj { color: var(--accent); cursor: pointer; }
.tb-proj:hover { text-decoration: underline; }
.tb-owner-cell[data-owner]:not([data-owner=""]) { cursor: pointer; }
.wl-person.wl-flash { animation: wlflash 1.8s ease-out; border-radius: 8px; }
@keyframes wlflash {
  0%, 35% { outline: 2px solid var(--accent); outline-offset: 4px; }
  100% { outline: 2px solid transparent; outline-offset: 4px; }
}
.tb-table th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line);
}
.tb-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tb-table tr:hover td { background: var(--panel); }
.tb-owner-cell { width: 3rem; }
.st-pill {
  display: inline-block; font-size: 0.75rem; font-weight: 600; color: #fff;
  padding: 0.12rem 0.6rem; border-radius: 5px; white-space: nowrap;
}
.st-todo { background: var(--muted); }
.st-doing { background: #d08a1e; }
.st-done { background: var(--ok); }

/* team workload report */
.wl-person { margin: 0.9rem 0; }
.wl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.wl-list { margin: 0.35rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.wl-list li { margin: 0.1rem 0; }
.wl-over { color: var(--danger); font-weight: 600; }

@media print {
  .sidebar, .editor-pane, .plan-pane { display: none !important; }
  .app-shell { display: block; }
  .mi-pane[hidden] { display: none !important; }
  .mi-pane { display: block; overflow: visible; }
  .mi-content { max-width: none; overflow: visible; padding: 0; }
  .gantt-scroll { overflow-x: visible; }
  body { background: #fff; }
}

/* metadata chips (shared with preview) */
.task-chip {
  display: inline-block; font-size: 0.7rem; line-height: 1.5;
  padding: 0 0.45rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--code-bg); color: var(--muted);
  white-space: nowrap;
}
.task-chip.overdue { border-color: var(--danger); color: var(--danger); font-weight: 600; }
.task-chip.chip-assign { border-color: var(--accent); color: var(--accent); }
.task-chip.prio-high { border-color: var(--danger); color: var(--danger); }

/* @token(…) styling in the editor highlight layer */
.hl-token { color: var(--accent); background: var(--code-bg); border-radius: 3px; }

/* ---- editor ---- */
/* ---------- settings & administration pane ---------- */
.set-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.set-content { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem calc(1.2rem + var(--safe-b)); }
.set-sec { max-width: 46rem; }
.set-sec[hidden] { display: none; }
.set-sec > h2 { margin: 0 0 0.3rem; font-size: 1.3rem; }
.set-sec > h3 { margin: 1.4rem 0 0.5rem; font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.set-sec > p { margin: 0 0 1rem; }
.set-card {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 0.85rem 1rem; margin-bottom: 0.8rem;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
}
.set-card h3 { margin: 0; font-size: 0.95rem; }
.set-card p { margin: 0; }
.set-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; width: 100%; }
.set-row input[type="text"], .set-row input:not([type]) { flex: 1; min-width: 10rem; }
.set-toggle { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 550; }
.set-toggle input { width: auto; margin: 0; }
.set-newlink {
  width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  border: 1px solid var(--accent); border-radius: 8px; padding: 0.6rem 0.7rem;
  background: var(--bg);
}
.set-newlink input, .set-newlink code {
  flex: 1; min-width: 12rem; font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.8rem; word-break: break-all;
}
/* in the settings pane the team list is the whole section, not a modal corner */
.set-pane .teams-list { max-height: none; overflow: visible; width: 100%; }

.editor-pane { display: flex; flex-direction: column; min-height: 0; }
.empty { display: flex; height: 100%; align-items: center; justify-content: center; padding-bottom: var(--safe-b); }
#editor { display: flex; flex-direction: column; height: 100%; padding: 1rem 1.4rem calc(1rem + var(--safe-b)); gap: 0.6rem; position: relative; }

/* wikilink autocomplete */
.ac-popup {
  position: absolute; z-index: 20; min-width: 12rem; max-width: 22rem;
  display: flex; flex-direction: column; padding: 0.25rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.ac-item {
  border: none; background: none; text-align: left; padding: 0.35rem 0.6rem;
  border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-item.sel, .ac-item:hover { background: var(--accent); color: var(--accent-ink); }
.ac-hint { color: var(--muted); font-size: 0.75rem; margin-left: 0.6rem; }
.ac-item.sel .ac-hint, .ac-item:hover .ac-hint { color: var(--accent-ink); opacity: 0.8; }
.editor-head { display: flex; gap: 0.8rem; align-items: center; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { display: block; }
.icon-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.tree-row .icon svg, .row-actions svg { display: block; }
.tree-row .icon { color: var(--muted); }
.tree-row.book .icon { color: var(--accent); }

/* image source menu */
.img-menu button { display: flex; align-items: center; gap: 0.5rem; }
.img-menu svg { flex: none; color: var(--muted); }
.img-menu button:hover svg { color: var(--accent); }
.img-menu {
  position: absolute; top: 3rem; right: 1.4rem; z-index: 35;
  display: flex; flex-direction: column; padding: 0.25rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.img-menu button {
  border: none; background: none; text-align: left;
  padding: 0.45rem 0.8rem; border-radius: 5px; white-space: nowrap;
}
.img-menu button:hover { background: var(--code-bg); }
#note-title { flex: 1; font-size: 1.35rem; font-weight: 650; border: none; background: none; padding: 0.2rem 0; }
#note-title:focus { outline: none; border-bottom: 2px solid var(--accent); }
.editor-actions { display: flex; gap: 0.4rem; }
#note-tags { font-size: 0.85rem; color: var(--muted); }
/* editor stack: syntax-highlight backdrop behind a transparent textarea.
   Both layers MUST share identical font, padding, border and wrapping. */
.editor-stack { position: relative; flex: 1; min-height: 0; }
#note-body, .highlight {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem; line-height: 1.6;
  padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 6px;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
  margin: 0;
}
#note-body {
  position: absolute; inset: 0; width: 100%; height: 100%;
  resize: none; background: transparent;
  color: transparent; caret-color: var(--ink);
}
#note-body::placeholder { color: var(--muted); }
#note-body::selection { background: rgba(58, 110, 165, 0.25); }
.highlight {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; background: var(--panel); color: var(--ink);
  border-color: transparent;
}
.hl-mark { color: var(--muted); opacity: 0.8; }
.hl-h { color: var(--accent); font-weight: 700; }
.hl-h .hl-mark { color: var(--accent); opacity: 0.45; font-weight: 400; }
.hl-bold { font-weight: 700; }
.hl-em { font-style: italic; }
.hl-del { text-decoration: line-through; color: var(--muted); }
.hl-code { color: var(--danger); background: var(--code-bg); border-radius: 3px; }
.hl-wikilink { color: var(--accent); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }
.hl-link { color: var(--accent); }
.hl-quote { color: var(--muted); font-style: italic; }
.hl-quote .hl-mark { font-style: normal; }
.preview { flex: 1; overflow-y: auto; min-height: 0; padding: 0.2rem 0.1rem; }
.preview h1, .preview h2, .preview h3 { margin: 1rem 0 0.4rem; }
.preview p { margin: 0.5rem 0; }
.preview code { background: var(--code-bg); border-radius: 4px; padding: 0.1rem 0.35rem; font-size: 0.9em; }
.preview pre { background: var(--code-bg); border-radius: 8px; padding: 0.8rem 1rem; overflow-x: auto; }
.preview pre code { background: none; padding: 0; }
.preview blockquote { border-left: 3px solid var(--accent); margin: 0.6rem 0; padding: 0.2rem 0 0.2rem 0.9rem; color: var(--muted); }
.preview img { max-width: 100%; border-radius: 6px; }
.preview table { border-collapse: collapse; margin: 0.7rem 0; font-size: 0.92em; }
.preview th, .preview td { border: 1px solid var(--line); padding: 0.35rem 0.7rem; text-align: left; }
.preview th { background: var(--code-bg); font-weight: 650; }
.preview li.task { list-style: none; margin-left: -1.2rem; }
.preview li.task.done { color: var(--muted); text-decoration: line-through; }
a.wikilink { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent); }
a.wikilink.missing { opacity: 0.6; border-bottom-style: dotted; }
a.wikilink.inert { cursor: default; color: var(--muted); border-bottom-color: var(--muted); }

.editor-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.foot-right { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }

/* rich text editor */
.rich-toolbar {
  display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap;
  padding: 0.25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.rich-toolbar button {
  border: none; background: none; padding: 0.25rem 0.55rem; border-radius: 4px;
  font-size: 0.85rem; min-width: 2rem;
}
.rich-toolbar button:hover { background: var(--code-bg); }
.tb-sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 0.25rem; }
.rich-wrap { flex: 1; min-height: 0; display: flex; }
.rich-body {
  flex: 1; overflow-y: auto; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  line-height: 1.6; outline: none;
}
.rich-body:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.rich-body img { max-width: 100%; border-radius: 6px; }
.rich-body blockquote { border-left: 3px solid var(--accent); margin: 0.6rem 0; padding: 0.2rem 0 0.2rem 0.9rem; color: var(--muted); }
.rich-body pre, .rich-body code { background: var(--code-bg); border-radius: 4px; }
.rich-body table { border-collapse: collapse; margin: 0.7rem 0; font-size: 0.92em; }
.rich-body th, .rich-body td { border: 1px solid var(--line); padding: 0.35rem 0.7rem; min-width: 3rem; text-align: left; }
.rich-body th { background: var(--code-bg); font-weight: 650; }

/* markdown helper popup */
.md-help {
  position: absolute; right: 1.4rem; bottom: 3rem; z-index: 30;
  width: 19rem; max-height: 60%; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 0.8rem 1rem;
  font-size: 0.82rem;
}
.md-help header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.md-help dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0; }
.md-help dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent); white-space: nowrap;
}
.md-help dd { margin: 0; color: var(--muted); }
.md-help dd code { background: var(--code-bg); border-radius: 3px; padding: 0 0.25rem; }
.backlinks { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.backlinks .bl-label { font-size: 0.8rem; color: var(--muted); }
.backlink-chip {
  font-size: 0.8rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
}
.backlink-chip:hover { border-color: var(--accent); color: var(--accent); }
.backlink-chip.mention { border-style: dashed; color: var(--muted); }
.chip-author { margin-left: 0.4rem; padding-left: 0.4rem; border-left: 1px solid var(--line); color: var(--accent); font-size: 0.9em; }
.backlink-chip.mention:hover { color: var(--accent); }
.pop-rule { border: none; border-top: 1px solid var(--line); margin: 0.2rem 0; }

/* mobile menu button — hidden on desktop */
.mobile-menu {
  display: none; position: fixed; z-index: 45;
  top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
  left: calc(env(safe-area-inset-left, 0px) + 0.5rem);
  width: 2.9rem; height: 2.9rem; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.mobile-menu svg { display: block; width: 26px; height: 26px; }
.sidebar-close { display: none; }

@media (max-width: 700px) {
  .app-shell { grid-template-columns: 1fr; }
  .mobile-menu { display: flex; }
  .app-shell.show-sidebar .mobile-menu { display: none; }
  /* give panes room so the floating button (and the notch) don't cover titles */
  .editor-pane, .plan-pane, .mi-pane, .cal-pane, .dir-pane {
    padding-top: calc(env(safe-area-inset-top, 0px) + 3.4rem);
  }
  .empty { padding-top: calc(env(safe-area-inset-top, 0px) + 3.4rem); }

  .sidebar { display: none; }
  .app-shell.show-sidebar .sidebar {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0; right: auto; z-index: 50;
    width: min(20rem, 85vw); box-sizing: border-box; box-shadow: 0 0 40px rgba(0,0,0,0.35);
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* keep editor content from forcing horizontal scroll on small screens */
  .editor-pane, .plan-pane, .mi-pane, .cal-pane, .dir-pane { overflow-x: hidden; }
  #editor, #plan-view, #dir-view { padding-left: 1rem; padding-right: 1rem; }
  .editor-head #note-title, .plan-head input, .ent-name { min-width: 0; }
  /* narrow screens: title takes its own row, the action buttons wrap below
     rather than overflowing off the right edge (Delete was getting clipped) */
  .editor-head { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
  .editor-head #note-title { flex: 1 1 100%; }
  .editor-actions { flex-wrap: wrap; }
  /* iOS auto-zooms the whole page when a focused field's font is under 16px and
     never zooms back — magnifying the layout so it runs off the right. Keep all
     focusable fields (and the note body's highlight twin) at >=16px to stop it. */
  input, textarea, select { font-size: 16px; }
  #note-body, .highlight { font-size: 16px; line-height: 1.55; }
  /* the timeline board is a dense 5-column table; on a phone let it scroll
     sideways rather than crushing the Task column to one character per line */
  .tb-group { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tb-table { min-width: 34rem; }
  .preview { overflow-wrap: anywhere; overflow-x: auto; }
  .cal-days, .cal-allday, .cal-grid { min-width: 0; }
  /* the 7-day calendar is wide; let it scroll sideways rather than break layout */
  .cal-scroll { overflow-x: auto; }
  /* stacked, single-column forms on phones — no colliding columns */
  .ptd-grid, .ent-fields { grid-template-columns: 1fr; }
  /* let the pane header wrap so the badge/target never get clipped */
  .plan-head { flex-wrap: wrap; }
  .plan-head .plan-head-text { flex: 1 1 100%; min-width: 0; }
  .plan-head .mode-badge { order: 3; }
  /* dim the rest of the screen behind the open menu */
  .app-shell.show-sidebar::before {
    content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,0.4);
  }
  .sidebar-close {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--muted); padding: 0.2rem 0.4rem;
  }
  /* fullscreen popouts and modals should sit above the menu layer */
  .mi-viz:fullscreen { z-index: 60; }
}