:root {
  color-scheme: dark;
  --ink-0: #050712;
  --ink-1: #080b18;
  --ink-2: #0d1122;
  --ink-3: #12172b;
  --panel: rgba(15, 20, 39, 0.76);
  --panel-solid: #101528;
  --panel-soft: rgba(18, 23, 43, 0.6);
  --line: rgba(153, 162, 205, 0.17);
  --line-strong: rgba(143, 125, 255, 0.5);
  --text: #f4f1ef;
  --text-soft: #d0cedb;
  --muted: #8f96ad;
  --muted-2: #666f8c;
  --violet: #7c63ff;
  --violet-bright: #9b8aff;
  --violet-soft: rgba(124, 99, 255, 0.16);
  --gold: #d2ae7c;
  --teal: #54c7bd;
  --rose: #dc88ad;
  --amber: #e0ad6e;
  /* Local Only has its own colour, deliberately nothing like the violet the studio uses for
     everything it does on your behalf. Warm brass reads as "held back", not as "active". */
  --local: #d9a45f;
  --local-strong: #eec08a;
  --local-line: rgba(224, 173, 110, 0.55);
  --local-halo: rgba(224, 173, 110, 0.14);
  --local-wash: rgba(224, 173, 110, 0.09);
  --local-field: rgba(34, 27, 16, 0.92);
  --blue: #68a5ff;
  --sage: #91b48e;
  --danger: #ef7c91;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.42);
  --sidebar: 82px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
}

body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 45%, rgba(62, 49, 152, 0.13), transparent 34%),
    radial-gradient(circle at 25% 5%, rgba(39, 58, 124, 0.11), transparent 28%),
    linear-gradient(145deg, #050712, #070a17 58%, #050813);
}

button,
textarea,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(157, 139, 255, 0.9);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.ambient {
  position: fixed;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.11;
  border-radius: 999px;
}

.ambient-one {
  width: 460px;
  height: 460px;
  background: #462fbe;
  right: 10vw;
  top: 20vh;
}

.ambient-two {
  width: 320px;
  height: 320px;
  background: #194e8a;
  left: 12vw;
  top: -160px;
}

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.52;
  background-image:
    radial-gradient(circle, rgba(168, 159, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 0 0.7px, transparent 1.2px);
  background-position: 11px 27px, 43px 71px;
  background-size: 173px 157px, 241px 211px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  height: 100vh;
  z-index: var(--layer-page);
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 13px 18px;
  border-right: 1px solid rgba(142, 151, 190, 0.14);
  background: linear-gradient(180deg, rgba(8, 11, 25, 0.82), rgba(7, 10, 21, 0.64));
  backdrop-filter: blur(22px);
}

.brand-mark,
.nav-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 52px;
}

.brand-star {
  color: var(--violet-bright);
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(124, 99, 255, 0.72));
  transition: transform 220ms ease;
}

.brand-mark:hover .brand-star {
  transform: rotate(18deg) scale(1.08);
}

.nav-stack,
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sidebar-footer {
  margin-top: auto;
}

.nav-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: #7f88a5;
  transition: 180ms ease;
}

.nav-button svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button:hover {
  color: #c7c2ef;
  background: rgba(126, 105, 238, 0.08);
}

.nav-button.is-active {
  color: #9b86ff;
  background: linear-gradient(135deg, rgba(104, 83, 222, 0.16), rgba(50, 42, 105, 0.08));
  box-shadow: inset 0 0 0 1px rgba(118, 96, 237, 0.09), 0 10px 30px rgba(43, 30, 115, 0.18);
}

.nav-button.is-active::after {
  content: "";
  position: absolute;
  right: -14px;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  background: var(--violet);
  box-shadow: 0 0 16px var(--violet);
}

.nav-badge {
  position: absolute;
  top: 9px;
  right: 8px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--ink-1);
  border-radius: 999px;
  background: var(--violet);
  color: white;
  font-size: 9px;
  font-weight: 700;
}

.main-content {
  height: 100vh;
  overflow: auto;
  scrollbar-color: rgba(135, 122, 213, 0.28) transparent;
  scrollbar-width: thin;
}

.page {
  width: min(100%, 1580px);
  min-height: 100%;
  margin: 0 auto;
  padding: 34px clamp(32px, 4.4vw, 78px) 46px;
  animation: page-enter 420ms cubic-bezier(.2,.7,.2,1);
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.wordmark h1,
.page-title,
.section-title,
.card-title,
.detail-title {
  font-family: var(--serif);
  font-weight: 400;
}

.wordmark h1 {
  margin: 0;
  font-size: clamp(25px, 2.2vw, 35px);
  letter-spacing: -0.02em;
}

.wordmark span {
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-title {
  margin: 7px 0 7px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-subtitle {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  color: #aaa3cd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "✦";
  color: var(--violet-bright);
  font-size: 13px;
}

.primary-button,
.secondary-button,
.ghost-button,
.icon-button,
.pill-button {
  border: 0;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7155ff, #4b34ba);
  box-shadow: 0 11px 28px rgba(72, 47, 187, 0.28), inset 0 1px rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 13px;
  font-weight: 650;
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(72, 47, 187, 0.4), inset 0 1px rgba(255, 255, 255, 0.2);
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: wait;
  opacity: 0.56;
}

.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(17, 22, 41, 0.78);
  color: var(--text-soft);
  font-size: 12px;
}

.ghost-button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.secondary-button:hover,
.ghost-button:hover {
  border-color: rgba(137, 119, 237, 0.38);
  background: rgba(112, 89, 224, 0.1);
  color: var(--text);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(17, 22, 41, 0.7);
  color: var(--muted);
}

.icon-button:hover {
  color: var(--text);
  border-color: rgba(144, 128, 242, 0.4);
}

.capture-shell {
  position: relative;
  margin-bottom: 46px;
  padding: 1px;
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(115, 91, 244, 0.72), rgba(98, 78, 209, 0.24) 48%, rgba(129, 101, 250, 0.7));
  box-shadow: 0 24px 70px rgba(5, 6, 18, 0.44), 0 0 50px rgba(69, 48, 160, 0.08);
}

.capture-shell:focus-within {
  background: linear-gradient(110deg, #8e78ff, rgba(112, 91, 241, 0.5) 48%, #7d5df5);
  box-shadow: 0 24px 80px rgba(5, 6, 18, 0.56), 0 0 60px rgba(83, 57, 202, 0.19);
}

.capture-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 106px;
  padding: 18px 19px 18px 24px;
  border-radius: 21px;
  background:
    radial-gradient(circle at 8% 50%, rgba(100, 79, 224, 0.09), transparent 24%),
    rgba(11, 15, 30, 0.96);
}

.capture-spark {
  color: #8f78ff;
  font-size: 24px;
  filter: drop-shadow(0 0 9px rgba(116, 89, 255, 0.7));
}

.capture-input {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(16px, 1.55vw, 22px);
  font-weight: 400;
  line-height: 1.45;
}

.capture-input::placeholder {
  color: #747c96;
}

.capture-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.privacy-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  transition: 160ms ease;
}

.privacy-toggle input {
  position: absolute;
  opacity: 0;
}

.privacy-toggle svg,
.privacy-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* The on state is declared once, with the Local Only tokens, down in the Local Only section. */

.capture-submit {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(145, 125, 255, 0.5);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(107, 78, 237, 0.72), rgba(50, 39, 111, 0.8));
  color: #d9d3ff;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 10px 24px rgba(47, 30, 129, 0.3);
}

.capture-submit:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #7458ec, #4730ac);
  color: white;
}

.capture-hint {
  position: absolute;
  right: 20px;
  bottom: -25px;
  color: #575f79;
  font-size: 10px;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(570px, 1.12fr) minmax(430px, .88fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 19px;
}

.section-title {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.section-title .spark-gold {
  margin-right: 9px;
  color: var(--gold);
  font-size: 20px;
}

.section-kicker {
  margin: 6px 0 0 31px;
  color: var(--muted-2);
  font-size: 11px;
}

.text-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}

.text-link:hover {
  color: var(--text);
}

.idea-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.idea-card {
  position: relative;
  display: flex;
  min-height: 228px;
  flex-direction: column;
  padding: 20px 18px 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    radial-gradient(circle at 12% 8%, var(--card-tint, rgba(113, 89, 224, 0.09)), transparent 45%),
    linear-gradient(155deg, rgba(21, 26, 47, 0.9), rgba(12, 16, 31, 0.88));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.idea-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(135deg, rgba(132, 109, 255, 0.07), transparent 55%);
  transition: opacity 200ms ease;
}

.idea-card:hover {
  transform: translateY(-3px);
  border-color: rgba(134, 115, 232, 0.42);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

.idea-card:hover::before {
  opacity: 1;
}

.card-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-bottom: 24px;
  border: 1px solid rgba(137, 120, 229, 0.24);
  border-radius: 9px;
  background: rgba(102, 79, 220, 0.07);
  color: var(--accent, var(--violet-bright));
  font-size: 17px;
}

.card-title {
  position: relative;
  margin: 0 0 10px;
  color: #f0eceb;
  font-size: 19px;
  line-height: 1.25;
}

.card-summary {
  position: relative;
  display: -webkit-box;
  margin: 0 0 22px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.category-chip,
.privacy-badge,
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(126, 106, 227, 0.24);
  border-radius: 999px;
  background: rgba(100, 76, 215, 0.1);
  color: #b9aefa;
  font-size: 9px;
  white-space: nowrap;
}

.privacy-badge {
  border-color: rgba(210, 174, 124, 0.28);
  background: rgba(210, 174, 124, 0.07);
  color: #d5b281;
}

.card-age {
  color: #5e6681;
  font-size: 9px;
}

.think-tank-dock {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 30px;
  padding: 17px 19px;
  border: 1px solid rgba(123, 105, 217, 0.25);
  border-radius: 19px;
  background: linear-gradient(100deg, rgba(20, 24, 45, 0.66), rgba(12, 16, 30, 0.42));
  cursor: pointer;
  transition: 180ms ease;
}

.think-tank-dock:hover {
  border-color: rgba(143, 122, 255, 0.43);
  background: linear-gradient(100deg, rgba(25, 29, 54, 0.77), rgba(13, 17, 32, 0.52));
}

.think-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid rgba(130, 109, 243, 0.45);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(127, 105, 244, 0.28), rgba(27, 22, 65, 0.8));
  color: #9f8cff;
  box-shadow: inset 0 0 20px rgba(86, 60, 205, 0.25), 0 0 26px rgba(65, 43, 163, 0.12);
}

.think-orb::before,
.think-orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(145, 124, 255, 0.38);
  border-radius: 50%;
}

.think-orb::before { width: 28px; height: 16px; transform: rotate(42deg); }
.think-orb::after { width: 19px; height: 30px; transform: rotate(-48deg); }

.dock-copy h3 {
  margin: 0 0 5px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}

.dock-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.dock-copy .beta {
  margin-left: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(119, 93, 239, 0.14);
  color: #a99cf0;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.think-tank-dock .secondary-button {
  margin-left: auto;
}

.approval-list {
  display: grid;
  gap: 12px;
  margin-bottom: 32px;
}

.approval-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border: 1px solid rgba(207, 173, 123, 0.2);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(65, 50, 35, 0.16), rgba(17, 21, 39, 0.74));
}

.approval-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(211, 175, 123, 0.1);
  color: var(--gold);
}

.approval-copy h3 {
  margin: 0 0 5px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
}

.approval-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

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

.library-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 26px;
}

.search-box {
  position: relative;
  flex: 1;
}

.search-box input {
  width: 100%;
  height: 48px;
  padding: 0 45px 0 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
  background: rgba(13, 17, 33, 0.7);
  color: var(--text);
}

.search-box input:focus {
  border-color: rgba(136, 115, 244, 0.5);
  box-shadow: 0 0 0 3px rgba(113, 87, 227, 0.08);
}

.search-box kbd {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted-2);
  font: 9px var(--sans);
}

.filter-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
}

.pill-button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15, 19, 36, 0.62);
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.pill-button:hover,
.pill-button.is-active {
  border-color: rgba(129, 108, 236, 0.38);
  background: rgba(104, 80, 219, 0.12);
  color: #cec6ff;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.library-grid .idea-card {
  min-height: 235px;
}

.library-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted-2);
  font-size: 10px;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 50px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  color: var(--muted);
  text-align: center;
}

.empty-state .empty-star {
  margin-bottom: 18px;
  color: var(--violet);
  font-size: 34px;
}

.empty-state h3 {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}

.empty-state p {
  max-width: 390px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

/* One readable column rather than the full page width: a sentence of evidence that runs the
   whole of a 1440px window is a sentence nobody finishes. */
.relationship-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 88ch;
}

/* A row is a button, and a button is shrink-to-fit and centre-aligned until it is told
   otherwise — which is why every card in this list used to end at a different place and why
   a short sentence sat in the middle of one. It is a block that fills its column, and it
   reads from the left like everything else on the page. */
.relationship-row {
  display: block;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(16, 20, 38, 0.61);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.relationship-row:hover {
  border-color: rgba(132, 111, 235, 0.38);
}

.relationship-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: 14px;
}

/* The joiner is a word's worth of glyph — → when the direction was a person's decision, ↔
   when it was not. It used to be styled as a 4px dot, which the arrow then overflowed. */
.relationship-pair i {
  flex: none;
  color: var(--violet);
  font-style: normal;
}

.relationship-end { min-width: 0; }

/* A block of prose that used to be a <p> inside the row's <button> — invalid content model,
   and it made the button's accessible name the whole explanation. Same line, legal markup. */
.relationship-note {
  display: block;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.relationship-kind {
  display: inline-flex;
  margin-bottom: 8px;
  color: #a99de8;
  font-size: var(--type-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.detail-overlay,
.assistant-overlay,
.modal-overlay {
  position: fixed;
  z-index: var(--layer-overlay);
  inset: 0;
  display: flex;
  justify-content: flex-end;
}

.modal-overlay {
  z-index: var(--layer-modal);
  align-items: center;
  justify-content: center;
}

.overlay-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 4, 11, 0.66);
  backdrop-filter: blur(7px);
  cursor: default;
  animation: fade-in 180ms ease;
}

@keyframes fade-in { from { opacity: 0; } }

.detail-panel,
.assistant-panel {
  position: relative;
  width: min(760px, calc(100vw - 82px));
  height: 100%;
  overflow: auto;
  border-left: 1px solid rgba(132, 119, 207, 0.25);
  background:
    radial-gradient(circle at 90% 4%, rgba(86, 60, 201, 0.12), transparent 23%),
    linear-gradient(155deg, #0d1121, #090d1b);
  box-shadow: var(--shadow-lg);
  animation: panel-in 300ms cubic-bezier(.2,.75,.2,1);
}

.assistant-panel {
  width: min(520px, calc(100vw - 82px));
}

@keyframes panel-in { from { transform: translateX(28px); opacity: .4; } }

.detail-inner,
.assistant-inner {
  min-height: 100%;
  padding: 25px clamp(24px, 4vw, 48px) 40px;
}

.panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;
}

.panel-topbar .icon-button {
  border-color: transparent;
  background: rgba(18, 22, 41, 0.5);
}

.detail-header {
  margin-bottom: 25px;
}

.detail-title {
  max-width: 650px;
  margin: 12px 0 13px;
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* The name is a field, not a heading: it reads as text until you reach for it. */
.detail-title-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

textarea.detail-title {
  flex: 1;
  min-height: 1em;
  padding: 0 0 3px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  resize: none;
}

textarea.detail-title:hover { border-bottom-color: var(--line); }
textarea.detail-title:focus { border-bottom-color: var(--violet); outline: none; }
.detail-title-row .text-button { margin-top: 20px; white-space: nowrap; }

/* A name the studio is not confident in. Nothing is wrong; it is just still a placeholder. */
.card-title.is-working-name {
  text-decoration: underline dotted var(--violet-soft);
  text-underline-offset: 5px;
}

.detail-summary {
  margin: 0;
  color: #a9aec1;
  font-size: 14px;
  line-height: 1.7;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.status-select {
  min-height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #12172a;
  color: #bcb7d3;
  font-size: 10px;
}

.detail-tabs {
  display: flex;
  gap: 4px;
  margin: 28px 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.tab-button {
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}

.tab-button:hover,
.tab-button.is-active {
  background: rgba(109, 87, 221, 0.11);
  color: #d5cff8;
}

.detail-section {
  margin: 0 0 29px;
}

.detail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.detail-section-heading h3 {
  margin: 0;
  color: #ddd9e8;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
}

.detail-section-heading span {
  color: var(--muted-2);
  font-size: 9px;
}

.timeline {
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 18px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(126, 103, 238, 0.55), rgba(126, 103, 238, 0.05));
}

.entry-card {
  position: relative;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(16, 20, 38, 0.58);
}

.entry-card::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 21px;
  width: 7px;
  height: 7px;
  border: 2px solid #7762df;
  border-radius: 50%;
  background: var(--ink-2);
}

.entry-card p {
  margin: 0 0 9px;
  color: #c3c1cf;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.entry-card time {
  color: var(--muted-2);
  font-size: 9px;
}

.add-entry-form {
  display: grid;
  gap: 10px;
  margin-top: 13px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(11, 15, 29, 0.58);
}

.add-entry-form textarea,
.assistant-form textarea,
.prompt-output,
.edit-field {
  width: 100%;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
}

.add-entry-form textarea {
  min-height: 64px;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.relationship-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.relationship-mini {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(18, 22, 41, .52);
  cursor: pointer;
}

.relationship-mini:hover {
  border-color: rgba(134, 112, 239, .4);
}

.relationship-mini strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
}

.relationship-mini span {
  color: var(--muted-2);
  font-size: 9px;
}

.analysis-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(126, 105, 226, 0.23);
  border-radius: 16px;
  background: radial-gradient(circle at 90% 20%, rgba(95, 70, 214, 0.13), transparent 32%), rgba(17, 21, 40, 0.67);
}

.analysis-hero h3 {
  margin: 0 0 7px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
}

.analysis-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.analysis-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(16, 20, 38, 0.58);
}

.analysis-card.is-wide {
  grid-column: 1 / -1;
}

.analysis-card h4 {
  margin: 0 0 12px;
  color: #c9c4df;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.analysis-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.clean-list,
.step-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clean-list li,
.step-list li {
  position: relative;
  padding-left: 17px;
  color: #a9aec0;
  font-size: 11px;
  line-height: 1.55;
}

.clean-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: #7f68ed;
}

.step-list {
  counter-reset: steps;
}

.step-list li {
  counter-increment: steps;
  padding-left: 33px;
}

.step-list li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(129, 108, 236, .3);
  border-radius: 7px;
  background: rgba(101, 79, 215, .09);
  color: #ad9efa;
  font-size: 9px;
}

.prompt-builder {
  margin-top: 15px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(12, 16, 31, 0.74);
}

.prompt-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.prompt-builder-header h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}

.prompt-output {
  min-height: 250px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(6, 9, 19, 0.75);
  color: #b8bbc9;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
}

.activity-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.activity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: rgba(16, 20, 38, 0.55);
  border-bottom: 1px solid rgba(139, 147, 186, .08);
}

.activity-row:last-child { border-bottom: 0; }
.activity-row i { color: #8873eb; font-style: normal; }
.activity-row span { color: var(--text-soft); font-size: 11px; }
.activity-row time { color: var(--muted-2); font-size: 9px; }

.assistant-inner {
  display: flex;
  flex-direction: column;
}

.assistant-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.assistant-heading .think-orb {
  width: 47px;
  height: 47px;
  flex-basis: 47px;
}

.assistant-heading h2 {
  margin: 0 0 3px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}

.assistant-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

/* What Inky is thinking with. The row wraps rather than scrolls sideways: a chip pushed off
   the right edge of a panel is a scope nobody knows is on, and shrinking every chip to fit one
   line turned two idea names into "HER…" and "ID…". */
.context-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.context-strip .context-chip { flex: 0 1 auto; min-width: 9rem; }

.context-strip > span {
  color: var(--muted-2);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.privacy-notice {
  display: flex;
  gap: 9px;
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid rgba(207, 170, 118, .24);
  border-radius: 11px;
  background: rgba(207, 170, 118, .06);
  color: #c6a878;
  font-size: 10px;
  line-height: 1.45;
}

.assistant-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 13px;
  min-height: 300px;
  padding: 12px 0 20px;
  overflow-y: auto;
}

.message {
  max-width: 87%;
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.message.assistant {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  background: rgba(17, 21, 40, .75);
  color: #c2c1cc;
}

.message.user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: linear-gradient(135deg, rgba(105, 80, 221, .42), rgba(65, 48, 150, .48));
  color: #ece9f8;
}

.message-mode {
  display: block;
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 8px;
  text-transform: uppercase;
}

.assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.assistant-suggestions button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
}

.assistant-suggestions button:hover {
  border-color: rgba(130, 110, 236, .35);
  color: #cbc3f6;
}

.assistant-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 11px;
  border: 1px solid rgba(127, 106, 234, .32);
  border-radius: 14px;
  background: rgba(9, 12, 25, .82);
}

.assistant-form textarea {
  min-height: 51px;
  max-height: 130px;
  resize: none;
}

.settings-modal {
  position: relative;
  width: min(590px, calc(100vw - 40px));
  max-height: calc(100vh - 50px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(132, 118, 207, .28);
  border-radius: 20px;
  background: linear-gradient(155deg, #121628, #0b0f1e);
  box-shadow: var(--shadow-lg);
  animation: modal-in 240ms ease;
}

@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.settings-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.settings-header h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}

.settings-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.settings-group {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

/* The release this copy is, said once, quietly, at the foot of Settings. */
.settings-version {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  letter-spacing: .04em;
}

.setting-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(15, 19, 36, .62);
}

.setting-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(104, 82, 218, .1);
  color: #a393ef;
}

.setting-copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-soft);
  font-size: 11px;
}

.setting-copy span {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.45;
}

.connection-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
}

.connection-state i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #6e7896;
}

.connection-state.is-on { color: #8fcbb8; }
.connection-state.is-on i { background: #63c39f; box-shadow: 0 0 8px rgba(99,195,159,.55); }

.toast-stack {
  position: fixed;
  z-index: var(--layer-toast);
  right: 22px;
  bottom: 22px;
  display: grid;
  gap: 9px;
  pointer-events: none;
}

/* The update notice. A toast fades after three seconds, which is the wrong shape for a fact
   that stays true until someone acts on it: this one sits across the foot of the window
   until the studio and the page are the same age again. */
.studio-notice {
  position: fixed;
  z-index: var(--layer-toast);
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(680px, calc(100vw - 44px));
  padding: 12px 16px;
  border: 1px solid rgba(48, 76, 168, 0.24);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 18px 44px rgba(66, 52, 34, 0.22);
  color: #41413f;
  font-size: var(--type-caption);
  line-height: 1.45;
}
.studio-notice button { flex: none; }

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 390px;
  padding: 12px 14px;
  border: 1px solid rgba(129, 109, 227, .3);
  border-radius: 12px;
  background: rgba(16, 20, 38, .94);
  box-shadow: 0 16px 38px rgba(0,0,0,.35);
  color: var(--text-soft);
  font-size: 10px;
  pointer-events: auto;
  animation: toast-in 220ms ease;
}

.toast::before { content: "✦"; color: var(--violet-bright); }
.toast.is-error { border-color: rgba(237, 116, 139, .35); }
.toast.is-error::before { content: "!"; color: var(--danger); }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.loading-screen {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
  gap: 16px;
  color: var(--muted);
  font-size: 11px;
}

.loading-orbit {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(128, 106, 236, .35);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.loading-orbit i {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 2px;
  left: 7px;
  border-radius: 50%;
  background: var(--violet-bright);
  box-shadow: 0 0 10px var(--violet);
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  
  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --sidebar: 66px; }
  .sidebar { padding-inline: 7px; }
  .nav-button { width: 46px; height: 46px; }
  .nav-button.is-active::after { right: -10px; }
  .page { padding-inline: 22px; }
  .idea-card-grid,
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capture-form { grid-template-columns: 1fr; }
  .capture-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .detail-panel,
  .assistant-panel { width: calc(100vw - var(--sidebar)); }
}

@media (max-width: 620px) {
  body { overflow: auto; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    z-index: var(--layer-sticky);
    inset: auto 0 0 0;
    height: 66px;
    flex-direction: row;
    justify-content: center;
    border-top: 1px solid var(--line);
    border-right: 0;
  }
  .brand-mark { display: none; }
  /* Undo and Settings stay reachable on a phone: they join the bottom bar. */
  .sidebar-footer { flex-direction: row; padding: 0; margin-left: 10px; border: 0; gap: 4px; }
  .nav-stack { flex-direction: row; }
  .nav-button.is-active::after { right: auto; bottom: -10px; width: 28px; height: 2px; }
  /* One clearance for the bar, not two: the page's own bottom padding already holds the
     66px bar plus a breath, and adding the same allowance again left a phone scrolling
     through a screenful of nothing at the end of every view. */
  .main-content { height: auto; min-height: 100vh; padding-bottom: 0; }
  .page { padding: 16px 15px 96px; }
  .page-header { flex-direction: column; margin-bottom: 14px; gap: 10px; }
  .home-page .page-header { margin-bottom: 8px; }
  .wordmark h1 { font-size: 24px; }
  .wordmark span { display: none; }
  .idea-card-grid,
  .library-grid,
  .analysis-grid,
  .relationship-mini-grid { grid-template-columns: 1fr; }
  .idea-card { min-height: 210px; }
  .library-toolbar { flex-direction: column; align-items: stretch; }
  .capture-form { padding-left: 18px; }
  .capture-spark { display: none; }
  .capture-form { grid-template-columns: 1fr; }
  .capture-actions { grid-column: 1; }
  .capture-hint { display: none; }
  .approval-card { grid-template-columns: auto 1fr; }
  .approval-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .detail-overlay,
  .assistant-overlay { z-index: var(--layer-overlay); }
  .detail-panel,
  .assistant-panel { width: 100vw; }
}

/* Calm editorial theme ----------------------------------------------------- */

:root {
  color-scheme: light;
  --ink-0: #f5f1ea;
  --ink-1: #faf7f1;
  --ink-2: #f0ebe3;
  --ink-3: #e9e3da;
  --panel: rgba(255, 253, 249, 0.9);
  --panel-solid: #fffdf9;
  --panel-soft: rgba(255, 253, 249, 0.76);
  --line: rgba(54, 49, 42, 0.13);
  --line-strong: rgba(35, 71, 188, 0.36);
  --text: #151719;
  --text-soft: #323238;
  --muted: #87847e;
  --muted-2: #aaa59c;
  --violet: #294bc1;
  --violet-bright: #3559d4;
  --violet-soft: rgba(41, 75, 193, 0.08);
  --gold: #b87742;
  --local: #a4622a;
  --local-strong: #83491c;
  --local-line: rgba(164, 98, 42, 0.5);
  --local-halo: rgba(164, 98, 42, 0.16);
  --local-wash: rgba(199, 146, 88, 0.13);
  --local-field: rgba(253, 243, 227, 0.94);
  --shadow-lg: 0 30px 80px rgba(75, 60, 40, 0.18);
}

body {
  background:
    radial-gradient(circle at 90% 0%, rgba(210, 196, 170, 0.2), transparent 21%),
    linear-gradient(135deg, #f8f5ef, #f4f0e9 72%, #eee9e1);
  color: var(--text);
}

.ambient,
.stars {
  display: none;
}

.sidebar {
  border-color: rgba(61, 54, 45, 0.13);
  background: rgba(252, 249, 244, 0.84);
  backdrop-filter: blur(20px);
}

.brand-mark {
  width: 47px;
  height: 47px;
  border: 1px solid rgba(56, 50, 42, 0.13);
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.72);
}

.brand-star {
  color: #1e2023;
  font-family: var(--serif);
  font-size: 23px;
  filter: none;
}

.brand-mark:hover .brand-star {
  transform: none;
}

.brand-icon {
  display: block;
  width: 47px;
  height: 47px;
  border-radius: 13px;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), filter 220ms ease;
}

.brand-mark:hover .brand-icon {
  transform: translateY(-1px) rotate(-2deg);
  filter: drop-shadow(0 8px 12px rgba(46, 66, 151, .16));
}

.nav-button {
  color: #2f3133;
}

.nav-button:hover {
  color: #1c202c;
  background: rgba(34, 67, 178, 0.06);
}

.nav-button.is-active {
  color: #181a1d;
  background: #f9e7d2;
  box-shadow: none;
}

.nav-button.is-active::after {
  display: none;
}

.nav-badge {
  border-color: #faf7f1;
  background: #274bc1;
}

.page {
  width: min(100%, 1530px);
  padding-top: 40px;
}

.calm-home {
  padding-top: 30px;
}

.calm-home .page-header {
  align-items: center;
  margin-bottom: 27px;
}

.calm-home .wordmark h1 {
  color: #111315;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.home-actions {
  display: flex;
  align-items: center;
  gap: 13px;
}

.primary-button {
  border-radius: 999px;
  background: linear-gradient(135deg, #2853ca, #183aa4);
  box-shadow: 0 10px 24px rgba(39, 73, 186, 0.16), inset 0 1px rgba(255, 255, 255, 0.2);
  color: white;
}

.primary-button:hover {
  box-shadow: 0 13px 29px rgba(39, 73, 186, 0.23), inset 0 1px rgba(255, 255, 255, 0.24);
}

.assistant-orb-button {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.62);
  color: #2e4cba;
  cursor: pointer;
  font-size: 18px;
}

.assistant-orb-button:hover {
  border-color: rgba(38, 73, 188, 0.32);
  background: white;
}

.capture-shell {
  margin-bottom: 54px;
  padding: 0;
  border: 1px solid rgba(75, 66, 54, 0.17);
  border-radius: 21px;
  background: transparent;
  box-shadow: 0 12px 30px rgba(84, 68, 45, 0.08);
}

.capture-shell:focus-within {
  border-color: rgba(39, 75, 193, 0.36);
  background: transparent;
  box-shadow: 0 14px 34px rgba(66, 73, 111, 0.1), 0 0 0 3px rgba(39, 75, 193, 0.045);
}

.capture-form {
  min-height: 92px;
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.82);
}

.capture-spark {
  color: #2f51c4;
  filter: none;
}

.capture-input {
  color: #1c1d20;
  font-size: clamp(16px, 1.45vw, 20px);
}

.capture-input::placeholder {
  color: #9b9891;
}

.capture-submit {
  border-color: transparent;
  background: #eef0fb;
  box-shadow: none;
  color: #5970c5;
}

.capture-submit:hover {
  background: #2b50c3;
  color: white;
}

.capture-hint {
  display: none;
}

.calm-home .section-heading,
.related-strip .section-heading {
  align-items: center;
  margin-bottom: 20px;
}

.calm-home .section-title,
.related-strip .section-title {
  flex: none;
  color: #252526;
  font-size: 20px;
  letter-spacing: -0.015em;
}

.section-rule {
  width: 100%;
  height: 1px;
  background: rgba(64, 58, 50, 0.14);
}

.round-arrow {
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  background: transparent;
  color: #252627;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.idea-card-grid,
.library-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.idea-card,
.library-grid .idea-card {
  display: flex;
  min-height: 288px;
  padding: 0 0 16px;
  border-color: rgba(69, 61, 51, 0.14);
  border-radius: 17px;
  background: rgba(255, 253, 249, 0.7);
  box-shadow: 0 8px 22px rgba(83, 67, 44, 0.045);
}

.idea-card::before {
  display: none;
}

.idea-card:hover {
  transform: translateY(-3px);
  border-color: rgba(54, 74, 142, 0.25);
  box-shadow: 0 13px 28px rgba(76, 62, 42, 0.09);
}

.idea-visual {
  position: relative;
  display: block;
  width: 100%;
  height: 176px;
  overflow: hidden;
  border-bottom: 1px solid rgba(60, 55, 48, 0.09);
  background: #e5e7e8;
}

/* The badges are one row, not two corners --------------------------------------
   Both labels used to be pinned to the card's own top corners, and the drag, combine
   and pin buttons — which are siblings of the card, because a button cannot be nested
   in a button — were pinned to the same two corners on top of them. Nothing reserved
   any room, so hovering a card put the combine button through the middle of the word
   "Local" and the drag handle through the category.

   So the labels became one flex row that ends where the control rail begins.
   `--card-rail` is the width that rail claims — zero for a card with no controls beside
   it, one control wide inside a library wrapper — and the row and the buttons read the
   same number. There is one rail, not two, and it is on the right: two rails cost 74px
   of a 288px card and pushed "AI & Technology" into an ellipsis with room to spare on
   the other side. A longer category name now shortens inside its own share of the row
   instead of running under the lock. */
.visual-badges {
  position: absolute;
  z-index: var(--layer-badge);
  top: var(--card-inset, 13px);
  left: var(--card-inset, 13px);
  right: calc(var(--card-inset, 13px) + var(--card-rail, 0px));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.visual-category {
  min-width: 0;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.8);
  backdrop-filter: blur(9px);
  color: #313331;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-privacy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.8);
  backdrop-filter: blur(9px);
  color: #4d4c49;
  font-size: 9px;
}

.visual-privacy svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* The card's control rail ------------------------------------------------------
   A gallery card carries three buttons that are not part of it: drag, combine and pin.
   They are siblings rather than children because the card is already one button. That
   is why they need declared room instead of coordinates: the card cannot lay them out,
   so the wrapper states where they go, and the card's own labels read the same tokens
   and stay out of the way.

   They stack down one rail on the right rather than spreading across two corners, so
   the reserved width is the same whether a card shows three controls or none — a
   combined idea has none — and every card in a row keeps the same margins. Drag sits at
   the corner, matching the compact row, where the handle is also top right.

   The wrapper is also the column: a grid row is as tall as its tallest card, and a card
   that did not fill its own cell left every row with a ragged bottom edge. And the hover
   lift belongs here rather than on the card, because when the card alone moved, the three
   buttons parked on top of it stayed behind and slid out of their rails for the length of
   the hover. */
.library-card-wrap {
  position: relative;
  min-width: 0;
  --card-inset: 11px;
  --control-size: 30px;
  --card-rail: calc(var(--control-size) + 7px);
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease;
}

.library-card-wrap:hover,
.library-card-wrap:focus-within {
  transform: translateY(-3px);
}

.library-card-wrap > .idea-card {
  flex: 1 1 auto;
}

.library-grid .idea-card:hover {
  transform: none;
}

.library-card-wrap > .drag-handle,
.library-card-wrap > .combine-pick,
.library-card-wrap > .idea-pin {
  width: var(--control-size);
  height: var(--control-size);
  right: var(--card-inset);
  left: auto;
}

.library-card-wrap > .drag-handle {
  top: var(--card-inset);
  background: rgba(255, 254, 251, .88);
  border-color: var(--line);
  opacity: 0;
}
.library-card-wrap > .combine-pick { top: calc(var(--card-inset) + (var(--control-size) + 6px)); }
.library-card-wrap > .idea-pin { top: calc(var(--card-inset) + 2 * (var(--control-size) + 6px)); }

@media (prefers-reduced-motion: reduce) {
  .library-card-wrap { transition: none; }
  .library-card-wrap:hover,
  .library-card-wrap:focus-within { transform: none; }
}

/* Nothing here has a hover to reveal it, and all three still have to be reachable. */
@media (hover: none) {
  .library-card-wrap { --control-size: 34px; }
}

.visual-shape {
  position: absolute;
  display: block;
}

.shape-one {
  inset: auto -7% -36% 36%;
  height: 115%;
  border-radius: 50% 50% 0 0;
  transform: rotate(-14deg);
}

.shape-two {
  inset: auto 38% -36% -17%;
  height: 100%;
  border-radius: 55% 45% 0 0;
  transform: rotate(12deg);
}

.shape-three {
  width: 47%;
  height: 47%;
  right: 18%;
  top: 28%;
  border-radius: 50%;
  filter: blur(1px);
}

.art-violet,
.art-indigo {
  background: linear-gradient(150deg, #e8e5f2, #a7add7);
}
.art-violet .shape-one,
.art-indigo .shape-one { background: #465996; }
.art-violet .shape-two,
.art-indigo .shape-two { background: #8a93bd; }
.art-violet .shape-three,
.art-indigo .shape-three { background: rgba(235, 223, 246, 0.74); }

.art-rose {
  background: linear-gradient(145deg, #e4d6c5, #efe9df);
}
.art-rose .shape-one { background: #2b5675; border-radius: 0; transform: rotate(0); }
.art-rose .shape-two { background: #c97854; border-radius: 52% 52% 0 0; }
.art-rose .shape-three { background: #e5c9a7; }

.art-teal,
.art-sage {
  background: linear-gradient(155deg, #d8e2d6, #9eb4a0);
}
.art-teal .shape-one,
.art-sage .shape-one { background: #597d6b; }
.art-teal .shape-two,
.art-sage .shape-two { background: #b9c9ad; }
.art-teal .shape-three,
.art-sage .shape-three { background: rgba(237, 240, 216, 0.78); }

.art-amber {
  background: linear-gradient(145deg, #eadbc6, #caa47d);
}
.art-amber .shape-one { background: #9a684a; }
.art-amber .shape-two { background: #d8b38c; }
.art-amber .shape-three { background: rgba(247, 232, 206, 0.75); }

.art-blue {
  background: linear-gradient(150deg, #e2e9f3, #9eb6d6);
}
.art-blue .shape-one { background: #335b91; }
.art-blue .shape-two { background: #7594bf; }
.art-blue .shape-three { background: rgba(232, 240, 247, 0.74); }

.art-lilac {
  background: linear-gradient(150deg, #ebe4ec, #bfa9c4);
}
.art-lilac .shape-one { background: #775c7c; }
.art-lilac .shape-two { background: #bd9db5; }
.art-lilac .shape-three { background: rgba(243, 228, 239, 0.78); }

.art-slate {
  background: linear-gradient(150deg, #e5e4e0, #b9b7b0);
}
.art-slate .shape-one { background: #6e7376; }
.art-slate .shape-two { background: #a4a5a1; }
.art-slate .shape-three { background: rgba(244, 242, 234, 0.75); }

.idea-card .card-title {
  margin: 16px 18px 8px;
  color: #1c1d1d;
  font-size: 19px;
  line-height: 1.22;
}

.idea-card .card-footer {
  width: calc(100% - 36px);
  margin: auto 18px 0;
}

.idea-card .card-age {
  color: #9c9890;
  font-size: 9px;
}

.card-more {
  color: #8e8a84;
  font-size: 10px;
  letter-spacing: 1px;
}

.idea-card.is-protected {
  border-color: color-mix(in srgb, var(--accent) 24%, rgba(69, 61, 51, 0.14));
}

.home-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 36px;
  align-items: end;
}

.related-strip {
  min-width: 0;
}

.related-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.related-chip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  overflow: hidden;
  border: 1px solid rgba(68, 60, 51, 0.13);
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.59);
  color: #30302e;
  cursor: pointer;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-chip:hover {
  border-color: rgba(37, 72, 184, 0.24);
  background: rgba(255, 255, 255, 0.9);
}

.related-chip span {
  color: #3150b7;
  font-size: 15px;
}

.explore-chip {
  color: #5e5b55;
}

.assistant-tile {
  display: flex;
  min-height: 93px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 0;
  border-radius: 15px;
  background: #e9e3da;
  color: #282a2e;
  cursor: pointer;
  text-align: left;
}

.assistant-tile:hover {
  background: #e4ddd3;
}

.assistant-tile-star {
  color: #2b4bb7;
  font-size: 21px;
}

.assistant-tile strong,
.assistant-tile small {
  display: block;
}

.assistant-tile strong {
  margin-bottom: 5px;
  font-size: 11px;
}

.assistant-tile small {
  color: #8a867e;
  font-size: 9px;
}

.section-title,
.page-title,
.wordmark h1,
.card-title,
.detail-title {
  color: #18191a;
}

.page-subtitle,
.section-kicker {
  color: var(--muted);
}

.eyebrow {
  color: #756f65;
}

.eyebrow::before {
  color: #2e4fbf;
}

.secondary-button,
.ghost-button,
.icon-button,
.pill-button {
  border-color: var(--line);
  background: rgba(255, 253, 249, 0.66);
  color: #68655f;
}

.secondary-button:hover,
.ghost-button:hover,
.icon-button:hover,
.pill-button:hover,
.pill-button.is-active {
  border-color: rgba(36, 70, 184, 0.25);
  background: rgba(232, 236, 249, 0.72);
  color: #26439e;
}

.approval-card {
  border-color: rgba(165, 110, 63, 0.18);
  background: rgba(247, 236, 221, 0.72);
}

.approval-copy h3,
.approval-copy p {
  color: #4e4b46;
}

.library-toolbar .search-box input,
.search-box input {
  border-color: var(--line);
  background: rgba(255, 253, 249, 0.72);
  color: #202124;
}

.search-box input:focus {
  border-color: rgba(38, 73, 188, 0.32);
  box-shadow: 0 0 0 3px rgba(38, 73, 188, 0.04);
}

.relationship-row,
.relationship-mini,
.entry-card,
.add-entry-form,
.analysis-card,
.analysis-hero,
.prompt-builder,
.activity-row {
  border-color: var(--line);
  background: rgba(255, 253, 249, 0.62);
}

.relationship-pair,
.relationship-mini strong,
.detail-section-heading h3,
.analysis-hero h3,
.analysis-card p,
.prompt-builder-header h4,
.activity-row span,
.entry-card p {
  color: #333438;
}

.relationship-note,
.relationship-mini span,
.analysis-hero p,
.clean-list li,
.step-list li,
.entry-card time {
  color: #858179;
}

.detail-panel,
.assistant-panel {
  border-color: rgba(57, 51, 43, 0.14);
  background:
    radial-gradient(circle at 90% 4%, rgba(73, 93, 172, 0.06), transparent 23%),
    linear-gradient(155deg, #fbf8f2, #f5f0e8);
}

.overlay-scrim {
  background: rgba(43, 39, 34, 0.33);
}

.detail-summary {
  color: #77736d;
}

.status-select {
  border-color: var(--line);
  background: #f4efe7;
  color: #5a5752;
}

.tab-button {
  color: #858179;
}

.tab-button:hover,
.tab-button.is-active {
  background: rgba(42, 76, 189, 0.08);
  color: #2948aa;
}

.timeline::before {
  background: linear-gradient(to bottom, rgba(46, 79, 190, 0.36), rgba(46, 79, 190, 0.03));
}

.entry-card::before {
  border-color: #3151b9;
  background: #f7f3ed;
}

.add-entry-form textarea,
.assistant-form textarea,
.prompt-output,
.edit-field {
  color: #252629;
}

.prompt-output {
  border-color: var(--line);
  background: #f2eee7;
  color: #5c5953;
}

.assistant-heading h2 {
  color: #1d1e20;
}

.think-orb {
  border-color: rgba(43, 77, 191, 0.22);
  background: radial-gradient(circle at 35% 30%, #edf0fb, #d8def4);
  color: #3151bb;
  box-shadow: none;
}

.think-orb::before,
.think-orb::after {
  border-color: rgba(49, 81, 187, 0.28);
}

.context-chip {
  border-color: rgba(45, 78, 185, 0.18);
  background: rgba(45, 78, 185, 0.06);
  color: #4b5f9e;
}

.message.assistant {
  border-color: var(--line);
  background: rgba(255, 253, 249, 0.74);
  color: #4c4a47;
}

.message.user {
  background: linear-gradient(135deg, #3155c3, #2343a5);
  color: white;
}

.assistant-form {
  border-color: rgba(39, 74, 190, 0.22);
  background: rgba(255, 253, 249, 0.83);
}

.settings-modal {
  border-color: rgba(58, 51, 43, 0.16);
  background: linear-gradient(155deg, #fdfaf5, #f3eee6);
}

.settings-header h2,
.setting-copy strong {
  color: #202123;
}

.setting-row {
  border-color: var(--line);
  background: rgba(255, 253, 249, 0.65);
}

.setting-icon {
  background: rgba(42, 76, 187, 0.07);
  color: #3150b8;
}

.toast {
  border-color: rgba(48, 76, 168, 0.2);
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 16px 38px rgba(66, 52, 34, 0.16);
  color: #41413f;
}

.empty-state {
  border-color: rgba(63, 56, 48, 0.15);
  color: #8d8982;
}

.empty-state h3 {
  color: #363636;
}

@media (max-width: 1180px) {
  .idea-card-grid,
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-lower {
    grid-template-columns: 1fr;
  }

  .assistant-tile {
    width: 220px;
  }
}

@media (max-width: 620px) {
  .sidebar {
    background: rgba(252, 249, 244, 0.96);
  }

  .calm-home .wordmark h1 {
    font-size: 47px;
  }

  .home-actions .primary-button {
    display: none;
  }

  .idea-card-grid,
  .library-grid {
    grid-template-columns: 1fr;
  }

  .idea-card {
    min-height: 260px;
  }

  .related-chips {
    flex-direction: column;
  }

  .assistant-tile {
    width: 100%;
  }
}

/* Calm settings experience */
.settings-modal {
  width: min(680px, calc(100vw - 36px));
  padding: 32px;
}

.settings-kicker {
  display: block;
  margin-bottom: 6px;
  color: #3150b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ai-connection-card {
  padding: 20px;
  border: 1px solid rgba(55, 51, 45, .13);
  border-radius: 17px;
  background: rgba(255, 253, 249, .72);
  box-shadow: 0 12px 36px rgba(75, 58, 35, .05);
}

.ai-connection-card.is-connected {
  border-color: rgba(49, 113, 91, .2);
  background: linear-gradient(145deg, rgba(250, 253, 249, .88), rgba(248, 247, 240, .76));
}

.ai-connection-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(55, 51, 45, .1);
}

.ai-connection-heading strong,
.ai-connection-heading span {
  display: block;
}

.ai-connection-heading strong {
  margin-bottom: 4px;
  color: #202123;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
}

.ai-connection-heading > div > span {
  color: #858179;
  font-size: 10px;
}

.ai-settings-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px 14px;
  padding-top: 18px;
}

.settings-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.settings-field > span {
  color: #4a4844;
  font-size: 10px;
  font-weight: 650;
}

.settings-field > span a {
  float: right;
  color: #3150b8;
  font-weight: 500;
  text-decoration: none;
}

.settings-field input,
.settings-field select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(58, 52, 45, .15);
  border-radius: 10px;
  outline: none;
  background: #f8f4ed;
  color: #2e2f31;
  font: inherit;
  font-size: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.settings-field input:focus,
.settings-field select:focus {
  border-color: rgba(45, 76, 181, .38);
  box-shadow: 0 0 0 3px rgba(45, 76, 181, .06);
}

.settings-field input:disabled {
  color: #9a958e;
  cursor: not-allowed;
}

.settings-field small {
  min-height: 26px;
  color: #969088;
  font-size: 8.5px;
  line-height: 1.45;
}

.secret-input-wrap {
  position: relative;
}

.secret-input-wrap input {
  padding-right: 56px;
}

.secret-input-wrap button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #3150b8;
  cursor: pointer;
  font-size: 8.5px;
}

.secret-input-wrap input:disabled + button {
  display: none;
}

.ai-settings-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 1px;
}

.cloud-provider-note {
  margin: 14px 0 0;
  color: #8b867e;
  font-size: 10px;
  line-height: 1.55;
}

.focus-kicker,
.lab-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a5ec0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.compact-empty { min-height: 100px; }
.lab-card > p,
.lab-wide-heading p,
.lab-muted { color: #8c877f; font-size: 10px; line-height: 1.6; }
.signal-list { display: grid; gap: 10px; margin-top: 22px; }
.lab-signal { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: center; padding: 14px; border-radius: 15px; background: rgba(244, 241, 235, .65); }
.signal-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: white; color: #5164c3; }
.lab-signal strong,
.lab-signal p,
.lab-signal small { display: block; margin: 0; }
.lab-signal strong { font-size: 11px; }
.lab-signal p,
.lab-signal small { margin-top: 3px; color: #8e8982; font-size: 9px; }
.signal-actions { display: flex; gap: 8px; align-items: center; }

.library-card-wrap .idea-card { width: 100%; }
.semantic-reason { display: block; margin: 7px 5px 0; color: #726c89; font-size: 8px; line-height: 1.35; }
.private-search-note { margin: -5px 0 15px; color: #9a958e; font-size: 8px; }
.search-box button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(57, 77, 177, .08); color: #4259ba; cursor: pointer; }

.next-move-card { margin-bottom: 18px; padding: 24px; border: 1px solid rgba(63, 76, 153, .17); border-radius: 20px; background: linear-gradient(140deg, rgba(245, 243, 253, .88), rgba(255, 253, 249, .8)); }
.next-move-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.next-move-heading small { color: #5263bb; font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.next-move-heading h3 { margin: 8px 0 0; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.25; }

.next-move-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 22px; }
.next-move-form label,
.dna-form label { display: grid; gap: 6px; color: #7b756e; font-size: 8px; }
.next-move-form textarea,
.next-move-form input,
.dna-form textarea { width: 100%; min-height: 41px; padding: 11px 12px; border: 1px solid rgba(61, 55, 48, .13); border-radius: 12px; background: rgba(255, 255, 255, .55); color: #303130; font: inherit; resize: vertical; }
.next-move-form textarea { height: 42px; }
.project-link-card,
.detail-signal { display: grid; grid-template-columns: 40px 1fr auto; gap: 13px; align-items: center; margin-bottom: 18px; padding: 14px 17px; border: 1px solid rgba(58, 52, 46, .1); border-radius: 16px; background: rgba(248, 245, 239, .62); }
.project-link-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: white; color: #465dbd; }
.project-link-card small,
.project-link-card strong,
.project-link-card div > span,
.detail-signal small { display: block; }
.project-link-card small { color: #99938b; font-size: 8px; text-transform: uppercase; }
.project-link-card strong { margin: 3px 0; color: #4a4946; font-size: 10px; }
.project-link-card div > span { overflow: hidden; color: #aaa49c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.detail-signal > span { color: #4e62c0; font-size: 20px; }

.dna-intro { display: flex; align-items: center; gap: 17px; margin-bottom: 22px; padding: 20px; border-radius: 18px; background: rgba(244, 241, 250, .66); }
.dna-orbit { display: grid; place-items: center; width: 53px; height: 53px; flex: none; border: 1px solid rgba(69, 87, 181, .18); border-radius: 50%; color: #4f62bf; }
.dna-intro h3 { margin: 0 0 5px; font-family: var(--serif); font-size: 23px; }
.dna-intro p { margin: 0; color: #8d8780; font-size: 9px; }
.dna-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dna-form .is-wide { grid-column: 1 / -1; }
.dna-form textarea { min-height: 94px; }
.decision-capture { display: grid; grid-template-columns: auto 1fr auto auto; gap: 13px; align-items: center; margin: 0 0 18px; padding: 14px 17px; border: 1px solid rgba(191, 129, 70, .2); border-radius: 16px; background: rgba(252, 245, 235, .88); }
.decision-capture small,
.decision-capture strong { display: block; }
.decision-capture small { color: #aa7a4f; font-size: 8px; text-transform: uppercase; }
.decision-capture strong { margin-top: 3px; font-size: 10px; }
.decision-capture input { min-height: 40px; padding: 10px 12px; border: 1px solid rgba(116, 82, 52, .14); border-radius: 11px; background: rgba(255, 255, 255, .72); }
.receipt-list { display: grid; gap: 10px; }
.receipt-card { position: relative; padding: 16px 17px 14px 23px; border-left: 2px solid #c89160; border-radius: 0 13px 13px 0; background: rgba(249, 244, 236, .7); }
.receipt-card span { color: #9b673c; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.receipt-card p { margin: 6px 0; color: #55524e; font-size: 10px; }
.receipt-card time { color: #aaa49d; font-size: 8px; }

.saved-thread { color: #aaa49d; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.premium-assistant .message-wrap { display: grid; }
.message-save-row { display: flex; gap: 5px; margin: 4px 0 3px 11px; opacity: .35; transition: opacity .2s ease; }
.message-wrap:hover .message-save-row { opacity: 1; }
.message-save-row button { padding: 4px 7px; border: 1px solid rgba(79, 91, 157, .14); border-radius: 999px; background: transparent; color: #7b7691; font-size: 7px; cursor: pointer; }

.restore-label { cursor: pointer; }

@media (max-width: 900px) {
  .weekly-form,
  .dna-form { grid-template-columns: 1fr; }
  .dna-form .is-wide { grid-column: auto; }
  .next-move-form { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .decision-capture { grid-template-columns: 1fr; }
  
}

.primary-button.compact {
  min-height: 38px;
  padding: 0 17px;
  font-size: 10px;
}

.focus-guard,
.method-note { padding: 15px; border: 1px solid rgba(60, 55, 49, .1); border-radius: 15px; background: rgba(255, 254, 251, .66); }
.focus-guard > span,
.method-note > span { color: #5264b7; font-size: 7px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.focus-guard strong { display: block; margin: 8px 0 5px; color: #333431; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.focus-guard p,
.method-note p { margin: 0; color: #8d877f; font-size: 8px; line-height: 1.5; }

.method-note { margin-top: auto; border-style: dashed; }
.method-note p { margin-top: 6px; }

.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mode-cards input { position: absolute; opacity: 0; pointer-events: none; }
.mode-cards label { cursor: pointer; }
.mode-cards label > span { display: grid; min-height: 64px; padding: 13px 14px; border: 1px solid rgba(61, 56, 49, .12); border-radius: 14px; background: rgba(255,255,255,.46); color: #868079; transition: .18s ease; }
.mode-cards strong { color: #383936; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.mode-cards small { margin-top: 4px; color: #979189; font-size: 8px; }
.mode-cards input:checked + span { border-color: rgba(59, 78, 176, .33); background: rgba(238, 240, 251, .82); box-shadow: 0 7px 18px rgba(59, 76, 162, .08); color: #4157b3; }

@media (max-width: 900px) {
  
  
  
  
  
  
  
  .method-note { margin-top: 0; }
}

@media (max-width: 620px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .mode-cards { grid-template-columns: 1fr; }
}

.text-button {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #75716b;
  cursor: pointer;
  font-size: 9px;
}

.danger-text:hover {
  color: #aa4e55;
}

.secure-note {
  margin-left: auto;
  color: #88837c;
  font-size: 8.5px;
}

.compact-settings {
  margin-top: 12px;
}

/* What the studio has learned --------------------------------------------- */

.learning-panel {
  margin-top: 12px;
  gap: 8px;
}

.learning-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.learning-target {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(15, 19, 36, .62);
}

.learning-target header strong {
  color: var(--text-soft);
  font-size: 11px;
}

.learning-target header small {
  margin-left: 6px;
  color: var(--muted-2);
  font-size: 9px;
}

.learning-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin: 0;
}

.learning-words > span:first-child {
  color: var(--muted-2);
  font-size: 9px;
}

.learning-word {
  padding: 2px 8px;
  border: 1px solid rgba(104, 82, 218, .28);
  border-radius: 999px;
  background: rgba(104, 82, 218, .1);
  color: #a393ef;
  font-size: 9.5px;
}

.learning-words.is-away .learning-word {
  border-color: rgba(170, 78, 85, .3);
  background: rgba(170, 78, 85, .08);
  color: #c98a90;
}

.learning-word small {
  margin-left: 4px;
  opacity: .75;
  font-size: 8px;
}

.learning-corrections {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learning-corrections li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.55;
}

.learning-corrections .text-button {
  flex-shrink: 0;
}

.compact-settings .setting-row {
  min-height: 64px;
  padding: 12px 14px;
}

@media (max-width: 620px) {
  .settings-modal {
    width: calc(100vw - 20px);
    padding: 22px 16px;
  }

  .ai-settings-form {
    grid-template-columns: 1fr;
  }

  .ai-settings-actions {
    flex-wrap: wrap;
  }

  .secure-note {
    width: 100%;
    margin-left: 0;
  }

  .compact-settings .setting-row {
    grid-template-columns: auto 1fr;
  }

  .compact-settings .setting-row > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

/* Layering foundation -----------------------------------------------------
   Ten names, in the order things sit on top of each other. Every `z-index`
   that stacks one component over another resolves to one of them, so a new
   control is placed by saying what kind of thing it is rather than by guessing
   a number bigger than the last one — which is how a card badge came to sit
   above the button meant to clear it. The gaps are deliberate: room to insert
   a layer without renaming the ones around it. A panel lifted over its own
   scrim inside one overlay is a private arrangement and stays a bare number;
   only stacking that crosses components belongs on this ladder.

   page      the shell, above the page's own background decoration
   badge     labels painted on card artwork — category, Local Only
   control   the buttons that act on a card: drag, combine, pin
   sticky    toolbars and the small-screen navigation bar
   menu      dropdowns anchored to a control
   dock      the combine tray, which spans the foot of the app
   overlay   the idea and Inky panels, and their scrims
   modal     dialogs, which must cover an overlay that opened one
   toast     what the studio says about what just happened
   drag      the card following the pointer, above all of it by definition */
:root {
  --layer-page: 1;
  --layer-badge: 2;
  --layer-control: 3;
  --layer-sticky: 8;
  --layer-menu: 12;
  --layer-dock: 18;
  --layer-overlay: 20;
  --layer-modal: 30;
  --layer-toast: 50;
  --layer-drag: 60;
}

/* Readability foundation --------------------------------------------------
   Quiet should never mean microscopic. These role-based sizes keep the
   interface calm while giving body copy, controls, and captions a clear
   minimum size at normal display scaling. */
:root {
  --type-caption: 12px;
  --type-label: 13px;
  --type-control: 14px;
  --type-body: 15px;
}

body { font-size: var(--type-body); }

.calm-home .wordmark > span,
.wordmark span,
.eyebrow,
.section-kicker,
.focus-kicker,
.lab-kicker,
.settings-kicker { font-size: var(--type-caption); }

.page-subtitle,
.detail-summary { font-size: 16px; line-height: 1.55; }

.privacy-toggle { font-size: var(--type-label); }

.primary-button { font-size: var(--type-control); }
.secondary-button,
.ghost-button,
.pill-button,
.text-button,
.primary-button.compact { font-size: var(--type-label); }

.capture-hint,
.text-link,
.focus-next small,
.revisit-card small,
.studio-pulse small,
.assistant-tile small,
.library-meta,
.semantic-reason,
.private-search-note { font-size: var(--type-caption); line-height: 1.5; }
.studio-pulse strong,
.assistant-tile strong { font-size: var(--type-control); }

/* Library and idea detail */
.search-box input,
.library-toolbar .search-box input { font-size: var(--type-body); }
.search-box kbd,
.visual-category,
.visual-privacy,
.idea-card .card-age { font-size: var(--type-caption); }
.card-more { font-size: var(--type-control); }
.related-chip { font-size: var(--type-label); }
.approval-copy p,
.relationship-note,
.relationship-mini span,
.analysis-hero p,
.analysis-card p,
.clean-list li,
.step-list li,
.entry-card p,
.activity-row span { font-size: var(--type-control); line-height: 1.55; }
.status-select,
.tab-button,
.context-chip { font-size: var(--type-label); }
.entry-card time,
.activity-row time { font-size: var(--type-caption); }
.add-entry-form textarea,
.assistant-form textarea,
.prompt-output,
.edit-field { font-size: var(--type-body); line-height: 1.55; }
.analysis-card h4,
.context-strip > span,
.message-mode { font-size: var(--type-caption); }

/* Inky and settings */
.message { font-size: var(--type-control); line-height: 1.55; }
.assistant-suggestions button { font-size: var(--type-label); }
.privacy-notice { font-size: var(--type-label); line-height: 1.5; }
.setting-copy strong { font-size: var(--type-control); }
.settings-header p { font-size: var(--type-control); line-height: 1.5; }
.setting-copy span,
.ai-connection-heading > div > span,
.cloud-provider-note { font-size: var(--type-label); line-height: 1.5; }
.connection-state,
.secure-note { font-size: var(--type-caption); }
.settings-field > span { font-size: var(--type-label); }
.settings-field input,
.settings-field select { height: 46px; font-size: var(--type-control); }
.settings-field small,
.secret-input-wrap button { font-size: var(--type-caption); line-height: 1.45; }

.attention-card p,
.lab-card > p,
.lab-wide-heading p,
.lab-muted,
.collision-result p,
.weekly-insights > p { font-size: var(--type-control); line-height: 1.55; }
.lab-result small,
.weekly-insights article span,
.lab-signal small,
.next-move-heading small,
.project-link-card small,
.project-link-card div > span,
.decision-capture small,
.receipt-card span,
.receipt-card time,
.saved-thread { font-size: var(--type-caption); }
.lab-signal strong,
.project-link-card strong,
.decision-capture strong,
.receipt-card p { font-size: var(--type-control); }
.dna-intro p { font-size: var(--type-label); line-height: 1.5; }
.message-save-row button { font-size: var(--type-caption); }

.focus-guard,
.method-note { padding: 17px; }
.focus-guard > span,
.method-note > span { font-size: var(--type-caption); }
.focus-guard strong { font-size: 20px; line-height: 1.15; }
.focus-guard p,
.method-note p { font-size: var(--type-label); line-height: 1.5; }

.mode-cards label > span { min-height: 78px; padding: 15px 16px; }
.mode-cards strong { font-size: 19px; }
.mode-cards small { font-size: var(--type-label); line-height: 1.4; }

/* Idea context, checklists, and the full thought history */

/* The question keeps its natural height and the conversation gives way around it. */

/* On a short window three independently clipped panes leave room for none of them.
   Scroll the whole column instead and pin the composer, so the question is always
   readable in full and the answer box is always reachable. */

.pickup-add,
.pickup-drop { display: grid; place-items: center; border-radius: 50%; cursor: pointer; transition: transform 120ms ease, background 140ms ease; }
.pickup-add { width: 24px; height: 24px; border: 1px solid rgba(58, 79, 181, .3); background: rgba(66, 87, 188, .1); color: #3a4fb5; font-size: var(--type-control); }
.pickup-add:hover:not(:disabled) { background: #4057b5; color: white; transform: scale(1.06); }
.pickup-add:disabled { opacity: .5; cursor: default; }
.pickup-drop { width: 20px; height: 20px; border: 0; background: transparent; color: #a9a39a; font-size: var(--type-control); }
.pickup-drop:hover { background: rgba(120, 110, 100, .1); color: #6f6961; }

.pickup-tray {
  margin: 13px 0;
  padding: 15px 16px;
  border: 1px dashed rgba(124, 99, 255, .32);
  border-radius: 15px;
  background: rgba(124, 99, 255, .05);
}

.pickup-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pickup-head > div > span { display: block; color: var(--violet-bright); font-size: var(--type-caption); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.pickup-head small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--type-caption); }
.pickup-head-actions { display: flex; gap: 8px; }
.pickup-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pickup-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-soft); }
.pickup-list strong { display: block; color: var(--text-soft); font-size: var(--type-label); font-weight: 500; line-height: 1.4; }
.pickup-list small { display: block; margin-top: 3px; color: var(--muted-2); font-size: var(--type-caption); }

.checklist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 15px; }
.checklist-head h3 { margin: 0 0 5px; color: var(--text); font-family: var(--serif); font-size: 21px; font-weight: 400; }
.checklist-head p { max-width: 520px; margin: 0; color: var(--muted); font-size: var(--type-label); line-height: 1.55; }
.checklist-progress { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.checklist-progress span { color: var(--muted); font-size: var(--type-caption); white-space: nowrap; }
.checklist-meter { flex: 1; height: 5px; border-radius: 999px; background: rgba(153, 162, 205, .16); overflow: hidden; }
.checklist-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); transition: width 220ms ease; }

.checklist-add { display: flex; gap: 8px; margin-bottom: 14px; }
.checklist-add input {
  flex: 1;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: var(--type-control);
}

.checklist-add input:focus { border-color: var(--line-strong); outline: none; }

.checklist-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--violet-soft);
}

.checklist-toolbar > span { color: var(--text-soft); font-size: var(--type-label); }
.checklist-toolbar > div { display: flex; align-items: center; gap: 8px; }
.checklist-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.checklist-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-soft);
  transition: border-color 140ms ease, background 140ms ease;
}

.checklist-list { margin-bottom: 6px; }

.checklist-row.is-selected { border-color: var(--line-strong); background: var(--violet-soft); }
.checklist-row.is-done .checklist-title { color: var(--muted-2); text-decoration: line-through; }
.checklist-select { width: 15px; height: 15px; accent-color: var(--violet); cursor: pointer; }

.checklist-tick {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: transparent;
  color: white;
  font-size: var(--type-caption);
  cursor: pointer;
  transition: background 140ms ease;
}

.checklist-row.is-done .checklist-tick { border-color: var(--violet); background: var(--violet); }
.checklist-body { min-width: 0; }

.checklist-title {
  width: 100%;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--type-control);
  line-height: 1.45;
}

.checklist-title:focus { border-bottom-color: var(--line-strong); outline: none; }
.checklist-body small { display: block; margin-top: 4px; color: var(--muted-2); font-size: var(--type-caption); }
.checklist-body small i { font-style: normal; }
.checklist-row-actions { display: flex; align-items: center; gap: 4px; }
.checklist-row-actions .text-button { font-size: var(--type-caption); }
.icon-button.compact { width: 26px; height: 26px; font-size: var(--type-control); }

.checklist-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 15px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-soft);
  cursor: pointer;
  transition: border-color 140ms ease;
}

.checklist-teaser:hover { border-color: var(--line-strong); }
.checklist-teaser small { display: block; color: var(--muted-2); font-size: var(--type-caption); letter-spacing: .08em; text-transform: uppercase; }
.checklist-teaser strong { display: block; margin-top: 3px; color: var(--text-soft); font-size: var(--type-control); font-weight: 500; }
.checklist-teaser .checklist-meter { max-width: 180px; }
.checklist-teaser-go { color: var(--violet-bright); font-size: var(--type-caption); white-space: nowrap; }

.saved-prompt-list { display: grid; gap: 8px; }
.saved-prompt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.saved-prompt strong { display: block; color: var(--text-soft); font-size: var(--type-label); font-weight: 500; }
.saved-prompt time { display: block; margin-top: 3px; color: var(--muted-2); font-size: var(--type-caption); }

.entry-filter {
  width: 100%;
  min-height: 38px;
  margin-bottom: 12px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: var(--type-label);
}

.entry-filter:focus { border-color: var(--line-strong); outline: none; }
.timeline.is-full { max-height: 460px; padding-right: 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(124, 99, 255, .25) transparent; }

.fieldset-note { display: block; margin-top: 8px; color: #99938b; font-size: var(--type-caption); font-style: italic; }

@media (max-width: 900px) {
  
  .checklist-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .checklist-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 620px) {
  .checklist-head { flex-direction: column; }
  .checklist-teaser { flex-wrap: wrap; }
  .checklist-teaser .checklist-meter { max-width: none; }
  .timeline.is-full { max-height: none; }
}

/* Combining and folding ideas ---------------------------------------------- */

/* The pick badge sits on the card without being inside it, so the card stays one button.
   Where it sits is the wrapper's business — see "The card's two control rails". */
.combine-pick {
  position: absolute;
  z-index: var(--layer-control);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-solid);
  color: var(--muted);
  font-size: var(--type-control);
  opacity: 0;
  cursor: pointer;
  transition: opacity 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.library-card-wrap:hover .combine-pick,
.combine-pick:focus-visible,
.library-grid.is-selecting .combine-pick,
.combine-pick.is-picked { opacity: 1; }

.combine-pick.is-picked {
  border-color: var(--line-strong);
  background: var(--violet-soft);
  color: var(--violet);
}

.combine-merged-flag {
  display: block;
  margin-top: 6px;
  color: var(--muted-2);
  font-size: var(--type-caption);
}

/* The tray follows you between views, so a pick made in one place survives the trip. */
.combine-dock {
  position: fixed;
  z-index: var(--layer-dock);
  inset: auto 0 22px 0;
  display: grid;
  place-items: center;
  padding: 0 18px;
  pointer-events: none;
}

.combine-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-solid);
  box-shadow: 0 18px 44px rgba(75, 60, 40, .18);
  pointer-events: auto;
  animation: toast-in 220ms ease;
}

.combine-bar-label {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.combine-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 190px;
  min-height: 30px;
  padding: 0 6px 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--violet-soft);
  color: var(--text-soft);
  font-size: var(--type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combine-chip-index {
  color: var(--violet);
  font-weight: 750;
}

.combine-add {
  width: 190px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: var(--type-label);
}

.combine-add:focus {
  border-color: var(--line-strong);
  outline: none;
}

.combine-suggest {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  display: grid;
  gap: 4px;
  width: min(420px, calc(100vw - 40px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-solid);
  box-shadow: 0 14px 38px rgba(67, 54, 37, .12);
  transform: translateX(-50%);
}

.combine-suggest[hidden] { display: none; }

.combine-suggest-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-soft);
  font-size: var(--type-control);
  text-align: left;
  cursor: pointer;
}

.combine-suggest-row:hover,
.combine-suggest-row:focus-visible { background: var(--violet-soft); }

.combine-suggest-row small { color: var(--muted-2); font-size: var(--type-caption); }

.combine-modal {
  position: relative;
  z-index: 2;
  width: min(1040px, calc(100vw - 34px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 7%, var(--violet-soft), transparent 27%),
    var(--panel-solid);
  box-shadow: var(--shadow-lg);
  animation: modal-in 240ms ease;
}

.combine-inner { padding: 26px clamp(22px, 3vw, 34px) 30px; }

.combine-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.combine-head h2 {
  margin: 8px 0 5px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
}

.combine-head p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: var(--type-control);
  line-height: 1.6;
}

.combine-outcome {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
}

.combine-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.combine-result {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.combine-field { display: grid; gap: 6px; }

.combine-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.combine-field-head > span {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 650;
}

.combine-pickbar { display: flex; flex-wrap: wrap; gap: 4px; }

.combine-pickbtn {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--type-caption);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.combine-pickbtn:hover { border-color: var(--line-strong); color: var(--text-soft); }

.combine-pickbtn.is-active {
  border-color: var(--line-strong);
  background: var(--violet-soft);
  color: var(--violet);
}

.combine-input {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text);
  font: inherit;
  font-size: var(--type-control);
  resize: vertical;
}

.combine-input:focus {
  border-color: var(--line-strong);
  outline: none;
}

#combine-summary { min-height: 88px; }

.combine-note { color: var(--muted-2); font-size: var(--type-caption); }

.combine-tagrow,
.combine-catrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* Warm and solid: a fact about the result, not a suggestion. */
.combine-privacy {
  display: grid;
  gap: 4px;
  padding: 12px 15px;
  border-left: 2px solid rgba(175, 119, 61, .4);
  border-radius: 0 12px 12px 0;
  background: rgba(252, 245, 233, .6);
  color: #8a6b46;
  font-size: var(--type-label);
  line-height: 1.55;
}

.combine-privacy strong { display: flex; align-items: center; gap: 7px; }
.combine-privacy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Dashed: something noticed, never something decided. */
.combine-conflicts {
  margin: 0;
  padding: 12px 15px;
  border: 1px dashed rgba(175, 119, 61, .35);
  border-radius: 12px;
  background: rgba(252, 245, 233, .6);
  color: #8a6b46;
  font-size: var(--type-label);
  line-height: 1.55;
}

.combine-receipt {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-soft);
  list-style: none;
}

.combine-receipt-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  color: var(--text-soft);
  font-size: var(--type-label);
  line-height: 1.55;
}

.combine-receipt-row.is-undo { color: var(--muted); }

.combine-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.combine-actions > .text-button:first-child { margin-right: auto; }

.combine-sources {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.combine-source {
  display: grid;
  gap: 11px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-soft);
}

.combine-source.is-keeper {
  border-color: var(--line-strong);
  box-shadow: inset 3px 0 0 var(--violet);
}

.combine-source.is-absorbing { opacity: .82; }

.combine-source-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.combine-source-symbol {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 13%, white);
  color: var(--accent);
  font-size: var(--type-body);
}

.combine-source strong {
  display: block;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combine-source small {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: var(--type-caption);
}

.combine-keep {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--type-caption);
  cursor: pointer;
}

.combine-parts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.combine-part {
  margin: 0;
  padding: 0;
  border: 0;
}

.combine-part-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 6px 2px;
  color: var(--text-soft);
  font-size: var(--type-label);
  cursor: pointer;
}

.combine-part-head input {
  width: 15px;
  height: 15px;
  accent-color: var(--violet);
  cursor: pointer;
}

.combine-part-head small { color: var(--muted-2); font-size: var(--type-caption); }

.combine-part-toggle {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: var(--type-control);
  cursor: pointer;
}

.combine-part-list {
  display: grid;
  gap: 4px;
  margin: 2px 0 6px 24px;
  padding: 0;
  list-style: none;
}

.combine-part-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 5px 0;
  color: var(--text-soft);
  font-size: var(--type-label);
  line-height: 1.45;
}

.combine-part-row input {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  accent-color: var(--violet);
  cursor: pointer;
}

.combine-part-row > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.combine-part-row small { color: var(--muted-2); font-size: var(--type-caption); }
.combine-part-row.is-duplicate small { color: #9a7141; }

.combine-part.is-locked .combine-part-head { opacity: .6; cursor: default; }

.combine-merged-note {
  display: grid;
  gap: 6px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 2px solid #c89160;
  border-radius: 0 13px 13px 0;
  background: rgba(249, 244, 236, .7);
  color: #8a6b46;
  font-size: var(--type-label);
  line-height: 1.55;
}

.combine-merged-note p { margin: 0; }
.combine-merged-note .secondary-button { justify-self: start; }

.combine-absorbed-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}

@media (max-width: 900px) {
  .combine-body { grid-template-columns: 1fr; }
  /* Stacked, what carries over is the part worth reading first. */
  .combine-sources { order: -1; }
}

@media (max-width: 620px) {
  .combine-dock { inset: auto 12px 12px 12px; padding: 0; }
  .combine-bar { border-radius: 20px; }
  .combine-add { width: 100%; }
  .combine-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
  .combine-outcome { grid-template-columns: 1fr; }
  .combine-actions { flex-wrap: wrap; }
  .combine-actions .primary-button { flex: 1 0 100%; }
}

/* ===========================================================================
   Thoughts, the Inbox, contexts, drag and drop, and the confirmation dialog.
   =========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--violet-bright);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.danger-button {
  padding: 10px 18px;
  border: 1px solid rgba(178, 62, 62, .38);
  border-radius: 999px;
  background: rgba(190, 66, 66, .1);
  color: #a53b3b;
  font-size: var(--type-control);
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.danger-button:hover { background: rgba(190, 66, 66, .17); border-color: rgba(178, 62, 62, .55); }
.danger-button:disabled { opacity: .45; cursor: not-allowed; }
.danger-text { color: #a53b3b; }

/* Capture ------------------------------------------------------------------ */

.capture-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.capture-mode {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 254, 251, .7);
  color: var(--muted);
  font-size: var(--type-caption);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.capture-mode:hover { border-color: var(--line-strong); color: var(--text-soft); }
.capture-mode.is-active { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-bright); font-weight: 600; }

.capture-target { display: grid; gap: 6px; margin-top: 10px; }
.capture-target span { color: var(--muted); font-size: var(--type-caption); }
.capture-target select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 254, 251, .85); font: inherit; }

.capture-context-picker {
  position: relative;
  padding: 10px 13px 11px;
}

.capture-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
}

.capture-context-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.capture-context-label {
  flex: none;
  color: var(--muted);
  font-size: var(--type-caption);
}

.capture-context-label small {
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(153, 162, 205, .12);
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.capture-context-note {
  overflow: hidden;
  color: var(--muted-2);
  font-size: var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-context-selection {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.capture-context-chip {
  display: inline-flex;
  min-width: 0;
  max-width: 180px;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 10px;
  overflow: hidden;
  border: 1px solid rgba(39, 75, 193, .2);
  border-radius: 999px;
  background: rgba(236, 239, 252, .78);
  color: var(--violet-bright);
  font: inherit;
  font-size: var(--type-caption);
  cursor: pointer;
}

.capture-context-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-context-chip b { flex: none; font-size: 14px; font-weight: 400; line-height: 1; }
.capture-context-chip:hover { border-color: rgba(39, 75, 193, .38); background: rgba(229, 233, 251, .95); }
.capture-context-more { flex: none; color: var(--muted-2); font-size: var(--type-caption); white-space: nowrap; }

.capture-context-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 254, 251, .76);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--type-caption);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.capture-context-toggle svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 160ms ease;
}

.capture-context-picker.is-open .capture-context-toggle {
  border-color: rgba(39, 75, 193, .32);
  background: var(--violet-soft);
  color: var(--violet-bright);
}

.capture-context-picker.is-open .capture-context-toggle svg { transform: rotate(180deg); }
.capture-context-toggle:hover { border-color: var(--line-strong); background: rgba(247, 245, 252, .88); }

.capture-context-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 254, 251, .94);
  box-shadow: 0 12px 28px rgba(70, 61, 47, .1);
}

.capture-context-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 253, 249, .9);
}

.capture-context-search:focus-within { border-color: rgba(39, 75, 193, .38); box-shadow: 0 0 0 3px rgba(39, 75, 193, .06); }
.capture-context-search svg { width: 15px; height: 15px; fill: none; stroke: var(--muted-2); stroke-linecap: round; stroke-width: 1.5; }
.capture-context-search input { min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--type-label); }
.capture-context-search input::placeholder { color: var(--muted-2); }
.capture-context-search > span { color: var(--muted-2); font-size: var(--type-caption); white-space: nowrap; }

.capture-context-results {
  max-height: 224px;
  margin-top: 10px;
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.capture-context-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
}

.capture-context-option {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(249, 247, 242, .68);
  color: var(--text-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.capture-context-option:hover { border-color: var(--line); background: rgba(247, 245, 252, .8); }
.capture-context-option.is-active { border-color: rgba(39, 75, 193, .22); background: rgba(235, 238, 252, .84); color: var(--violet-bright); }
.capture-context-check { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 6px; color: white; font-size: 11px; font-weight: 700; }
.capture-context-option.is-active .capture-context-check { border-color: var(--violet-bright); background: var(--violet-bright); }
.capture-context-name { overflow: hidden; font-size: var(--type-label); text-overflow: ellipsis; white-space: nowrap; }
.capture-context-option small { color: var(--muted-2); font-size: 9px; letter-spacing: .035em; text-transform: uppercase; }

.capture-context-overflow {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(247, 245, 252, .72);
  color: var(--muted-2);
  font-size: var(--type-caption);
  text-align: center;
}

.capture-context-empty {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 23px 12px;
  color: var(--muted-2);
  text-align: center;
}

.capture-context-empty > span { color: var(--violet); font-size: 20px; }
.capture-context-empty strong { color: var(--text-soft); font-size: var(--type-label); }
.capture-context-empty small { font-size: var(--type-caption); }

.capture-context-create {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed rgba(82, 100, 183, .32);
  border-radius: 11px;
  background: rgba(240, 242, 252, .5);
}

.capture-context-create-label {
  overflow: hidden;
  margin-right: auto;
  color: var(--text-soft);
  font-size: var(--type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-context-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 0 2px;
  color: var(--muted-2);
  font-size: var(--type-caption);
}

.capture-context-footer .text-button { flex: none; }

@media (max-width: 620px) {
  .capture-context-bar { align-items: flex-start; }
  .capture-context-copy { display: grid; gap: 6px; }
  .capture-context-selection { flex-wrap: wrap; }
  .capture-context-options { grid-template-columns: 1fr; }
  .capture-context-search > span { display: none; }
  .capture-context-footer { align-items: flex-start; }
}

.capture-receipt {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(247, 245, 252, .8);
}

.capture-receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.capture-receipt-head strong { color: var(--text-soft); font-size: var(--type-label); }
.capture-receipt ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.capture-receipt li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: var(--muted); font-size: var(--type-label); line-height: 1.5; }
.capture-receipt li span:first-child { color: var(--violet-bright); }
.capture-receipt em { font-style: normal; color: var(--muted-2); }

/* Thought cards ------------------------------------------------------------ */

.thought-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.filter-strip.compact { gap: 5px; }
.filter-strip.compact .pill-button { padding: 4px 11px; font-size: var(--type-caption); }

/* The reading-order toggle states where it stands; the arrow is the only decoration, and it
   points the way the list currently runs. */
.thought-order { display: inline-flex; align-items: center; gap: 5px; }
.thought-order i { font-style: normal; font-size: 11px; line-height: 1; opacity: 0.75; }

.thought-list { display: grid; gap: 10px; }

.thought-card {
  display: grid;
  gap: 9px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 15px;
  background: rgba(255, 254, 251, .82);
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.thought-card:hover { border-color: var(--line-strong); }
.thought-card.is-pinned { border-left-color: var(--violet); background: rgba(247, 244, 255, .8); }
.thought-card.is-excluded { opacity: .62; border-style: dashed; }
.thought-card.is-inactive { opacity: .5; }

/* Settled — implemented, or deliberately not being done. Quieter than an open thought and
   louder than an archived one: it is still part of the idea and still fully readable, it
   simply is not asking for anything any more. The words themselves keep their contrast; it
   is the card around them that steps back, because greying the text of something you may
   still need to read is a legibility cost paid for a styling effect. */
.thought-card.is-settled { opacity: .74; background: rgba(246, 246, 249, .7); border-left-color: rgba(120, 140, 130, .45); }
.thought-card.is-settled:hover { opacity: 1; }
.thought-card.is-settled .thought-body p { color: var(--muted); }

.thought-card-main { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.thought-body p {
  margin: 0;
  color: var(--text-soft);
  /* Thoughts are the primary reading material on this panel, so they get real body type. */
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.thought-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.thought-meta time { color: var(--muted-2); font-size: var(--type-caption); }

.thought-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(153, 162, 205, .14);
  color: var(--muted);
  font-size: var(--type-caption);
}

.thought-chip.is-local { background: rgba(190, 150, 66, .14); color: #8a6b46; }
.thought-chip.is-local svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.thought-chip.is-shared { background: rgba(84, 199, 189, .16); color: #2f7d77; }
.thought-chip.is-archived { background: rgba(120, 120, 130, .16); }
.thought-chip.is-stage.is-assessed { background: rgba(120, 140, 205, .16); color: #4a5a8c; }
.thought-chip.is-stage.is-implemented { background: rgba(92, 172, 122, .18); color: #2f6d47; }
.thought-chip.is-stage.is-dropped { background: rgba(140, 130, 130, .18); color: #6b5f5f; }

.thought-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-left: 36px; }
/* The one stage that is a press rather than a menu. Off it reads as any other text button;
   on it holds the colour of the chip it produces, so the button and the label it wrote are
   recognisably the same fact. */
.stage-toggle.is-on { color: #2f6d47; background: rgba(92, 172, 122, .14); border-radius: 999px; padding: 2px 9px; }
.thought-select {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 254, 251, .9);
  color: var(--muted);
  font: inherit;
  font-size: var(--type-caption);
  cursor: pointer;
}

.thought-select:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.provenance { display: block; margin-top: 3px; color: var(--muted-2); font-size: var(--type-caption); font-style: italic; }
.stale-flag { color: #a5773b; }

.stale-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  padding: 11px 14px;
  border: 1px solid rgba(190, 150, 66, .3);
  border-radius: 14px;
  background: rgba(249, 244, 236, .75);
  color: #8a6b46;
  font-size: var(--type-label);
}

/* Drag handles, ghosts, and drop targets ----------------------------------- */

.drag-handle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted-2);
  cursor: grab;
  touch-action: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.drag-handle svg { width: 16px; height: 16px; fill: currentColor; }
.drag-handle:hover { background: rgba(153, 162, 205, .14); color: var(--text-soft); }
.drag-handle:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }


.library-card-wrap:hover > .drag-handle,
.library-card-wrap:focus-within > .drag-handle { opacity: 1; }

/* On touch there is no hover to reveal it, and the card body must stay scrollable — so the
   handle is the only way to drag and has to be permanently visible. */
@media (hover: none) {
  .library-card-wrap > .drag-handle,
  .library-row-wrap > .drag-handle { opacity: 1; }
  .drag-handle { width: 34px; height: 34px; }
  .library-row-wrap { --control-size: 34px; }
  .library-row { padding-right: 88px; }
}

body.is-dragging { cursor: grabbing; user-select: none; }
body.is-dragging .drag-handle { cursor: grabbing; }

.drag-layer { position: fixed; inset: 0; z-index: var(--layer-drag); pointer-events: none; }

.drag-ghost {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  box-shadow: 0 22px 48px rgba(40, 34, 28, .26);
  opacity: .94;
  pointer-events: none;
}

/* The source keeps its own slot and becomes the placeholder, so nothing below it moves and
   it stays obvious where the card came from and where it will return to. */
.is-drag-source.is-lifted {
  position: relative;
  opacity: .34;
  filter: saturate(.4);
}

.is-drag-source.is-lifted::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: var(--layer-control);
  border: 2px dashed var(--line-strong);
  border-radius: 18px;
  background: rgba(153, 162, 205, .07);
  pointer-events: none;
}

.is-drop-candidate { position: relative; }
.is-drop-candidate::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px dashed rgba(124, 99, 255, .3);
  border-radius: 20px;
  pointer-events: none;
}

.is-drop-target { position: relative; }
.is-drop-target::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--violet);
  border-radius: 20px;
  background: rgba(124, 99, 255, .09);
  box-shadow: 0 0 0 5px rgba(124, 99, 255, .12);
  pointer-events: none;
}

.library-drag-hint { margin: 0 0 14px; color: var(--muted-2); font-size: var(--type-caption); }

/* Confirmation dialog ------------------------------------------------------- */

.confirm-dialog {
  position: relative;
  z-index: 2;
  width: min(680px, 94vw);
  max-height: 90vh;
  padding: 26px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fffdf9;
  box-shadow: 0 30px 70px rgba(40, 34, 28, .26);
  overflow-y: auto;
}

.confirm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.confirm-head h2 { margin: 5px 0 6px; font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.25; }
.confirm-head p { margin: 0; max-width: 52ch; color: var(--muted); font-size: var(--type-label); line-height: 1.6; }

.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.confirm-actions button { flex: 0 1 auto; }

.dialog-field { display: grid; gap: 6px; margin-bottom: 13px; }
.dialog-field > span { color: var(--muted); font-size: var(--type-caption); }
.dialog-field input,
.dialog-field textarea,
.dialog-field select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 254, 251, .9);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--type-control);
  line-height: 1.6;
}

.dialog-field textarea { resize: vertical; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-check { display: flex; align-items: center; gap: 9px; margin: 4px 0 12px; color: var(--muted); font-size: var(--type-label); }
.dialog-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dialog-note { margin: 10px 0 0; color: var(--muted-2); font-size: var(--type-label); }
/* A note between two rows of fields needs room under it as well as over it, or the next
   row's labels sit on top of it. */
.dialog-note + .dialog-grid { margin-top: 14px; }
.dialog-search { width: 100%; padding: 9px 13px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }

.dialog-quote {
  margin: 0 0 14px;
  padding: 12px 15px;
  border-left: 3px solid var(--violet);
  border-radius: 0 12px 12px 0;
  background: rgba(247, 244, 255, .7);
  color: var(--text-soft);
  font-size: var(--type-label);
  line-height: 1.6;
  white-space: pre-wrap;
}

.dialog-picklist { display: grid; gap: 6px; max-height: 260px; margin: 0 0 12px; padding: 0; list-style: none; overflow-y: auto; }
.dialog-picklist label { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.dialog-picklist label:hover { border-color: var(--line-strong); background: rgba(247, 245, 252, .7); }
.dialog-picklist span { color: var(--text-soft); font-size: var(--type-label); line-height: 1.5; }
.dialog-picklist small { display: block; margin-top: 3px; color: var(--muted-2); font-size: var(--type-caption); }

.drop-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.drop-pair.is-stacked { grid-template-columns: 1fr; text-align: left; }
.drop-pair-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 254, 251, .85); }
.drop-pair-card.is-destination { border-color: var(--violet); background: var(--violet-soft); }
.drop-pair-card small { display: block; color: var(--muted-2); font-size: var(--type-caption); letter-spacing: .06em; text-transform: uppercase; }
.drop-pair-card strong { display: block; margin: 4px 0 3px; color: var(--text); font-size: var(--type-control); font-weight: 600; line-height: 1.4; }
.drop-pair-card span { color: var(--muted); font-size: var(--type-caption); }
.drop-arrow { color: var(--violet-bright); font-size: 20px; }

.drop-note { margin: 0 0 12px; color: var(--muted); font-size: var(--type-label); line-height: 1.55; }
.drop-note.is-privacy { display: flex; align-items: center; gap: 7px; color: #8a6b46; }
.drop-note.is-privacy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.drop-notes { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: var(--type-label); line-height: 1.6; }
.drop-effects { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--type-label); line-height: 1.65; }
.drop-effects strong { color: var(--text-soft); }

.drop-details { margin-bottom: 11px; border: 1px solid var(--line); border-radius: 13px; }
.drop-details summary { padding: 10px 13px; color: var(--text-soft); font-size: var(--type-label); cursor: pointer; }
.drop-picks { display: grid; gap: 5px; max-height: 220px; margin: 0; padding: 0 13px 12px; list-style: none; overflow-y: auto; }
.drop-pick label { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; color: var(--muted); font-size: var(--type-label); line-height: 1.5; cursor: pointer; }
.drop-pick.is-disabled label { opacity: .5; cursor: not-allowed; }
.drop-pick em { color: var(--muted-2); font-style: normal; }

.drop-conflicts { display: grid; gap: 10px; padding: 0 13px 13px; }
.drop-conflict { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.drop-conflict legend { padding: 0 5px; color: var(--muted); font-size: var(--type-caption); }
.drop-conflict label { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 5px 0; cursor: pointer; }
.drop-conflict strong { display: block; color: var(--text-soft); font-size: var(--type-label); font-weight: 600; }
.drop-conflict small { display: block; color: var(--muted-2); font-size: var(--type-caption); line-height: 1.5; }

/* Inbox --------------------------------------------------------------------- */

.inbox-list { display: grid; gap: 13px; }

.inbox-card {
  display: grid;
  gap: 11px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 254, 251, .85);
}

.inbox-card-head { display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start; }
.inbox-card-head p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-card-head small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted-2); font-size: var(--type-caption); }

.inbox-suggestions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.inbox-suggestion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(247, 245, 252, .7);
}

.inbox-suggestion strong { display: block; color: var(--text-soft); font-size: var(--type-label); font-weight: 600; }
.inbox-suggestion small { display: block; margin-top: 3px; color: var(--muted-2); font-size: var(--type-caption); line-height: 1.5; }
.inbox-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-left: 37px; }
.inbox-card-actions select { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 254, 251, .9); font: inherit; font-size: var(--type-caption); }

/* Businesses and projects --------------------------------------------------- */

.context-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 13px; }

.context-card {
  display: grid;
  gap: 8px;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #8991aa);
  border-radius: 17px;
  background: rgba(255, 254, 251, .85);
}

.context-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.context-card h3 { margin: 3px 0 0; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.context-card p { margin: 0; color: var(--muted); font-size: var(--type-label); line-height: 1.55; }
.context-folder { color: var(--muted-2); font-size: var(--type-caption); overflow-wrap: anywhere; }
.context-counts { display: flex; gap: 9px; color: var(--muted-2); font-size: var(--type-caption); }

.context-form { padding: 18px 20px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(247, 245, 252, .6); }
.context-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 13px; }
.context-form-grid .is-wide { grid-column: 1 / -1; }
.context-form label { display: grid; gap: 6px; }
.context-form span { color: var(--muted); font-size: var(--type-caption); }
.context-form input,
.context-form textarea,
.context-form select { padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 254, 251, .9); font: inherit; font-size: var(--type-control); }

.detail-contexts { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
/* One owner for the chip. It used to be declared three times: an early rule capped it at
   180px and clipped the overflow, a later one made it a flex row, and the two together
   pushed the × out of the chip and cut it off — 62px of it, on a long idea title, with no
   way to click it. A flex container cannot ellipsise its own text, so the name carries the
   truncation and the button is told never to shrink. */
.context-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 11px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 254, 251, .8);
  color: var(--muted);
  font-size: var(--type-caption);
  /* A chip with no inner name element wraps rather than clips: nothing is ever hidden. */
  overflow-wrap: anywhere;
}

.context-chip > .chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-chip.is-primary { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-bright); font-weight: 600; }

/* Idea DNA — the most-read panel in the studio, so it gets the most room. ---- */

.dna-form { grid-template-columns: 1fr 1fr; gap: 18px; }
.dna-field { display: grid; gap: 7px; }
.dna-field > span { color: var(--text-soft); font-size: 14px; font-weight: 600; letter-spacing: .01em; }

.dna-form textarea {
  min-height: 118px;
  padding: 14px 16px;
  border-radius: 14px;
  /* Read as prose, not as a form field: bigger type, generous leading. */
  font-size: 15.5px;
  line-height: 1.72;
}

.dna-hint { color: var(--muted-2); font-size: var(--type-caption); line-height: 1.5; }
.dna-status { margin-top: 6px; color: var(--muted-2); font-size: var(--type-caption); }
.dna-intro p { font-size: var(--type-label); line-height: 1.6; }
.dna-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dna-note { color: var(--muted-2); font-size: var(--type-caption); line-height: 1.5; }

@media (min-width: 1240px) {
  .dna-form textarea { font-size: 16px; min-height: 132px; }
}

@media (max-width: 900px) {
  .dna-form { grid-template-columns: 1fr; }
  .dialog-grid,
  .context-form-grid { grid-template-columns: 1fr; }
  .drop-pair { grid-template-columns: 1fr; }
  .drop-arrow { justify-self: center; transform: rotate(90deg); }
  .thought-controls,
  .inbox-card-actions { padding-left: 0; }
}

.dna-proposal { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; padding: 7px 0; }
.dna-proposal strong { display: block; color: var(--text-soft); font-size: var(--type-label); }
.dna-proposal small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--type-caption); line-height: 1.5; }
.dna-current { color: var(--muted-2) !important; }

@media (prefers-reduced-motion: reduce) {
  .drag-ghost,
  .thought-card,
  .capture-mode,
  .drag-handle { transition: none !important; }
}

/* Clarify & Connect --------------------------------------------------------
   A calm observation from the organizer. One card, inline, never a modal:
   what was noticed, the evidence, one question, and answers that say what
   they would change before anything is applied. */

.clarify-card {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(82, 100, 183, 0.22);
  border-radius: 16px;
  background: rgba(240, 242, 252, 0.55);
}

.clarify-noticed { display: flex; gap: 12px; align-items: flex-start; }
.clarify-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(82, 100, 183, 0.3);
  border-radius: 50%;
  color: #4a5db5;
  font-size: var(--type-control);
  font-weight: 700;
}
.clarify-noticed small {
  display: block;
  color: #5264b7;
  font-size: var(--type-caption);
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.clarify-noticed p { margin: 4px 0 0; color: #4b4a47; font-size: var(--type-body); line-height: 1.55; }

.clarify-evidence { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.clarify-evidence li {
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  border-left: 2px solid rgba(82, 100, 183, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
}
.clarify-evidence-label { color: var(--muted); font-size: var(--type-caption); }
.clarify-evidence q { color: #55534f; font-size: var(--type-label); font-style: italic; line-height: 1.5; quotes: "\201C" "\201D"; }

.clarify-question { margin: 0; color: #26272b; font-family: var(--serif); font-size: 19px; line-height: 1.4; }

.clarify-choices { display: grid; gap: 8px; }
.clarify-choice {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid rgba(60, 55, 49, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.clarify-choice:hover:not(:disabled),
.clarify-choice:focus-visible { border-color: rgba(82, 100, 183, 0.5); background: rgba(244, 245, 253, 0.9); }
.clarify-choice:focus-visible { outline: 2px solid rgba(66, 87, 188, 0.4); outline-offset: 1px; }
.clarify-choice:disabled { opacity: 0.6; cursor: default; }
.clarify-choice strong { color: #37383b; font-size: var(--type-control); font-weight: 650; }
.clarify-choice small { color: var(--muted); font-size: var(--type-caption); line-height: 1.5; }

.clarify-footer { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.clarify-note { margin-right: auto; color: var(--muted); font-size: var(--type-caption); }

.clarify-preview {
  display: grid;
  gap: 4px;
  margin: 4px 0 8px;
  padding: 12px 14px;
  border: 1px solid rgba(82, 100, 183, 0.24);
  border-radius: 12px;
  background: rgba(240, 242, 252, 0.6);
}
.clarify-preview small { color: #5264b7; font-size: var(--type-caption); font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.clarify-preview p { margin: 0; color: #4b4a47; font-size: var(--type-label); line-height: 1.55; }

.clarify-home { margin: 22px 0; }
.clarify-home-list { display: grid; gap: 10px; margin-top: 14px; }
.clarify-card.is-compact { margin-bottom: 0; padding: 14px 16px; }
.clarify-card.is-compact .clarify-question { font-size: 16px; }

@media (max-width: 640px) {
  .clarify-card { padding: 14px; }
  .clarify-question { font-size: 17px; }
  .clarify-footer .secondary-button { width: 100%; }
}

/* Refactor 2026-08: Review, Organization Audit, compact Library, evidence-first
   Connections, simplified capture. Direct language, higher information density. */

/* Capture: one field, one button, options collapsed --------------------------- */

.capture-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  width: auto;
  border-radius: 999px;
}

.capture-submit-label {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

/* Local Only ------------------------------------------------------------------
   The old signal was a faint tint on an 11px pill, which is roughly the weight the studio
   gives a hint. This is a promise about where words go, so it is drawn at the weight of a
   mode: the ring goes round everything you are about to write, the field itself changes
   paper, and a sentence under it says what the lock actually does. Nothing here is a hover
   or a tooltip — the state has to be readable from across the desk. */

/* Off, it is still a control rather than a caption: bordered, filled, the same family as the
   other pills in the capture box. The old borderless grey read as a label nobody could press. */
.privacy-toggle {
  border-color: var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 600;
  padding: 9px 14px 9px 12px;
}

/* The input is off-screen for looks, so the label has to carry the focus ring itself. */
.privacy-toggle:has(input:focus-visible) {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.privacy-toggle:hover {
  border-color: var(--local-line);
  color: var(--local);
}

/* One padlock, two positions. Ticked and unticked is a fact about a checkbox; open and shut
   is a fact about the thing being asked for. */
.privacy-toggle-lock {
  display: inline-flex;
  flex: none;
}

.privacy-toggle-lock svg:last-child,
.privacy-toggle:has(input:checked) .privacy-toggle-lock svg:first-child {
  display: none;
}

.privacy-toggle:has(input:checked) .privacy-toggle-lock svg:last-child {
  display: block;
}

/* Filled, not tinted. `:has(input:checked)` outranks the hover rule above on its own, so the
   on state never washes out under the cursor that just set it. */
.privacy-toggle:has(input:checked) {
  border-color: var(--local);
  background: var(--local);
  color: var(--panel-solid);
  box-shadow: 0 2px 8px var(--local-halo);
}

.capture-shell.is-local {
  border-color: var(--local-line);
  box-shadow: 0 0 0 1px var(--local-line), 0 0 0 5px var(--local-halo), 0 14px 34px rgba(120, 86, 40, 0.12);
}

.capture-shell.is-local:focus-within {
  border-color: var(--local);
  background: transparent;
  box-shadow: 0 0 0 1px var(--local), 0 0 0 6px var(--local-halo), 0 16px 40px rgba(120, 86, 40, 0.17);
}

/* The field and its explanation are one card, so the corners meet where they join. */
.capture-shell.is-local .capture-form {
  background: var(--local-field);
  border-radius: 20px 20px 0 0;
}

.capture-shell.is-local .capture-input::placeholder {
  color: var(--local);
  opacity: 0.62;
}

.capture-local-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 12px 20px 13px 24px;
  border-top: 1px solid var(--local-line);
  border-radius: 0 0 20px 20px;
  background: var(--local-wash);
  color: var(--local);
  font-size: var(--type-label);
  line-height: 1.55;
  animation: local-note-in 200ms ease-out;
}

.capture-local-note[hidden] { display: none; }
.capture-local-note strong { color: var(--local-strong); font-weight: 650; }

.capture-local-note svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.capture-local-note .link-button {
  color: var(--local-strong);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@keyframes local-note-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .capture-local-note { animation: none; }
}

/* The note lines up with the field above it, and the field loses its left inset down here. */
@media (max-width: 620px) {
  .capture-local-note { padding: 11px 16px 12px 18px; }
}

/* The receipt keeps the promise after the box has gone back to normal. */
.capture-receipt li.is-local span:first-child { color: var(--local); }
.capture-receipt li.is-local svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.capture-more { margin-top: 10px; }

.capture-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 6px 4px;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}

.capture-more-toggle:hover { color: var(--text); }
.capture-more-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 160ms ease; }
.capture-more-toggle svg.is-open { transform: rotate(180deg); }
.capture-more-summary { font-style: normal; color: var(--violet); }

.capture-options {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
  display: grid;
  gap: 12px;
}

.capture-option-row { display: grid; gap: 8px; }
.capture-option-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.capture-mode-hint { margin: 0; font-size: 13px; color: var(--muted); }

.capture-receipt-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.receipt-move { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.receipt-move select { max-width: 240px; }

.home-review-note { margin-top: 18px; }

/* Review ---------------------------------------------------------------------- */

.review-section { margin-top: 30px; }
.review-section .inbox-list { margin-top: 14px; }
.audit-list { display: grid; gap: 14px; margin-top: 14px; }

.audit-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-solid);
  padding: 18px;
}

.audit-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.audit-head strong { font-size: 15.5px; line-height: 1.4; }

.audit-kind {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--violet);
  background: var(--violet-soft);
  border-radius: 999px;
  padding: 3px 10px;
}

.audit-detail { margin: 8px 0 0; font-size: 14px; color: var(--text-soft); }

.audit-evidence {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.audit-evidence q {
  quotes: "\201C" "\201D";
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  border-left: 2px solid var(--line-strong);
  padding-left: 10px;
}

.audit-actions { display: grid; gap: 8px; margin-top: 14px; }

.audit-choice {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  display: grid;
  gap: 2px;
}

.audit-choice:hover { border-color: var(--line-strong); }
.audit-choice strong { font-size: 14px; }
.audit-choice small { font-size: 12.5px; color: var(--muted); }
.audit-choice.is-quiet { background: none; border-style: dashed; }

.review-connection {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-solid);
  padding: 16px 18px;
}

.review-connection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.review-connection-head strong { font-size: 15px; }
.review-connection-kind { font-size: 12.5px; color: var(--muted); }
.review-connection .form-row { margin-top: 10px; }

.deferred-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.deferred-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; }

/* Compact library --------------------------------------------------------------- */

.library-toolbar { gap: 10px; flex-wrap: wrap; }

/* Filter menus are native selects on purpose — they open the platform's own list, which is
   the one thing a hand-built menu never gets right on a touch screen. What they were missing
   was the studio's shape: unstyled, they rendered 22px tall beside a 48px search field, which
   is both a crooked line and a target too small to hit. */
.library-filter select,
.connections-filterbar select {
  min-height: 40px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-solid);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--type-label);
  cursor: pointer;
}

.library-filter select:focus-visible,
.connections-filterbar select:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.library-filter select { min-width: 130px; }

@media (hover: none) {
  .library-filter select,
  .connections-filterbar select { min-height: 44px; }
}

.library-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.library-view-toggle button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--muted);
}

.library-view-toggle button.is-active { background: var(--violet-soft); color: var(--violet); }

.library-overflow { position: relative; display: inline-block; }

.library-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--layer-menu);
  min-width: 200px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: grid;
}

.library-overflow-menu button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.library-overflow-menu button:hover { background: var(--violet-soft); }

.library-rows { display: grid; gap: 6px; }

.library-row-wrap { position: relative; }

.library-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--violet));
  border-radius: 12px;
  background: var(--panel-solid);
  /* The right gutter holds the drag handle and, beside it, the pin. */
  padding: 8px 70px 8px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.library-row:hover { border-color: var(--line-strong); border-left-color: var(--accent, var(--violet)); }

.row-dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #888888) 14%, transparent);
  color: var(--accent, var(--violet));
  font-size: 14px;
  margin-top: 1px;
}

.row-main { display: grid; gap: 2px; min-width: 0; }

.row-title { font-weight: 600; font-size: 14.5px; line-height: 1.3; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.row-title.is-working-name::after { content: "working name"; font-size: 11px; font-weight: 500; color: var(--gold); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; }

.row-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.row-lock { color: var(--muted); display: inline-flex; }
.row-flag { color: var(--gold); font-size: 10px; }
.row-dependency { color: var(--violet); font-style: normal; font-size: 13px; }

.row-summary {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Wider viewports have room for the second summary line the spec allows. */
@media (min-width: 1500px) {
  .row-summary { -webkit-line-clamp: 2; }
}

.row-latest { font-size: 12px; line-height: 1.4; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row-meta { display: flex; flex-wrap: wrap; gap: 9px; font-size: 11.5px; line-height: 1.4; color: var(--muted-2); margin-top: 1px; align-items: center; }
.row-context { color: var(--violet); background: var(--violet-soft); border-radius: 999px; padding: 1px 8px; }
.row-status { color: var(--text-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.row-reason { color: var(--gold); }

/* The row's own gutter, on the same pattern as the card's rails: two controls across the
   top and one below, all measured from one size so a bigger touch target moves them
   together instead of stacking them on top of each other. */
.library-row-wrap {
  --control-size: 26px;
  --row-inset: 8px;
}

.library-row-wrap .drag-handle,
.library-row-wrap .combine-pick,
.library-row-wrap .idea-pin {
  width: var(--control-size);
  height: var(--control-size);
}

.library-row-wrap .drag-handle { position: absolute; top: var(--row-inset); right: var(--row-inset); margin: 0; }
.library-row-wrap .combine-pick { position: absolute; top: calc(var(--row-inset) + var(--control-size) + 5px); right: var(--row-inset); }

/* Pinning an idea to the top ------------------------------------------------------ */

/* The same family as the drag handle and the combine badge: a sibling of the card, never
   inside it, because the card is already one button. Out of the way until the row is hovered
   or focused, and permanently lit once the pin is in — the filled glyph is the only thing on
   screen saying why this row sits above a more recently touched one. */
.idea-pin {
  position: absolute;
  z-index: var(--layer-control);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-solid);
  color: var(--muted-2);
  opacity: 0;
  cursor: pointer;
  transition: opacity 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.pin-glyph {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.idea-pin:hover { border-color: var(--line-strong); color: var(--text-soft); }
.idea-pin:focus-visible { opacity: 1; outline: 2px solid var(--violet); outline-offset: 2px; }

.library-card-wrap:hover .idea-pin,
.library-card-wrap:focus-within .idea-pin,
.library-row-wrap:hover .idea-pin,
.library-row-wrap:focus-within .idea-pin,
.idea-pin.is-pinned { opacity: 1; }

/* Solid, not tinted: on a gallery card the badge sits over the card's own artwork, and a
   translucent violet would read as whatever colour happened to be behind it. The ring and the
   filled glyph carry the state instead. */
.idea-pin.is-pinned {
  border-color: var(--violet);
  background: var(--panel-solid);
  color: var(--violet);
}

/* Filled once it is in: an outlined pin is the offer, a filled one is the state. */
.idea-pin.is-pinned .pin-glyph { fill: currentColor; }

/* On a card the pin sits below the combine badge in the right rail — the rails are declared
   with the card's other control zones further up, because the card's own labels have to read
   the same numbers. On a row there is no artwork to sit on: the lock rides inside the title,
   and the pin sits beside the drag handle in the gutter the row's padding reserves. */
.library-row-wrap > .idea-pin { top: var(--row-inset); right: calc(var(--row-inset) + var(--control-size) + 4px); }

/* A pinned entry carries its accent a little heavier. With the pinned heading gone this is
   the only thing besides the filled pin that separates the front of the list from the rest,
   so the gallery card has to say it too, not just the compact row. */
.library-row-wrap.is-pinned .library-row,
.library-card-wrap.is-pinned .idea-card { border-color: var(--line-strong); }

/* No hover to reveal them on touch, and both have to be reachable there too. The combine
   badge was the one control on a card with no touch route at all: hover revealed it,
   focus revealed it, and a finger has neither. */
@media (hover: none) {
  .idea-pin,
  .combine-pick { opacity: 1; }
}

/* The same toggle on the open idea, where it is a labelled button rather than a badge. */
.detail-pin .pin-glyph { width: 14px; height: 14px; }
.detail-pin.is-pinned { color: var(--violet); border-color: var(--line-strong); background: var(--violet-soft); }
.detail-pin.is-pinned .pin-glyph { fill: currentColor; }

/* Connections ---------------------------------------------------------------------
   Four regions, in one order, at every width: the filters, the plate, the caption that says
   what the plate does and does not draw, and the same connections written out in words. The
   page used to be a 440px band of empty paper whatever was on it, a caption in 10px grey, and
   a list of shrink-to-fit buttons that each ended somewhere different. */

/* The filters are a toolbar, not a form. Each one keeps its label beside it so the row can
   wrap onto two lines without a label ever losing its control. */
.connections-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 4px 0 20px;
}

.connections-filterbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--type-label);
}

.connections-filterbar select { max-width: min(100%, 44ch); }

/* The plate --------------------------------------------------------------------------
   Height comes from what is on it. `--cg-h` is measured off the lowest disc plus the room
   two lines of label need, so twelve ideas do not sit in a canvas built for sixty, and sixty
   are not squeezed into a canvas built for twelve. */
.cg-plate {
  margin: 0;
  padding: 18px 0 0;
  border: 1px solid rgba(63, 56, 47, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 51% 46%, rgba(63, 84, 175, 0.055), transparent 42%),
    rgba(255, 253, 249, 0.44);
}

.cg-field {
  position: relative;
  width: var(--cg-w);
  height: var(--cg-h);
  margin: 0 auto;
  padding-inline: var(--cg-pad);
  box-sizing: content-box;
  /* The order the discs and their names are painted in is the field's own business. Isolating
     it keeps those numbers off the layering ladder, where they would mean nothing. */
  isolation: isolate;
}

/* The fibres are a picture of the connections, not a target. Without this the SVG box covers
   the whole field and takes every pointer event meant for a disc underneath it. */
.cg-lines {
  position: absolute;
  inset: 0 var(--cg-pad);
  overflow: visible;
  pointer-events: none;
}

.cg-edge { color: rgba(41, 75, 193, 0.72); transition: color 160ms ease, opacity 160ms ease; }
.cg-edge.is-candidate { color: rgba(90, 86, 80, 0.7); }
.cg-edge.is-lit { color: rgba(41, 75, 193, 0.95); }

/* An idea is a disc with its name under it. Inline style carries position and radius only —
   the transform lives here, so nothing in the stylesheet ever fights an inline transform. */
.cg-node {
  position: absolute;
  top: var(--cg-pad-top);
  left: var(--cg-pad);
  z-index: var(--z, 1);
  display: grid;
  justify-items: center;
  gap: 7px;
  width: calc(2 * var(--cg-pad));
  margin-left: calc(-1 * var(--cg-pad));
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* The disc, not the whole button, sits on the point the layout chose: the name hangs below
     it. Lifting by the radius rather than by half the button keeps that true whatever the
     label wraps to. */
  transform: translate(var(--nx), var(--ny)) translateY(calc(-1 * var(--r))) scale(var(--cg-scale, 1));
  transition: transform 160ms ease, opacity 260ms ease;
  /* The button's box is as wide as a name may need, which is far wider than the marks in it.
     Only the disc and the chip take the pointer, so the empty air beside a short name is not a
     silent hit target for the wrong idea. Hover still reaches the button through its child. */
  pointer-events: none;
}

/* The disc is the target and the name is a caption. Letting the chip take the pointer too
   sounded generous until a name painted over its neighbour started swallowing that neighbour's
   own disc. The layout keeps discs at least 2r + 24 apart, so a 44px box around each one can
   never reach another. */
.cg-node .cg-soma {
  position: relative;
  pointer-events: auto;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 1.5px solid rgba(54, 49, 42, 0.34);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 6px 16px rgba(83, 67, 44, 0.055);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* What a keeper absorbed, drawn inside its own outline rather than as more lines outside it.
   The plan caps the count by the radius that holds them and says so in the caption. */
.cg-rings {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.cg-rings circle {
  fill: none;
  stroke: rgba(54, 49, 42, 0.26);
  stroke-width: 1;
}

.cg-node .cg-soma::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* Dashed means noticed, never decided — the same reading the dashed fibre carries. */
.cg-node.is-candidate .cg-soma { border-style: dashed; }

/* A label on a paper chip rather than a text shadow: it sits over fibres, and Georgia under
   14px goes furry the moment it is shadowed. Two lines, then it stops — with the full title
   on the button itself, so nothing is only available to a pointer. */
.cg-label {
  display: -webkit-box;
  max-width: 100%;
  padding: 1px 6px;
  overflow: hidden;
  /* A hairline so that where two names do land on each other — the collide radius keeps discs
     apart, not labels — the one in front reads as being in front rather than as a smudge. */
  border: 1px solid rgba(63, 56, 47, 0.08);
  border-radius: 5px;
  background: rgba(251, 248, 242, 0.96);
  color: #24262a;
  font-family: var(--serif);
  font-size: var(--type-control);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Whatever is being pointed at or tabbed to comes to the front of its neighbours. */
.cg-node:hover,
.cg-node:focus-visible,
.cg-node.is-lit { z-index: 999; }
.cg-node:hover { --cg-scale: 1.04; }
.cg-node:hover .cg-soma,
.cg-node.is-lit .cg-soma { border-color: rgba(41, 75, 193, 0.8); }
.cg-node:focus-visible { --cg-scale: 1.06; outline: 2px solid var(--violet); outline-offset: 4px; }

/* Lighting one connection is done by dimming the rest, so the shape of the map survives it. */
.connections-page.is-lighting .cg-node:not(.is-lit),
.connections-page.is-lighting .cg-edge:not(.is-lit) { opacity: 0.22; }

/* Ideas with nothing to quote are named, not hidden. A young library is mostly this, and a
   map that quietly left them out would be the page's own claim about itself, broken. */
.cg-band {
  padding: 6px 22px 4px;
  border-top: 1px solid rgba(63, 56, 47, 0.1);
  margin-top: 10px;
}

.cg-band-heading {
  margin: 12px 0 10px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cg-band-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 12px;
}

.cg-quiet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  min-height: 32px;
  padding: 3px 11px 3px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.6);
  color: var(--muted);
  font: inherit;
  font-size: var(--type-caption);
  cursor: pointer;
}

.cg-quiet .cg-soma {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(54, 49, 42, 0.2);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.94);
}

.cg-quiet-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-quiet:hover { border-color: var(--line-strong); color: var(--text-soft); }

/* The caption is the honesty channel: it sits under the plate, in sentences, and states what
   is drawn and what is not. Secondary weight, but never microscopic — a person has to be able
   to check it. */
.cg-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px 22px 16px;
  border-top: 1px solid rgba(63, 56, 47, 0.1);
  color: var(--muted);
  font-size: var(--type-caption);
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}

.cg-counts { color: var(--text-soft); }
.cg-notice { max-width: 78ch; }

.cg-fallback {
  margin: 0;
  padding: 26px 22px 30px;
  color: var(--muted);
  font-size: var(--type-control);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .cg-node,
  .cg-node .cg-soma,
  .cg-edge { transition: none; }
  .cg-node:hover,
  .cg-node:focus-visible { --cg-scale: 1; }
}

/* The list ---------------------------------------------------------------------------- */

.relationship-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 0 14px;
}

.relationship-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
}

.relationship-row-wrap { border-radius: 14px; }
.relationship-row-wrap.is-selected { outline: 1px solid var(--line-strong); }

/* The row is lit from the plate as well as from the pointer, and the rule on the left is what
   says which of the two you are looking at. */
.relationship-row-wrap.is-lit .relationship-row { border-color: var(--line-strong); }
.connections-page.is-lighting .relationship-row-wrap:not(.is-lit) { opacity: 0.45; }

.relationship-kind.is-confirmed { color: var(--violet); }
/* The count of quotes, where a confidence percentage used to sit. A fact, so not italicised. */
.relationship-note em { font-style: normal; white-space: nowrap; }

.relationship-evidence {
  padding: 4px 18px 16px;
  background: var(--panel-soft);
  border-radius: 0 0 14px 14px;
}

.relationship-evidence > small {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.relationship-evidence .form-row { margin-top: 12px; flex-wrap: wrap; }

/* No viewBox on the SVG, so one user unit is one CSS pixel and a stroke is the same weight
   whichever way the line runs. There is no marker: an arrowhead would be claiming a direction
   the stored pair does not have. */

/* Dismissed connections, folded away behind their own count until asked for. */
.relationship-dismissed { margin-top: 18px; }
.relationship-dismissed-list {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.relationship-dismissed-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 2px;
  color: var(--muted);
  font-size: var(--type-label);
}

/* Organization: project folders ---------------------------------------------------- */

.pulse-panel { display: grid; gap: 12px; justify-items: start; margin-top: 12px; }
.pulse-panel .signal-list { width: 100%; }

/* Mobile capture-first refinements --------------------------------------------------- */

@media (max-width: 620px) {
  .capture-shell { margin-top: 4px; }
  .capture-input { min-height: 72px; font-size: 16px; }
  .capture-submit { min-height: 46px; }
  .privacy-toggle { min-height: 44px; }
  .capture-more-toggle { min-height: 40px; }
  .home-actions .assistant-orb-button { width: 42px; height: 42px; }
  .library-row { padding-right: 44px; }
  .connections-filterbar { gap: 8px; }
  /* One filter per line, and the menus all start and end in the same place: three controls
     that each stopped where their longest option happened to stop read as a mistake. */
  .connections-filterbar label { flex: 1 1 100%; }
  .connections-filterbar label > span { flex: none; width: 4.5rem; }
  .connections-filterbar select { flex: 1; max-width: none; }
  .capture-receipt-controls { gap: 8px; }
  .receipt-move { flex: 1 1 100%; }
  .receipt-move select { flex: 1; max-width: none; }
}

/* Name settling ---------------------------------------------------------------
   One working name at a time, in the same calm card language the audit uses. */

.names-modal {
  position: relative;
  z-index: 2;
  width: min(640px, 94vw);
  max-height: 90vh;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--panel-solid);
  box-shadow: 0 30px 70px rgba(40, 34, 28, .26);
  overflow-y: auto;
  animation: fade-in 180ms ease;
}

.names-inner { padding: 26px 28px 22px; }

.names-current {
  margin: 5px 0 6px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: underline dotted var(--violet-soft);
  text-underline-offset: 6px;
}

.names-summary { margin: 0 0 14px; color: var(--muted); font-size: var(--type-label); line-height: 1.6; }

#names-custom-form { display: flex; gap: 9px; margin-top: 14px; }
#names-custom-form input {
  flex: 1;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--type-control);
}

.names-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }

.names-entry { display: grid; gap: 10px; justify-items: start; }
.names-entry p { margin: 0; }

.names-entry-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--type-label);
}

/* The same pill the library rows wear, for the open idea and anywhere else inline. */
.working-name-chip {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gold);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}

/* Thought-level search results ------------------------------------------------
   Hits inside thought text, each pointing back at its idea — or at Review when
   the thought is still unplaced. */

.thought-search-list { display: grid; gap: 8px; margin-top: 10px; }

.thought-search-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}

.thought-search-kind {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  color: var(--violet);
  font-size: 12px;
  flex: none;
  margin-top: 1px;
}

.thought-search-main { display: grid; gap: 4px; min-width: 0; }
.thought-search-main p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.thought-search-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.thought-search-links .row-lock svg { width: 12px; height: 12px; }

/* Inky's face ---------------------------------------------------------------
   The ink-squid mark lives only on Inky's surfaces: the orb button, the panel
   heading, and the empty-thread state. It is stroked in currentColor, so each
   surface's own color decision carries it; these rules sit at the end of the
   sheet deliberately, after the duplicated .assistant-* blocks, so they win. */

.inky-mark { display: block; width: 24px; height: auto; }
.assistant-orb-button .inky-mark { width: 22px; }
.think-orb .inky-mark { width: 26px; }
/* The orbit rings belong to the old glyph; the squid arrives alone. */
.think-orb.has-inky::before,
.think-orb.has-inky::after { content: none; }

.inky-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: auto;
  padding: 30px 20px;
  color: var(--muted);
  text-align: center;
}
.inky-empty .inky-mark { width: 46px; opacity: .75; }
.inky-empty p { margin: 0; max-width: 320px; font-size: var(--type-label); line-height: 1.55; }

/* Ink in motion: the busy indicator is three drops of ink falling, CSS only. */
.inky-busy { display: inline-flex; align-items: center; gap: 5px; }
.inky-busy-text { margin-left: 4px; }
.ink-drip {
  width: 5px;
  height: 5px;
  border-radius: 50% 50% 50% 0;
  background: currentColor;
  opacity: .3;
  transform: rotate(-45deg);
  animation: inky-drip 1.2s ease-in-out infinite;
}
.ink-drip:nth-child(2) { animation-delay: .2s; }
.ink-drip:nth-child(3) { animation-delay: .4s; }
@keyframes inky-drip {
  0%, 100% { transform: rotate(-45deg) translate(0, 0); opacity: .25; }
  50% { transform: rotate(-45deg) translate(2px, 2px); opacity: .8; }
}

/* The chips beneath a "where would this go?" answer. Prose quotes words; only a chip may
   carry a percentage, and only past the studio's single confidence gate. */
.assistant-placement { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 2px 0 8px; }
.assistant-placement > span { color: var(--muted-2); font-size: var(--type-caption); letter-spacing: .08em; text-transform: uppercase; }
.assistant-placement .context-chip { cursor: pointer; }

/* Inky's proposal preview card: the house dialog grammar inside the thread — quoted
   evidence, the exact writes, one confirm that names the action, "Not now" to cancel. */
.assistant-proposal {
  margin: 4px 0 8px;
  padding: 14px 16px;
  border: 1px solid rgba(45, 78, 185, 0.22);
  border-radius: 13px;
  background: rgba(255, 253, 249, 0.82);
  color: #3a3f52;
}
.assistant-proposal .proposal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.assistant-proposal .proposal-head strong { font-size: var(--type-control); color: #2e4cba; }
.assistant-proposal .proposal-head span { color: var(--muted); font-size: var(--type-caption); }
.proposal-writes { display: grid; gap: 8px; margin: 0 0 11px; padding: 0; list-style: none; }
.proposal-writes li { display: grid; gap: 2px; padding-left: 10px; border-left: 2px solid rgba(45, 78, 185, 0.28); }
.proposal-writes li strong { font-size: var(--type-label); font-weight: 600; }
.proposal-writes li small { color: var(--muted); font-size: var(--type-caption); line-height: 1.45; }
.proposal-writes li q { font-style: italic; }
.proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.proposal-actions .proposal-note { flex-basis: 100%; color: var(--muted-2); font-size: var(--type-caption); }

/* A faint ink-blot accent, reserved for Inky's proposal preview card. The card itself
   arrives with the action previews; its dress ships with the face. */
.inky-proposal { position: relative; overflow: hidden; }
.inky-proposal::before {
  content: "";
  position: absolute;
  top: -22px;
  right: -18px;
  width: 90px;
  height: 90px;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: radial-gradient(closest-side, currentColor, transparent 70%);
  opacity: .05;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ink-drip { animation: none; opacity: .6; }
}

/* The panel's session controls (Decision 9): the topbar names its thread, the picker
   lists recent conversations read-only, and a studio thread's chips take input. New
   styles live at the end of the file on purpose, so they win over the duplicated
   .assistant-* blocks above. */
/* The bar holds a thread name of unknown length and three controls. It wraps as a whole
   rather than breaking "New conversation" across two lines inside a button. */
.panel-topbar { flex-wrap: wrap; }
.panel-topbar .thread-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.panel-topbar .thread-actions .text-button { white-space: nowrap; }
/* A conversation named after the question it opened with is longer than "Studio Inky" ever
   was, so the name clips and the time beside it does not: when a person is choosing between
   conversations, when they last spoke in this one is the fact the clip must not eat. */
.panel-topbar .thread-identity {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  max-width: 56%;
}
.panel-topbar .saved-thread {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-topbar .thread-when { flex: none; }
.thread-picker {
  margin: 2px 18px 6px;
  border: 1px solid rgba(45, 78, 185, 0.18);
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.92);
  display: grid;
  max-height: 200px;
  overflow-y: auto;
}
.thread-picker-empty { margin: 0; padding: 10px 14px; color: var(--muted); font-size: var(--type-caption); }
/* Every level of this row has to be allowed to shrink: a conversation named after a real
   question is longer than the panel is wide, and a flex or grid child refuses to go below
   its content unless it is told to. Without this the name pushes a horizontal scrollbar
   across the picker and shoves the recency and the delete out of sight. */
.thread-picker-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-right: 8px;
  border-bottom: 1px solid rgba(45, 78, 185, 0.08);
}
.thread-picker-open {
  display: flex;
  flex: 1;
  min-width: 0;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.thread-picker-row:last-child { border-bottom: 0; }
.thread-picker-row:hover { background: rgba(45, 78, 185, 0.06); }
.thread-picker-row.is-current { background: rgba(45, 78, 185, 0.09); }
.thread-picker-row strong { flex: 0 1 auto; min-width: 0; font-size: var(--type-label); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-picker-row span { flex: none; color: var(--muted); font-size: var(--type-caption); white-space: nowrap; }
/* Present but quiet until the row is under the cursor: deleting a conversation is not what
   this list is for, and a row of ×s reads as a list of things to get rid of. */
.thread-picker-delete { flex: none; width: 24px; height: 24px; opacity: 0; color: var(--muted); }
.thread-picker-row:hover .thread-picker-delete,
.thread-picker-delete:focus-visible { opacity: 1; }
.thread-picker-delete:hover { color: var(--danger); }
.context-chip .chip-remove {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: -2px -6px -2px 1px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .55;
  padding: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.context-chip .chip-remove:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; opacity: 1; }
.context-chip .chip-remove:hover { opacity: 1; }
.context-add {
  border: 1px dashed rgba(45, 78, 185, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: var(--type-caption);
  padding: 3px 10px;
  max-width: 150px;
  cursor: pointer;
}

/* The sidebar door to Inky — an Inky surface like the home orb, so it carries the mark. */
.sidebar .inky-door .inky-mark { width: 20px; height: 26px; }
.sidebar .inky-door:hover { color: #2e4cba; }

/* Focus you can see -------------------------------------------------------------
   Six fields switch their outline off outright so a mouse click does not leave a ring
   on a text box. That is a reasonable thing to want and the wrong way to get it: the
   ring is also the only thing telling a keyboard user where they are, and `:focus` does
   not know the difference between the two. `:focus-visible` does, so the ring comes back
   for exactly the case it was built for. Last in the file on purpose — it has to outrank
   the `outline: 0` that each of those fields declares on itself. */
button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* The scrim is a button only so that clicking away closes the panel; it covers the whole
   viewport, and a ring around the whole viewport says nothing. */
.overlay-scrim:focus-visible {
  outline: 0;
}

/* Targets a finger can find ------------------------------------------------------
   Three controls stayed at the size of the glyph inside them rather than the size of the
   thing a person has to hit. The pill and the menu simply grow; the × inside a chip cannot
   grow without changing the chip, so it keeps a hit box larger than its ink. */
.privacy-badge {
  min-height: 32px;
}

.context-add {
  min-height: 32px;
}

.context-chip .chip-remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}


@media (hover: none) {
  .privacy-badge,
  .context-add { min-height: 40px; }
}

/* The line at the foot of Home ----------------------------------------------------
   A quote at the very bottom of the page, centred, in the serif the studio keeps for things
   that are read rather than operated. It is the quietest thing on the page on purpose, and it
   is down there rather than beside the field because a line of somebody else's words next to
   the box you are writing your own in competes with them. The button turns to the next one.

   `margin-top: auto` is what holds it at the foot: the leftover height of the page collects
   above it, so the quote sits on the bottom edge while everything else stays anchored to the
   top. When Review fills the column and there is no leftover height, the auto margin resolves
   to nothing and the quote simply follows the content down the scroll. */
.home-quote {
  width: min(100%, 700px);
  margin: auto auto 0;
  padding-top: 30px;
  text-align: center;
}

/* A short brass rule, centred, instead of a border round a box: at the foot of a page a panel
   reads as something floating there, and this reads as the end of the page. */
.home-quote::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 20px;
  background: linear-gradient(90deg, transparent, rgba(192, 138, 69, 0.6), transparent);
}

.home-quote-body {
  margin: 0;
  /* Two lines and an attribution, so the brass rule above holds its place as the quotes
     change length rather than stepping up and down the page every twenty seconds. */
  min-height: 78px;
}

.home-quote-body p {
  margin: 0;
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--text-soft);
}

.home-quote-cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 0;
}

.home-quote-cite cite {
  font-family: var(--sans);
  font-size: var(--type-caption);
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.home-quote-body.is-fresh {
  animation: quote-turn 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes quote-turn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.home-quote-next {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}

.home-quote:hover .home-quote-next,
.home-quote-next:focus-visible {
  opacity: 1;
  color: var(--violet);
  border-color: var(--line);
}

@media (hover: none) {
  /* Nothing hovers on a touch screen, so the control is simply present. */
  .home-quote-next { opacity: 0.75; width: 38px; height: 38px; }
}

@media (max-width: 720px) {
  .home-quote { padding-top: 24px; }
  .home-quote-body { min-height: 0; }
  .home-quote-body p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-quote-body.is-fresh { animation: none; }
}

/* Home, composed -----------------------------------------------------------------
   Everything below is about one page. The studio's work — the field, whatever is waiting, the
   door to Review — holds the left. The right is what you look at while you are choosing your
   words: an instrument that measures nothing and a line worth reading. The two are kept apart
   because they are different kinds of thing, and because the capture field is the reason the
   page exists and must never have to share its width. */

/* A column the full height of the view, so the quote at the end of it can sit on the bottom
   edge. Everything else is laid out from the top down and stays where it was put. */
.calm-home {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.calm-home > * {
  position: relative;
  z-index: 1;
}

/* A warm wash behind the top of the page, so the paper has a light source rather than being
   flat. Two very soft pools, drifting slowly enough that you would have to stare to catch it. */
/* Inset to the page's own edges, never past them: a decorative layer that widens the page is
   a horizontal scrollbar on every screen. The pools inside are clipped by this box instead. */
.home-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-aura i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(48px);
}

/* Warm behind the instrument, cool behind the field: the two pools sit under the composition
   rather than over the top of the page, so the paper has a light source where the eye goes. */
.home-aura i:first-child {
  top: 6%;
  right: -4%;
  width: 660px;
  height: 520px;
  background: radial-gradient(circle, rgba(226, 195, 143, 0.36), rgba(226, 195, 143, 0) 68%);
  animation: aura-drift-a 46s ease-in-out infinite alternate;
}

.home-aura i:last-child {
  top: 34%;
  left: -12%;
  width: 620px;
  height: 480px;
  background: radial-gradient(circle, rgba(122, 142, 224, 0.19), rgba(122, 142, 224, 0) 70%);
  animation: aura-drift-b 58s ease-in-out infinite alternate;
}

@keyframes aura-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-46px, 30px, 0) scale(1.09); }
}

@keyframes aura-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to { transform: translate3d(40px, -26px, 0) scale(1); }
}

/* The wordmark ----------------------------------------------------------------- */

/* Ink that is not one flat black. The gradient is slight — three shades of near-black — and
   what it buys is that the letterforms read as printed rather than as filled. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .calm-home .wordmark h1 {
    background: linear-gradient(166deg, #14161a 8%, #24272e 54%, #3b3740 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* The gold spark from the studio's own icon, in front of the tagline. */
.calm-home .wordmark > span::before {
  content: "✦";
  margin-right: 8px;
  color: #c08a45;
  font-size: 10px;
  vertical-align: 1px;
}

/* The two columns -------------------------------------------------------------- */

.home-columns {
  display: block;
}

.home-main {
  min-width: 0;
}

.home-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-top: 38px;
}


@media (min-width: 1120px) {
  .home-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 56px;
    align-items: start;
  }
  .home-rail { margin-top: 4px; }
  /* The capture box no longer needs to hold the whole width apart from what follows it. */
  .calm-home .capture-shell { margin-bottom: 30px; }
}

/* On a screen with room to spare the composition is dropped a little way down the page, which
   is the difference between a page that was laid out and one that was filled from the top.

   It is a fixed offset and never a share of the leftover height. Centring by leftover height
   was tried and is wrong here for one concrete reason: opening More options makes the column
   taller, the leftover shrinks, and every centred thing above it slides upward — so the
   capture box walks out from under the cursor of the person who just clicked it. A control
   that moves the field it belongs to is worse than an off-centre page. */
@media (min-width: 1120px) and (min-height: 720px) {
  .calm-home > .page-header { margin-top: 9vh; }
}

/* The capture box --------------------------------------------------------------- */

/* Elevation, not decoration: the field is the one thing on Home a person came to use, so it
   sits above the paper on a real shadow and blooms when the cursor is in it. Local Only keeps
   its own brass treatment untouched — a privacy state must never be restyled by a polish pass. */
.calm-home .capture-shell:not(.is-local) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 252, 246, 0.28));
  border-color: rgba(75, 66, 54, 0.15);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(84, 68, 45, 0.04),
    0 18px 44px rgba(84, 68, 45, 0.08);
  transition: box-shadow 280ms ease, border-color 280ms ease;
}

.calm-home .capture-shell:not(.is-local):focus-within {
  border-color: rgba(39, 75, 193, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 4px rgba(39, 75, 193, 0.06),
    0 22px 54px rgba(45, 60, 120, 0.11);
}

.calm-home .capture-shell:not(.is-local) .capture-form {
  background: rgba(255, 253, 249, 0.9);
}

/* The orrery -------------------------------------------------------------------- */

.orrery-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.orrery {
  --a1: 0deg;
  --a2: 0deg;
  --a3: 0deg;
  --a4: 0deg;
  --heat: 0;
  width: min(240px, 64vw);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: grab;
  /* A drag on a touch screen turns the instrument instead of scrolling the page out from
     under the finger doing the turning. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.orrery:active,
.orrery.is-held-by-hand { cursor: grabbing; }

.orrery:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 7px;
}

.orrery svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 32px rgba(84, 68, 45, 0.13));
  transition: filter 320ms ease;
}

.orrery:hover svg { filter: drop-shadow(0 20px 40px rgba(84, 68, 45, 0.19)); }

.orrery-plate { fill: url(#orrery-plate-fill); }

.orrery-rim {
  fill: none;
  stroke: rgba(75, 66, 54, 0.15);
  stroke-width: 1;
  transition: stroke 320ms ease;
}

.orrery:hover .orrery-rim { stroke: rgba(75, 66, 54, 0.26); }

/* The plate warms as it turns. This is the only reward for flicking it hard, and it is the
   reason the physics reports a heat at all. */
.orrery-heat { opacity: var(--heat); }

/* One angle drives four rings at four rates, two of them backwards. Rotating about the
   viewBox's centre rather than each group's own bounding box matters: a ring carrying a bead
   is not centred on its own contents, and spinning it about that centre would wobble. */
.orrery-ring,
.orrery-drift,
.orrery-bearing,
.orrery-spark {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.orrery-r1 { transform: rotate(var(--a1)); }
.orrery-r2 { transform: rotate(var(--a2)); }
.orrery-r3 { transform: rotate(var(--a3)); }
.orrery-r4 { transform: rotate(var(--a4)); }

/* Sixty brass ticks. Ticks are what make rotation legible — a plain circle spinning is a
   circle standing still — and the dash figures are the circumference divided sixty ways. */
.orrery-ticks {
  fill: none;
  stroke: rgba(138, 106, 62, 0.5);
  stroke-width: 5;
  stroke-dasharray: 1.4 7.606;
}

.orrery-arcs {
  fill: none;
  stroke: rgba(41, 75, 193, 0.32);
  stroke-width: 1.4;
  stroke-dasharray: 74 32.8;
  stroke-linecap: round;
}

.orrery-gimbal {
  fill: none;
  stroke: rgba(41, 75, 193, 0.26);
  stroke-width: 1.1;
}

.orrery-inner {
  fill: none;
  stroke: rgba(150, 112, 60, 0.42);
  stroke-width: 1;
}

.orrery-bead { fill: #2f4fb8; }
.orrery-bead.is-brass { fill: #c08a45; }
.orrery-bead.is-small { fill: rgba(41, 75, 193, 0.5); }

.orrery-bearing { transform: scale(calc(1 + var(--heat) * 0.09)); }

.orrery-core {
  fill: url(#orrery-core-fill);
  filter: drop-shadow(0 0 calc(5px + var(--heat) * 20px) rgba(224, 164, 95, calc(0.2 + var(--heat) * 0.6)));
}

.orrery-gloss {
  fill: #ffffff;
  opacity: 0.34;
}

.orrery-spark {
  fill: #f8e3ba;
  opacity: calc(0.78 + var(--heat) * 0.22);
  transform: rotate(calc(var(--heat) * 45deg));
}

/* The drift: one turn every two and a half minutes, which is alive without being movement.
   It is a stylesheet animation rather than anything JavaScript steps, so it costs nothing
   while it runs — and stops on one class the moment spinner.js says Home must hold still. */
.orrery-drift { animation: orrery-drift 150s linear infinite; }

.orrery.is-held .orrery-drift,
.orrery.is-held-by-hand .orrery-drift { animation-play-state: paused; }

@keyframes orrery-drift {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orrery-note {
  margin: 0;
  font-size: var(--type-caption);
  letter-spacing: 0.03em;
  color: var(--muted-2);
  text-align: center;
}

@media (max-width: 1119px) {
  /* Under the capture box on a narrower screen, smaller, and still the same toy. */
  .orrery { width: min(196px, 52vw); }
  .home-rail { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .orrery-drift,
  .home-aura i { animation: none; }
  .orrery svg,
  .orrery-rim { transition: none; }
}

/* Mobile companion (Phase M1) ------------------------------------------------------
 *
 * One studio, phone to desktop. Everything below is the last word in the cascade on
 * purpose: earlier layers keep describing the desktop exactly as they always have, and
 * this layer says only what changes when the same interface has to fit a hand instead
 * of a desk. Three kinds of rule live here, in order: corrections that are safe at any
 * width (content that could never shrink), the touch grammar (hover has no meaning, so
 * nothing may hide behind it, and targets grow to fingertip size), and the phone layout
 * itself (safe areas, the bottom bar, and the screens the width squeezed). */

/* iOS boosts text in landscape unless told the layout already chose its sizes. */
html { -webkit-text-size-adjust: 100%; }

/* Content that could never shrink, at any width. A <select> refuses to be narrower
 * than its longest option, an unbroken quote (a pasted URL) refuses to wrap, and grid
 * and flex items refuse to go below their content's minimum — so one long idea title
 * or one pasted link held whole Review columns wider than a phone. Review's card
 * families get the full treatment: tracks that may reach zero, minimums released all
 * the way down, and prose allowed to break anywhere a hand-width demands it. None of
 * this moves a pixel where there was room all along. */
.inbox-list,
.audit-list,
.clarify-home-list { grid-template-columns: minmax(0, 1fr); }
.inbox-card,
.clarify-card,
.audit-card,
.review-connection { min-width: 0; }
.inbox-card *,
.clarify-card *,
.audit-card *,
.review-connection *,
.deferred-list * { min-width: 0; }
.inbox-card :is(p, small, strong, q, em, option),
.clarify-card :is(p, small, strong, q, em),
.audit-card :is(p, small, strong, q, em),
.review-connection :is(p, small, strong, q, em),
.deferred-list :is(span, em) { overflow-wrap: anywhere; }
.inbox-card-actions select { flex: 1 1 150px; max-width: 100%; }
.connections-filterbar select,
.library-filter select { min-width: 0; max-width: 100%; }
.checklist-title,
.checklist-detail { overflow-wrap: anywhere; }

/* The toast may not be wider than the screen it reports to. */
.toast { max-width: min(390px, calc(100vw - 34px)); }

/* The header's actions live in one container now, so a narrow screen can reflow them
 * as a row without re-deriving the header. The 30px gap is exactly the spacing the
 * buttons had as loose children of the header, so a desktop sees no difference. */
.page-actions { display: flex; align-items: flex-start; gap: 30px; }

/* Small viewports get their real height, not the URL-bar guess: dvh tracks the chrome
 * as it comes and goes, so a full-bleed surface never hides its own action row. */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .app-shell,
  .main-content { height: 100dvh; }
  .loading-screen { min-height: 100dvh; }
  .settings-modal { max-height: calc(100dvh - 50px); }
  .combine-modal { max-height: calc(100dvh - 44px); }
  .confirm-dialog,
  .names-modal { max-height: min(90vh, calc(100dvh - 20px)); }
}

/* Touch grammar: no capability may live behind a hover, and nothing essential may be
 * smaller than a fingertip. Pointer-fine desktops never match this block, so the calm
 * hover choreography above is untouched. */
@media (hover: none), (pointer: coarse) {
  /* Two corrections the cascade was quietly losing: the compact-library row promised
   * 34px controls and an 88px text gutter on touch, then later desktop rules (written
   * afterwards in source order) took them back. Restated here, last, they hold. */
  .library-row-wrap { --control-size: 34px; }
  .library-row { padding-right: 88px; }

  /* Saving what Inky said is a capability, not a flourish — it may not hide. */
  .message-save-row { opacity: 1; }
  .message-save-row button {
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--type-caption);
  }

  /* Deleting a conversation existed only under the cursor; a finger has none. */
  .thread-picker-delete { width: 38px; height: 38px; opacity: .7; }

  /* Fingertip sizes for the controls that were drawn for a cursor. */
  .icon-button { width: 44px; height: 44px; }
  .icon-button.compact { width: 36px; height: 36px; }
  .text-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .thought-controls .text-button,
  .inbox-card-actions .text-button { min-height: 44px; }
  .round-arrow { width: 36px; height: 36px; }
  .search-box button { width: 42px; height: 42px; }
  .context-chip .chip-remove { width: 28px; height: 28px; margin-right: -8px; }
  .tab-button { min-height: 42px; }
  .status-select { min-height: 40px; }
  .thread-picker-row { min-height: 48px; }

  /* iOS zooms any field under 16px the moment it is focused, which throws the whole
   * layout sideways mid-thought. Every field meets the threshold; none shrinks a font
   * that was already larger. */
  input, textarea, select { font-size: max(16px, 1em); }
}

/* A drag should never win a fight the thumb meant as a scroll. pan-y hands vertical
 * gestures to the browser before the drag engine sees them; a deliberate sideways pull
 * (or the always-visible handle, which allows every direction) still lifts the card.
 * The keyboard alternative on the handle is unchanged. */
.library-card-wrap,
.library-row-wrap,
.thought-card,
.inbox-card { touch-action: pan-y; }
.drag-handle { touch-action: none; }

/* The tablet band (620–860) already works: a 66px rail and two-column grids. The rules
 * below are the phone itself. */
@media (max-width: 620px) {
  /* The bottom bar holds all seven doors on the narrowest phone: buttons may breathe
   * out the spare width but never overflow it, and the bar stands clear of the home
   * indicator instead of underneath it. */
  .sidebar {
    justify-content: space-evenly;
    gap: 0;
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
  }
  .nav-stack { flex: 0 1 auto; min-width: 0; gap: 2px; }
  .sidebar-footer { flex: 0 1 auto; min-width: 0; margin-left: 0; gap: 2px; }
  .nav-button { width: 44px; height: 44px; min-width: 36px; flex: 0 1 auto; }
  /* The active marker used to hang 10px below a bar that already sits on the bottom
   * edge. On the bar it underlines the icon from just beneath it, inside the screen. */
  .nav-button.is-active::after {
    right: auto;
    bottom: 4px;
    left: 50%;
    width: 22px;
    height: 2px;
    transform: translateX(-50%);
  }
  .page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* Everything anchored to the bottom edge steps over the bar, not under it. */
  .toast-stack {
    right: 12px;
    left: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  .toast { max-width: 100%; }
  .studio-notice { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .combine-dock { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

  /* 100vw includes the width a classic scrollbar takes; 100% of a fixed overlay does
   * not, so the panels stop leaving a one-scrollbar sliver of sideways scroll. */
  .detail-panel,
  .assistant-panel,
  .combine-modal { width: 100%; }
  .settings-modal { width: calc(100% - 20px); }

  /* A section heading is a phrase, a rule, and a kicker. In a hand's width the kicker
   * takes its own line instead of being wrung out one word at a time. */
  .section-heading { flex-wrap: wrap; row-gap: 2px; }
  .section-heading .section-rule { flex: 1 1 40px; }
  .section-kicker { flex: 1 1 100%; margin-left: 31px; }

  /* The idea's name owns the full line; "Suggest a name" follows it rather than
   * squeezing it one word per line. Same for the Develop hero and its button. */
  .detail-title-row { flex-wrap: wrap; }
  textarea.detail-title { flex: 1 1 100%; min-width: 0; }
  .detail-title-row .text-button { margin-top: 0; }
  .analysis-hero { grid-template-columns: 1fr; justify-items: start; }

  /* Five tabs wrap into two calm rows; nothing scrolls away off-screen. */
  .detail-tabs { flex-wrap: wrap; }

  /* The overflow menu hangs from a trigger near the screen's edge; it may never be
   * wider than the screen minus a margin, so its far corner always stays reachable. */
  .library-overflow-menu { max-width: calc(100vw - 30px); }

  /* The library header's three actions share rows instead of taking one each. */
  .page-actions { flex-wrap: wrap; align-items: center; gap: 10px; }
}

/* The smallest supported hand: seven 42px doors fit a 320px bar with room to spare. */
@media (max-width: 374px) {
  .nav-button { width: 42px; }
  .page { padding-inline: 12px; }
}

/* The reading copy (Mobile Phase M2B) --------------------------------------------------
   body.is-reading-replica marks the phone's read-only replica runtime. The rules here are
   the visible half of read-only: the write affordances the interface still renders are
   put away, so nothing on screen promises an edit the runtime would refuse. The other two
   halves live in app.js (the action gate) and studio-replica.js (the runtime itself) —
   a selector missed here can only ever cost a calm explanatory toast, never a write. */

/* Doors to write-only surfaces: capture, Inky, Undo, desktop Settings, walkthroughs. */
.is-reading-replica .inky-door,
.is-reading-replica [data-action="open-assistant"],
.is-reading-replica [data-action="undo"],
.is-reading-replica [data-action="open-settings"],
.is-reading-replica [data-action="focus-capture"],
.is-reading-replica [data-action="names-open"],
.is-reading-replica [data-action="scan-projects"],
.is-reading-replica [data-action="combine-start"],
.is-reading-replica [data-action="combine-open"],
.is-reading-replica [data-action="combine-pick"],
.is-reading-replica [data-action="new-idea-card"],
.is-reading-replica [data-action="new-thought"],
.is-reading-replica [data-action="new-context"] { display: none !important; }

/* Row- and card-level write controls. */
.is-reading-replica .drag-handle,
.is-reading-replica .idea-pin,
.is-reading-replica .stage-toggle,
.is-reading-replica [data-action="toggle-pin"],
.is-reading-replica [data-action="toggle-privacy"],
.is-reading-replica [data-action="edit-thought"],
.is-reading-replica [data-action="delete-thought"],
.is-reading-replica [data-action="thought-menu"],
.is-reading-replica [data-action="thought-stage"],
.is-reading-replica [data-action="link-existing-thought"],
.is-reading-replica [data-action="split-idea"],
.is-reading-replica [data-action="idea-manage"],
.is-reading-replica [data-action="edit-idea-contexts"],
.is-reading-replica [data-action="edit-context"],
.is-reading-replica [data-action="delete-context"],
.is-reading-replica [data-action="archive-thought"],
.is-reading-replica [data-action="promote-thought"],
.is-reading-replica [data-action="resort-thought"],
.is-reading-replica [data-action="resolve-suggestion"],
.is-reading-replica [data-action="resolve-approval"],
.is-reading-replica [data-action="resolve-project-event"],
.is-reading-replica [data-action="relationship-status"],
.is-reading-replica [data-action="analyze-idea"],
.is-reading-replica [data-action="generate-prompt"],
.is-reading-replica [data-action="title-suggest"],
.is-reading-replica [data-action="checklist-suggest"],
.is-reading-replica [data-action="checklist-mark-current"],
.is-reading-replica [data-action="checklist-toggle"],
.is-reading-replica [data-action="checklist-delete"],
.is-reading-replica [data-action="checklist-select"],
.is-reading-replica [data-action="checklist-prompt"],
.is-reading-replica [data-action="checklist-prompt-selected"],
.is-reading-replica [data-action="save-checklist-prompt"],
.is-reading-replica [data-action="delete-saved-prompt"] { display: none !important; }

/* The thought card reserves a 26px grid column for its drag handle; with the handle
   gone, the text must own the whole row instead of falling into the handle's column. */
.is-reading-replica .thought-card-main { grid-template-columns: 1fr; }

/* Whole write surfaces: every form and select inside the detail panel and Review's
   filing rows exists to change data. The one reading form — library search — lives on
   the Library page, outside these containers. */
.is-reading-replica .detail-panel form,
.is-reading-replica .detail-panel select,
.is-reading-replica .inbox-card-actions,
.is-reading-replica .inbox-card select { display: none !important; }

/* The idea's name stays readable exactly where it always is, but the field under it no
   longer invites typing. The change-gate catches a keyboard that finds it anyway. */
.is-reading-replica .detail-panel textarea.detail-title { pointer-events: none; }

/* What Home says instead of the capture field. */
.reading-copy-note {
  border: 1px solid var(--line-soft, rgba(120, 100, 80, .2));
  border-radius: 18px;
  padding: 26px 28px;
  background: var(--surface-raised, rgba(255, 255, 255, .5));
  display: grid;
  gap: 10px;
}
.reading-copy-note h2 { font-size: 1.15rem; }
.reading-copy-note p { color: var(--ink-soft, inherit); line-height: 1.55; }

/* The Everywhere card's preview lists (desktop Settings). */
.everywhere-preview { display: grid; gap: 8px; }
.everywhere-list {
  margin: 0;
  padding: 0 0 0 18px;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  font-size: .92em;
}
.everywhere-list li small { opacity: .7; }
.everywhere-list.is-withheld { opacity: .85; }